maxtilden · maxtilden · Aug 6, 2021 · Aug 10, 2021 · Aug 11, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/images/1003-367x267.jpg b/images/1003-367x267.jpg
diff --git a/images/1008-367x267.jpg b/images/1008-367x267.jpg
diff --git a/images/1014-367x267.jpg b/images/1014-367x267.jpg
diff --git a/images/1020-367x267.jpg b/images/1020-367x267.jpg
diff --git a/images/1024-367x267.jpg b/images/1024-367x267.jpg
diff --git a/images/1025-367x267.jpg b/images/1025-367x267.jpg
diff --git a/images/1035-367x267.jpg b/images/1035-367x267.jpg
diff --git a/images/1039-367x267.jpg b/images/1039-367x267.jpg
diff --git a/images/1041-367x267.jpg b/images/1041-367x267.jpg
diff --git a/index.html b/index.html
@@ -4,8 +4,65 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
+    <link rel="stylesheet" href="/style/index.css">
 </head>
 <body>
-
+    <header>
+        <h1>Max Tilden</h1>
+        <nav>
+            <a class="home" href="">Home</a>
+            <a class="about"href="about.html">About</a>
+            <a class="contact" href="contact.html">Contact</a>
+            <a class= "projects" href="projects.html">Projects</a>
+        </nav>
+    </header>
+    <section class="top">
+        <div class="img"><img src="images/1003-367x267.jpg" alt="" class=""></div>
+        <div class="txt">
+            <h2 class="">Max Tilden</h2>
+            <a class= "button" href="projects.html">My Projects</a>
+            <p class="">I am the most beautiful boy at the ball</p>
+        </div>
+    </section>
+    <section class="first-four">
+        <div class="one">
+            <img src="images/1008-367x267.jpg" alt="" class="">
+            <p class="">I</p>
+        </div>
+        <div class="two">
+            <img src="images/1014-367x267.jpg" alt="" class="">
+            <p class="">like</p>
+        </div>
+        <div class="three">
+            <img src="images/1020-367x267.jpg" alt="" class="">
+            <p class="">subtitles</p>
+        </div>
+        <div class="four">
+            <img src="images/1024-367x267.jpg" alt="" class="">
+            <p class="">and</p>
+        </div>
+    </section>
+    <section class="last-four">
+        <div class="five">
+            <img src="images/1025-367x267.jpg" alt="" class="">
+            <p class="">don't</p>
+        </div>
+        <div class="six">
+            <img src="images/1035-367x267.jpg" alt="" class="">
+            <p class="">care</p>
+        </div>
+        <div class="seven">
+            <img src="images/1039-367x267.jpg" alt="" class="">
+            <p class="">who</p>
+        </div>
+        <div class="eight">
+            <img src="images/1041-367x267.jpg" alt="" class="">
+            <p class="">knows</p>
+        </div>
+    </section>
+    <footer class="">
+        <h2 class="">Like what you see?</h2>
+        <a class="contact" href="contact.html">Contact</a>
+    </footer>
 </body>
 </html>
diff --git a/style/index.css b/style/index.css
@@ -1 +1,253 @@
-/* Add CSS styling here */
+/* Add CSS styling here */
+html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, 
+del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
+h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, 
+dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
+	vertical-align: baseline;
+	font-family: inherit;
+	font-weight: inherit;
+	font-style: inherit;
+	font-size: 100%;
+	outline: 0;
+	padding: 0;
+	margin: 0;
+	border: 0;
+	}
+/* remember to define focus styles! */
+:focus {
+	outline: 0;
+	}
+
+/* tables still need cellspacing="0" in the markup */
+
+caption, th, td {
+	font-weight: normal;
+	text-align: left;
+	}
+/* remove possible quote marks (") from <q> & <blockquote> */
+blockquote:before, blockquote:after, q:before, q:after {
+	content: "";
+	}
+blockquote, q {
+	quotes: "" "";
+    }
+*{
+        box-sizing:border-box;
+        padding:0;
+        margin:0;
+
+
+
+    }
+html{
+        font-size:62.5%;
+    }
+body{
+        font-size:2rem;
+        line-height:1.5;
+        color:Navy;
+
+    }
+h1{
+    color:navajowhite;
+    font-size:10rem;
+    margin-left:2.5%;
+}
+h2{
+    font-size:5rem;
+}
+section{
+        padding:4% 0;
+    }
+header{
+    background-color:Navy;
+}
+a{
+    text-decoration:none;
+}
+nav{
+    padding:2% 0;
+    margin-left:5%;
+}
+nav a{
+    display:inline-block;
+    padding:1% 0;
+    width: 10%;
+    margin:0;
+    text-align:center;
+    color:white;
+    border-color:navajowhite;
+}
+.home{
+    border:1px solid white;
+}
+.about{
+    border:1px solid white;
+}
+.contact{
+    border:1px solid white;
+}
+.projects{
+    border:1px solid white;
+}
+.top{
+    display:flex;
+    justify-content:space-evenly;
+}
+
+.img{
+    width:50%;
+
+}
+.img img{
+    margin-left:1%;
+    width:100%;
+}
+
+.txt{
+    width:50%;
+    margin-left:10%;
+    align-self:flex-end;
+    line-height:2;
+}
+.txt p{
+    padding-top:2%;
+}
+.button{
+    text-decoration: none;
+    color:navy;
+    border:2px solid navy;
+    padding:1%;
+    margin-bottom: 5%;
+}
+.first-four{
+    display:flex;
+    justify-content: space-between;
+    text-align:center;
+
+
+}
+
+.one img{
+
+    width:95%;
+
+}
+.two img{
+
+    width:95%;
+
+}
+.three img{
+
+   width:95%
+}
+.four img{
+
+    width:95%;
+}
+.last-four{
+    display:flex;
+    justify-content: space-between;
+    text-align:center;
+
+
+}
+
+.five img{
+
+    width:95%;
+
+}
+.six img{
+
+    width:95%;
+
+}
+.seven img{
+
+   width:95%
+}
+.eight img{
+
+    width:95%;
+}
+footer{
+    text-align:center;
+    background-color: navy;
+    padding-bottom: 1%;
+}
+footer h2{
+    color:navajowhite;
+}
+footer .contact{
+    color:white;
+    padding:.5%;
+
+}
+@media (max-width: 800px) {
+
+}
+@media (max-width: 500px) {
+    h1{
+        font-size:7rem;
+        text-align:center;
+    }
+    nav{
+        display:flex;
+        flex-wrap:wrap;
+        justify-content:center;
+
+    }
+    nav a{
+        margin:0 20%;
+        width:20%;
+        align-content:center;
+    }
+    .top{
+        flex-wrap:wrap;
+
+    }
+    .img{
+        width:90%;
+    }
+    .txt{
+        display:flex;
+        flex-wrap:wrap;
+        justify-content: center;
+    }
+    .txt p{
+        text-align:center;
+    }
+    .first-four{
+        flex-wrap:wrap;
+    }
+    .one{
+        width:50%;
+    }
+    .two{
+        width:50%;
+    }
+    .three{
+        width:50%;
+    }
+    .four{
+        width:50%;
+    }
+    .last-four{
+        flex-wrap:wrap;
+        margin-top:-7%;
+    }
+    .five{
+        width:50%;
+    }
+    .six{
+        width:50%
+    }
+    .seven{
+        width:50%
+    }
+    .eight{
+        width:50%
+    }
+}