diff --git a/index.html b/index.html index 76254c13..2d873527 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! -
+ + - -
-
- - + diff --git a/styles/style.css b/styles/style.css index 4d1c088e..bc63a6fc 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; } @@ -67,6 +72,7 @@ p { .navigation__item { padding: 0.5rem 0; + margin: 1rem; } .navigation__link { @@ -76,7 +82,6 @@ p { text-decoration: none; } - /* Text styles */ .text-highlight { @@ -92,11 +97,23 @@ p { border-left-color: var(--orange-dark); } - /* Buttons */ - /* INSERT BUTTON STYLES HERE */ +button { + border: none; + padding: 0.5rem; + border-radius: 3px; +} +.btn1 { + background-color: var(--orange-dark); + color: var(--white); +} + +.btn2 { + background-color: var(--white); + color: var(--orange-dark); +} /* Content */ @@ -120,21 +137,25 @@ p { /* hero */ .hero { - background-image: url("header-bike.jpg"); + background-image: url("../images/header-bike.jpg"); background-color: var(--grey-light); + padding: 4rem 2rem 4rem 2rem; + margin-bottom: 48px; + object-fit: contain; } .hero h1 { margin-bottom: 1rem; font-size: 2.5rem; + color: var(--white); } .hero p { font-size: 1.2rem; margin-bottom: 2rem; + color: var(--white); } - /* Headings */ .heading-underline { @@ -158,11 +179,19 @@ p { background: var(--orange-dark); } - /* Article */ .article { margin-bottom: 1rem; + display: flex; + justify-content: space-between; + padding: 1rem; + border: 2px solid var(--grey-light); + border-radius: 2px; +} + +.columnart { + flex-direction: column; } .article__title { @@ -184,6 +213,7 @@ p { .article__thumbnail { object-fit: contain; width: 5rem; + margin-right: 1rem; } .article__read-more { @@ -209,6 +239,7 @@ p { .facebook-link { color: var(--orange-dark); + text-align: right; } /* Sidebar */