diff --git a/airbnb.html b/airbnb.html new file mode 100644 index 0000000..ff8d3d1 --- /dev/null +++ b/airbnb.html @@ -0,0 +1,47 @@ + + + + Airbnb Emulation + + + + +
+
+ +
San Francisco
+
+
+ +
New York
+
+
+ +
London
+
+
+ +
+
Just for the weekend
+
Discover new, inspiring places close to home
+
+
+
+ +
Napa
+
+
+ +
Sonoma
+
+
+ +
San Francisco
+
+
+ + + \ No newline at end of file diff --git a/flex-vs-grid.md b/flex-vs-grid.md new file mode 100644 index 0000000..35fdca3 --- /dev/null +++ b/flex-vs-grid.md @@ -0,0 +1,3 @@ +Flexbox is used to evenly distribute items with relation to their parent element. You can also use to allow for wrapping. +Grid is used to divide the browser page into sections. You have as much freedom as you can get in two dimensions. + diff --git a/style.css b/style.css new file mode 100644 index 0000000..f245d77 --- /dev/null +++ b/style.css @@ -0,0 +1,55 @@ +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap'); + +body { + min-height: 100vh; + margin: 0 auto; + display: flex; + flex-direction: column; + justify-content: space-around; + + font-family: 'Noto Sans', sans-serif; + background-color: #DCDCDC +} + +.line1 { + text-align: center; + font-size: 18px; +} + +.line2 { + text-align: center; + font-size: 10px; +} + +.container { + position: relative; + text-align: center; +} + +button { + width: 175px; + margin: 0 auto; +} + +#images1, #images2 { + display: flex; + justify-content: space-between; + margin: 0 auto; +} + +.imgtext { + position: absolute;; + top: 30%; + left: 30%; + color: white; + font-size: 20px; + font-style: bold; +} + +img { + width: 175px; + height: 200px; + padding: 7px; +} + +