diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..6f3a2913
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 26f119bf..4ab4c54c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,68 @@
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: rgb(237, 239, 236);
+}
+
 h1 {
-  color: salmon;
+  color: rgb(76, 80, 82);
+  font-size: 1.4rem;
+  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
+    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
+  margin: 25px 0 5px 0;
+}
+
+p {
+  color: rgb(76, 80, 82);
+  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
+    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
+  margin: 0 0 0 0;
+  font-size: 0.7rem;
+}
+
+button {
+  background-color: white;
+  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
+    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
+  padding: 10px 57px;
+  color: rgb(87, 89, 94);
+  border-color: #cecece;
+  margin-bottom: 1rem;
+  font-size: 0.7rem;
+  font-weight: bold;
+  border-width: thin;
+  outline: none;
+  border-radius: 3px;
+}
+
+img {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  width: 15rem;
+  height: 17rem;
+  object-fit: cover;
+}
+
+.locations {
+  display: flex;
+  align-items: stretch;
+}
+
+.container {
+  position: relative;
+  text-align: center;
+  color: white;
+}
+
+.centered {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  white-space: nowrap;
+  text-justify: distribute;
+  transform: translate(-50%, -50%);
+  font-family: sans-serif;
+  font-size: 170%;
 }
diff --git a/index.html b/index.html
index 8cd37ffb..ece630ff 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,67 @@
+<!-- Boilerplate -->
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <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>
-</head>
-<body>
-  <h1>Hello Front-End</h1>
-</body>
+  <head>
+    <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>AirBNB Mockup</title>
+  </head>
+  <body>
+    <!-- Top of page - Headline and subline  -->
+    <h1>Meet Guidebooks</h1>
+    <p>Discover hundred of local spots recommended by Airbnb hosts</p>
+    <!-- Container for all locations with each image being a container -->
+    <div class="locations">
+      <div class="container">
+        <img
+          src="img/san-francisco.jpg"
+          alt="A view from high up of San Fransisco"
+        />
+        <div class="centered">San Francisco</div>
+      </div>
+      <div class="container">
+        <img
+          src="img/new-york.jpg"
+          alt="Person looking at the empire state building"
+        />
+        <div class="centered">New York</div>
+      </div>
+      <div class="container">
+        <img src="img/london.jpg" alt="Big ben and the thames river" />
+        <div class="centered">London</div>
+      </div>
+    </div>
+    <!-- Button for guidebooks -->
+    <button>See All Guidebooks</button>
+    <!-- Second half of page - Headline and subline -->
+    <h1>Just for the Weekend</h1>
+    <p>Discover new, inspiring places close to home.</p>
+    <!-- Container for all locations with each image being a container -->
+    <div class="locations">
+      <div class="container">
+        <img
+          src="img/napa.jpg"
+          alt="Hot air balloons flying over Napa Valley"
+        />
+        <div class="centered">Napa</div>
+      </div>
+      <div class="container">
+        <img
+          src="img/sonoma.jpg"
+          alt="A view of the rows of grapes lining a Sonoma vineyard"
+        />
+        <div class="centered">Sonoma</div>
+      </div>
+      <div class="container">
+        <img
+          src="img/san-francisco-2.jpg"
+          alt="Little hourses of San Francisco dotting up to a hill"
+        />
+        <div class="centered">San Francisco</div>
+      </div>
+    </div>
+    <!-- Button for destinations -->
+    <button>See All Destinations</button>
+  </body>
 </html>
