TaylorDarneille · nerasan · Aug 22, 2020 · Aug 22, 2020
diff --git a/airbnb-site/index.html b/airbnb-site/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Vacation Rentals, Homes, Experiences & Places - Airbnb</title>
+    <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+    <h1>Meet Guidebooks</h1>
+    <h4>Discover hundreds of local spots recommended by Airbnb hosts</h4>
+
+    <div class="grid">
+        <div id="sanfran">
+            <p>San Francisco</p>
+        </div>
+        <div id="nyc">
+            <p>New York</p>
+        </div>
+        <div id="london">
+            <p>London</p>
+        </div>
+    </div>
+
+    <!-- notes: could we have done a div for the images and another div for the text?
+    and have them overlap using the same width/height? the css seems long/repetitive -->
+
+    <div class="box">
+        See All Guidebooks
+    </div>
+
+    <h1>Just for the weekend</h1>
+    <h4>Discover new, inspiring places close to home</h4>
+
+    <div class="grid">
+        <div id="napa">
+            <p>Napa</p>
+        </div>
+        <div id="sonoma">
+            <p>Sonoma</p>
+        </div>
+        <div id="sanfran2">
+            <p>San Francisco</p>
+        </div>
+    </div>
+
+    <div class="box">
+        See All Destinations
+    </div>
+
+</body>
+</html>
diff --git a/airbnb-site/london.jpg b/airbnb-site/london.jpg
diff --git a/airbnb-site/napa.jpg b/airbnb-site/napa.jpg
diff --git a/airbnb-site/nyc.jpg b/airbnb-site/nyc.jpg
diff --git a/airbnb-site/san-francisco-2.jpg b/airbnb-site/san-francisco-2.jpg
diff --git a/airbnb-site/san-francisco.jpg b/airbnb-site/san-francisco.jpg
diff --git a/airbnb-site/sonoma.jpeg b/airbnb-site/sonoma.jpeg
diff --git a/airbnb-site/style.css b/airbnb-site/style.css
@@ -0,0 +1,127 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&display=swap');
+body {
+    font-family: 'Roboto', sans-serif;
+    text-align: center;
+    color: #555555;
+    background-color: #d0d0d0;
+}
+h1 {
+    margin: 50px 0 0 0;
+    font-size: 30px;
+}
+h4 {
+    font-size: 14px;
+}
+p {
+    font-size: 22px;
+    font-weight: bold;
+}
+.grid {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+}
+#sanfran {
+    position: relative;
+    width: 300px;
+    height: 300px;
+    color: white;
+    font-weight: bolder;
+    background-image: url("san-francisco.jpg");
+    background-size: cover;
+    margin: 0 10px 0 10px;
+}
+#sanfran p {
+    position: absolute;
+    top: 40%;
+    left: 25%;
+    right: 25%;
+}
+#nyc {
+    position: relative;
+    width: 300px;
+    height: 300px;
+    color: white;
+    font-weight: bolder;
+    background-image: url("nyc.jpg");
+    background-size: cover;
+    margin: 0 10px 0 10px;
+}
+#nyc p {
+    position: absolute;
+    top: 40%;
+    left: 25%;
+    right: 25%;
+}
+#london {
+    position: relative;
+    width: 300px;
+    height: 300px;
+    color: white;
+    font-weight: bolder;
+    background-image: url("london.jpg");
+    background-size: cover;
+    margin: 0 10px 0 10px;
+}
+#london p {
+    position: absolute;
+    top: 40%;
+    left: 25%;
+    right: 25%;
+}
+#napa {
+    position: relative;
+    width: 300px;
+    height: 300px;
+    color: white;
+    font-weight: bolder;
+    background-image: url("napa.jpg");
+    background-size: cover;
+    margin: 0 10px 0 10px;
+}
+#napa p {
+    position: absolute;
+    top: 40%;
+    left: 25%;
+    right: 25%;
+}
+#sonoma {
+    position: relative;
+    width: 300px;
+    height: 300px;
+    color: white;
+    font-weight: bolder;
+    background-image: url("sonoma.jpeg");
+    background-size: cover;
+    margin: 0 10px 0 10px;
+}
+#sonoma p {
+    position: absolute;
+    top: 40%;
+    left: 25%;
+    right: 25%;
+}
+#sanfran2 {
+    position: relative;
+    width: 300px;
+    height: 300px;
+    color: white;
+    font-weight: bolder;
+    background-image: url("san-francisco-2.jpg");
+    background-size: cover;
+    margin: 0 10px 0 10px;
+}
+#sanfran2 p {
+    position: absolute;
+    top: 40%;
+    left: 25%;
+    right: 25%;
+}
+.box {
+    margin: 50px auto;
+    width: 300px;
+    border: 1px solid gray;
+    padding: 10px;
+    background-color: white;
+}
diff --git a/flex-vs-grid.md b/flex-vs-grid.md
@@ -0,0 +1,4 @@
+# notes on flexbot froggy and grid garden
+### Flexbox Froggy showed how to position objects by aligning, wrapping, etc. across the page. As mentioned in class, this is one thing I could probably never remember all the different ways to position the object but at least I know it is possible to move things around in various ways.
+### Grid Garden was a bit more difficult for me to grasp. I think this was because it combined percentage, fraction, and pixels in one command line. Through enough trial and error, it made sense though it is the same as Flexbot Froggy where I would probably not be able to memorize these commands.
+### The two games have some similarities because they both help us understand how to move elements across a page. The difference is that with Grid Garden, there is a way to basically "stretch" out a grid to fill a span, while Flexbot mostly affected how an object moves. Wrapping the object may stretch/squish the object though but it is different than the grid. I can see these commands from both games being useful in creating websites or applications such as the Airbnb old site we have to recreate or Instagram/gallery type websites with grid elements.