From 41d2e383921222cdb02a60a586cef532be975569 Mon Sep 17 00:00:00 2001 From: "Karla G." Date: Tue, 6 Jan 2026 23:26:50 +0000 Subject: [PATCH 01/16] added to the root: -font-style -font-size --- styles/style.css | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/styles/style.css b/styles/style.css index 4d1c088e..b20bf6db 100644 --- a/styles/style.css +++ b/styles/style.css @@ -11,6 +11,8 @@ --orange-dark: #c05326; --orange-light: #f7eae4; --white: #fff; + --small-font: 16px; + --bold-font: 600; } body { @@ -51,6 +53,8 @@ p { height: 5rem; margin-bottom: 1rem; padding-top: 1rem; + font-size: var(--small-font); + font-weight: var(--bold-font); } .header__logo { @@ -61,12 +65,18 @@ p { /* Navigation */ .navigation__list { + width: 100%; display: flex; + justify-content: space-around; list-style: none; } .navigation__item { - padding: 0.5rem 0; + /* padding: 0.5rem 0; */ + display: flex; + flex-direction: row; + /* align-items: center; */ + } .navigation__link { @@ -161,6 +171,12 @@ p { /* Article */ +article-content{ + display: flex; + flex-direction: row; + border: 2px yellow; +} + .article { margin-bottom: 1rem; } From d8f9ac425614a370410578e9fd05fa560e917e22 Mon Sep 17 00:00:00 2001 From: "Karla G." Date: Tue, 6 Jan 2026 23:27:17 +0000 Subject: [PATCH 02/16] added: -class to article content --- index.html | 293 ++++++++++++++++++++++++----------------------------- 1 file changed, 135 insertions(+), 158 deletions(-) diff --git a/index.html b/index.html index 76254c13..413d78dc 100644 --- a/index.html +++ b/index.html @@ -1,179 +1,156 @@ - - - - - - - - - - - Bikes for Refugees - - - -
- - - - - -
- -
- - + + + + + + + + + + + Bikes for Refugees + + + +
+ + + + + +
+
-
-
-
- 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 - seekers in Scotland. -

- - -
+
-
-

Learn more

- -
-
-

Why do refugees need bikes?

-

- Many refugees are placed in housing in areas where there are - few jobs. Bikes provide low-cost transportation so that they - can get to work, manage child care and do their shopping. -

-

- - - Learn more - -

-
- -
-

How can I help?

-

- We need lots of bikes and bike accessories! If you have an - old bike you don't use, bring it to one of our dropoff - events. Or come attend one of our fundraisers. -

-

- - - Learn more - -

-
-
-
-
+
+
+
+ You've helped us give 72 bikes + to refugees and asylum seekers so far. Thank you! +
-
-

Upcoming events

+
+

Bikes for Refugees

+

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

+ + +
-
- -
-

- Join us for our Spring fundraisers -

-

- Riders needed now to help raise awareness and funds for BfR and - Médecins Sans Frontières. -

-
-
+
+

Learn more

+
- -
-

- Bike dropoff event in Edinburgh on May 11 -

-
+

Why do refugees need bikes?

+

+ Many refugees are placed in housing in areas where there are + few jobs. Bikes provide low-cost transportation so that they + can get to work, manage child care and do their shopping. +

+

+ + + Learn more + +

- -
-

- Help us cycle 4,797km -

-

- We need you to help us cycle 4797km, the distance of Edinburgh - to Damascus. -

-
+

How can I help?

+

+ We need lots of bikes and bike accessories! If you have an + old bike you don't use, bring it to one of our dropoff + events. Or come attend one of our fundraisers. +

+

+ + + Learn more + +

+
+
+
+ +
+

Upcoming events

+ +
+ +
+

+ Join us for our Spring fundraisers +

+

+ Riders needed now to help raise awareness and funds for BfR and + Médecins Sans Frontières. +

+
+
+ +
+ +
+

+ Bike dropoff event in Edinburgh on May 11 +

+
+
- +
+ +
+

+ Help us cycle 4,797km +

+

+ We need you to help us cycle 4797km, the distance of Edinburgh + to Damascus. +

+
+ +
+
-
-
-

- Bikes for Refugees Scotland is a volunteer-led project to help +

+
+

+ Bikes for Refugees Scotland is a volunteer-led project to help people explore and make connections with their local communities. -

-

Website by Code Your Future

-
+

+

Website by Code Your Future

- - +
+ + + \ No newline at end of file From 76aecfa53cb13c21c05a34af59c6e0373ecc16c7 Mon Sep 17 00:00:00 2001 From: "Karla G." Date: Tue, 6 Jan 2026 23:58:53 +0000 Subject: [PATCH 03/16] hero image centered and cover the background --- styles/style.css | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/styles/style.css b/styles/style.css index b20bf6db..ff94d7fe 100644 --- a/styles/style.css +++ b/styles/style.css @@ -130,7 +130,12 @@ p { /* hero */ .hero { - background-image: url("header-bike.jpg"); + background-image: url("/images/header-bike.jpg"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + width: 100%; + min-height: 40vh; background-color: var(--grey-light); } @@ -171,10 +176,8 @@ p { /* Article */ -article-content{ - display: flex; - flex-direction: row; - border: 2px yellow; +.article-content{ + background: 2px yellow; } .article { From b454af7be92a6001d7d1f6420b85fefd97726a33 Mon Sep 17 00:00:00 2001 From: "Karla G." Date: Wed, 7 Jan 2026 00:44:56 +0000 Subject: [PATCH 04/16] added border to the articles --- index.html | 5 ++--- styles/style.css | 6 ++++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 413d78dc..2ae0e2ee 100644 --- a/index.html +++ b/index.html @@ -59,10 +59,9 @@

Bikes for Refugees

-
+

Learn more

- -
+

Why do refugees need bikes?

diff --git a/styles/style.css b/styles/style.css index ff94d7fe..fc4ff5d9 100644 --- a/styles/style.css +++ b/styles/style.css @@ -177,11 +177,13 @@ p { /* Article */ .article-content{ - background: 2px yellow; + /* background: 2px yellow; */ } .article { - margin-bottom: 1rem; + padding: 2rem; + grid-column: span 2; + border: 1px solid lightgrey; } .article__title { From 17df68fda90dbf4169f3b3e510a439751055f902 Mon Sep 17 00:00:00 2001 From: "Karla G." Date: Wed, 7 Jan 2026 18:09:26 +0000 Subject: [PATCH 05/16] added another div only for articles divs --- index.html | 2 +- styles/style.css | 12 ++++++++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 2ae0e2ee..9fecc178 100644 --- a/index.html +++ b/index.html @@ -61,7 +61,7 @@

Bikes for Refugees

Learn more

-
+

Why do refugees need bikes?

diff --git a/styles/style.css b/styles/style.css index fc4ff5d9..7571f93d 100644 --- a/styles/style.css +++ b/styles/style.css @@ -177,11 +177,19 @@ p { /* Article */ .article-content{ - /* background: 2px yellow; */ + background: 2px yellow; + +} + +.article-wrapper { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 1rem; } .article { - padding: 2rem; + padding: 1rem; grid-column: span 2; border: 1px solid lightgrey; } From 58e6efc9122f3fcb4336257a1b47ca75d5408441 Mon Sep 17 00:00:00 2001 From: "Karla G." Date: Wed, 7 Jan 2026 18:37:57 +0000 Subject: [PATCH 06/16] added -margin to the article wrapper --- styles/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/styles/style.css b/styles/style.css index 7571f93d..2f1d054e 100644 --- a/styles/style.css +++ b/styles/style.css @@ -177,7 +177,8 @@ p { /* Article */ .article-content{ - background: 2px yellow; + margin-top: 3rem; + margin-bottom: 1rem; } From b8e95f1cb06bbe697cdf707bdce8f186dfa7bd08 Mon Sep 17 00:00:00 2001 From: "Karla G." Date: Wed, 7 Jan 2026 18:53:58 +0000 Subject: [PATCH 07/16] added -new class for wrap the sidebar articles - new root var, footer more accurate to the wireframe --- index.html | 59 +++++++++++++++++++++++++++--------------------------- 1 file changed, 30 insertions(+), 29 deletions(-) diff --git a/index.html b/index.html index 9fecc178..45dfb4e4 100644 --- a/index.html +++ b/index.html @@ -97,39 +97,40 @@

How can I help?

Upcoming events

- -
- -
-

- Join us for our Spring fundraisers -

-

- Riders needed now to help raise awareness and funds for BfR and - Médecins Sans Frontières. -

+
+
+ +
+

+ Join us for our Spring fundraisers +

+

+ Riders needed now to help raise awareness and funds for BfR and + Médecins Sans Frontières. +

+
-
-
- -
-

- Bike dropoff event in Edinburgh on May 11 -

+
+ +
+

+ Bike dropoff event in Edinburgh on May 11 +

+
-
-
- -
-

- Help us cycle 4,797km -

-

- We need you to help us cycle 4797km, the distance of Edinburgh - to Damascus. -

+
+ +
+

+ Help us cycle 4,797km +

+

+ We need you to help us cycle 4797km, the distance of Edinburgh + to Damascus. +

+
From 3dd99c6009708dd2c5cc520bb88209a05a01d3eb Mon Sep 17 00:00:00 2001 From: "Karla G." Date: Wed, 7 Jan 2026 18:54:45 +0000 Subject: [PATCH 08/16] added - new var - fixed nav bar with space-between --- styles/style.css | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/styles/style.css b/styles/style.css index 2f1d054e..563df409 100644 --- a/styles/style.css +++ b/styles/style.css @@ -11,7 +11,8 @@ --orange-dark: #c05326; --orange-light: #f7eae4; --white: #fff; - --small-font: 16px; + --small-font: 1rem; + --xs-font: 0.60rem; --bold-font: 600; } @@ -67,7 +68,7 @@ p { .navigation__list { width: 100%; display: flex; - justify-content: space-around; + justify-content: space-between; list-style: none; } @@ -249,20 +250,29 @@ p { min-width: 350px; } +.wrapper-sidebar{ + display: flex; + flex-direction: column; + gap: 1rem; + +} + /* Footer */ .footer { - margin-top: 2rem; + margin-top: 3rem; + margin-bottom: 0; + font-size: var(--xs-font); } .footer__content { border-top: 2px solid var(--orange-light); padding-top: 2rem; - padding-bottom: 2rem; + padding-bottom: 0.5rem; } .footer p { - padding-bottom: 1rem; + padding-bottom: 0.5rem; text-align: center; font-size: 0.85rem; } From 7b7973bd547dbfe5b616d2ac0bbe767b93d841d6 Mon Sep 17 00:00:00 2001 From: "Karla G." Date: Wed, 7 Jan 2026 19:02:43 +0000 Subject: [PATCH 09/16] facebook sidebar link push to the right side --- styles/style.css | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/styles/style.css b/styles/style.css index 563df409..bef70793 100644 --- a/styles/style.css +++ b/styles/style.css @@ -233,15 +233,19 @@ p { text-decoration: underline; } -.fa { - margin-right: 0.5rem; + +.facebook-link { color: var(--orange-dark); + margin-left: auto; + margin-top: 1rem; } -.facebook-link { +.fa { + margin-right: 0.5rem; color: var(--orange-dark); } + /* Sidebar */ .sidebar { From 77eff001a90eb54ffde807f79fbbc54a2215c744 Mon Sep 17 00:00:00 2001 From: "Karla G." Date: Wed, 7 Jan 2026 19:33:06 +0000 Subject: [PATCH 10/16] added div btn wrapper to move the button to be in line. --- index.html | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 45dfb4e4..6aca6885 100644 --- a/index.html +++ b/index.html @@ -38,7 +38,7 @@
- +
@@ -55,8 +55,10 @@

Bikes for Refugees

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

- - +
+ + +
From f7bc9b42414c5ac6a157e254da66fa0897ea9daa Mon Sep 17 00:00:00 2001 From: "Karla G." Date: Wed, 7 Jan 2026 19:41:15 +0000 Subject: [PATCH 11/16] added min-width: 350px; to the alert, hero and article --- styles/style.css | 35 ++++++++++++++++++++++++++++++----- 1 file changed, 30 insertions(+), 5 deletions(-) diff --git a/styles/style.css b/styles/style.css index bef70793..718f49dc 100644 --- a/styles/style.css +++ b/styles/style.css @@ -56,6 +56,7 @@ p { padding-top: 1rem; font-size: var(--small-font); font-weight: var(--bold-font); + min-width: 350px; } .header__logo { @@ -106,7 +107,23 @@ p { /* Buttons */ - /* INSERT BUTTON STYLES HERE */ +.btn-nav{ + color: var(--white); + background: var(--orange-dark); + width: fit-content; + border: none; + padding: .5rem 1rem; + cursor: pointer; +} + +.btn { + background: var(--white); + color: var(--orange-dark); + width: fit-content; + border: none; + padding: .5rem 1rem; + cursor: pointer; +} /* Content */ @@ -126,6 +143,7 @@ p { line-height: 1.3; padding: 1.5rem 1rem; margin-bottom: 2rem; + min-width: 330px; } /* hero */ @@ -137,7 +155,13 @@ p { background-repeat: no-repeat; width: 100%; min-height: 40vh; - background-color: var(--grey-light); + color: var(--white); + display: flex; + flex-direction: column; + justify-content: center; + box-sizing: border-box; + padding-left: 1.2rem; + min-width: 360px; } .hero h1 { @@ -146,8 +170,9 @@ p { } .hero p { - font-size: 1.2rem; + font-size: 0.90rem; margin-bottom: 2rem; + font-weight: 400; } @@ -188,11 +213,11 @@ p { flex-direction: row; justify-content: space-between; gap: 1rem; + min-width: 350px; } .article { padding: 1rem; - grid-column: span 2; border: 1px solid lightgrey; } @@ -264,7 +289,7 @@ p { /* Footer */ .footer { - margin-top: 3rem; + margin-top: 2rem; margin-bottom: 0; font-size: var(--xs-font); } From b89aaf25d2c79c9a7aa89bc1a03116bb256986a7 Mon Sep 17 00:00:00 2001 From: "Karla G." Date: Wed, 7 Jan 2026 19:47:14 +0000 Subject: [PATCH 12/16] updated the links img for sidebar and aligned as the wireframe --- index.html | 6 +++--- styles/style.css | 2 ++ 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 6aca6885..727b6a32 100644 --- a/index.html +++ b/index.html @@ -101,7 +101,7 @@

How can I help?

Upcoming events

- +

Join us for our Spring fundraisers @@ -114,7 +114,7 @@

- +

Bike dropoff event in Edinburgh on May 11 @@ -123,7 +123,7 @@

- +

Help us cycle 4,797km diff --git a/styles/style.css b/styles/style.css index 718f49dc..0723a265 100644 --- a/styles/style.css +++ b/styles/style.css @@ -217,6 +217,8 @@ p { } .article { + display: flex; + gap: 0.5rem; padding: 1rem; border: 1px solid lightgrey; } From 839c7b4026700255e1def8f7fa2b73994437ee80 Mon Sep 17 00:00:00 2001 From: "Karla G." Date: Wed, 7 Jan 2026 19:52:01 +0000 Subject: [PATCH 13/16] update the article sidebar in the html and style --- index.html | 6 +++--- styles/style.css | 8 +++++++- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 727b6a32..2c48af30 100644 --- a/index.html +++ b/index.html @@ -100,7 +100,7 @@

How can I help?

Upcoming events

-
+

@@ -113,7 +113,7 @@

-
+

@@ -122,7 +122,7 @@

-
+

diff --git a/styles/style.css b/styles/style.css index 0723a265..32807171 100644 --- a/styles/style.css +++ b/styles/style.css @@ -217,12 +217,18 @@ p { } .article { + padding: 1rem; + border: 1px solid lightgrey; +} + +.article-sidebar { display: flex; - gap: 0.5rem; + gap: 0.7rem; padding: 1rem; border: 1px solid lightgrey; } + .article__title { margin-bottom: 0.5rem; font-size: 1rem; From ce3690e7a2d3480067cfbfeeba7b2772feaeb4c8 Mon Sep 17 00:00:00 2001 From: "Karla G." Date: Wed, 7 Jan 2026 21:25:11 +0000 Subject: [PATCH 14/16] added hovering effects to the links, buttons and anchor --- styles/style.css | 25 +++++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/styles/style.css b/styles/style.css index 32807171..4fd9168b 100644 --- a/styles/style.css +++ b/styles/style.css @@ -74,11 +74,8 @@ p { } .navigation__item { - /* padding: 0.5rem 0; */ display: flex; - flex-direction: row; - /* align-items: center; */ - + flex-direction: row; } .navigation__link { @@ -89,6 +86,12 @@ p { } +.navigation__link:hover { + background: var(--white); + color: var(--orange-dark); + font-weight: var(--small-font); +} + /* Text styles */ .text-highlight { @@ -114,8 +117,16 @@ p { border: none; padding: .5rem 1rem; cursor: pointer; + font-weight: var(--small-font); } +.btn-nav:hover { + background: var(--white); + color: var(--orange-dark); + border: 1px solid #c05326; +} + + .btn { background: var(--white); color: var(--orange-dark); @@ -125,6 +136,12 @@ p { cursor: pointer; } +.btn:hover { + background: var(--orange-dark); + color: var(--white); + border: 1px solid var(--white); + border +} /* Content */ From ba2761375036af83d5c0143b2a3e41a36f60e7fb Mon Sep 17 00:00:00 2001 From: "Karla G." Date: Wed, 7 Jan 2026 21:25:45 +0000 Subject: [PATCH 15/16] removed space and unused tag --- styles/style.css | 1 - 1 file changed, 1 deletion(-) diff --git a/styles/style.css b/styles/style.css index 4fd9168b..d9531fc8 100644 --- a/styles/style.css +++ b/styles/style.css @@ -140,7 +140,6 @@ p { background: var(--orange-dark); color: var(--white); border: 1px solid var(--white); - border } /* Content */ From 5ff38bfae009d8a97c240540cebafe793cf2752f Mon Sep 17 00:00:00 2001 From: "Karla G." Date: Wed, 7 Jan 2026 22:00:47 +0000 Subject: [PATCH 16/16] removed space --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 2c48af30..91d8c111 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - +