diff --git a/index.css b/index.css
index 402604c..6ac58cb 100644
--- a/index.css
+++ b/index.css
@@ -2,3 +2,238 @@ html, body {
   font-family: Helvetica, sans-serif;
   font-size: 16px;
 }
+html, body {
+  font-family: Helvetica, sans-serif;
+  font-size: 16px;
+  height: 100%;
+  width: 100%;
+}
+*{
+  margin: 0 auto;
+}
+.header{
+  background-color: #313131;
+  width: 100%;
+  height: 48%;
+  color: white;
+  font-size: 4.1rem;
+  font-weight: 300;
+  letter-spacing: -1px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.header-text{
+  line-height: 130px;
+  margin-top: -15px;
+}
+.border{
+  height: 0.2px;
+  width: 195px;
+  background-color: white;
+}
+.main-con{
+  height: auto;
+  width: 100%;
+  background-color: #f4f4f4;
+  padding: 65px 0 67px;
+}
+.con1{
+  height: 28%;
+  width: 65%;
+  margin-left: 170px;
+  margin-right: 150px;
+  background-color: white;
+  text-align: center;
+  padding: 69px;
+  padding-bottom: 60px;
+}
+.title{
+  width: 60%;
+  font-size: 30px;
+  letter-spacing: 5px;
+  color: #444444;
+  text-transform: uppercase;
+  text-align: center;
+}
+.text1{
+  width: 58.5%;
+  margin-top: 32px;
+  text-align: center;
+  line-height: 26px;
+  font-weight: 100;
+  color: #666666;
+  letter-spacing: 0.02px;
+  padding-left: 2px;
+  margin-left: 183px;
+}
+.span1{
+  margin-left: -2px;
+  letter-spacing: 0.07px;
+}
+.title1{
+  width: 60%;
+  font-size: 30px;
+  letter-spacing: 4.8px;
+  color: #444444;
+  text-transform: uppercase;
+  text-align: center;
+  padding-right: 9px;
+  padding-top: 2px;
+}
+.learn{
+  height: 50px;
+  width: 195px;
+  margin-top: 30px;
+  margin-left: 2px;
+  border: 1px solid #666;
+  color: #666;
+  text-decoration: none;
+  font-weight: 300;
+  background-color: white;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 3.9px;
+}
+
+/* main{
+  margin: 170px 150px;
+  width: 100%;
+  background-color: #f4f4f4;
+} */
+
+.body-con-row{
+  /* width: 65%;
+  background-color: #f4f4f4;
+  display: flex;
+  flex-wrap: wrap; */
+  background-color: #f4f4f4;
+  height: auto;
+  width: 100%;
+  margin: 0;
+  padding-bottom: 70px;
+}
+.body-con-r{
+  width: 77.5%;
+  margin: 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between; 
+}
+.body-con1,
+.body-con2,
+.body-con3,
+.body-con4{
+  width: 47%;
+  height: 539px;
+  /* background-color: green; */
+  margin-bottom: 31px;
+
+}
+/* .body-con-row{
+  width: 80%;
+} */
+/* .body-con1,.body-con2{
+  flex-direction: column;
+  margin-top: 65px;
+  height: 100%;
+  width: 45%;
+  background-color: #ffffff;
+} */
+
+.body-con-img1, 
+.body-con-img2,
+.body-con-img3,
+.body-con-img4{
+  height: 44.5%;
+  width: 100%;
+}
+.body-con-img1{
+  background-image: url("./images/pic01.jpg");
+}
+.body-con-img2{
+  background-image: url("./images/pic02.jpg");
+}
+.body-con-img3{
+  background-image: url("./images/pic03.jpg");
+}
+.body-con-img4{
+  background-image: url("./images/pic04.jpg");
+}
+.body-content{
+  /* width: 80%; */
+  text-align: center;
+  padding-top: 50px;
+  padding-left: 65px;
+  padding-right: 75px;
+  line-height: 26px;
+  background-color: white;
+  padding-bottom: 47px;
+}
+.body-con-text{
+  padding-bottom: 31px;
+  color: #666;
+}
+.more{
+  border-radius: 5px;
+  border: 2px solid #666;
+  color: #666;
+  font-size: 15px;
+  text-transform: uppercase;
+  background-color: transparent;
+  font-weight: bold;
+  text-align: center;
+  padding: 10px 27px;
+  margin-bottom: 1px;
+  margin-left: 9px;
+  margin-right: -2px;
+  letter-spacing: 0.4px;
+}
+.body-text1,
+.body-text2,
+.body-text3,
+.body-text4{
+  color: white;
+  text-transform: uppercase;
+  font-size: 22px;
+  text-align: center;
+  padding-top: 106px;
+  letter-spacing: 5px;
+}
+.con2{
+  height: 28%;
+  width: 67.5%;
+  padding-left: 159px;
+  padding-right: 150px;
+  /* background-color: white; */
+  text-align: center;
+  padding-top: 69px;
+  padding-bottom: 97px;
+  border-bottom: 1px solid #808080;
+}
+.getstarted{
+  height: 50px;
+  width: 200px;
+  margin-top: 31px;
+  margin-left: -22px;
+  margin-right: -16px;
+  border: 1px solid #666;
+  text-decoration: none;
+  font-weight: 300;
+  background-color: white;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 3.5px;
+}
+.text{
+  width: 58.5%;
+  margin-top: 31px;
+  text-align: center;
+  line-height: 26px;
+  font-weight: 100;
+  color: #666666;
+  letter-spacing: 0.02px;
+  padding-left: 2px;
+  margin-left: 141px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index e69de29..041c8b2 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="index.css">
+    <title>Document</title>
+</head>
+<body>
+    <div class="header">
+        <p class="header-text">Final</p>
+        <hr class="border">
+    </div>
+
+    <div class="main-con">
+        <div class="con1">
+            <p class="title">Lorem ipsum dolor</p>
+            <p class="text1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
+               Sed vitae <span class="span1"> malesuada turpis. Nam pallentesque in ac aliquam. 
+               Aliquam tempor</span> <br> mi porta egestas maximus lorem ipsum dolor.
+            </p>
+            <button class="learn">Learn More</button>
+        </div>
+    </div>
+    <div class="body-con-row">
+        <div class="body-con-r">
+            <div class="body-con1">
+                <div class="body-con-img1">
+                    <p class="body-text1">feugiat et faucibus</p>
+                </div>
+                <div class="body-content">
+                    <p class="body-con-text">
+                            Fusce malescua efficitur vanenatis. 
+                            Pellentesque tempor leo sed massa hendrerit hendredrit. 
+                            In sed feugiat est, eu congue elit. 
+                            Ut porta magna vel felis sodales vulputate. Donec faucibus dapibus lacus non ornare.
+                    </p>
+                    <button class="more">More</button>
+                </div>
+            </div>
+            <div class="body-con2">
+                <div class="body-con-img2">
+                    <p class="body-text2">blandit adipiscing</p>
+                </div>
+                <div class="body-content">
+                    <p class="body-con-text">
+                            Fusce malescua efficitur vanenatis. 
+                            Pellentesque tempor leo sed massa hendrerit hendredrit. 
+                            In sed feugiat est, eu congue elit. 
+                            Ut porta magna vel felis sodales vulputate. Donec faucibus dapibus lacus non ornare.
+                    </p>
+                    <button class="more">More</button>
+                </div>
+            </div>
+            <div class="body-con3">
+                <div class="body-con-img3">
+                    <p class="body-text3">lorem massa nulla</p>
+                </div>
+                <div class="body-content">
+                    <p class="body-con-text">
+                            Fusce malescua efficitur vanenatis. 
+                            Pellentesque tempor leo sed massa hendrerit hendredrit. 
+                            In sed feugiat est, eu congue elit. 
+                            Ut porta magna vel felis sodales vulputate. Donec faucibus dapibus lacus non ornare.
+                    </p>
+                    <button class="more">More</button>
+                </div>
+            </div>
+            <div class="body-con4">
+                <div class="body-con-img4">
+                    <p class="body-text4">ipsum sed tempus</p>
+                </div>
+                <div class="body-content">
+                    <p class="body-con-text">
+                            Fusce malescua efficitur vanenatis. 
+                            Pellentesque tempor leo sed massa hendrerit hendredrit. 
+                            In sed feugiat est, eu congue elit. 
+                            Ut porta magna vel felis sodales vulputate. Donec faucibus dapibus lacus non ornare.
+                    </p>
+                    <button class="more">More</button>
+                </div>
+            </div>
+
+            <div class="con2">
+                <p class="title1">Lorem ipsum dolor</p>
+                <p class="text">Phasellus ac augue ac magna auctor tempus proin accumsan lacus a nibh commodo in pellentesque dui in hac habitasse platea dictumst.
+                </p>
+                <button class="getstarted">Get Started</button>
+            </div>
+    </div>
+    </div>
+</body>
+</html>
diff --git a/user.json b/user.json
index 4ac80a0..c1982a8 100644
--- a/user.json
+++ b/user.json
@@ -1,4 +1,4 @@
 {
-  "name": "",
-  "email": ""
+  "name": "Lyza Mae B. Mirabete",
+  "email": "lyza.mirabete@boom.camp"
 }