From 49e49b60417974a50a847a55313e8e0df535f5f6 Mon Sep 17 00:00:00 2001 From: Andrew Date: Tue, 7 Mar 2023 17:34:16 -0500 Subject: [PATCH 01/10] Add text content --- index.html | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 8cd37ffb..ef46059e 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,17 @@ - - - - - Hello Front-End - - -

Hello Front-End

- + + + + + Hello Front-End + + +

Meet Guidebooks

+

Discover hundreds of local spots recommended by Airbnb hosts

+ +

Just for the weekend

+

Discover new, inspiring places close to home.

+ + From 78660748c2793122aa9c3dcbe8b6f80ef2e6abfd Mon Sep 17 00:00:00 2001 From: Andrew Date: Tue, 7 Mar 2023 17:37:04 -0500 Subject: [PATCH 02/10] Add initial styling --- css/style.css | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 26f119bf..5276d656 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,12 @@ +* { + text-align: center; + font-family: sans-serif; +} + +body { + background-color: #f0f1f2; +} + h1 { - color: salmon; + color: #555; } From 5ca3f331cee99c67137ebc57aa06232e4014eee1 Mon Sep 17 00:00:00 2001 From: Andrew Date: Tue, 7 Mar 2023 20:02:21 -0500 Subject: [PATCH 03/10] Adjust color styling --- css/style.css | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 5276d656..c7c3742d 100644 --- a/css/style.css +++ b/css/style.css @@ -4,9 +4,15 @@ } body { - background-color: #f0f1f2; + background-color: rgba(237, 239, 236, 1); } -h1 { - color: #555; +h1, +p { + color: rgba(86, 89, 92, 1); +} + +button { + background-color: white; + color: rgba(86, 89, 92, 1); } From 5989ca8f9a191c6b8d094ad9286c32744bc85138 Mon Sep 17 00:00:00 2001 From: Andrew Date: Tue, 7 Mar 2023 20:16:39 -0500 Subject: [PATCH 04/10] Update font --- css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index c7c3742d..0275d6fa 100644 --- a/css/style.css +++ b/css/style.css @@ -1,6 +1,6 @@ * { text-align: center; - font-family: sans-serif; + font-family: Calibri, sans-serif; } body { From 475ea60ecd09645a55a047f0ff82a5903eb1a861 Mon Sep 17 00:00:00 2001 From: Andrew Date: Tue, 7 Mar 2023 20:35:03 -0500 Subject: [PATCH 05/10] Develop initial image layout --- css/style.css | 12 ++++++++++++ index.html | 10 ++++++++++ 2 files changed, 22 insertions(+) diff --git a/css/style.css b/css/style.css index 0275d6fa..3f56f1a0 100644 --- a/css/style.css +++ b/css/style.css @@ -12,6 +12,18 @@ p { color: rgba(86, 89, 92, 1); } +.image-flex-container { + display: flex; + justify-content: center; + gap: 20px; +} + +img { + width: 200px; + height: 200px; + object-fit: cover; +} + button { background-color: white; color: rgba(86, 89, 92, 1); diff --git a/index.html b/index.html index ef46059e..5936ff1f 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,19 @@

Meet Guidebooks

Discover hundreds of local spots recommended by Airbnb hosts

+
+
+
+
+

Just for the weekend

Discover new, inspiring places close to home.

+
+
+
+
+
From 19cf99f7132d492a218692824691e5da7a9d281f Mon Sep 17 00:00:00 2001 From: Andrew Date: Tue, 7 Mar 2023 21:39:14 -0500 Subject: [PATCH 06/10] Replace PH images and text --- css/style.css | 13 +++++++++++++ index.html | 30 ++++++++++++++++++++++++------ 2 files changed, 37 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index 3f56f1a0..bab36625 100644 --- a/css/style.css +++ b/css/style.css @@ -18,12 +18,25 @@ p { gap: 20px; } +.img-div { + position: relative; + display: flex; + justify-content: center; + align-items: center; +} + img { width: 200px; height: 200px; object-fit: cover; } +.img-div p { + position: absolute; + color: white; + font-size: 24px; +} + button { background-color: white; color: rgba(86, 89, 92, 1); diff --git a/index.html b/index.html index 5936ff1f..af1d6557 100644 --- a/index.html +++ b/index.html @@ -10,17 +10,35 @@

Meet 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

+
From 69a6bd976f0b318507e7b9444404d8105d5bf752 Mon Sep 17 00:00:00 2001 From: Andrew Date: Tue, 7 Mar 2023 21:59:13 -0500 Subject: [PATCH 07/10] Develop styling --- css/style.css | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index bab36625..9210d6eb 100644 --- a/css/style.css +++ b/css/style.css @@ -1,12 +1,18 @@ * { text-align: center; font-family: Calibri, sans-serif; + margin: 0; + padding: 0; } body { background-color: rgba(237, 239, 236, 1); } +h1 { + padding-top: 40px; +} + h1, p { color: rgba(86, 89, 92, 1); @@ -16,6 +22,7 @@ p { display: flex; justify-content: center; gap: 20px; + margin: 30px 0px; } .img-div { @@ -26,8 +33,8 @@ p { } img { - width: 200px; - height: 200px; + width: 250px; + height: 280px; object-fit: cover; } @@ -35,9 +42,14 @@ img { position: absolute; color: white; font-size: 24px; + font-weight: bold; } button { background-color: white; color: rgba(86, 89, 92, 1); + width: 250px; + height: 40px; + font-weight: bold; + border: 2px solid rgba(200, 200, 200, 1); } From 5bc8bc42d3a9dd0a993136b766b3d830efd9c6db Mon Sep 17 00:00:00 2001 From: Andrew Date: Tue, 7 Mar 2023 22:07:01 -0500 Subject: [PATCH 08/10] Develop styling --- css/style.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index 9210d6eb..db288433 100644 --- a/css/style.css +++ b/css/style.css @@ -7,10 +7,7 @@ body { background-color: rgba(237, 239, 236, 1); -} - -h1 { - padding-top: 40px; + margin-top: 40px; } h1, @@ -47,9 +44,12 @@ img { button { background-color: white; - color: rgba(86, 89, 92, 1); + color: rgba(90, 90, 90, 1); width: 250px; height: 40px; + font-size: 16px; font-weight: bold; border: 2px solid rgba(200, 200, 200, 1); + border-radius: 2px; + margin-bottom: 40px; } From 5a9671f4380afe7c3790e4ccbe71cde8207548a3 Mon Sep 17 00:00:00 2001 From: Andrew Date: Tue, 7 Mar 2023 22:09:01 -0500 Subject: [PATCH 09/10] Add button styling for hover/click --- css/style.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/css/style.css b/css/style.css index db288433..77b4e221 100644 --- a/css/style.css +++ b/css/style.css @@ -53,3 +53,11 @@ button { border-radius: 2px; margin-bottom: 40px; } + +button:hover { + background-color: #eee; +} + +button:active { + background-color: #ddd; +} From 1306a97cc8fd6eb3503ddec93e7fdf0f69f6730a Mon Sep 17 00:00:00 2001 From: Andrew Date: Tue, 7 Mar 2023 23:02:52 -0500 Subject: [PATCH 10/10] Add alt text for images --- index.html | 27 +++++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index af1d6557..0a085b81 100644 --- a/index.html +++ b/index.html @@ -11,15 +11,24 @@

Meet Guidebooks

Discover hundreds of local spots recommended by Airbnb hosts

- + Buildings in the hills of San Francisco.

San Francisco

- + Spectator viewing the New York skyline from across the river.

New York

- + London's Big Ben and Westminster from across the water.

London

@@ -28,15 +37,21 @@

Just for the weekend

Discover new, inspiring places close to home.

- + Hot air balloons over a Napa vineyard.

Napa

- + A vineyard in Sonoma with rolling hills in the distance.

Sonoma

- + A steep San Francisco hill surrounded by colorful buildings.

San Francisco