diff --git a/index.html b/index.html index 76254c13..4517317b 100644 --- a/index.html +++ b/index.html @@ -21,156 +21,168 @@
+ + + + + +
+ +
- - - - -
- -
- - - +
-
-
- 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 -

-
+ + + +
+
+ +
+

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

+
-
- -
-

- Help us cycle 4,797km -

-

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

-
+ +
+ +
+

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

diff --git a/styles/style.css b/styles/style.css index 4d1c088e..46f44d6d 100644 --- a/styles/style.css +++ b/styles/style.css @@ -51,6 +51,7 @@ p { height: 5rem; margin-bottom: 1rem; padding-top: 1rem; + } .header__logo { @@ -63,6 +64,7 @@ p { .navigation__list { display: flex; list-style: none; + gap: 25px; } .navigation__item { @@ -95,7 +97,13 @@ p { /* Buttons */ - /* INSERT BUTTON STYLES HERE */ + button{ + background-color: var(--orange-dark); + color: var(--white); + border: none; + padding:7px; + border-radius: 10%; + } /* Content */ @@ -103,7 +111,15 @@ p { .content { display: flex; flex-direction: column; + +} +.content .main > div:nth-of-type(3) { + padding-top: 100px; } +.content h2{ + padding-top: 40px; +} + /* Alert */ @@ -120,10 +136,17 @@ p { /* hero */ .hero { - background-image: url("header-bike.jpg"); + background-image: url(/images/header-bike.jpg); + background-position:2%; + color: var(--white); + padding: 50px; + +} +.hero .btn{ background-color: var(--grey-light); + color:var(--orange-dark); + margin-left: 2px; } - .hero h1 { margin-bottom: 1rem; font-size: 2.5rem; @@ -133,13 +156,22 @@ p { font-size: 1.2rem; margin-bottom: 2rem; } +.subHero{ + display: flex; + gap: 20px; +} +.subHero .article{ + box-shadow: 0px 0px 1px var(--grey-dark); + padding: 30px; +} /* Headings */ .heading-underline { - position: relative; + /* position: relative; */ margin-bottom: 2rem; + margin-top: -2.2rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--orange-light); font-size: 1rem; @@ -161,8 +193,14 @@ p { /* Article */ -.article { +.sidebar .article { margin-bottom: 1rem; + display: flex; + justify-content: space-around; + gap: 20px; + box-shadow: 0px 0px 1px var(--grey-dark); + padding: 20px 10px; + } .article__title { @@ -211,12 +249,20 @@ p { color: var(--orange-dark); } + /* Sidebar */ .sidebar { display: flex; flex-direction: column; min-width: 350px; + + + +} +.faceBookEvents{ + display: flex; + justify-content: flex-end; } /* Footer */