diff --git a/css/style.css b/css/style.css
index 26f119bf..29c00ae8 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,130 @@
-h1 {
-  color: salmon;
+/* body { */
+  background: rgba(237, 239, 236, 1);}
+/* h1 { */
+  color: rgba(87, 91, 94, 1);
+  text-align: center;
+  margin: 40px 0px -5px 0px;  
+  font-family: 'Raleway', sans-serif;;
+  font-size: 25px;}
+/* h2 {
+  color: rgba(87, 91, 94, 1);
+  text-align: center;
+  font-size: 10px;
+  font-family: 'Raleway', sans-serif;
+  word-spacing: 2px;
 }
+h3 {
+  margin: 0px 80px 0 52px;
+  color: white;
+  font-family: 'Lato', sans-serif;
+  font-size: large;
+  text-align: center;
+  position: relative;
+  top: -164px;
+  right: 201px;
+}
+h4 {
+  margin: 0px 80px 0 52px;
+  color: white;
+  font-family: 'Lato', sans-serif;
+  font-size: large;
+  text-align: center;
+  position: relative;
+  top: -184px;
+  left: 5px;
+}
+h5 {
+  margin: 0px 80px 0 52px;
+  color: white;
+  font-family: 'Lato', sans-serif;
+  font-size: large;
+  text-align: center;
+  position: relative;
+  top: -202px;
+  left: 228px;
+}
+
+p {
+  color: rgba(87, 91, 94, 1);
+  text-align: center;
+  background-color: white;
+  padding: 7px;
+    font-size: 11px;
+    margin: 0 auto;
+    border: 1px lightgray solid;
+    width: 10%;
+    font-family: 'Raleway', sans-serif;
+    position: relative;
+    bottom: 67px;
+}
+
+img {
+  display: inline;
+  width: 200px;
+  height: 250px;
+}
+
+
+.row {
+display: flex;
+justify-content: center;
+align-items: center;
+flex-direction: row;
+gap: 10px;
+padding: 30px;
+}
+
+.style {
+  margin: -70px 0px 5px 0px;;
+}
+ */
+/* .center { */
+  margin: 0 auto;}
+
+/* .center{   */
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);}
+
+
+
+
+  * {
+    /* browser css reset */
+    margin: 0;
+    box-sizing: border-box;
+    /* set some basic font styling */
+    font-family: "Raleway", sans-serif;
+    /* use digital color picker to get hex values */
+    color: #4b4c4e;
+  }
+  body {
+    background-color: #E9EBE7;
+  }
+  
+  button  {
+    padding: 1rem 5rem ;
+  }
+  .card {
+    display:flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  
+  .images {
+    display: flex;
+  }
+  
+  .images section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .images p {
+    /* border: yellow 2px solid; */
+    position: absolute;
+    color: white;
+  }
\ No newline at end of file
diff --git a/index.html b/index.html
index 8cd37ffb..238fc5e3 100644
--- a/index.html
+++ b/index.html
@@ -1,3 +1,102 @@
+<!-- <!DOCTYPE html> -->
+<!-- <html lang="en"> -->
+<head>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Raleway:wght@500&display=swap" rel="stylesheet">
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap" rel="stylesheet">
+
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap" rel="stylesheet">
+
+
+
+  <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>Meet Guidebooks</title>
+
+</head>
+<body>
+<!-- first card -->
+  <div>
+  
+  <h1><strong>Meet Guidebooks</strong></h1>
+  <h2>Discover hundreds of local spots recommended by Airbnb host</h2>
+
+  <div class="row">
+  <img src="img/san-francisco.jpg" alt="Sky line of the Bay's coast" >
+ 
+  <img src="img/new-york.jpg" alt="New York city sky line" >
+  
+  <img src="img/london.jpg" alt="The famous London bridge" >
+
+  </div>
+
+  <div>
+  <h3>San Francisco</h3> 
+  </div>
+  
+  <div>
+  <h4>New York</h4>
+  </div>
+
+  <div>
+  <h5>London</h5>
+  </div>
+
+  <div>
+  <p> See All Guidebooks</p>
+  </div>
+
+</div>
+
+
+
+  <div>
+  
+  <h1><strong>Just for the weekend</strong></h1>
+  <h2>Discover new, inspiring places close to home</h2>
+
+  <div class="row">
+  <img src="img/napa.jpg" alt="beautiful napa wine vinyard at sunset with hot air balloons in the sky" >
+ 
+  <img src="img/sonoma.jpg" alt="Sanoma valley wine vynard mountain view" >
+  
+  <img src="img/san-francisco-2.jpg" alt="Houses in the San Francisco hills" >
+
+  </div>
+
+  <!-- <div class="style"> -->
+    <div>
+  <div>
+  <h3>Napa</h3> 
+  </div>
+  
+  <div>
+  <h4>Sonoma</h4>
+  </div>
+
+  <div>
+  <h5>San Francisco</h5>
+  </div>
+
+  <div>
+  <p> See All Destinations</p>
+  </div>
+
+</div>
+
+</body>
+<!-- </html> -->
+
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -7,6 +106,34 @@
   <title>Hello Front-End</title>
 </head>
 <body>
-  <h1>Hello Front-End</h1>
+  <!-- First card -->
+  <div class="card">
+    <!-- first row -->
+    <section>
+      <h1>Meet Guidebooks</h1>
+      <p>Discover hundreds of local spots recommended by Airbnbn hosts</p>
+    </section>
+    <!-- second row -->
+    <div class="images">
+      <!-- first image -->
+      <section>
+        <img src="./img/san-francisco.jpg" alt="san francisco">
+        <p>San Francisco</p>
+      </section>
+      <!-- second image -->
+      <section>
+        <img src="./img/new-york.jpg" alt="new york">
+        <p>New York</p>
+      </section>
+      <!-- third image -->
+      <section>
+        <img src="./img/london.jpg" alt="london">
+        <p>London</p>
+      </section>
+    </div>
+    <!-- third row -->
+    <button>See All Guidebooks</button>
+  </div>
+
 </body>
-</html>
+</html>
\ No newline at end of file
