diff --git a/css/style.css b/css/style.css
index 26f119b..ff00535 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,230 @@
+body{
+background:#eceaea; 
+}
 h1 {
-  color: salmon;
+  padding-top: 25px;
+  color: rgb(121, 121, 121);
+  text-align: center; 
+  font-size:20px;
+  font-family: 'Ariel', sans-serif;
+}
+h2 {
+ 
+  color:rgb(175, 170, 170);
+  text-align: center;
+  font-family: 'Ariel', sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+}
+
+
+img { 
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 225px;
+  height: 200px;
+}
+
+.item {
+  display: grid;
+  grid-template-rows: 15px 300px 100px 300px 1fr;
+  grid-template-columns: 360px repeat(3, 1fr) 325px;
+  position: relative;
+  flex-wrap: wrap;
+  flex-direction:row-reverse;
+  justify-content: space-between;
+}
+
+.square1{
+  grid-column-start: 2;
+  grid-column-end: 3; 
+  grid-row-start: 2; 
+  grid-row-end: 3;
+  position: relative;
+  
+}
+  .square2 {
+    grid-column-start: 3;
+    grid-column-end: 4; 
+    grid-row-start: 2; 
+    grid-row-end: 3;
+    position: relative;
+    
+  }
+ 
+  .square3 {
+    grid-column-start: 4;
+    grid-column-end: 5; 
+    grid-row-start: 2; 
+    grid-row-end: 3;
+    position: relative;
+    
+  }
+ 
+  .square4 {
+    grid-column-start: 2;
+    grid-column-end: 3; 
+    grid-row-start: 4; 
+    grid-row-end: 5;
+    position: relative;
+    
+  }
+
+  .square5 {
+    grid-column-start: 3;
+    grid-column-end: 4; 
+    grid-row-start: 4; 
+    grid-row-end: 5;
+    position: relative;
+    
+  }
+ 
+  .square6 {
+    grid-column-start: 4;
+    grid-column-end: 5; 
+    grid-row-start: 4; 
+    grid-row-end: 5;
+    position: relative;
+    
+  }
+ 
+  .city1 {
+    position: absolute;
+    top: 35%;
+    left: 15%;
+    color: white;
+    font-family: 'Ariel', sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    text-align: center;
+    
+  }
+  .city2 {
+    position: absolute;
+    top: 35%;
+    left: 15%;
+    color: white;
+    font-family: 'Ariel', sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    text-align: center;
+    
+  }
+  .city3 {
+    position: absolute;
+    top: 35%;
+    left: 15%;
+    color: white;
+    font-family: 'DM Ariel', sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    text-align: center;
+    
+  }
+  .city4 {
+    position: absolute;
+    top: 35%;
+    left: 15%;
+    color: white;
+    font-family: 'Ariel', sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    text-align: center;
+    
+  }
+  .city5 {
+    position: absolute;
+    top: 35%;
+    left: 15%;
+    color: white;
+    font-family: 'Ariel', sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    text-align: center;
+  }
+
+  .city6 {
+    position: absolute;
+    top: 35%;
+    left: 15%;
+    color: white;
+    font-family: 'Ariel', sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    text-align: center;
+  }
+
+  .p1{
+  font-family: 'Ariel', sans-serif;
+  text-align: center;
+  padding-top: 15px;
+  color:rgb(175, 170, 170);
+  outline-style:groove;
+  justify-content: space-around;
+  border: 0px rgb(150, 148, 148);
+  background-color: white;
+  color: rgb(150, 148, 148); 
+  padding: 7px 0px 7px 0px;
+  font-size: 12px;
+  cursor: pointer;
+  margin: -45px 283px 35px 275px;
+  grid-column-start:3;
+  grid-column-end: 5;
+}
+
+.box{
+  justify-content: space-around;
+  grid-row-start: 3;
+  grid-column-start: 2;
+  grid-column-end: 5;
+
+}
+  
+.p2{
+  text-align: center;
+  font-family: 'Ariel', sans-serif;
+  color: rgb(121, 121, 121);
+  font-size: 20px;
+  font-weight: 700;
+  
+}
+
+.p3{
+  position: relative;
+  color:rgb(175, 170, 170);
+  text-align: center;
+  font-family: 'Ariel', sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  } 
+
+  .p4 {
+    font-family: 'Ariel', sans-serif;
+    padding-top: 15px;
+    color: rgb(167, 164, 164);
+    outline-style:groove;
+    justify-content: space-around;
+    border: 0px rgb(150, 148, 148);
+    background-color: white;
+    color: rgb(150, 148, 148); 
+    padding: 0px 7px 0px 7px;
+    font-size: 12px;
+    cursor: pointer;
+    margin: -35px 375px 35px 400px;
+    grid-column-start:3;
+    grid-column-end: 6;
+    width: 200px;
+    padding: 5px 0px; 
+    text-align: center;
+    margin: 0 auto;
+}
+
+.box1{
+  justify-content: center;
+   grid-row-start: 3;
+   grid-column-start: 2;
+   grid-column-end: 5;
 }
+  
+
diff --git a/flex-vs-grid.md b/flex-vs-grid.md
new file mode 100644
index 0000000..cac7522
--- /dev/null
+++ b/flex-vs-grid.md
@@ -0,0 +1,3 @@
+# Flexbox is used for laying out items in a single demension as a row or a column. Grid is for layout of items in two dimensions- rows and columns. Grid for me can be compared to as excel with multiple values and columns as used. Flexbox are item that is moved around in a single space. from left to right. 
+## Flexbox was easier with centering and spacing. Grid had multiple things happening that did not make sense to me. 
+## Both used to position pictures and text right where they belong and creats more center and spacing. 
diff --git a/img/san-francisco-2.jpg b/img/san-francisco-2.jpg
index 9390816..059fd81 100644
Binary files a/img/san-francisco-2.jpg and b/img/san-francisco-2.jpg differ
diff --git a/index.html b/index.html
index 8cd37ff..c6abcd6 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,63 @@
   <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>Welcome to AirBnB</title>
 </head>
 <body>
-  <h1>Hello Front-End</h1>
+  <h1>Meet Guidebooks</h1>
+
+  <h2> Discover hundreds of local spots recommended by Airbnb hosts</h2>
+  
+    <div class="item">
+  <div class="square1">
+    <img src ="img/san-francisco.jpg" alt="San Francisco">
+    <div class="city1">San Francisco</div>
+  </div>
+
+  <div class="square2">
+    <img src="img/new-york.jpg" alt="New York">
+    <div class="city2"> New York</div>
+  </div>
+
+  <div class="square3">
+    <img src="img/london.jpg" alt="london">
+    <div class="city3">London</div>
+  </div>
+
+  <div class="box">
+    <p class="p1">
+      See All Guidebooks
+    </p>
+    <p class="p2">
+      Just for the weekend
+    </p>
+    <p class="p3">
+      Discover new, inspiring places close to home
+    </p>
+</div>
+
+  <div class="square4">
+    <img src="img/napa.jpg" alt="napa">
+    <div class="city4"> Napa</div>
+  </div>
+  <div class="square5">
+    <img src="img/sonoma.jpg" alt="Sonoma">
+    <div class="city5"> Sonoma</div>
+  </div>
+  <div class="square6">
+    <img src="img/san-francisco-2.jpg" alt="San Francisco">
+    <div class="city6"> San Francisco</div>
+  </div>
+</div>
+
+<div class="box1">
+  <p class="p4">
+  See all Destinations
+</p>
+</div>
+
+
+
+
 </body>
 </html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..e69de29