Discover hundreds of local spots recommended by Airbnb hosts
+
+
+
+
San Francisco
+
+
+
New York
+
+
+
London
+
+
+
+
+
+
+ See All Guidebooks
+
+
+
Just for the weekend
+
Discover new, inspiring places close to home
+
+
+
+
Napa
+
+
+
Sonoma
+
+
+
San Francisco
+
+
+
+
+ See All Destinations
+
+
+
+
\ No newline at end of file
diff --git a/airbnb-site/london.jpg b/airbnb-site/london.jpg
new file mode 100644
index 0000000..fb74cff
Binary files /dev/null and b/airbnb-site/london.jpg differ
diff --git a/airbnb-site/napa.jpg b/airbnb-site/napa.jpg
new file mode 100644
index 0000000..5646a5e
Binary files /dev/null and b/airbnb-site/napa.jpg differ
diff --git a/airbnb-site/nyc.jpg b/airbnb-site/nyc.jpg
new file mode 100644
index 0000000..42b07bc
Binary files /dev/null and b/airbnb-site/nyc.jpg differ
diff --git a/airbnb-site/san-francisco-2.jpg b/airbnb-site/san-francisco-2.jpg
new file mode 100644
index 0000000..d1a84d7
Binary files /dev/null and b/airbnb-site/san-francisco-2.jpg differ
diff --git a/airbnb-site/san-francisco.jpg b/airbnb-site/san-francisco.jpg
new file mode 100644
index 0000000..ac4f737
Binary files /dev/null and b/airbnb-site/san-francisco.jpg differ
diff --git a/airbnb-site/sonoma.jpeg b/airbnb-site/sonoma.jpeg
new file mode 100644
index 0000000..8fdb946
Binary files /dev/null and b/airbnb-site/sonoma.jpeg differ
diff --git a/airbnb-site/style.css b/airbnb-site/style.css
new file mode 100644
index 0000000..21011aa
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/flex-vs-grid.md b/flex-vs-grid.md
new file mode 100644
index 0000000..61b5dc7
--- /dev/null
+++ 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.
\ No newline at end of file