diff --git a/index.html b/index.html
index d01f779ff..061579386 100644
--- a/index.html
+++ b/index.html
@@ -4,8 +4,74 @@
     <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>Rafael Deluna</h1>
+        <nav>
+            <button><a href = "index.html">Home</a></button>
+            <button><a href = "about.html">About</a></button>
+            <button><a href = "contact.html">Contact</a></button>
+            <button><a href = "projects.html">Projects</a></button>
+        </nav>
+    </header>
+
+    <section class = "topsection">
+        <img src = "https://picsum.photos/600/400"/>
+        <div class = "description">
+            <h2>Rafael Deluna</h2>
+            <button><a href = "projects.html">My Projects</a></button>
+            <p>Here are some words about me and my journey in coding so far. These words are authentic and inspiring. These words tell my story. </p>
+        </div>
+    </section>
+
+
+    <section>
+        <div class = "row">
+        <div class = "portfolio-element">
+            <img src = "https://picsum.photos/300"/>
+            <p>Portfolio Piece</p>
+            </div>
+       <div class = "portfolio-element">
+            <img src = "https://picsum.photos/300"/>
+            <p>Portfolio Piece</p>
+            </div>
+       <div class = "portfolio-element">
+            <img src = "https://picsum.photos/300"/>
+            <p>Portfolio Piece</p>
+            </div>
+       <div class = "portfolio-element">
+            <img src = "https://picsum.photos/300"/>
+            <p>Portfolio Piece</p>
+            </div>
+          </div>
+          
+          <div class = "row">
+            <div class = "portfolio-element">
+                <img src = "https://picsum.photos/300"/>
+                <p>Portfolio Piece</p>
+                </div>
+           <div class = "portfolio-element">
+                <img src = "https://picsum.photos/300"/>
+                <p>Portfolio Piece</p>
+                </div>
+           <div class = "portfolio-element">
+                <img src = "https://picsum.photos/300"/>
+                <p>Portfolio Piece</p>
+                </div>
+           <div class = "portfolio-element">
+                <img src = "https://picsum.photos/300"/>
+                <p>Portfolio Piece</p>
+                </div>
+              </div> 
+    </section>
+
+
+
+    <footer>
+        <h2>Like what you see?</h2>
+        <button><a href = "contact.html">Contact Me</a></button>
+    </footer>
 </body>
 </html>
\ No newline at end of file
diff --git a/style/index.css b/style/index.css
index 440e53514..0a01a12ce 100644
--- a/style/index.css
+++ b/style/index.css
@@ -1 +1,115 @@
-/* Add CSS styling here */
\ No newline at end of file
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    max-width: 100%;
+    border: 1px solid grey;
+}
+
+
+
+header {
+    background-color: lightgrey;
+    padding: 20px;
+    margin-bottom: 15px;
+}
+
+footer {
+    background-color: lightgrey;
+    text-align: center;
+    padding: 20px;
+}
+
+.topsection {
+    display: flex;
+    flex-direction: row;
+    justify-content: center; 
+}
+
+.description {
+    padding: 20px;
+    width: 50%;
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    padding: 20px;
+}
+
+.portfolio-element {
+    text-align: center;
+}
+
+button {
+background-color: white;
+color: black;
+border: 1px solid black;
+padding: 5px 10px;
+}
+
+
+button:hover {
+   background-color: black;
+   color: white;
+   border: 1px solid white;
+}
+
+button a {
+    text-decoration: none;
+    color: inherit;
+}
+
+
+@media(max-width: 800px) {
+   .row div {
+    width: 20%;
+   }
+
+   .topsection img {
+    width: 40%;
+   }
+}
+
+@media(max-width: 500px) {
+  header {
+     display: flex;
+     flex-direction: column;
+     justify-content: center;
+     align-items: center;
+  }
+
+  nav {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+  }
+
+  button {
+    width: 40%;
+    margin: 1% 0;
+  }
+
+  .topsection {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .topsection div {
+    width: 90%;
+  }
+
+  .row {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+  }
+
+  .row div {
+    width: 40%;
+   margin: 4% 0; 
+  }
+}
