diff --git a/index.html b/index.html index 76254c13..661d9a51 100644 --- a/index.html +++ b/index.html @@ -20,153 +20,151 @@ -
- - - - - -
- +
+ + + + + + + +
+ +
+
+
+ You've helped us give 72 bikes + to refugees and asylum seekers so far. Thank you!
- - -
- -
-
-
- 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

-

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 -

-
+ + + +

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

Website by Code Your Future

-
+ diff --git a/styles/style.css b/styles/style.css index 4d1c088e..f42f71b7 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; @@ -66,7 +66,7 @@ p { } .navigation__item { - padding: 0.5rem 0; + padding: 0.5rem 1rem; /* updated for spacing */ } .navigation__link { @@ -76,6 +76,9 @@ p { text-decoration: none; } +.navigation__link:hover { + color: var(--orange-dark); /* hover effect */ +} /* Text styles */ @@ -92,11 +95,25 @@ p { border-left-color: var(--orange-dark); } - /* Buttons */ - /* INSERT BUTTON STYLES HERE */ +button { + background-color: var(--orange-dark); + color: var(--white); + border: none; + padding: 0.75rem 1.5rem; + font-weight: 600; + border-radius: 5px; + margin-right: 1rem; + cursor: pointer; + transition: all 0.3s ease; +} +button:hover { + background-color: var(--white); + color: var(--orange-dark); + border: 2px solid var(--orange-dark); +} /* Content */ @@ -120,8 +137,12 @@ p { /* hero */ .hero { - background-image: url("header-bike.jpg"); + background-image: url("images/header-bike.jpg"); /* updated image path */ background-color: var(--grey-light); + padding: 4rem 2rem; /* added spacing */ + margin-bottom: 2rem; + background-size: cover; + background-position: center; } .hero h1 { @@ -134,7 +155,6 @@ p { margin-bottom: 2rem; } - /* Headings */ .heading-underline { @@ -158,7 +178,6 @@ p { background: var(--orange-dark); } - /* Article */ .article { @@ -217,6 +236,9 @@ p { display: flex; flex-direction: column; min-width: 350px; + flex: 1; /* added */ + padding-left: 2rem; /* added */ + border-left: 1px solid var(--grey-light); /* added */ } /* Footer */ @@ -246,5 +268,6 @@ p { .main { padding-right: 2rem; + flex: 3; /* added */ } }