From ec57e282fc8a167906a68b8e2a507b83a485bb48 Mon Sep 17 00:00:00 2001 From: juanedcabrera Date: Tue, 7 Mar 2023 19:29:57 -0700 Subject: [PATCH 1/7] Version 1 - close but still need to work on button, font, and a few more things --- .vscode/settings.json | 3 +++ css/style.css | 50 ++++++++++++++++++++++++++++++++++++++++++- index.html | 37 ++++++++++++++++++++++++++++++-- 3 files changed, 87 insertions(+), 3 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 26f119bf..47318f78 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,51 @@ +body { + display:flex; + flex-direction: column; + align-items: center; +} + h1 { - color: salmon; + color: rgb(76, 80, 82); + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; +} + +p { + color: rgb(76, 80, 82); + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; +} + +button { + background-color: white; + font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + padding: 15px 46px ; +} + +img { + padding: .5rem; + width: 15rem; + height: 17rem; + object-fit: cover; +} + +.locations { + display:flex; + align-items: stretch; +} + +.container { + position: relative; + text-align: center; + color: white; +} + +.centered { + position: absolute; + top: 50%; + left: 50%; + white-space:nowrap; + text-justify: distribute; + transform: translate(-50%, -50%); + font-family: sans-serif; + font-size: 170%; } + diff --git a/index.html b/index.html index 8cd37ffb..75b98b59 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,42 @@ - Hello Front-End + AirBNB Mockup -

Hello Front-End

+

Meet Guidebooks

+

Discover hundred of local spots recommended by Airbnb hosts

+
+
+A view from high up of San Fransisco +
San Francisco
+
+
+Person looking at the empire state building +
New York
+
+
+Big ben and the thames river +
London
+
+
+ +

Just for the Weekend

+

Discover new, inspiring places close to home.

+
+
+Hot air balloons flying over Napa Valley +
Napa
+
+
+A view of the rows of grapes lining a Sonoma vineyard +
Sonoma
+
+
+Little hourses of San Francisco dotting up to a hill +
San Francisco
+
+
+ From 6ec0d7f2c1dbf16adf2b8e5ea2b0a7ab5184252a Mon Sep 17 00:00:00 2001 From: juanedcabrera Date: Tue, 7 Mar 2023 19:39:57 -0700 Subject: [PATCH 2/7] Fixed color in the background --- css/style.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 47318f78..2cf08c9f 100644 --- a/css/style.css +++ b/css/style.css @@ -1,7 +1,10 @@ + + body { display:flex; flex-direction: column; align-items: center; + background-color: rgb(237,239,236); } h1 { @@ -17,7 +20,8 @@ p { button { background-color: white; font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; - padding: 15px 46px ; + padding: 15px 90px; + border-color: rgb(196, 196,196); } img { From 8ffaaea219599ca9aa6abc54efb9f5a3881a5217 Mon Sep 17 00:00:00 2001 From: juanedcabrera Date: Tue, 7 Mar 2023 20:06:46 -0700 Subject: [PATCH 3/7] Updated button size and border --- css/style.css | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 2cf08c9f..ea32b7b6 100644 --- a/css/style.css +++ b/css/style.css @@ -9,22 +9,31 @@ body { h1 { color: rgb(76, 80, 82); + font-size: 1.4rem; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + margin: 10 0 0 0; } p { color: rgb(76, 80, 82); font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + margin: 0 0 0 0; + font-size: .7rem; } button { background-color: white; font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; - padding: 15px 90px; - border-color: rgb(196, 196,196); + padding: 6px 57px; + color: rgb(87,89,94); + border-color: rgb(200, 200, 200); + margin-bottom: 1rem; + font-size: .7rem; } img { + margin-top: 1rem; + margin-bottom: 1rem;; padding: .5rem; width: 15rem; height: 17rem; From e30eae113eb34dcde933ad8f2b07a7e39b7e19d2 Mon Sep 17 00:00:00 2001 From: juanedcabrera Date: Tue, 7 Mar 2023 20:28:08 -0700 Subject: [PATCH 4/7] Cleaned up with Prettier --- css/style.css | 30 ++++++++-------- index.html | 99 +++++++++++++++++++++++++++++---------------------- 2 files changed, 72 insertions(+), 57 deletions(-) diff --git a/css/style.css b/css/style.css index ea32b7b6..50d47707 100644 --- a/css/style.css +++ b/css/style.css @@ -1,47 +1,48 @@ - - body { - display:flex; + display: flex; flex-direction: column; align-items: center; - background-color: rgb(237,239,236); + background-color: rgb(237, 239, 236); } h1 { color: rgb(76, 80, 82); font-size: 1.4rem; - font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", + "Lucida Sans Unicode", Geneva, Verdana, sans-serif; margin: 10 0 0 0; } p { color: rgb(76, 80, 82); - font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", + "Lucida Sans Unicode", Geneva, Verdana, sans-serif; margin: 0 0 0 0; - font-size: .7rem; + font-size: 0.7rem; } button { background-color: white; - font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", + "Lucida Sans Unicode", Geneva, Verdana, sans-serif; padding: 6px 57px; - color: rgb(87,89,94); + color: rgb(87, 89, 94); border-color: rgb(200, 200, 200); margin-bottom: 1rem; - font-size: .7rem; + font-size: 0.7rem; } img { margin-top: 1rem; - margin-bottom: 1rem;; - padding: .5rem; + margin-bottom: 1rem; + padding: 0.5rem; width: 15rem; height: 17rem; object-fit: cover; } .locations { - display:flex; + display: flex; align-items: stretch; } @@ -55,10 +56,9 @@ img { position: absolute; top: 50%; left: 50%; - white-space:nowrap; + white-space: nowrap; text-justify: distribute; transform: translate(-50%, -50%); font-family: sans-serif; font-size: 170%; } - diff --git a/index.html b/index.html index 75b98b59..b0e07ec2 100644 --- a/index.html +++ b/index.html @@ -1,45 +1,60 @@ - - - - - AirBNB Mockup - - -

Meet Guidebooks

-

Discover hundred of local spots recommended by Airbnb hosts

-
-
-A view from high up of San Fransisco -
San Francisco
-
-
-Person looking at the empire state building -
New York
-
-
-Big ben and the thames river -
London
-
-
- -

Just for the Weekend

-

Discover new, inspiring places close to home.

-
-
-Hot air balloons flying over Napa Valley -
Napa
-
-
-A view of the rows of grapes lining a Sonoma vineyard -
Sonoma
-
-
-Little hourses of San Francisco dotting up to a hill -
San Francisco
-
-
- - + + + + + AirBNB Mockup + + +

Meet Guidebooks

+

Discover hundred of local spots recommended by Airbnb hosts

+
+
+ A view from high up of San Fransisco +
San Francisco
+
+
+ Person looking at the empire state building +
New York
+
+
+ Big ben and the thames river +
London
+
+
+ +

Just for the Weekend

+

Discover new, inspiring places close to home.

+
+
+ Hot air balloons flying over Napa Valley +
Napa
+
+
+ A view of the rows of grapes lining a Sonoma vineyard +
Sonoma
+
+
+ Little hourses of San Francisco dotting up to a hill +
San Francisco
+
+
+ + From 40f860f73989eea11fd6af4527783215b3004790 Mon Sep 17 00:00:00 2001 From: juanedcabrera Date: Wed, 8 Mar 2023 09:29:46 -0700 Subject: [PATCH 5/7] Rounded edges on border and bolded font in buttons --- css/style.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/css/style.css b/css/style.css index 50d47707..31dcccbe 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,5 @@ + + body { display: flex; flex-direction: column; @@ -30,6 +32,10 @@ button { border-color: rgb(200, 200, 200); margin-bottom: 1rem; font-size: 0.7rem; + font-weight: bold; + border-width: thin; + outline: none; + border-radius: 3px; } img { From b26a4572f16399c00edc17f04d8eebbf4a31a420 Mon Sep 17 00:00:00 2001 From: juanedcabrera Date: Wed, 8 Mar 2023 10:08:58 -0700 Subject: [PATCH 6/7] Final Version --- css/style.css | 2 -- index.html | 7 +++++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 31dcccbe..9b2b6417 100644 --- a/css/style.css +++ b/css/style.css @@ -1,5 +1,3 @@ - - body { display: flex; flex-direction: column; diff --git a/index.html b/index.html index b0e07ec2..ece630ff 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + @@ -7,8 +8,10 @@ AirBNB Mockup +

Meet Guidebooks

Discover hundred of local spots recommended by Airbnb hosts

+
Meet Guidebooks
London
+ +

Just for the Weekend

Discover new, inspiring places close to home.

+
Just for the Weekend
San Francisco
+ From 3ea26a4eed3bab406e93ae81bdc00d52107f312e Mon Sep 17 00:00:00 2001 From: juanedcabrera Date: Wed, 8 Mar 2023 19:40:39 -0700 Subject: [PATCH 7/7] Changed color and button --- css/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 9b2b6417..4ab4c54c 100644 --- a/css/style.css +++ b/css/style.css @@ -10,7 +10,7 @@ h1 { font-size: 1.4rem; font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif; - margin: 10 0 0 0; + margin: 25px 0 5px 0; } p { @@ -25,9 +25,9 @@ button { background-color: white; font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif; - padding: 6px 57px; + padding: 10px 57px; color: rgb(87, 89, 94); - border-color: rgb(200, 200, 200); + border-color: #cecece; margin-bottom: 1rem; font-size: 0.7rem; font-weight: bold;