From 8b813cdb0e93ce130ac44e8aeec90d163e576908 Mon Sep 17 00:00:00 2001 From: Jamal Laqdiem Date: Tue, 13 May 2025 15:09:20 +0100 Subject: [PATCH 1/6] replacing
by
--- index.html | 46 +++++++++++++++++++++++----------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/index.html b/index.html index 76254c13..e95b0e25 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 seekers in Scotland.

- - -
+ + +

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,7 +100,7 @@

How can I help?

Learn more

-
+
@@ -108,7 +108,7 @@

How can I help?

Upcoming events

-
+
Médecins Sans Frontières.

-
+ -
+
Bike dropoff event in Edinburgh on May 11
-
+ -
+
to Damascus.

-
+ -
+

Bikes for Refugees Scotland is a volunteer-led project to help @@ -174,6 +174,6 @@

Website by Code Your Future

-
+ From 4308445801c4e10e7b3db8b3f8e87797a4803a97 Mon Sep 17 00:00:00 2001 From: Jamal Laqdiem Date: Tue, 13 May 2025 15:10:03 +0100 Subject: [PATCH 2/6] making first changes in buttons color --- styles/style.css | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/styles/style.css b/styles/style.css index 4d1c088e..4ad2e634 100644 --- a/styles/style.css +++ b/styles/style.css @@ -63,10 +63,13 @@ p { .navigation__list { display: flex; list-style: none; + } .navigation__item { padding: 0.5rem 0; + margin-right: 20px; + } .navigation__link { @@ -74,6 +77,8 @@ p { font-weight: 600; text-transform: uppercase; text-decoration: none; + + } @@ -95,8 +100,16 @@ p { /* Buttons */ - /* INSERT BUTTON STYLES HERE */ +.button { + color: var(--white); + background-color : var(--orange-dark) +} +.button1 { + background-color: var(--white); + color :var(--orange-dark) ; + +} /* Content */ From 24a6a5dcdf75ba41f04816653bccf15529591ac8 Mon Sep 17 00:00:00 2001 From: Jamal Laqdiem Date: Tue, 13 May 2025 15:14:18 +0100 Subject: [PATCH 3/6] adding image to the webpage --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index e95b0e25..a26b2c49 100644 --- a/index.html +++ b/index.html @@ -60,6 +60,7 @@

Bikes for Refugees

+ image of a bike

Providing donated bikes and accessories to refugees and asylum seekers in Scotland. From cb509212fd03015dbf6eb7e5488f5ace4d590e1a Mon Sep 17 00:00:00 2001 From: Jamal Laqdiem Date: Wed, 14 May 2025 14:06:53 +0100 Subject: [PATCH 4/6] create extra classes to get direct control for each article separately --- index.html | 32 +++++++++++++++----------------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index a26b2c49..404964f8 100644 --- a/index.html +++ b/index.html @@ -46,9 +46,7 @@

- - - +
@@ -65,15 +63,15 @@

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 @@ -88,7 +86,7 @@

Why do refugees need bikes?

-
+

How can I help?

We need lots of bikes and bike accessories! If you have an @@ -109,11 +107,11 @@

How can I help?

Upcoming events

-
+

@@ -126,11 +124,11 @@

-
+

@@ -139,11 +137,11 @@

-
+

From a521fc48b9464c5252f34e7a5aea2014e1bb9e96 Mon Sep 17 00:00:00 2001 From: Jamal Laqdiem Date: Wed, 14 May 2025 14:08:31 +0100 Subject: [PATCH 5/6] Added broken images , added some colors and positioned article boxes as it should be --- styles/style.css | 81 ++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 68 insertions(+), 13 deletions(-) diff --git a/styles/style.css b/styles/style.css index 4ad2e634..b3e5925d 100644 --- a/styles/style.css +++ b/styles/style.css @@ -100,17 +100,25 @@ p { /* Buttons */ -.button { +.button1 { color: var(--white); - background-color : var(--orange-dark) + background-color : var(--orange-dark); + } -.button1 { - background-color: var(--white); +.button2 { + background-color: var(--orange-dark); + color: var(--white); + + +} +.button3 { + background-color: var(--white); color :var(--orange-dark) ; } + /* Content */ .content { @@ -132,22 +140,41 @@ p { /* hero */ -.hero { +.hero { + position: relative; background-image: url("header-bike.jpg"); - background-color: var(--grey-light); + background-size: cover; + padding: 20px; + border: 100px; + margin-bottom: 30px; } .hero h1 { + color: var(--white); + position :absolute; + top : 10%; margin-bottom: 1rem; font-size: 2.5rem; } .hero p { + top : 30%; + color: var(--white); + position :absolute; font-size: 1.2rem; margin-bottom: 2rem; } +.button3 { + position :absolute; + top : 70%; + left : 22%; +} - +.button2 { + position :absolute; + top : 70%; + left : 3%; +} /* Headings */ .heading-underline { @@ -171,11 +198,37 @@ p { background: var(--orange-dark); } - /* Article */ +.articles-container { + display: flex; + gap: 20px; + margin-top: 50px; +} +.article4 { + flex :1; + border: 1px solid var(--grey-light); + padding: 15px; + box-sizing: border-box; + +} +.article3 { + flex :2; + border: 1px solid var(--grey-light); + padding: 15px; + box-sizing: border-box; + +} + -.article { +.article1 { margin-bottom: 1rem; + display: flex; + gap: 20px; + border: 1px, solid ,rgb(212, 208, 208); + height: 185px; +} +.article1:nth-child(3) { + height: 90px; } .article__title { @@ -185,8 +238,9 @@ p { } .article__title-link { + color: rgb(36, 131, 240); text-decoration: none; - color: var(--orange-dark); + } .article__summary { @@ -206,7 +260,7 @@ p { .article__read-more a { font-size: 0.85rem; font-weight: 700; - color: var(--orange-dark); + color: rgb(29, 110, 233); text-decoration: none; } @@ -217,11 +271,11 @@ p { .fa { margin-right: 0.5rem; - color: var(--orange-dark); + color: rgb(29, 105, 219); } .facebook-link { - color: var(--orange-dark); + color: rgb(29, 105, 219); } /* Sidebar */ @@ -242,6 +296,7 @@ p { border-top: 2px solid var(--orange-light); padding-top: 2rem; padding-bottom: 2rem; + position: relative; } .footer p { From 0c2f428ebfb63847c0bfca4defb852ebff14d69c Mon Sep 17 00:00:00 2001 From: Jamal Laqdiem Date: Thu, 15 May 2025 16:12:06 +0100 Subject: [PATCH 6/6] adding hover property --- styles/style.css | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/styles/style.css b/styles/style.css index b3e5925d..78455670 100644 --- a/styles/style.css +++ b/styles/style.css @@ -65,6 +65,9 @@ p { list-style: none; } +.navigation__list:hover { + background-color: var(--orange-light); +} .navigation__item { padding: 0.5rem 0; @@ -77,10 +80,10 @@ p { font-weight: 600; text-transform: uppercase; text-decoration: none; - - } - +.navigation__link:hover { + color : orange +} /* Text styles */ @@ -164,6 +167,7 @@ p { font-size: 1.2rem; margin-bottom: 2rem; } + .button3 { position :absolute; top : 70%;