From df3ce854cd29e0e1d8777b95f06110b7880734d5 Mon Sep 17 00:00:00 2001 From: regularvanessaperson Date: Sat, 22 Aug 2020 02:47:43 -0500 Subject: [PATCH] made airbnb website to look almost like the old one --- .github/PULL_REQUEST_TEMPLATE.md | 6 +-- css/style.css | 66 +++++++++++++++++++++++++++++++- flex-vs-grid.md | 1 + index.html | 52 +++++++++++++++++++++++-- 4 files changed, 118 insertions(+), 7 deletions(-) create mode 100644 flex-vs-grid.md diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 0f85753..554f36b 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -2,8 +2,8 @@ Please describe your comfort and completeness levels before submitting. -Comfort Level (1-5): +Comfort Level (1-5): 2 -Completeness Level (1-5): +Completeness Level (1-5):4 -Do you have any remaining questions about this deliverable?: +Do you have any remaining questions about this deliverable?: I had issues trying to use both CSS grid and flexbox at the same time. Need more practice diff --git a/css/style.css b/css/style.css index 26f119b..b19124d 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,67 @@ + +body { + background: grey; + align-content: center; + margin: 50px 300px; + +} +div { + text-align: center; +} h1 { - color: salmon; + color: rgb(41, 39, 39); + font-family: arial; + text-align: center; + font-size: 30px; +} +h3 { + color: rgb(41, 39, 39); + font-family: arial; + text-align: center; + font-size: 20px; +} + button { + font-size: 20px; + padding: 5px 10px; + } + + +.picture-group { + display: flex; + flex-direction: row; + text-align: center; + justify-content: space-between; + + +} +.background-pic { + height: 550px; + width: 400px; + padding: 5px 10px; + object-fit: none; +} + +.location { + display: flex; + align-items:center; + flex-direction: row; +} +.text { + position: absolute; + display: inline-flex; + font-weight: bolder; + font-size: 30px ; + font-family: arial; + flex-direction: column; + color: white; + padding: 140px; + } + + + + + + + + diff --git a/flex-vs-grid.md b/flex-vs-grid.md new file mode 100644 index 0000000..7534dd0 --- /dev/null +++ b/flex-vs-grid.md @@ -0,0 +1 @@ +Flexbox and CSS grid can both be used to create structured pages that look nice and organized. The main difference that I see is that Flexbot can only arrange within a row or a column while CSS grid can work changing both at once. When moving the flexbox items they are one unit that can be wraped compressed and organized within the column or row area. The CSS grid creates a grid that can guide the items to their position anywhere on the website page. \ No newline at end of file diff --git a/index.html b/index.html index 8cd37ff..3065e34 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,55 @@ - Hello Front-End + AirBNB Throwback - -

Hello Front-End

+ + +
+

Meet the Guidebooks

+

Discover hundreds of local spots recommended by Airbnb hosts.

+
+
+ +
San Francisco
+
+
+ +
New York
+
+
+ +
London
+
+
+ +
+ +
+

Just for the Weekend

+

Discover new, inspiring places close to home.

+
+
+ +
Napa
+
+
+ +
Sonoma
+
+
+ +
San Francisco
+
+
+ + + + + +
+ + +