diff --git a/css/style.css b/css/style.css
index 26f119bf..13066c79 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,74 @@
+body {
+  background-color: rgb(237, 238, 237);
+  display: flex;
+  justify-content: center;
+  font-family: Helvetica, sans-serif;
+  flex-direction: column;
+}
+
+.outside-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.headings-container{
+  display:flex;
+  flex-direction: column;
+  color: rgb(90, 90, 90);
+  align-items: center;
+  margin: 10px 0;
+}
+
 h1 {
-  color: salmon;
+  font-weight: 600;
+  font-size: 24px;
+}
+
+h2 {
+  font-weight: 300;
+  font-size: 12px;
+  margin: -10px 0 0 0;
+}
+
+.location {
+  margin: 10px;
+  position: relative;
+  height: 275px;
+  width: 250px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.location-container {
+  display: flex;
+  flex-direction: row;
+}
+
+.location-image {
+  height: 275px;
+  width: 250px;
+}
+
+.location-text {
+  color: white;
+  font-weight: 600;
+  font-size: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+} 
+
+button {
+  margin: 30px;
+  width: 250px;
+  height: 30px;
+  color: rgb(90, 90, 90);
+  font-weight: 600;
+  background-color: white;
+  border-radius: 2px;
+  border-width: 1px;;
+  border-color: rgc(90, 90, 90);
 }
diff --git a/index.html b/index.html
index 8cd37ffb..840a6236 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,61 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/style.css">
-  <title>Hello Front-End</title>
+  <title>Airbnb Mockup</title>
 </head>
 <body>
-  <h1>Hello Front-End</h1>
+  <div class="outside-box">
+    <div class="headings-container">
+      <h1>Meet Guidebooks</h1>
+      <h2>Discover hundreds of local spots recommended by Aribnb hosts</h2>
+    </div>
+
+    <div class="location-container">
+      <div class="location location-left">
+        <img src="img/san-francisco.jpg" class="location-image" alt="San Francisco hills with clouds"/>
+        <p class="location-text loc-text-left">San Francisco</p>
+      </div>
+      <div class="location location-center">
+        <img src="img/new-york.jpg" class="location-image" alt="New York skyline"/>
+        <p class="location-text loc-text-center">New York</p>
+      </div>
+      <div class="location location-right">
+        <img src="img/london.jpg" class="location-image" alt="Big Ben and Westminster Palace"/>
+        <p class="location-text loc-text-right">London</p>
+      </div>
+
+    </div>
+
+    <div class="button-container">
+      <button>See All Guidebooks</button>
+    </div>
+  </div>
+
+  <div class="outside-box">
+    <div class="headings-container">
+      <h1>Just for the weekend</h1>
+      <h2>Discover new, inspiring places close to home.</h2>
+    </div>
+
+    <div class="location-container">
+      <div class="location location-left">
+        <img src="img/napa.jpg" class="location-image" alt="vineyard with hot air balloons in the sky"/>
+        <p class="location-text loc-text-bottomleft">Napa</p>
+      </div>
+      <div class="location location-center">
+        <img src="img/sonoma.jpg" class="location-image" alt="Sonoma vineyard with sunset and clouds"/>
+        <p class="location-text loc-text-bottomcenter">Sonoma</p>
+      </div>
+      <div class="location location-right">
+        <img src="img/san-francisco-2.jpg" class="location-image" alt="San Francisco hills with colorful houses"/>
+        <p class="location-text loc-text-bottomright">San Francisco</p>
+      </div>
+
+    </div>
+
+    <div class="button-container">
+      <button>See All Destinations</button>
+    </div>
+  </div>
 </body>
 </html>
diff --git a/solution.jpg b/solution.jpg
index 8ee0a202..7cce8596 100644
Binary files a/solution.jpg and b/solution.jpg differ
