diff --git a/ReadMe.md b/ReadMe.md
index 81b445e03..fec9d5c79 100644
--- a/ReadMe.md
+++ b/ReadMe.md
@@ -23,23 +23,23 @@ Portfolio websites are a great way to show off your work to friends, family, and
 
 Follow these steps to set up and work on your project:
 
-- [ ] Fork and clone this repository.
-- [ ] Go into Canvas and connect your repository by copy-pasting its Github URL into the submission slot.
-- [ ] DO NOT MAKE A BRANCH! You will be pushing to main/master today.
-- [ ] cd into your repository on the command line and use code . to open VS Code.
-- [ ] Download the Live Server extension from the Extensions tab on the left side of your VS Code. After it is done installing, click "Go Live" on the bottom right side of your screen to run your HTML file.
-- [ ] Complete your work making regular commits; your submitted URL will always reflect your most recent work.
+- [x] Fork and clone this repository.
+- [x] Go into Canvas and connect your repository by copy-pasting its Github URL into the submission slot.
+- [x] DO NOT MAKE A BRANCH! You will be pushing to main/master today.
+- [x] cd into your repository on the command line and use code . to open VS Code.
+- [x] Download the Live Server extension from the Extensions tab on the left side of your VS Code. After it is done installing, click "Go Live" on the bottom right side of your screen to run your HTML file.
+- [x] Complete your work making regular commits; your submitted URL will always reflect your most recent work.
  
 ### Task 2: Minimum Viable Product
 
 Once your repository is set up, practice what you learned today to create a portfolio site from the wireframe of your choosing. **You may choose any of the three wireframes in the "Wireframe Options" folder above.** Your complete project should look similar to the wireframe you chose, and include all of the following elements:
 
-- [ ]  A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages
-- [ ]  Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you
-- [ ]  Information about you in place of the given placeholder
-- [ ]  A `My Projects` button that links to the projects page
-- [ ]  A `Contact Me` button that links to the contact page
-- [ ]  Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page
+- [x]  A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages
+- [x]  Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you
+- [x]  Information about you in place of the given placeholder
+- [x]  A `My Projects` button that links to the projects page
+- [x]  A `Contact Me` button that links to the contact page
+- [x]  Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page
 
 ### Task 3: Stretch Goals
 
diff --git a/Wireframe Options/ReadMe.md b/Wireframe Options/ReadMe.md
index 2bf501338..e9d7d0788 100644
--- a/Wireframe Options/ReadMe.md	
+++ b/Wireframe Options/ReadMe.md	
@@ -2,11 +2,11 @@
 
 From the images above, chose a wireframe to guide your design for today's project. Remember that your final project must include:
 
-- [ ]  A navigation bar with `About`, `Projects`, and `Contact` pages
-- [ ]  Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you.
-- [ ]  Information about you in place of the given placeholder
-- [ ]  A `My Projects` button (doesn't need to be functional)
-- [ ]  A `Contact Me` button (doesn't need to be functional)
-- [ ]  Link navigation items to new HTML pages
+- [x]  A navigation bar with `About`, `Projects`, and `Contact` pages
+- [x]  Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you.
+- [x]  Information about you in place of the given placeholder
+- [x]  A `My Projects` button (doesn't need to be functional)
+- [x]  A `Contact Me` button (doesn't need to be functional)
+- [x]  Link navigation items to new HTML pages
 
 Some choices are easier than others, pick something that feels right to you. 
\ No newline at end of file
diff --git a/index.html b/index.html
index d01f779ff..409e839da 100644
--- a/index.html
+++ b/index.html
@@ -4,8 +4,71 @@
     <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>Philip Angelo Florita</h1>
+        <nav>
+            <a href="#about.html" class="about">About</a>
+            <a href="#projects.html" class="projects">Projects</a>
+            <a href="#contact.html" class="contact">Contact</a>
+        </nav>
+    </header>
+
+    <section class="main-content">
+        <div class="img1">
+            <img src="https://picsum.photos/200" alt="random photos">
+        </div>
+        <div class="greetings">
+            <h2>Philip Angelo Florita</h2>
+            <a href="#project.html" class="projects">My Projects</a>
+            <p>
+                I am a student at the University of the Philippines Diliman. I am currently taking up BS Computer Science. I am a web developer and a graphic designer. I am also a part time photographer.
+            </p>
+        </div>
+    </section>
+
+    <section>
+        <div class="img-container">
+            <div class="proj">
+                <img src="https://picsum.photos/200" class ="img2" alt="1st image"/>
+                <a href="#project1" class="project1">Information Website</a>
+            </div>
+            <div class="proj">
+                <img src="https://picsum.photos/200" class ="img3" alt="2nd image"/>
+                <a href="#project1" class="project1">Event Website</a>
+            </div>
+            <div class="proj">
+                <img src="https://picsum.photos/200" class ="img4" alt="3rd image"/>
+                <a href="#project1" class="project1">Results Calculator</a>
+            </div>
+            <div class="proj">
+                <img src="https://picsum.photos/200" class ="img5" alt="4th image"/>
+                <a href="#project1" class="project1">Portfolio Page</a>
+            </div>
+            <div class="proj">
+                <img src="https://picsum.photos/200" class ="img6" alt="5th image"/>
+                <a href="#project1" class="project1">Product Display </a>
+            </div>
+            <div class="proj">
+                <img src="https://picsum.photos/200" class ="img7" alt="6th image"/>
+                <a href="#project1" class="project1">Ticket Booking</a>
+            </div>
+            <div class="proj">
+                <img src="https://picsum.photos/200" class ="img8" alt="7th image"/>
+                <a href="#project1" class="project1">Music Website</a>
+            </div>
+            <div class="proj">
+                <img src="https://picsum.photos/200" class ="img9" alt="8th image"/>
+                <a href="#project1" class="project1">E-voting System </a>
+            </div>
+        </div>
+    </section>
+
+    <footer>
+        <h2>Like what you see? </h2>
+        <a href="#contact.html" class="contact-footer">Contact Me</a>
+    </footer>
 </body>
 </html>
\ No newline at end of file
diff --git a/style/index.css b/style/index.css
index 440e53514..386fd1b42 100644
--- a/style/index.css
+++ b/style/index.css
@@ -1 +1,316 @@
-/* Add CSS styling here */
\ No newline at end of file
+Add CSS styling here
+
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+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;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+/* Header */
+    * {
+        box-sizing: border-box;
+        border: 1px solid black;
+    }
+    
+    body {
+        font-size: 16px;
+        font-family: 'Courier New', Courier, monospace;
+    }
+    
+    h1 {
+        font-size: 3rem;
+        padding: 1rem;
+        font-weight: bold;
+    }
+    
+    nav{
+        display: flex;
+        align-items: center;
+        padding: 1rem;
+        font-size: 1.5rem;
+    }
+
+    a {
+        padding: 0.5rem 1rem;
+        text-decoration: none;
+    }
+
+    .about {
+        margin-left: 1rem;
+        background-color: red;
+        color: white;
+    }
+    
+    .projects {
+        margin: 0 1rem;
+        background-color: green;
+        color: white;
+    }
+
+    /* image and introduction */
+    
+    .main-content {
+        display: flex;
+        align-items: center;
+        padding: 1rem;
+    }
+
+    .projects {
+        margin: 0 2rem;
+    }
+    
+    .greetings h2{
+        font-size: 3rem;
+    }
+    
+    .greetings {
+        font-size: 1.2rem;
+        line-height: 3;
+        padding: 0 4rem;
+    }
+
+    .contact {
+        background-color: blue;
+        color: white;
+    }
+    
+    /* Projects */
+    .img-container{
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+
+    .img2, .img3, .img4, .img5, .img6, .img7, .img8, .img9{
+        height: 40vh;
+        width: 40vh;
+        margin: 0rem;
+    }
+    
+    footer {
+        text-align: center;
+        padding: 1rem;
+        font-size: 1.5rem;
+        line-height: 2;
+    }
+
+    .contact-footer {
+        background-color: blue;
+        color: white;
+    }
+    
+    .proj {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-bottom: 2%;
+        font-size: 1.3rem;
+        color: black;
+    }
+    
+    /* Media queries for responsive design */
+    @media (max-width: 800px) {
+        h1 {
+            font-size: 2rem;
+            text-align: center;
+        }
+        nav {
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: center;
+            }
+    
+        .about {
+            padding: 0.5rem 1.5rem;
+            margin: auto;
+        }
+    
+        .projects {
+            padding: 0.5rem .15rem;
+            margin: auto;
+        }
+    
+        .contact {
+            padding: 0.5rem .6rem;
+            margin: auto;
+        }
+    
+        .main-content {
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .img1 {
+            display: flex;
+            justify-content: center;
+            width: 100%;
+            max-height: 50vh;
+        }
+
+        .main-content .img1 img {
+            width: 100vh;
+        }
+
+        .greetings {
+            text-align: center;
+        }
+
+        .greetings h2{
+            font-size: 1.5rem;
+        }
+        
+        .img-container {
+            justify-content: center;
+        }
+        
+        .proj {
+            text-align: center;
+        }
+        
+        .proj:not(:last-child) {
+            margin-right: 10px;
+        }
+        
+        .proj:nth-child(2n) {
+            margin-right: 0;
+        }
+        
+        .proj-half {
+            width: 50%;
+            text-align: center;
+        }
+        
+        footer {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: center;
+        }
+    }
+
+    @media (max-width: 500px) {
+        h1 {
+            text-align: center;
+            font-size: 1rem;
+        }
+
+        a {
+            font-size: 0.8rem;
+        }
+
+        .about {
+            padding: 0.5rem 0.89rem;
+        }
+        .contact {
+            padding: 0.5rem 0.4rem;
+        }
+    
+        .main-content {
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .img1 {
+            display: flex;
+            justify-content: center;
+            width: 100%;
+            max-height: 50vh;
+        }
+
+        .main-content .img1 img {
+            width: 100vh;
+        }
+
+        .greetings {
+            width: 100%;
+            text-align: center;
+            margin: 0 auto;
+        }
+
+        .greetings h2{
+            width: 120%;
+            font-size: 0.7rem;
+            position: relative;
+            left: -10%;
+        }
+
+        .greetings a{
+            font-size: 0.7rem;
+        }
+
+        .greetings p{
+            width: 150%;
+            font-size: 0.5rem;
+            position: relative;
+            left: -25%;
+        }
+        
+        .img-container {
+            justify-content: center;
+        }
+        
+        .proj {
+            width: 45%;
+            text-align: center;
+        }
+
+        .project1 {
+            font-size: 0.5rem;
+        }
+
+        footer {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 0.5rem;
+        }
+
+        .contact-footer {
+            font-size: 0.5rem;
+            padding: 0.3rem 0.4rem;
+        }
+    }
\ No newline at end of file