diff --git a/css/style.css b/css/style.css
index 26f119bf..f3b5a463 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,57 @@
-h1 {
-  color: salmon;
+body {
+  background-color: rgb(237 239 236);
 }
+h1, p {
+  font-family: Arial, Helvetica, sans-serif;
+  color: rgb(86 90 91);
+  text-align: center;
+}
+
+.photos {
+  width: 300px;
+  height: 300px;
+}
+  
+ .top-row {
+display: flex;
+justify-content: center;
+gap: 20px;
+}
+
+/*Future link to all the guide books*/
+.see-all {
+   color:rgb(86 90 91);
+  text-align: center;
+  border: 2px solid darkgrey;
+  background-color: white;
+  margin: 30px 15px 30px 15px;
+  width: 300px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.bottom-row {
+display: flex;
+justify-content: center;
+gap: 20px;
+}
+/*Will be future link to everywhere in the world*/
+.destinations {
+  color:rgb(86 90 91);
+  text-align: center;
+  border: 2px solid darkgrey;
+  background-color: white;
+  margin: 30px 15px 30px 15px;
+  width: 300px;
+  margin-right: auto;
+  margin-left: auto;
+  }
+/*the class that should be trying to lay text over photos*/
+.overlay {
+  display: flex;
+  flex-direction: row;
+  z-index: auto;
+  font-family: Arial, Helvetica, sans-serif;
+  color: white;
+}
+}  
\ No newline at end of file
diff --git a/index.html b/index.html
index 8cd37ffb..c2c89023 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,36 @@
   <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>Air BNB</title>
 </head>
 <body>
-  <h1>Hello Front-End</h1>
+  <h1>Meet Guidebooks</h1>
+   
+    <p class="welcome">Discover hundreds of local spots recommended by Airbnb hosts</p>
+  
+ <div class="top-row">
+  <img class="photos" src="img/san-francisco.jpg" alt="foggy view looking down on to the city of SF.">
+     <div class="overlay">San Francisco</div> 
+   <img class="photos" src="img/new-york.jpg" alt="view of NYC skyline">
+      <div class="overlay">New York</div>
+  <img class="photos" src="img/london.jpg" alt="view of big ben">
+      <div class="overlay">London</div>
+</div>
+
+
+    <p class="see-all">See all the Guidebooks</p>
+ 
+<div class="bottom-row">
+  <img class="photos" src="img/napa.jpg" alt="grapevines with hot air balloons in the sky"/> 
+  <div class="overlay">Napa</div> 
+  <img class="photos" src="img/sonoma.jpg" alt="row of grapevines"/>
+  <div class="overlay">Sonoma</div> 
+  <img class="photos"  src="img/san-francisco-2.jpg" alt=" colorful neighborhood with sutro tower peeking over a hill top">
+  <div class="overlay">San Francisco</div>
+</div>
+  
+    <p class="destinations">See All Destinations</p>
+ 
+  
 </body>
 </html>
