diff --git a/images b/images
new file mode 100644
index 0000000..e69de29
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..47687e8
--- /dev/null
+++ b/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Page Title</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
+
+</head>
+
+<body>
+    <div class="container">
+        <header>
+            <h1>MyWebsite</h1>
+
+        </header>
+
+        <main>
+            <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.qW6YjZdflpflND9c0cuKrQHaE8%26pid%3DApi&f=1"
+                alt="logo" />
+
+            <h2>The Golden Gate Bridge</h2>
+            <p>The golden gate bridge is a suspension bridge spanning the golden gates,
+                the one mile wide strait connecting San Francisco Bay and the pacific ocean.</p>
+            <a href="#" id="readmore">Read More</a>
+
+
+
+        </main>
+        <nav>
+
+            <h3>Side Links</h3>
+            <hr>
+            
+            <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>
+
+
+
+        </nav>
+        <aside>
+            <h3>Other Widgets</h3>
+            <hr />
+
+            <p>The bridge is one of the most internationally recognized symbols of SanFransisco and
+                California. It was initially deaigned by engineer Joseph Straus in 1917.</p>
+
+            <p>It has been declared one of the wonders of the modern world by the american society of
+                civil engineers.</p>
+
+        </aside>
+
+        <footer>
+            <P>Copyright <a href ="#">YourSite</a>. All Rights Reserved</P>
+
+
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/main.css b/main.css
new file mode 100644
index 0000000..618a796
--- /dev/null
+++ b/main.css
@@ -0,0 +1,106 @@
+/* ===================================== 
+   Grid Layout
+======================================== */
+
+.container {
+    height: 100vh;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 300px minmax(200px, 1fr) 100px; 
+    grid-auto-rows: minmax(150px, auto);
+    /* gap: 10px; */
+    grid-template-areas: 
+       "header" 
+       "nav" 
+       "main"
+       "aside"
+       "footer";
+ }
+
+ 
+ header {
+    grid-area: header;
+    background-color: rgb(0, 0, 0);
+ }
+ 
+ main {
+    grid-area: main;
+    background-color: aliceblue;
+    padding-top: 20px;
+ }
+ 
+ aside {
+    grid-area: aside;
+    
+ }
+ 
+ nav {
+    grid-area: nav;
+    
+ }
+
+ aside, nav {
+   background-color: lightgray;
+   padding: 20px;
+ }
+ 
+ footer {
+    grid-area: footer;
+    background-color: rgb(3, 3, 3);
+    color: white;
+
+ }
+
+ footer p {
+    text-align: center;
+ }
+
+ 
+ h1 {
+    color: orange;
+    padding: 0 20px;
+    font-size: 3em;
+ }
+
+ img {
+
+    float: left;
+    max-width: 30%;
+    height: auto;
+    margin: 0 20px ;
+ }
+
+ a {
+    color: orange;
+    text-decoration: none;
+ }
+
+ #readmore {
+    font-weight: bold;
+ }
+
+ ul {
+   list-style-type: none;
+ }
+
+ hr {
+   background-color: grey;
+   border: solid 1px grey;
+ }
+
+ li {
+   margin: 8px 0;
+ }
+
+
+ 
+  .container {
+       grid-template-columns: 1fr 1fr 1fr;
+       grid-template-rows: minmax(50px, auto) minmax(150px, auto) minmax(150px, auto) minmax(40px, auto);
+       grid-template-areas: 
+       "header header header" 
+       "main main nav"
+       "main main aside" 
+       "footer footer footer";
+    }
+ 
