From 1d8c78b183ee07ce0780f16fd0021cfec489f809 Mon Sep 17 00:00:00 2001 From: MehrozMunir Date: Wed, 21 Jan 2026 19:48:59 +0000 Subject: [PATCH] changes made to meet the requirements --- index.html | 289 ++++++++++++++++++++++++----------------------- styles/style.css | 108 ++++++++++++++---- 2 files changed, 235 insertions(+), 162 deletions(-) diff --git a/index.html b/index.html index 76254c13..fdb6a412 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + @@ -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. -

- - -
+
+ + + + + + + +
+ +
+
+ + +
+

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

+
-
-

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

-
-
-
-
- -
-

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 drop-off events. Or + come attend one of our fundraisers.

-
+

+ + + Learn more + +

+
+
+
+ + +
-
+
+ diff --git a/styles/style.css b/styles/style.css index 4d1c088e..b76c10ee 100644 --- a/styles/style.css +++ b/styles/style.css @@ -5,13 +5,13 @@ * */ - :root { - --grey-dark: #292b2c; - --grey-light: #e4e4e4; - --orange-dark: #c05326; - --orange-light: #f7eae4; - --white: #fff; - } +:root { + --grey-dark: #292b2c; + --grey-light: #e4e4e4; + --orange-dark: #c05326; + --orange-light: #f7eae4; + --white: #fff; +} body { margin: 0; @@ -24,7 +24,12 @@ button { font-size: 1rem; } -h1,h2,h3,h4,h5,h6 { +h1, +h2, +h3, +h4, +h5, +h6 { margin-top: 0; margin-bottom: 0; } @@ -40,6 +45,7 @@ p { padding: 0 1.5rem; max-width: 1200px; margin: 0 auto; + padding: 0 4rem; } /* Header */ @@ -63,10 +69,11 @@ p { .navigation__list { display: flex; list-style: none; + padding: 2rem; } .navigation__item { - padding: 0.5rem 0; + padding: 2rem; } .navigation__link { @@ -75,7 +82,9 @@ p { text-transform: uppercase; text-decoration: none; } - +.navigation__link:hover { + color: var(--orange-dark); +} /* Text styles */ @@ -92,11 +101,9 @@ p { border-left-color: var(--orange-dark); } - /* Buttons */ - /* INSERT BUTTON STYLES HERE */ - +/* INSERT BUTTON STYLES HERE */ /* Content */ @@ -120,8 +127,14 @@ 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; + color: var(--white); + border-radius: 4px; + padding: 6rem 2rem; + margin-bottom: 3rem; /* moves the next section down */ } .hero h1 { @@ -134,7 +147,6 @@ p { margin-bottom: 2rem; } - /* Headings */ .heading-underline { @@ -146,6 +158,12 @@ p { font-weight: 600; text-transform: uppercase; } +.grid-section { + display: grid; + grid-template-columns: repeat(2, 1fr); /* 2 equal columns */ + gap: 2rem; /* space between the two cards */ + margin-top: 1.5rem; +} .heading-underline:before { content: ""; @@ -158,9 +176,6 @@ p { background: var(--orange-dark); } - -/* Article */ - .article { margin-bottom: 1rem; } @@ -181,9 +196,28 @@ p { margin-bottom: 1rem; } +.sidebar .article { + display: flex; + gap: 1rem; + align-items: flex-start; + background: var(--white); + border: 1px solid var(--grey-light); + border-radius: 6px; + padding: 1rem; + margin-bottom: 1rem; +} .article__thumbnail { - object-fit: contain; width: 5rem; + height: auto; + object-fit: contain; + flex-shrink: 0; +} + +.article_learn_more { + border: 1px solid #ccc; /* light border */ + border-radius: 8px; /* soften the edges */ + padding: 1.5rem; /* spacing inside the card */ + background: white; /* optional but clean */ } .article__read-more { @@ -203,11 +237,15 @@ p { } .fa { - margin-right: 0.5rem; + display: flex; + justify-content: flex-end; + margin-right: 0.25rem; color: var(--orange-dark); } .facebook-link { + display: flex; + justify-content: flex-end; color: var(--orange-dark); } @@ -248,3 +286,33 @@ p { padding-right: 2rem; } } + +.btn { + padding: 0.6rem 1.2rem; + border-radius: 4px; + font-weight: 600; + cursor: pointer; + text-decoration: none; + display: inline-block; +} + +.btn-primary { + background-color: #b45f35; /* adjust shade to match design */ + color: white; + border: 2px solid #b45f35; +} + +.btn-secondary { + background-color: white; + color: #b45f35; + border: 2px solid #b45f35; +} +.btn-primary:hover { + background-color: white; + color: #b45f35; +} + +.btn-secondary:hover { + background-color: #b45f35; + color: white; +}