diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 000000000..77e3aebba
Binary files /dev/null and b/.DS_Store differ
diff --git a/index.html b/index.html
index d01f779ff..c67f91884 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,70 @@
 <!DOCTYPE html>
+<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,300&display=swap" rel="stylesheet">
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Tyler's Projects</title>
+    <link rel="stylesheet" type="text/css" href="style/index.css">
+    <content="width=device-width, initial-scale=1">
 </head>
 <body>
+    <header>
+    <h1>Tyler Matthews</h1>
+    <div class="headernavbar">
+            <a href="index.html" target="_blank">Home</a>
+            <a href="about.html" target="_blank">About</a>
+            <a href="contact.html"target="_blank">Contact</a>
+            <a href="projects.html" target="_blank">Projects</a>
+            </nav>
+        </div>
+        </header>
+    <section>
+     <div class="mysitetext">   
+        <h2>My first site created with HTML and CSS!</h2>
+        <div class="mysitetextparagraph">
+        <p>After almost a full week at Lambda School, I went from 0 knowledge
+           to being able to create this site from scratch.</p>
+           </div>
+        </div>
+    </section>
+    <section class="backgroundimage">
+        <div class="backimage">
+            <!--<img src="https://github.com/LambdaSchool/web-module-project-intro-css/blob/main/assets/header_img.jpg?raw=true">-->
+        </div>
+    </section>
+    <section class="fourimagesection">
+        <div class="imagesection1">
+        <div class="image1">
+            <img src="https://picsum.photos/200">
+        </div>
+        <div class="image2">
+            <img src="https://picsum.photos/200">
+        </div>
+    </div>
+    <div class="imagesection2">
+        <div class="image3">
+       
+             <img src="https://picsum.photos/200">
+        </div>
+        <div class="image4">
+       
+        
+            <img src="https://picsum.photos/200">
+            </div>
+        </div>
+            
+        <div class="text">
+            <p>These are 4 projects that are not mine and are random photos
+               from https://picsum.photos.</p>
+            </div>
+    </section>
+    <footer>
+    <div class="contactmefooter">
+        <a href="contact.html" target="_blank">Contact Me</a>
+        </div>
+    </footer>
     
 </body>
 </html>
\ No newline at end of file
diff --git a/style/index.css b/style/index.css
index 440e53514..e264795c2 100644
--- a/style/index.css
+++ b/style/index.css
@@ -1 +1,130 @@
-/* Add CSS styling here */
\ No newline at end of file
+html, body, div, span, applet, object, iframe,  
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
+a, abbr, acronym, address, big, cite, code,  
+del, dfn, em, img, ins, kbd, q, s, samp,  
+small, strike, strong, sub, sup, tt, var,  
+b, u, i, center,  
+dl, dt, dd, ol, ul, li,  
+fieldset, form, label, legend,  
+table, caption, tbody, tfoot, thead, tr, th, td,  
+article, aside, canvas, details, embed,  
+figure, figcaption, footer, header, hgroup,  
+menu, nav, output, ruby, section, summary,  
+time, mark, audio, video {  
+margin: 0;  
+padding: 0;  
+border: 0;  
+font-size: 100%;  
+font: inherit;  
+vertical-align: baseline;  
+}
+html{
+    background-color:white;
+    font-size:62.5%;
+}
+h1{
+    text-align:center;
+    padding:3%;
+    font-size:4rem;
+    color:black;
+}
+h2{
+    font-size:2rem;
+}
+h1,h2,h3,h4,h5,h6{
+    font-family: 'Open Sans', sans-serif;
+}
+p{
+    font-family: 'Montserrat', sans-serif;
+}
+/*Nav Bar Styles*/
+.headernavbar{
+    display:flex;
+    justify-content:space-evenly
+    
+}
+.headernavbar a{
+    display:flex;
+    background-color:BLACK;
+    color:white;
+    padding:1%;
+    font-size:1.5rem;
+    border-radius:50%;
+    text-decoration: none;
+
+
+ /*Header text styles*/   
+}
+.mysitetext{
+    text-align:center;
+    padding:3%;
+}
+.mysitetext p{
+    padding:1%;
+}
+/*background image*/
+.backimage img{
+  max-width:100%;
+  display:flex;
+  height: 30rem;
+}
+
+.backgroundimage{
+background-image: url("https://github.com/LambdaSchool/web-module-project-intro-css/blob/main/assets/header_img.jpg?raw=true");
+background-repeat:no-repeat;
+background-size:cover;
+background-position:center;
+background-attachment:fixed;
+width:100vw;
+height:20vh;
+padding:10%;
+}
+/*4 picutre section*/
+
+.imagesection1{
+   
+    display:flex;
+    justify-content:space-evenly;
+    padding-top:5%;
+
+}
+.imagesection2{
+   
+    display:flex;
+    justify-content:space-evenly;
+    padding-top:5%;
+
+}
+.text p{
+    text-align:center;
+    padding-top:6%;
+    font-size:1.5rem;
+}
+
+
+
+.contactmefooter{
+padding:5%;
+text-align:center;
+    
+}
+.contactmefooter a{
+    background-color:black;
+    color:white;
+    padding:1%;
+    margin-top:25%;
+    font-size:1.5rem;
+    text-decoration: none;
+    text-align:center;
+    border-radius:50%;
+    
+     
+
+}
+/*Media*/
+@media(max-width: 800px){
+
+}
+@media (max-width: 500px){
+    
+}
\ No newline at end of file
