From b50f0db56aeafaa959d0cd9e25321a34ca477ef3 Mon Sep 17 00:00:00 2001 From: Aly Date: Fri, 9 May 2025 18:23:51 +0100 Subject: [PATCH 1/2] Created new branch SW9/AlyElsharkawy --- index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.html b/index.html index 76254c13..be61049f 100644 --- a/index.html +++ b/index.html @@ -59,6 +59,8 @@
+ bike +

Bikes for Refugees

Providing donated bikes and accessories to refugees and asylum From 134a8042c518e97d8a304b966884dd86cda2705a Mon Sep 17 00:00:00 2001 From: Aly Date: Sat, 10 May 2025 14:29:54 +0100 Subject: [PATCH 2/2] Created new branch SW9/AlyElsharkawy, added html symantics and css properties --- index.html | 28 +++--- styles/style.css | 257 ++++++++++++++++++++++++++++------------------- 2 files changed, 165 insertions(+), 120 deletions(-) diff --git a/index.html b/index.html index be61049f..40bcfab8 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@ -

+
Donate Now -
+
-
+
You've helped us give 72 bikes to refugees and asylum seekers so far. Thank you!
- bike -

Bikes for Refugees

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

- +

Learn more

-
+

Why do refugees need bikes?

@@ -105,15 +103,15 @@

How can I help?

-
+
-
+
-
+

Bikes for Refugees Scotland is a volunteer-led project to help @@ -176,6 +174,6 @@

Website by Code Your Future

-
+ diff --git a/styles/style.css b/styles/style.css index 4d1c088e..668e71c2 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,245 +6,292 @@ */ :root { - --grey-dark: #292b2c; - --grey-light: #e4e4e4; - --orange-dark: #c05326; - --orange-light: #f7eae4; - --white: #fff; - } + --grey-dark: #292b2c; + --grey-light: #e4e4e4; + --orange-dark: #c05326; + --orange-light: #f7eae4; + --white: #fff; +} body { - margin: 0; + margin: 0; } body, button { - font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; - color: var(--grey-dark); - font-size: 1rem; + font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; + color: var(--grey-dark); + font-size: 1rem; } h1,h2,h3,h4,h5,h6 { - margin-top: 0; - margin-bottom: 0; + margin-top: 0; + margin-bottom: 0; } p { - margin-top: 0; - margin-bottom: 0; + margin-top: 0; + margin-bottom: 0; } .header, .content, .footer { - padding: 0 1.5rem; - max-width: 1200px; - margin: 0 auto; + padding: 0 1.5rem; + max-width: 1200px; + margin: 0 auto; } /* Header */ .header { - display: flex; - align-items: center; - justify-content: space-between; - height: 5rem; - margin-bottom: 1rem; - padding-top: 1rem; + display: flex; + align-items: center; + justify-content: space-between; + height: 5rem; + margin-bottom: 1rem; + padding-top: 1rem; } .header__logo { - max-height: 90px; - width: auto; + max-height: 90px; + width: auto; } /* Navigation */ .navigation__list { - display: flex; - list-style: none; + display: flex; + list-style: none; } .navigation__item { - padding: 0.5rem 0; + padding: 0.5rem 0; + margin-right: 20px; } .navigation__link { - color: var(--grey-dark); - font-weight: 600; - text-transform: uppercase; - text-decoration: none; + color: var(--grey-dark); + font-weight: 600; + text-transform: uppercase; + text-decoration: none; } /* Text styles */ .text-highlight { - color: var(--orange-dark); - font-weight: 600; + color: var(--orange-dark); + font-weight: 600; } .arrow-right { - display: inline-block; - height: 0; - width: 0; - border: 6px solid var(--white); - border-left-color: var(--orange-dark); + display: inline-block; + height: 0; + width: 0; + border: 6px solid var(--white); + border-left-color: var(--orange-dark); } /* Buttons */ - /* INSERT BUTTON STYLES HERE */ + /* INSERT BUTTON STYLES HERE */ +button { + background-color: #c05326; + color: #fff; + border: none; + border-radius: 3px; + width: auto; + height: 30px; +} +button:hover { + background-color: #fff; + color: #c05326; +} +#volunteer-button { + background-color: #fff; + color: #c05326; +} +#volunteer-button:hover { + background-color: #c05326; + color: #fff; +} /* Content */ .content { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } /* Alert */ .alert { - background-color: var(--orange-light); - border-left: 4px solid var(--orange-dark); - border-radius: 4px; - font-size: 0.85rem; - line-height: 1.3; - padding: 1.5rem 1rem; - margin-bottom: 2rem; + background-color: var(--orange-light); + border-left: 4px solid var(--orange-dark); + border-radius: 4px; + font-size: 0.85rem; + line-height: 1.3; + padding: 1.5rem 1rem; + margin-bottom: 2rem; } /* hero */ .hero { - background-image: url("header-bike.jpg"); - background-color: var(--grey-light); + background-image: url("/images/header-bike.jpg"); + background-color: var(--grey-light); + width: auto; + height: 350px; + padding-left: 33px; + align-content: center; + margin-bottom: 40px; } .hero h1 { - margin-bottom: 1rem; - font-size: 2.5rem; + margin-bottom: 1rem; + font-size: 2.5rem; + color: #fff; } .hero p { - font-size: 1.2rem; - margin-bottom: 2rem; + font-size: 1.2rem; + margin-bottom: 2rem; + color: #fff; } /* Headings */ .heading-underline { - position: relative; - margin-bottom: 2rem; - padding-bottom: 0.5rem; - border-bottom: 2px solid var(--orange-light); - font-size: 1rem; - font-weight: 600; - text-transform: uppercase; + position: relative; + margin-bottom: 2rem; + padding-bottom: 0.5rem; + border-bottom: 2px solid var(--orange-light); + font-size: 1rem; + font-weight: 600; + text-transform: uppercase; } .heading-underline:before { - content: ""; - position: absolute; - bottom: -2px; - left: 0; - width: 25%; - height: 2px; - max-width: 100px; - background: var(--orange-dark); + content: ""; + position: absolute; + bottom: -2px; + left: 0; + width: 25%; + height: 2px; + max-width: 100px; + background: var(--orange-dark); } /* Article */ .article { - margin-bottom: 1rem; + margin-bottom: 1rem; + border: solid grey 1px; + border-radius: 3px; + padding: 10px; +} +.learnmore-article { + display: grid +; + grid-template-columns: auto auto; + grid-gap: 10px; } + .article__title { - margin-bottom: 0.5rem; - font-size: 1rem; - font-weight: 700; + margin-bottom: 0.5rem; + font-size: 1rem; + font-weight: 700; } .article__title-link { - text-decoration: none; - color: var(--orange-dark); + text-decoration: none; + color: var(--orange-dark); + align-items: center; } .article__summary { - margin-top: 0; - margin-bottom: 1rem; + margin-top: 0; + margin-bottom: 1rem; + align-content: center; } .article__thumbnail { - object-fit: contain; - width: 5rem; + object-fit: contain; + width: 5rem; + float: left; + height: 110px; + margin-right: 10px; + margin-left: 10px; } .article__read-more { - margin-top: 0; + margin-top: 0; } .article__read-more a { - font-size: 0.85rem; - font-weight: 700; - color: var(--orange-dark); - text-decoration: none; + font-size: 0.85rem; + font-weight: 700; + color: var(--orange-dark); + text-decoration: none; } .article__read-more a:hover, .article__read-more a:focus { - text-decoration: underline; + text-decoration: underline; } .fa { - margin-right: 0.5rem; - color: var(--orange-dark); + margin-right: 0rem; + color: var(--orange-dark); + } .facebook-link { - color: var(--orange-dark); + color: var(--orange-dark); + text-align-last: right; } /* Sidebar */ .sidebar { - display: flex; - flex-direction: column; - min-width: 350px; + display: flex; + flex-direction: column; + min-width: 300px; + max-width: 250px; } /* Footer */ .footer { - margin-top: 2rem; + margin-top: 2rem; } .footer__content { - border-top: 2px solid var(--orange-light); - padding-top: 2rem; - padding-bottom: 2rem; + border-top: 2px solid var(--orange-light); + padding-top: 2rem; + padding-bottom: 2rem; } .footer p { - padding-bottom: 1rem; - text-align: center; - font-size: 0.85rem; + padding-bottom: 1rem; + text-align: center; + font-size: 0.85rem; } /* Media queries */ @media screen and (min-width: 992px) { - .content { - flex-direction: row; - } + .content { + flex-direction: row; + } - .main { - padding-right: 2rem; - } + .main { + padding-right: 2rem; + } }