TaylorDarneille · Gabbytam · Aug 21, 2020 · Aug 21, 2020 · Aug 22, 2020 · Aug 22, 2020
diff --git a/css/style.css b/css/style.css
@@ -1,3 +1,100 @@
-h1 {
-  color: salmon;
+body {
+
+  display: grid;
+  grid-template-columns: 1fr 200px 200px 200px 1fr;
+  grid-template-rows: 60px 220px 60px 60px 220px 100px;
+  grid-gap: 15px;
+  text-align: center;
+  background-color: #edefec;
+  color: #414344;
+  /* font-family taken from current Airbnb website */
+  font-family: Circular,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif !important;
 }
+
+h5 {
+  font-weight: 500;
+  font-size: 18px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+
+.imgtxt {
+  color: white;
+  font-weight: 500;
+  font-size: 20px;
+  margin-top: -120px;
+}
+
+p.subtxt {
+  font-size: 10px;
+  margin-bottom: 10px;
+}
+
+
+.photo {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; 
+}
+
+button {
+  height: 30px;
+  width: 200px;
+  margin-top: 15px;
+  background-color: white;
+  border: none;
+  color: #414344;
+  font-size: 8px;
+  font-family: Circular,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif !important;
+}
+
+
+#item1 {
+  grid-column: 2 / 5;
+  grid-row: 1 / 2;
+}
+
+#item2 {
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+
+#item3 {
+  grid-column: 3 / 4;
+  grid-row: 2 / 3;
+}
+
+#item4 {
+  grid-column: 4 / 5;
+  grid-row: 2 / 3;
+}
+
+#item5 {
+  grid-column: 3 / 4;
+  grid-row: 3 / 4;
+}
+
+#item6 {
+  grid-column: 2 / 5;
+  grid-row: 4 / 5;
+}
+
+#item7 {
+  grid-column: 2 / 3;
+  grid-row: 5 / 6;
+}
+
+#item8 {
+  grid-column: 3 / 4;
+  grid-row: 5 / 6;
+}
+
+#item9 {
+  grid-column: 4 / 5;
+  grid-row: 5 / 6;
+}
+
+#item10 {
+  grid-column: 3 / 4;
+  grid-row: 6 / 7;
+}
diff --git a/finished.txt b/finished.txt
@@ -0,0 +1 @@
+"I'm pretty happy with the way my final product looks on my own full-screen. That being said, it is not a responsive design and would not do well on a browser that isnt full screen and a laptop. I honestly spent a lot of time on this and I'm not even sure I did it right I just found ways that made it work...sorta. Games were fun but putting the concepts into use was a lot harder. Did a good amount of googling but I do still have questions and would love feedback and suggestions because, again, I feel like I did it wrong. Visually they are very similar but I just couldn't figure out how to get that slim border around my button. Better luck next time!"
diff --git a/flex-vs-grid.md b/flex-vs-grid.md
@@ -0,0 +1 @@
+Flexbox and grid are both a type of CSS styling that work with display. Grid allows for my specific value inputs while flexbox seems that its more determined by loose concepts such as left/right/top/bottom/center. With grid tyling you can establish different sizing for the template and from there the ordering and placement of items are more determined by number placement  within rows and columns. Another big difference between the two is that flexbox is single-axis oriented and grid optimizes 2-dimensional layouts(cells can take up multiple rows and columns).
diff --git a/index.html b/index.html
@@ -4,9 +4,53 @@
   <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>Airbnb</title>
 </head>
+
 <body>
-  <h1>Hello Front-End</h1>
+  <header id="item1">
+    <h5>Meet Guidebooks</h5>
+    <p class="subtxt">Discover hundreds of local spots recommended by Airbnb hosts</p>
+  </header>
+
+    <div id="item2">
+      <img src="img/san-francisco.jpg" class="photo"/>
+      <p class="imgtxt">San Francisco</p>
+    </div>
+    <div id="item3">
+      <img src="img/new-york.jpg" class="photo"/>
+      <p class="imgtxt">New York</p>
+    </div>
+    <div id="item4"> 
+      <img src="img/london.jpg" class="photo"/>
+      <p class="imgtxt">London</p>
+    </div> 
+
+  <div id="item5">
+    <button>See All Guidebooks</button>
+  </div>
+
+ <header id="item6">
+    <h5>Just for the weekend</h5>
+    <p class="subtxt">Discover new, inspiring places close to home.</p>
+</header>
+
+    <div id="item7">
+      <img src="img/napa.jpg" class="photo"/>
+      <p class="imgtxt">Napa</p>
+    </div>
+    <div id="item8">
+      <img src="img/sonoma.jpg" class="photo"/>
+      <p class="imgtxt">Sonoma</p>
+    </div>
+    <div id="item9">
+      <img src="img/san-francisco-2.jpg" class="photo"/>
+      <p class="imgtxt">San Francisco</p>
+    </div>
+
+  <div id="item10">
+    <button>See All Destinations</button>
+  </div>
+
 </body>
 </html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		"I'm pretty happy with the way my final product looks on my own full-screen. That being said, it is not a responsive design and would not do well on a browser that isnt full screen and a laptop. I honestly spent a lot of time on this and I'm not even sure I did it right I just found ways that made it work...sorta. Games were fun but putting the concepts into use was a lot harder. Did a good amount of googling but I do still have questions and would love feedback and suggestions because, again, I feel like I did it wrong. Visually they are very similar but I just couldn't figure out how to get that slim border around my button. Better luck next time!"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Flexbox and grid are both a type of CSS styling that work with display. Grid allows for my specific value inputs while flexbox seems that its more determined by loose concepts such as left/right/top/bottom/center. With grid tyling you can establish different sizing for the template and from there the ordering and placement of items are more determined by number placement within rows and columns. Another big difference between the two is that flexbox is single-axis oriented and grid optimizes 2-dimensional layouts(cells can take up multiple rows and columns).