From 7ce2c294506dd84eab83cb60bdd5ebf6664d0018 Mon Sep 17 00:00:00 2001 From: hadika1malik Date: Sat, 23 Sep 2023 00:49:29 +0100 Subject: [PATCH 1/3] layout sorted --- index.html | 297 ++++++++++++++++++++++++----------------------- styles/style.css | 85 +++++++++++--- 2 files changed, 223 insertions(+), 159 deletions(-) diff --git a/index.html b/index.html index 76254c13..e96c297e 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! -
- -
-

Bikes for Refugees

-

- Providing donated bikes and accessories to refugees and asylum - seekers in Scotland. +

+ +
+ edinburgh damascus +
+

+ Help us cycle 4,797km +

+

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

- - -
- -
-

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

-
-
-
-
- -
-

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

-
-
- -
- -
-

- 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..d7a165ee 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; } @@ -74,8 +79,12 @@ p { font-weight: 600; text-transform: uppercase; text-decoration: none; + padding: 1rem; } +.navigation__item:hover{ + background-color: #c05326; +} /* Text styles */ @@ -92,11 +101,37 @@ p { border-left-color: var(--orange-dark); } - /* Buttons */ - /* INSERT BUTTON STYLES HERE */ +/* INSERT BUTTON STYLES HERE */ +.orange-button { + background-color: #c05326; + color: #fff; + border:#c05326; + border-radius: 0.3rem; + padding: 0.5rem; + font-weight: bold; +} + +.orange-button:hover{ + background-color: #fff; + color: #c05326; +} + +.white-button { + background-color: #fff; + color: #c05326; + border:#fff; + border-radius: 0.3rem; + padding: 0.5rem; + font-weight:bold; +} + +.white-button:hover{ + background-color: #c05326; + color: #fff; +} /* Content */ @@ -120,8 +155,11 @@ p { /* hero */ .hero { - background-image: url("header-bike.jpg"); + background-image: url(../images/header-bike.jpg); background-color: var(--grey-light); + color: #fff; + padding: 5rem; + margin-bottom: 2rem; } .hero h1 { @@ -134,7 +172,6 @@ p { margin-bottom: 2rem; } - /* Headings */ .heading-underline { @@ -158,10 +195,14 @@ p { background: var(--orange-dark); } - /* Article */ .article { + display: flex; + justify-content: space-between; + border: 2px solid var(--grey-light); + border-radius: 0.4rem; + padding: 1rem; margin-bottom: 1rem; } @@ -184,6 +225,7 @@ p { .article__thumbnail { object-fit: contain; width: 5rem; + padding: 1rem; } .article__read-more { @@ -209,6 +251,23 @@ p { .facebook-link { color: var(--orange-dark); + text-align: right; +} + +/* main-article 2article */ + +.articless{ + display: flex; +} + +.main-article, .main-articles { + flex: 50%; + border: 2px solid var(--grey-light); + border-radius: 0.4rem; + padding: 1rem; + margin: 0.4rem 0.4rem; +} + } /* Sidebar */ From cc674a4ada3c3268b8a4f00cd8a82bbeb09613e4 Mon Sep 17 00:00:00 2001 From: hadika1malik Date: Sat, 23 Sep 2023 14:44:10 +0100 Subject: [PATCH 2/3] fb link layout --- styles/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/styles/style.css b/styles/style.css index d7a165ee..27f03abc 100644 --- a/styles/style.css +++ b/styles/style.css @@ -251,7 +251,8 @@ p { .facebook-link { color: var(--orange-dark); - text-align: right; + display: flex; + justify-content: end; } /* main-article 2article */ From a9ef97f318cb5eb2cb0b8da9ec43dc8ca6149780 Mon Sep 17 00:00:00 2001 From: hadika1malik Date: Tue, 26 Sep 2023 10:03:12 +0100 Subject: [PATCH 3/3] nav bar text colour hover --- styles/style.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/styles/style.css b/styles/style.css index 27f03abc..f6d761c8 100644 --- a/styles/style.css +++ b/styles/style.css @@ -81,9 +81,11 @@ p { text-decoration: none; padding: 1rem; } - +.navigation__link:hover{ + color: #c05326; +} .navigation__item:hover{ - background-color: #c05326; + background-color: #fff; } /* Text styles */