diff --git a/index.html b/index.html index 76254c13..26c6f469 100644 --- a/index.html +++ b/index.html @@ -20,8 +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 - 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 +

+
+ +
+

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

+

+ Learn more +

+
+
+
+ +
- -
-

@@ -152,9 +135,8 @@

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

-

-
- +
+ All Facebook events -
-
- -
+ +
+
+ diff --git a/styles/style.css b/styles/style.css index 4d1c088e..7b774ce2 100644 --- a/styles/style.css +++ b/styles/style.css @@ -34,9 +34,9 @@ p { margin-bottom: 0; } -.header, +header, .content, -.footer { +footer { padding: 0 1.5rem; max-width: 1200px; margin: 0 auto; @@ -44,7 +44,7 @@ p { /* Header */ -.header { +header { display: flex; align-items: center; justify-content: space-between; @@ -66,7 +66,7 @@ p { } .navigation__item { - padding: 0.5rem 0; + padding: 0.5rem 1rem; } .navigation__link { @@ -74,9 +74,13 @@ p { font-weight: 600; text-transform: uppercase; text-decoration: none; + padding: 1rem; } - +.navigation__link:hover{ + color:#c05326; + text-decoration: underline; +} /* Text styles */ .text-highlight { @@ -96,14 +100,42 @@ p { /* Buttons */ /* INSERT BUTTON STYLES HERE */ - - +.btn { + border: 0; + padding: 10px 14px; + border-radius: 6px; + cursor: pointer; + font-weight: 700; +} +.btn-primary { + background: var(--orange-dark); + color: #fff; +} +.btn-secondary { + background: #fff; + color: var(--grey-dark); + border: 2px solid #fff; +} +.btn-primary:hover, .btn-primary:focus { + background: #fff; + color: var(--grey-dark); + border: 2px solid var(--orange-dark); +} +.btn-secondary:hover, .btn-secondary:focus { + background: var(--orange-dark); + color: #fff; + border: none; +} /* Content */ .content { display: flex; - flex-direction: column; + gap: 24px; + align-items: flex-start; + margin-bottom: 1.5rem; } +.main { flex: 1 1 60%; padding-right: 1rem; } +.sidebar { flex: 0 0 340px; } /* Alert */ @@ -120,19 +152,25 @@ p { /* hero */ .hero { - background-image: url("header-bike.jpg"); - background-color: var(--grey-light); -} - -.hero h1 { - margin-bottom: 1rem; - font-size: 2.5rem; + background-image: url("../images/header-bike.jpg"); + background-size: cover; + background-position: center; + color: #fff; + padding: 64px 24px; + border-radius: 4px; + position: relative; + min-height: 320px; + margin-bottom: 28px; } - -.hero p { - font-size: 1.2rem; - margin-bottom: 2rem; +.hero::before { + content: ""; + position: absolute; + inset: 0; + background: rgba(0,0,0,0.35); + border-radius: 4px; + pointer-events: none; } +.hero .hero-title { position: relative; z-index:1; max-width:70%; } /* Headings */ @@ -161,29 +199,36 @@ p { /* Article */ -.article { - margin-bottom: 1rem; +.main_articles{ + display:flex; + flex-direction: row; + justify-content: center; + align-items: center; } - -.article__title { - margin-bottom: 0.5rem; - font-size: 1rem; - font-weight: 700; +.main_articles article:first-of-type{ + margin-right:0.55rem; } - -.article__title-link { - text-decoration: none; - color: var(--orange-dark); +.articles-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + margin-bottom: 1.5rem; } - -.article__summary { - margin-top: 0; - margin-bottom: 1rem; +.article { + border: 1px solid #e6e6e6; + background: #fff; + padding: 18px; + border-radius: 4px; + box-shadow: 0 1px 0 rgba(0,0,0,0.03); } +.article__title { font-weight:700; margin-bottom:8px; } +.article__summary { color:#444; margin-bottom:12px; } + .article__thumbnail { object-fit: contain; width: 5rem; + margin-right:2rem; } .article__read-more { @@ -209,6 +254,7 @@ p { .facebook-link { color: var(--orange-dark); + text-align: end; } /* Sidebar */ @@ -216,8 +262,25 @@ p { .sidebar { display: flex; flex-direction: column; - min-width: 350px; + gap: 14px; + flex: 0 0 340px; +} +.sidebar article, .card { + display:flex; + gap:12px; + padding:12px; + background: #fff; + border:1px solid #e6e6e6; + border-radius:4px; + align-items:flex-start; +} +.article__thumbnail { + width: 90px; + height: 70px; + object-fit: cover; + border-radius: 2px; } +.article__content { flex: 1; } /* Footer */ @@ -244,7 +307,7 @@ p { flex-direction: row; } - .main { + main { padding-right: 2rem; } }