From da22b1483f10cfa30b62b651387ab6da7f75d1da Mon Sep 17 00:00:00 2001
From: elizchan <lizchan@bu.edu>
Date: Thu, 20 Aug 2020 01:30:07 -0400
Subject: [PATCH 1/3] added diff and similarities between flexbox and grid

---
 flex-vs-grid.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 flex-vs-grid.md

diff --git a/flex-vs-grid.md b/flex-vs-grid.md
new file mode 100644
index 0000000..3ba81ce
--- /dev/null
+++ b/flex-vs-grid.md
@@ -0,0 +1 @@
+In grid, there are columns and rows that are specified to different length values set in percentages, fr or pixels. In grid, you can specify where to start and end. Grid uses negative values to count from opposite direction while flexbox uses negative values to rearrange items. Span value can be used in grid. In flexbox, there is no specified columns or rows. 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. 
\ No newline at end of file

From bbbee4d8c41748a51ecfb27ab7779ad154c514de Mon Sep 17 00:00:00 2001
From: elizchan <lizchan@bu.edu>
Date: Thu, 20 Aug 2020 01:35:48 -0400
Subject: [PATCH 2/3] made changes in first sentence

---
 flex-vs-grid.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/flex-vs-grid.md b/flex-vs-grid.md
index 3ba81ce..b267596 100644
--- a/flex-vs-grid.md
+++ b/flex-vs-grid.md
@@ -1 +1 @@
-In grid, there are columns and rows that are specified to different length values set in percentages, fr or pixels. In grid, you can specify where to start and end. Grid uses negative values to count from opposite direction while flexbox uses negative values to rearrange items. Span value can be used in grid. In flexbox, there is no specified columns or rows. 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. 
\ No newline at end of file
+# 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. 
\ No newline at end of file

From 6f1b0818f699fd558a376fd2894271a6e4ff10d2 Mon Sep 17 00:00:00 2001
From: elizchan <lizchan@bu.edu>
Date: Fri, 21 Aug 2020 18:16:17 -0400
Subject: [PATCH 3/3] made html and CSS for Airbnb

---
 css/style.css | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 index.html    | 37 +++++++++++++++++++++++++++++--
 2 files changed, 94 insertions(+), 3 deletions(-)

diff --git a/css/style.css b/css/style.css
index 26f119b..1314514 100644
--- 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;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 8cd37ff..b8b78a9 100644
--- 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>