diff --git a/grid.css b/grid.css
new file mode 100644
index 0000000..82cff84
--- /dev/null
+++ b/grid.css
@@ -0,0 +1,20 @@
+.container{
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    grid-template-rows: 100px 550px 100px;
+   }
+
+header{
+    grid-column-start: 1;
+    grid-column-end: 3;
+}   
+
+footer{
+    grid-column-start: 1;
+    grid-column-end: 3;
+}   
+
+img{
+    float:left;
+    padding-right: 10px;
+}    
diff --git a/img/GoldenGate-Blog.gif b/img/GoldenGate-Blog.gif
new file mode 100644
index 0000000..4ffe7c7
Binary files /dev/null and b/img/GoldenGate-Blog.gif differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8fa0ea3
--- /dev/null
+++ b/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My Website</title>
+    <link rel="stylesheet" href="grid.css" />
+    <link rel="stylesheet" href="page.css" />
+  </head>
+
+  <body>
+    <div class="container">
+      <header id="top" class="main-header"><h1>MyWebsite</h1></header>
+
+      <main>
+        <div class="sub-container">
+        <div class="col1">
+          <p>
+          <img
+            src="img/GoldenGate-Blog.gif"
+            alt="bridge"
+            width="15%"
+            height="15%"
+          />
+        </p>
+      </div>
+      <div class="col2">
+        <p>
+          <h2>This is a Lorem Ipsum Heading</h2>
+          Sed non mauris vitae erat auctor eu in elit. Class aptent taciti <br>
+          sociosqu ad litora torquent conubia nostra, per inceptos himenaeos. <br>
+          Mauris in erat justo.
+        </p>
+        <p><a href="#">Read More</a></p>
+      </div>
+      </div>
+      </main>
+
+      <aside>
+        <h2>Sidbar Links</h2>
+        <ul>
+          <li><a href="#"> Link 1</a></li>
+          <li><a href="#"> Link 2</a></li>
+          <li><a href="#"> Link 3</a></li>
+          <li><a href="#"> Link 4</a></li>
+        </ul>
+        <h2>Other Widgets</h2>
+        <p>
+          This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel
+          velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor,
+          nisi elit consequat ipsum, nec sagittis sem nibh id elit.
+        </p>
+        <p>Duis sed odo sit amet nibh vulputate cursus a sit amet mauris.</p>
+      </aside>
+
+      <footer class="main-footer">
+        <p>Copyright <a href="#">YourSite</a>. All rights reserved.</p>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/page.css b/page.css
new file mode 100644
index 0000000..c1d2e46
--- /dev/null
+++ b/page.css
@@ -0,0 +1,79 @@
+* {
+  box-sizing: border-box;
+}
+
+h1{
+    font-size: 50px;
+    margin: 15px;
+}
+
+
+
+body {
+	
+	font-family:  sans-serif;
+  font-weight: bold;
+  padding: 0;
+  margin: 0;
+}
+.container > * {
+  
+  text-shadow: 0 2px 0 rgba(110,133,156,0.12);
+  padding: 0.85em;
+  border: solid 1px rgba(110,133,156,0.15);
+}
+.main-header{
+  background-color: black;
+  color: #e8853e;
+  margin-left: 5px;
+}
+nav {
+  background-color: #fbaea8;
+}
+main {
+  background-color: whitesmoke;  
+}
+aside {
+  background-color: lightgrey; 
+}
+
+aside>h2{
+  border-bottom: 2px;
+  border-bottom-color: grey;
+  border-bottom-style: solid;
+  border-bottom-width: 10;
+  margin-left: 5px;
+  padding: 10px;
+
+}
+
+aside p {
+padding: 10px;
+}
+
+.main-footer {
+  background-color: black;
+  color: grey;
+  text-align:center;
+  font-size: 20px;
+  margin: 0;
+  padding: 20px;
+}
+
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+a{
+  color: #e8853e;
+  text-decoration:none;
+  }
+
+  li{
+    list-style-type: none;
+    line-height: 1.5em;
+    padding: 0px;
+    margin-left: 15px;
+}        
\ No newline at end of file
