diff --git a/index.html b/index.html index 76254c13..897b0656 100644 --- a/index.html +++ b/index.html @@ -20,160 +20,165 @@ -
- - - - - -
- -
- - - -
+
+ + + + + + + +
-
-
- 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

- -
- -
-

- Join us for our Spring fundraisers -

+
+

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?

- 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 drop-off events. Or + come attend one of our fundraisers.

-
+

+ + + Learn more + +

+
+ +
+ +
-
+
+ diff --git a/styles/style.css b/styles/style.css index 4d1c088e..e06d8950 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; @@ -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; } @@ -63,6 +68,7 @@ p { .navigation__list { display: flex; list-style: none; + gap: 2rem; } .navigation__item { @@ -75,7 +81,9 @@ p { text-transform: uppercase; text-decoration: none; } - +.navigation__link:hover { + color: var(--orange-dark); +} /* Text styles */ @@ -92,11 +100,51 @@ p { border-left-color: var(--orange-dark); } - /* Buttons */ - /* INSERT BUTTON STYLES HERE */ +button { + background-color: var(--orange-dark); + color: var(--white); + font-size: 1rem; + font-weight: 600; + text-decoration: none; + padding: 0.5rem 1rem; + border: none; + border-radius: 0.5rem; + cursor: pointer; + transition: all 250ms; + position: relative; + box-shadow: inset 0 1px 0 0 #d36c3a, /* lighter than base */ 0 1px 0 0 #cd6534, + 0 1px 0 0 #c85f2f, 0 2px 0 0 #c05326, /* base color */ 0 2px 0 0 #b84e23, + 0 3px 0 0 #ae481f, 0 4px 0 0 #a4431d, 0 4px 6px 0 #8a3818; /* darker shade for depth */ +} + +button:hover { + background-color: var(--white); + color: var(--orange-dark); + transform: translateY(4px); + box-shadow: inset 0 1px 0 0 #f4f4f4, 0 1px 0 0 #efefef, 0 1px 0 0 #ececec, + 0 2px 0 0 #e0e0e0, 0 2px 0 0 #dedede, 0 3px 0 0 #dcdcdc, 0 4px 0 0 #cacaca, + 0 4px 6px 0 #cecece; +} + +.hero > button:last-child { + background-color: var(--white); + color: var(--orange-dark); + margin-left: 0.5rem; + box-shadow: inset 0 1px 0 0 #f4f4f4, 0 1px 0 0 #efefef, 0 1px 0 0 #ececec, + 0 2px 0 0 #e0e0e0, 0 2px 0 0 #dedede, 0 3px 0 0 #dcdcdc, 0 4px 0 0 #cacaca, + 0 4px 6px 0 #cecece; +} +.hero > button:last-child:hover { + background-color: var(--orange-dark); + color: var(--white); + transform: translateY(4px); + box-shadow: inset 0 1px 0 0 #d36c3a, /* lighter than base */ 0 1px 0 0 #cd6534, + 0 1px 0 0 #c85f2f, 0 2px 0 0 #c05326, /* base color */ 0 2px 0 0 #b84e23, + 0 3px 0 0 #ae481f, 0 4px 0 0 #a4431d, 0 4px 6px 0 #8a3818; /* darker shade for depth */ +} /* Content */ @@ -120,8 +168,11 @@ p { /* hero */ .hero { - background-image: url("header-bike.jpg"); + background-image: url("../images/header-bike.jpg"); background-color: var(--grey-light); + color: var(--white); + padding: 5rem 0 5rem 2rem; + border-radius: 5px; } .hero h1 { @@ -134,12 +185,12 @@ p { margin-bottom: 2rem; } - /* Headings */ .heading-underline { position: relative; margin-bottom: 2rem; + padding-top: 3rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--orange-light); font-size: 1rem; @@ -158,11 +209,26 @@ p { background: var(--orange-dark); } - /* Article */ +.articles { + display: flex; + flex-direction: row; +} + +.articles > .article { + flex-basis: 100%; +} + +.article:last-child { + margin-left: 1rem; +} + .article { margin-bottom: 1rem; + border: 2px solid var(--grey-light); + border-radius: 5px; + padding: 1rem; } .article__title { @@ -184,6 +250,7 @@ p { .article__thumbnail { object-fit: contain; width: 5rem; + margin-right: 1rem; } .article__read-more { @@ -209,6 +276,7 @@ p { .facebook-link { color: var(--orange-dark); + text-align: end; } /* Sidebar */ @@ -219,10 +287,22 @@ p { min-width: 350px; } +.sidebar .heading-underline { + padding-top: 0; +} + +.sidebar > .article { + display: flex; +} + /* Footer */ .footer { margin-top: 2rem; + position: absolute; + bottom: 0; + right: 0; + left: 0; } .footer__content {