TaylorDarneille · elizchan · Aug 20, 2020 · Aug 20, 2020 · Aug 21, 2020
diff --git a/css/style.css b/css/style.css
@@ -1,3 +1,61 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
+body {
+  font-family: 'Roboto', sans-serif;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  background-color: lightgray;
+}
+
 h1 {
-  color: salmon;
+  color:dimgray;
+  margin-bottom: 0.5px;
+  font-size: 48px;
+}
+
+p {
+  color: dimgray;
+  font-size: 22px;
+  margin-top: 5px;
+}
+
+button {
+  margin: 40px;
+  width: 500px;
+  height: 40px;
+  font-size: 20px;
+  color: dimgray;
+  font-weight: bold;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+}
+
+.column {
+  position: relative;
+  flex: 33.3%;
+  padding: 20px;
+}
+
+img {
+  height: 600px;
+  width: 500px;
+}
+
+h2 { 
+  position: absolute; 
+  top: 250px; 
+  left: 175px; 
+  width: 100%; 
+  color: white;
+  font-size: 48px;
 }
+
+#long {
+  left: 100px;
+}
diff --git a/flex-vs-grid.md b/flex-vs-grid.md
@@ -0,0 +1 @@
+# I learned that in grid, there are columns and rows that are specified to different length values set in percentages, fr or pixels. You can specify where to start and end in each row and column. Grid uses negative values to count from opposite direction while flexbox uses negative values to rearrange items.  Span value can be used in grid. Both grid and flexbox use a vertical and horizontal axis however in flexbox you can reverse the rows and columns. In flexbox you can make the columns and rows wide apart or close together based on the spacing in between or the space around. There is also text wrap in flexbox. Both grid and flexbox use justify-items and align-items. 
diff --git a/index.html b/index.html
@@ -4,9 +4,42 @@
   <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 Mockup</title>
 </head>
 <body>
-  <h1>Hello Front-End</h1>
+  <h1>Meet Guidebooks</h1>
+  <p>Discover hundreds of local spots recommended by Airbnb hosts</p>
+  <div class="row">
+    <div class="column">
+      <img src="https://images.hdqwalls.com/wallpapers/4k-golden-gate-bridge-san-francisco-zu.jpg">
+      <h2 id="long">San Francisco</h2>
+    </div>
+    <div class="column">
+      <img src="https://wallpaperaccess.com/full/1098723.jpg">
+      <h2>New York</h2>
+    </div>
+    <div class="column">
+      <img src="http://londonphotos.sweb.cz/images/05_section/Big-Ben-across-the-river-Thames_05.jpg">
+      <h2>London</h2>
+    </div>
+  </div>
+  <button>See All Guidebooks</button>
+  <h1>Just for the weekend</h1>
+  <p>Discover new, inspiring places close to home.</p>
+  <div class="row">
+    <div class="column">
+      <img src="https://live.staticflickr.com/3838/15022793725_225039d522_b.jpg">
+      <h2>Napa</h2>
+    </div>
+    <div class="column">
+      <img src="https://img.sunset02.com/sites/default/files/styles/4_3_horizontal_inbody_900x506/public/image/2016/09/main/rochioli-sun-1016_0.jpg">
+      <h2>Sonoma</h2>
+    </div>
+    <div class="column">
+      <img src="https://live.staticflickr.com/2561/3943940824_3dbec68d06_b.jpg">
+      <h2 id="long">San Francisco</h2>
+    </div>
+  </div>
+  <button>See All Destinations</button>
 </body>
 </html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		# I learned that in grid, there are columns and rows that are specified to different length values set in percentages, fr or pixels. You can specify where to start and end in each row and column. Grid uses negative values to count from opposite direction while flexbox uses negative values to rearrange items. Span value can be used in grid. Both grid and flexbox use a vertical and horizontal axis however in flexbox you can reverse the rows and columns. In flexbox you can make the columns and rows wide apart or close together based on the spacing in between or the space around. There is also text wrap in flexbox. Both grid and flexbox use justify-items and align-items.