diff --git a/bikes-for-refugees-May-2025-SeddiqAzam.zip b/bikes-for-refugees-May-2025-SeddiqAzam.zip new file mode 100644 index 00000000..65b795de Binary files /dev/null and b/bikes-for-refugees-May-2025-SeddiqAzam.zip differ diff --git a/index.html b/index.html index 76254c13..d2bf9a13 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,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. +

+

+ + +

-
-
-
-
- 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

-
-

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 - -

-
+
+
+
+

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 +

-
-
-

Upcoming events

- -
- -
-

- Join us for our Spring fundraisers -

+
+
+

How can I help?

- Riders needed now to help raise awareness and funds for BfR and - Médecins Sans Frontières. + 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

+
+
-
- -
-

- Bike dropoff event in Edinburgh on May 11 -

-
+
+

Upcoming events

+ +
+ Spring Fundraisers +
+

+ Join us for our Spring fundraisers +

+

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

+
-
- -
-

- Help us cycle 4,797km -

-

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

-
+
+ Bike dropoff event +
+

+ Bike dropoff event in Edinburgh on May 11 +

+
- +
+ Cycle challenge +
+

+ 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 - people explore and make connections with their local communities. -

+

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

diff --git a/styles/style.css b/styles/style.css index 4d1c088e..69a06f4c 100644 --- a/styles/style.css +++ b/styles/style.css @@ -13,12 +13,14 @@ --white: #fff; } -body { +html, body { + height: 90%; margin: 0; + padding: 10px; } - -body, -button { +body { + display: flex; + flex-direction: column; font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; color: var(--grey-dark); font-size: 1rem; @@ -34,8 +36,7 @@ p { margin-bottom: 0; } -.header, -.content, +/* Global styles */ .footer { padding: 0 1.5rem; max-width: 1200px; @@ -63,10 +64,12 @@ p { .navigation__list { display: flex; list-style: none; + } .navigation__item { padding: 0.5rem 0; + margin-right: 1.5rem; } .navigation__link { @@ -96,15 +99,44 @@ p { /* Buttons */ /* INSERT BUTTON STYLES HERE */ + + +.button { + color: var(--white); + background: var(--orange-dark); + border-radius: 8%; + border: none; + margin-top: 0; +} + +.donatenow { + background: var(--orange-dark); + color: var(--white); + border-radius: 6%; + border: none; + padding: 0.5rem 1rem; + margin-bottom: 1rem; + margin-left: auto; +} +.volunteer-button { + background: white; + color: var(--orange-dark); + border-radius: 6%; + border: none; + +} /* Content */ .content { - display: flex; - flex-direction: column; +flex: 1; +display: flex; +flex-direction: row; + } + /* Alert */ .alert { @@ -120,18 +152,31 @@ p { /* hero */ .hero { - background-image: url("header-bike.jpg"); + background-image: url(../images/header-bike.jpg); background-color: var(--grey-light); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + height: 300px; + margin-bottom: 20px; } .hero h1 { margin-bottom: 1rem; font-size: 2.5rem; + color: white; + margin-top: 0; + padding-top: 5rem; + padding-left: 2rem; + padding-right: 2rem; } .hero p { font-size: 1.2rem; margin-bottom: 2rem; + color: white; + margin-top: 0; + padding-left: 2rem; } @@ -163,6 +208,26 @@ p { .article { margin-bottom: 1rem; + border: grey; + border: 2px solid var(--grey-light); + padding: 10px; + + +} +.art1 { + width: 47%; + float: left; + margin: 0 10px; + box-sizing: border-box; + padding: 8px; +} + +.art2 { + width: 47%; + float: left; + margin: 0 10px; + box-sizing: border-box; + padding: 8px; } .article__title { @@ -183,7 +248,12 @@ p { .article__thumbnail { object-fit: contain; - width: 5rem; + width: 6rem; + height: 9rem; + margin-right: 2rem; + float: left; + border-radius: 4px; + } .article__read-more { @@ -209,14 +279,27 @@ p { .facebook-link { color: var(--orange-dark); + text-align: right; + margin-top: auto; + padding-top: 1rem; + } /* Sidebar */ +/* Sidebar layout: Using flexbox to stack items vertically in a column layout */ .sidebar { display: flex; flex-direction: column; - min-width: 350px; + width: 400px; + padding: 1rem; + border-radius: 4px; +} + +.row { + display: flex; + justify-content: space-between; + flex-wrap: wrap; } /* Footer */ @@ -245,6 +328,6 @@ p { } .main { - padding-right: 2rem; - } + flex: 3; + padding-right: 2rem; } }