diff --git a/index.html b/index.html index 76254c13..c4168396 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@ -
+
-
+
+ - + -
+ -
-
+
+
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 @@ -85,9 +85,9 @@

Why do refugees need bikes?

Learn more

-
+ -
+

How can I help?

We need lots of bikes and bike accessories! If you have an @@ -100,21 +100,21 @@

How can I help?

Learn more

-
-
-
-
+ + + + - -
+ + - + + diff --git a/styles/style.css b/styles/style.css index 4d1c088e..70303d8f 100644 --- a/styles/style.css +++ b/styles/style.css @@ -63,10 +63,11 @@ p { .navigation__list { display: flex; list-style: none; + } .navigation__item { - padding: 0.5rem 0; + padding: 0.5rem 1rem; } .navigation__link { @@ -76,6 +77,11 @@ p { text-decoration: none; } +.navigation__link:hover, +.navigation__link:focus { + color: var(--orange-dark); + } + /* Text styles */ @@ -95,14 +101,55 @@ p { /* Buttons */ - /* INSERT BUTTON STYLES HERE */ +.btn_donate, .btn_header_donate { + background-color: var(--orange-dark); + color: var(--white); + font-weight: 600; + border: none; + border-radius: 4px; + padding: 8px 10px; + text-align: center; + margin: 4px 2px; + cursor: pointer; +} + +.btn_header_volunteer { + background-color: var(--white); + color: var(--orange-dark); + font-weight: 600; + border: none; + border-radius: 4px; + padding: 8px 10px; + text-align: center; + margin: 4px 2px; + cursor: pointer; +} + + +.btn_header_volunteer:hover { + background-color: var(--grey-light); + border-color: var(--grey-light); + color: var(--grey-dark); +} +.btn_donate:hover { + background-color: var(--grey-light); + border-color: var(--grey-light); + color: var(--grey-dark); +} +.btn_header_donate:hover { + background-color: var(--grey-light); + border-color: var(--grey-light); + color: var(--grey-dark); +} /* Content */ .content { display: flex; - flex-direction: column; + flex-direction: row; + gap: 2rem; + padding: 2rem; } /* Alert */ @@ -114,24 +161,31 @@ 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-image: url("../images/header-bike.jpg"); background-color: var(--grey-light); + padding: 80px 40px; + margin-bottom: 50px; + margin-top: 50px; + } .hero h1 { margin-bottom: 1rem; font-size: 2.5rem; + color: var(--white); + } .hero p { font-size: 1.2rem; margin-bottom: 2rem; + color: var(--white); } @@ -161,8 +215,24 @@ p { /* Article */ +.sidebar .article { + margin-bottom: 1rem; + border: 1px solid var(--grey-light); + border-radius: 4px; + padding: 1rem 1.5rem; + gap: 1rem; + display: flex; + +} + .article { margin-bottom: 1rem; + border: 1px solid var(--grey-light); + border-radius: 4px; + padding: 1rem 1.5rem; + gap: 1rem; + justify-content: center; + } .article__title { @@ -211,12 +281,19 @@ p { color: var(--orange-dark); } +/* Main */ +.main { + flex: 3; +} + /* Sidebar */ .sidebar { display: flex; + flex: 1; flex-direction: column; min-width: 350px; + gap: 1.5rem; } /* Footer */