diff --git a/css/style.css b/css/style.css
index 26f119bf..5612a9f2 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,107 @@
-h1 {
-  color: salmon;
+body {
+  background-color: rgb(237, 239, 236) ;
+  font-family: sans-serif;
 }
+
+.container {
+  margin: 20px;
+}
+
+/* These blocks style the div with class name section head and the contents inside it */
+.section_head {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.section_head p {
+  margin-top: 5px;
+  color: rgb(92, 95, 98);
+}
+
+.section_head h2 {
+  margin-bottom: 0;
+  color: rgb(92, 95, 98);
+}
+
+/* These blocks style the div with class name locations and the contents inside it */
+
+.locations {
+  display: flex;
+  justify-content: center;
+
+}
+
+.location_images {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 275px;
+  width: 275px;
+  margin: 10px
+
+}
+
+.SF {
+  background-image: url(../img/san-francisco.jpg);
+  background-size: cover;
+  color: rgb(253, 252, 251);
+  font-size: 28px; 
+}
+
+.NY {
+  background-image: url(../img/new-york.jpg);
+  background-size: cover;
+  background-position-x: 50%;
+  color: rgb(253, 252, 251);
+  font-size: 28px;
+}
+
+.London {
+  background-image: url(../img/london.jpg);
+  background-size: cover;
+  background-position-x: 50%;
+  color: rgb(253, 252, 251);
+  font-size: 28px; 
+}
+
+.napa {
+  background-image: url(../img/napa.jpg);
+  background-size: cover;
+  color: rgb(253, 252, 251);
+  font-size: 28px; 
+}
+
+.sonoma {
+  background-image: url(../img/sonoma.jpg);
+  background-size: cover;
+  color: rgb(253, 252, 251);
+  font-size: 28px;
+}
+
+.SF2 {
+  background-image: url(../img/san-francisco-2.jpg);
+  background-size: cover;
+  color: rgb(253, 252, 251);
+  font-size: 28px; 
+}
+
+/* These blocks style the button to the guidebooks */
+
+.guide_books {
+  display: flex;
+  justify-content: center;
+  margin: 16px;
+}
+
+.guide_books a {
+  border: 1px solid rgb(221,225,221);
+  padding: 8px 61px;
+  text-align: center;
+  text-decoration: none;
+  color: rgb(92, 95, 98);
+  font-weight: 600; 
+  border-radius: 3%;
+  background-color: white;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 8cd37ffb..97e24a36 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,45 @@
   <title>Hello Front-End</title>
 </head>
 <body>
-  <h1>Hello Front-End</h1>
+  <div class="container">
+    <div class="section_head">
+      <h2>Meet Guidebooks</h2>
+      <P>Discover hundreds of local spots recommended by Airbnb hosts</P>
+    </div>
+    <div class="locations">
+      <div class="location_images SF" alt="View of San Francisco">
+        <p>San Francisco</p>
+      </div>      
+      <div class="location_images NY" alt="View of New York">
+        <p>New York</p>
+      </div>      
+      <div class="location_images London" alt="View of London">
+        <p>London</p>
+      </div>      
+    </div>
+    <div class="guide_books">
+        <a href="#">See All Guidebooks</a>
+    </div>
+  </div>
+  <div class="container">
+    <div class="section_head">
+      <h2>Just for the weekend</h2>
+      <P>Discover new, inspiring places close to home.</P>
+    </div>
+    <div class="locations">
+      <div class="location_images napa" alt="View of Napa">
+        <p>Napa</p>
+      </div>      
+      <div class="location_images sonoma" alt="View of Sonoma">
+        <p>Sonoma</p>
+      </div>      
+      <div class="location_images SF2" alt="A different view of San Francisco">
+        <p>San Francisco</p>
+      </div>      
+    </div>
+    <div class="guide_books">
+      <a href="#">See All Destinations</a>
+    </div>
+  </div>
 </body>
 </html>
