diff --git a/index.html b/index.html index 76254c13..91d8c111 100644 --- a/index.html +++ b/index.html @@ -1,179 +1,158 @@ - - - - - - - - - - - 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. +

+
+ + +
+
+
+

Learn more

+
- -
-

- Join us for our Spring fundraisers -

-

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

-
+

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

- -
-

- Bike dropoff event in Edinburgh on May 11 -

-
+

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

+
+
+
-
- -
-

- Help us cycle 4,797km -

-

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

-
+
+

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 diff --git a/styles/style.css b/styles/style.css index 4d1c088e..d9531fc8 100644 --- a/styles/style.css +++ b/styles/style.css @@ -11,6 +11,9 @@ --orange-dark: #c05326; --orange-light: #f7eae4; --white: #fff; + --small-font: 1rem; + --xs-font: 0.60rem; + --bold-font: 600; } body { @@ -51,6 +54,9 @@ p { height: 5rem; margin-bottom: 1rem; padding-top: 1rem; + font-size: var(--small-font); + font-weight: var(--bold-font); + min-width: 350px; } .header__logo { @@ -61,12 +67,15 @@ p { /* Navigation */ .navigation__list { + width: 100%; display: flex; + justify-content: space-between; list-style: none; } .navigation__item { - padding: 0.5rem 0; + display: flex; + flex-direction: row; } .navigation__link { @@ -77,6 +86,12 @@ p { } +.navigation__link:hover { + background: var(--white); + color: var(--orange-dark); + font-weight: var(--small-font); +} + /* Text styles */ .text-highlight { @@ -95,9 +110,38 @@ 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; + 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); + width: fit-content; + border: none; + padding: .5rem 1rem; + cursor: pointer; +} + +.btn:hover { + background: var(--orange-dark); + color: var(--white); + border: 1px solid var(--white); +} + /* Content */ .content { @@ -115,13 +159,25 @@ p { line-height: 1.3; padding: 1.5rem 1rem; margin-bottom: 2rem; + min-width: 330px; } /* hero */ .hero { - background-image: url("header-bike.jpg"); - background-color: var(--grey-light); + background-image: url("/images/header-bike.jpg"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + width: 100%; + min-height: 40vh; + color: var(--white); + display: flex; + flex-direction: column; + justify-content: center; + box-sizing: border-box; + padding-left: 1.2rem; + min-width: 360px; } .hero h1 { @@ -130,8 +186,9 @@ p { } .hero p { - font-size: 1.2rem; + font-size: 0.90rem; margin-bottom: 2rem; + font-weight: 400; } @@ -161,10 +218,33 @@ p { /* Article */ -.article { +.article-content{ + margin-top: 3rem; margin-bottom: 1rem; + } +.article-wrapper { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 1rem; + min-width: 350px; +} + +.article { + padding: 1rem; + border: 1px solid lightgrey; +} + +.article-sidebar { + display: flex; + gap: 0.7rem; + padding: 1rem; + border: 1px solid lightgrey; +} + + .article__title { margin-bottom: 0.5rem; font-size: 1rem; @@ -202,15 +282,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 { @@ -219,20 +303,29 @@ p { min-width: 350px; } +.wrapper-sidebar{ + display: flex; + flex-direction: column; + gap: 1rem; + +} + /* Footer */ .footer { margin-top: 2rem; + 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; }