From 8ae3945f7ac947d66e060869c1c2a01ef8ee017f Mon Sep 17 00:00:00 2001 From: Nataliia74 Date: Mon, 12 May 2025 23:05:53 +0100 Subject: [PATCH 1/5] excersise 1 --- index.html | 78 +++++++++++++++++++++++++++--------------------------- 1 file changed, 39 insertions(+), 39 deletions(-) diff --git a/index.html b/index.html index 76254c13..355bd77e 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@ -
+
-
+
+ -
+ -
-
-
+
+
+ You've helped us give 72 bikes to refugees and asylum seekers so far. Thank you! -
+ -
+

Bikes for Refugees

Providing donated bikes and accessories to refugees and asylum @@ -66,13 +66,13 @@

Bikes for Refugees

-
+ -
-

Learn more

+
+ Learn more -
-
+
+

Why do refugees need bikes?

Many refugees are placed in housing in areas where there are @@ -85,9 +85,9 @@

Why do refugees need bikes?

Learn more

-
+ -
+

How can I help?

We need lots of bikes and bike accessories! If you have an @@ -100,21 +100,21 @@

How can I help?

Learn more

-
-
-
-
+ + + + - -
+ + - + + From 860624d428c16f578c4ac21df63dffab6c546c65 Mon Sep 17 00:00:00 2001 From: Nataliia74 Date: Tue, 13 May 2025 22:33:17 +0100 Subject: [PATCH 2/5] exercises 2 and 3 --- index.html | 20 ++++++++++---------- styles/style.css | 29 ++++++++++++++++++++++++++++- 2 files changed, 38 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 355bd77e..8a35b553 100644 --- a/index.html +++ b/index.html @@ -47,7 +47,7 @@ - + @@ -64,8 +64,8 @@

Bikes for Refugees

Providing donated bikes and accessories to refugees and asylum seekers in Scotland.

- - + +
@@ -109,10 +109,10 @@

How can I help?

Upcoming events

-

@@ -128,8 +128,8 @@

@@ -141,8 +141,8 @@

diff --git a/styles/style.css b/styles/style.css index 4d1c088e..e64f3497 100644 --- a/styles/style.css +++ b/styles/style.css @@ -95,6 +95,33 @@ p { /* Buttons */ +.btn_donate, .btn_header_donate { + background-color: var(--orange-dark); + color: var(--white); + font-size: 14px; + font-weight: 600; + font-family: Arial, Helvetica, sans-serif; + border: none; + border-radius: 4px; + padding: 8px 10px; + text-align: center; + margin: 4px 2px; + cursor: pointer; +} + +.btn_header_volunteer { + background-color: var(--white); + color: var(--orange-dark); + font-size: 14px; + font-weight: 600; + font-family: Arial, Helvetica, sans-serif; + border: none; + border-radius: 4px; + padding: 8px 10px; + text-align: center; + margin: 4px 2px; + cursor: pointer; +} /* INSERT BUTTON STYLES HERE */ @@ -120,7 +147,7 @@ p { /* hero */ .hero { - background-image: url("header-bike.jpg"); + background-image: url("images/header-bike.jpg"); background-color: var(--grey-light); } From 53868291163b3636b98b8993186ff96c1a9ad48a Mon Sep 17 00:00:00 2001 From: Nataliia74 Date: Wed, 14 May 2025 15:20:31 +0100 Subject: [PATCH 3/5] solved problem with the background image, added some more horizontal space between the nav links --- index.html | 12 ++++++------ styles/style.css | 18 +++++++++++------- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 8a35b553..0cd4dd4c 100644 --- a/index.html +++ b/index.html @@ -47,16 +47,16 @@ - +
- +
You've helped us give 72 bikes to refugees and asylum seekers so far. Thank you! - +

Bikes for Refugees

@@ -64,12 +64,12 @@

Bikes for Refugees

Providing donated bikes and accessories to refugees and asylum seekers in Scotland.

- - + +
- Learn more +

Learn more

diff --git a/styles/style.css b/styles/style.css index e64f3497..634ba5a8 100644 --- a/styles/style.css +++ b/styles/style.css @@ -63,10 +63,11 @@ p { .navigation__list { display: flex; list-style: none; + } .navigation__item { - padding: 0.5rem 0; + padding: 0.5rem 1rem; } .navigation__link { @@ -98,9 +99,7 @@ p { .btn_donate, .btn_header_donate { background-color: var(--orange-dark); color: var(--white); - font-size: 14px; font-weight: 600; - font-family: Arial, Helvetica, sans-serif; border: none; border-radius: 4px; padding: 8px 10px; @@ -112,9 +111,7 @@ p { .btn_header_volunteer { background-color: var(--white); color: var(--orange-dark); - font-size: 14px; font-weight: 600; - font-family: Arial, Helvetica, sans-serif; border: none; border-radius: 4px; padding: 8px 10px; @@ -141,24 +138,31 @@ p { font-size: 0.85rem; line-height: 1.3; padding: 1.5rem 1rem; - margin-bottom: 2rem; + margin-bottom: 3rem; } /* hero */ .hero { - background-image: url("images/header-bike.jpg"); + background-image: url("../images/header-bike.jpg"); background-color: var(--grey-light); + padding: 80px 40px; + margin-bottom: 50px; + margin-top: 50px; + } .hero h1 { margin-bottom: 1rem; font-size: 2.5rem; + color: var(--white); + } .hero p { font-size: 1.2rem; margin-bottom: 2rem; + color: var(--white); } From 619c04e6934c34a544bdda6220a17f4202f0ca34 Mon Sep 17 00:00:00 2001 From: Nataliia74 Date: Wed, 14 May 2025 20:00:44 +0100 Subject: [PATCH 4/5] fixing the positioning, and hover effects --- index.html | 8 ++++---- styles/style.css | 53 ++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 55 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 0cd4dd4c..de62d9cd 100644 --- a/index.html +++ b/index.html @@ -53,10 +53,10 @@
-
+
You've helped us give 72 bikes to refugees and asylum seekers so far. Thank you! -
+

Bikes for Refugees

@@ -105,7 +105,7 @@

How can I help?

- +