diff --git a/index.html b/index.html index 76254c13..3ad84765 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,8 @@ + + @@ -16,164 +18,179 @@ /> - Bikes for Refugees + Bikes for Refugees + -
- - - +
+ + + + + + + + + +
+ +
+ +
+ + + +
+

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

-
-
-
-
- -
-

Upcoming events

- -
- -
-

- Join us for our Spring fundraisers -

+
+ +
+

Why do refugees need bikes?

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

+
-
- -
-

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

-
+ + + + +
-
- -
+ + + + +
+
+ + - + + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 4d1c088e..ae9d0823 100644 --- a/styles/style.css +++ b/styles/style.css @@ -34,9 +34,9 @@ p { margin-bottom: 0; } -.header, +header, .content, -.footer { +footer { padding: 0 1.5rem; max-width: 1200px; margin: 0 auto; @@ -44,7 +44,7 @@ p { /* Header */ -.header { +header { display: flex; align-items: center; justify-content: space-between; @@ -66,7 +66,7 @@ p { } .navigation__item { - padding: 0.5rem 0; + padding: 0.5rem 1rem; } .navigation__link { @@ -76,6 +76,12 @@ p { text-decoration: none; } +.navigation__link:hover, +.navigation__link:focus { + color: var(--orange-dark); + text-decoration: underline; +} + /* Text styles */ @@ -95,7 +101,23 @@ p { /* Buttons */ - /* INSERT BUTTON STYLES HERE */ +button { + background-color: var(--orange-dark); + color: var(--white); + font-weight: bold; + cursor: pointer; + border-radius: 4px; + border: none; +} + +button:hover { + background-color: var(--orange-light); + color: var(--grey-dark); +} + +header button { + padding: 0.5rem 1rem; +} /* Content */ @@ -120,8 +142,23 @@ 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; background-color: var(--grey-light); + color: var(--white); + display: flex; + flex-direction: column; + justify-content: center; + align-items: start; + text-align: left; + padding: 2rem 1rem; + height: 250px; + margin-bottom: 2rem; + border-radius: 4px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + position: relative; } .hero h1 { @@ -134,6 +171,26 @@ p { margin-bottom: 2rem; } +.hero button { + padding: 0.5rem 1rem; + font-size: 1rem; +} + +.hero button:last-of-type { + background-color: var(--white); + color: var(--orange-dark); +} + +.hero button:first-of-type:hover { + background-color: var(--white); + color: var(--orange-dark); +} + +.hero button:last-of-type:hover { + background-color: var(--orange-dark); + color: var(--white); +} + /* Headings */ @@ -161,7 +218,35 @@ p { /* Article */ -.article { +.main_articles { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +.main_articles article:first-of-type { + margin-right: 0.55rem; +} + +.main_articles article:last-of-type { + margin-left: 0.55rem; +} + +.main-article { + display: flex; + flex-direction: column; + justify-content: center; + text-align: left; + font-size: 0.95rem; + padding: 1rem; + background-color: var(--white); + border-radius: 4px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; +} + +article { margin-bottom: 1rem; } @@ -184,6 +269,7 @@ p { .article__thumbnail { object-fit: contain; width: 5rem; + margin-right: 2rem; } .article__read-more { @@ -209,6 +295,7 @@ p { .facebook-link { color: var(--orange-dark); + text-align: end; } /* Sidebar */ @@ -219,11 +306,24 @@ p { min-width: 350px; } -/* Footer */ +.sidebar article { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 1rem; + background-color: var(--white); + border-radius: 4px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + font-size: 0.9rem; +} -.footer { +/* Footer */ + +footer { margin-top: 2rem; -} +} .footer__content { border-top: 2px solid var(--orange-light); @@ -231,7 +331,7 @@ p { padding-bottom: 2rem; } -.footer p { +footer p { padding-bottom: 1rem; text-align: center; font-size: 0.85rem; @@ -244,7 +344,7 @@ p { flex-direction: row; } - .main { + main { padding-right: 2rem; } }