diff --git a/index.html b/index.html index 76254c13..499f83fb 100644 --- a/index.html +++ b/index.html @@ -21,159 +21,164 @@
+ + + + +
+ +
- - - - -
- -
- - - +
-
-
- 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

- -
-
-

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

-
+
+

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

+ +
+ pink sakura tree branch +
+

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

-
+
+ A beautiful bike +
+

+ Bike dropoff event in Edinburgh on May 11 +

+
- +
+ A road sign +
+

+ 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

- + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 4d1c088e..44428b94 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,12 +6,12 @@ */ :root { - --grey-dark: #292b2c; - --grey-light: #e4e4e4; - --orange-dark: #c05326; - --orange-light: #f7eae4; - --white: #fff; - } + --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; } @@ -76,7 +81,6 @@ p { text-decoration: none; } - /* Text styles */ .text-highlight { @@ -92,11 +96,37 @@ p { border-left-color: var(--orange-dark); } - /* Buttons */ - /* INSERT BUTTON STYLES HERE */ +/* INSERT BUTTON STYLES HERE */ + +button { + background-color: #e95b1e; + color: white; + border-radius: 4px; + padding: 6px 6px; + border: 0px; +} +button:hover { + background-color: rgb(55, 178, 235); +} +.orange { + background-color: #e95b1e; + color: white; + margin-left: 25px; + border-radius: 4px; + padding: 6px 6px; + border: 0px; +} + +.white { + color: #c05326; + background-color: white; + border-radius: 4px; + padding: 6px 6px; + border: 0px; +} /* Content */ @@ -114,26 +144,35 @@ p { font-size: 0.85rem; line-height: 1.3; padding: 1.5rem 1rem; - margin-bottom: 2rem; + margin-bottom: 3rem; } /* hero */ .hero { - background-image: url("header-bike.jpg"); background-color: var(--grey-light); + background-position: center center; + background-size: cover; + padding-top: 100px; + padding-bottom: 100px; } .hero h1 { + margin-left: 25px; margin-bottom: 1rem; font-size: 2.5rem; + color: white; } .hero p { font-size: 1.2rem; margin-bottom: 2rem; + margin-left: 25px; + color: white; +} +h2 { + padding: 20px 20px; } - /* Headings */ @@ -158,13 +197,25 @@ p { background: var(--orange-dark); } - /* Article */ - +.articlearea { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 20px; +} .article { margin-bottom: 1rem; + border: 1px solid #ccc; + width: 50%; + padding: 12px 9px; +} +.sideBySide { + display: flex; + flex-direction: row; + width: fit-content; + gap: 20px; } - .article__title { margin-bottom: 0.5rem; font-size: 1rem; @@ -247,4 +298,4 @@ p { .main { padding-right: 2rem; } -} +} \ No newline at end of file