-
- 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.
-
-
Donate a bike today
-
Volunteer
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/styles/style.css b/styles/style.css
index 4d1c088e..4833c58d 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -1,250 +1,205 @@
-/**
- *
- * Module: HTML/CSS
- * Lesson: 1
- *
- */
-
- :root {
- --grey-dark: #292b2c;
- --grey-light: #e4e4e4;
- --orange-dark: #c05326;
- --orange-light: #f7eae4;
- --white: #fff;
- }
-
-body {
+/* GENERAL RESET */
+* {
margin: 0;
+ padding: 0;
+ box-sizing: border-box;
}
-body,
-button {
- 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;
-}
-
-p {
- margin-top: 0;
- margin-bottom: 0;
-}
-
-.header,
-.content,
-.footer {
- padding: 0 1.5rem;
- max-width: 1200px;
- margin: 0 auto;
+body {
+ font-family: "Source Sans Pro", sans-serif;
+ line-height: 1.6;
+ color: #333;
+ background: #fff;
}
-/* Header */
-
+/* HEADER */
.header {
display: flex;
- align-items: center;
justify-content: space-between;
- height: 5rem;
- margin-bottom: 1rem;
- padding-top: 1rem;
+ align-items: center;
+ padding: 1rem 2rem;
+ border-bottom: 1px solid #eee;
}
.header__logo {
- max-height: 90px;
- width: auto;
+ height: 50px;
}
-/* Navigation */
-
-.navigation__list {
+.nav__list {
display: flex;
+ gap: 2rem;
list-style: none;
}
-.navigation__item {
- padding: 0.5rem 0;
-}
-
-.navigation__link {
- color: var(--grey-dark);
+.nav__list a {
+ text-decoration: none;
font-weight: 600;
+ color: #333;
text-transform: uppercase;
- text-decoration: none;
}
+.nav__list a:hover {
+ color: #e85c2b;
+}
-/* Text styles */
-
-.text-highlight {
- color: var(--orange-dark);
+.btn {
+ padding: 0.6rem 1.2rem;
+ border: none;
+ cursor: pointer;
font-weight: 600;
+ border-radius: 3px;
}
-.arrow-right {
- display: inline-block;
- height: 0;
- width: 0;
- border: 6px solid var(--white);
- border-left-color: var(--orange-dark);
+.btn-donate {
+ background: #e85c2b;
+ color: white;
}
+.btn-primary {
+ background: #e85c2b;
+ color: #fff;
+}
-/* Buttons */
-
- /* INSERT BUTTON STYLES HERE */
-
+.btn-secondary {
+ background: #fff;
+ border: 2px solid #333;
+ color: #333;
+}
-/* Content */
+.btn:hover {
+ opacity: 0.9;
+}
-.content {
- display: flex;
- flex-direction: column;
+/* ALERT */
+.alert {
+ background: #f9ece6;
+ padding: 1rem;
+ margin: 1rem 2rem;
+ border-left: 5px solid #e85c2b;
}
-/* Alert */
+.text-highlight {
+ color: #e85c2b;
+ font-weight: bold;
+}
-.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;
+/* GRID LAYOUT */
+.container {
+ display: grid;
+ grid-template-columns: 2fr 1fr;
+ gap: 2rem;
+ padding: 2rem;
+ align-items: start;
}
-/* hero */
+.main-content {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+}
+/* HERO */
.hero {
- background-image: url("header-bike.jpg");
- background-color: var(--grey-light);
+ background: url("../images/header-bike.jpg") no-repeat center/cover;
+ padding: 4rem 2rem;
+ color: #fff;
+ border-radius: 3px;
}
.hero h1 {
- margin-bottom: 1rem;
- font-size: 2.5rem;
+ font-size: 2.8rem;
+ font-weight: 700;
+ margin-bottom: 0.5rem;
}
.hero p {
+ margin-bottom: 1.5rem;
font-size: 1.2rem;
- margin-bottom: 2rem;
}
-
-/* Headings */
-
+/* INTRO SECTION */
.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;
+ font-size: 0.9rem;
+ margin-bottom: 1rem;
+ border-bottom: 2px solid #e85c2b;
+ padding-bottom: 0.5rem;
}
-.heading-underline:before {
- content: "";
- position: absolute;
- bottom: -2px;
- left: 0;
- width: 25%;
- height: 2px;
- max-width: 100px;
- background: var(--orange-dark);
+.card {
+ border: 1px solid #ddd;
+ padding: 1.5rem;
+ margin-bottom: 1rem;
+ border-radius: 3px;
}
-
-/* Article */
-
-.article {
- margin-bottom: 1rem;
+.read-more {
+ display: inline-block;
+ margin-top: 1rem;
+ color: #e85c2b;
+ text-decoration: none;
+ font-weight: 600;
}
-.article__title {
- margin-bottom: 0.5rem;
- font-size: 1rem;
- font-weight: 700;
+.read-more:hover {
+ text-decoration: underline;
}
-.article__title-link {
- text-decoration: none;
- color: var(--orange-dark);
+/* SIDEBAR */
+.sidebar h2 {
+ font-size: 0.9rem;
+ text-transform: uppercase;
+ margin-bottom: 1rem;
+ border-bottom: 2px solid #eee;
+ padding-bottom: 0.5rem;
}
-.article__summary {
- margin-top: 0;
+.article {
+ display: flex;
+ gap: 1rem;
+ align-items: flex-start;
margin-bottom: 1rem;
+ border: 1px solid #ddd;
+ padding: 1rem;
+ border-radius: 3px;
}
.article__thumbnail {
+ width: 60px;
+ height: 60px;
object-fit: contain;
- width: 5rem;
}
-.article__read-more {
- margin-top: 0;
-}
-
-.article__read-more a {
- font-size: 0.85rem;
+.article__title-link {
font-weight: 700;
- color: var(--orange-dark);
+ color: #e85c2b;
text-decoration: none;
}
-.article__read-more a:hover,
-.article__read-more a:focus {
+.article__title-link:hover {
text-decoration: underline;
}
-.fa {
- margin-right: 0.5rem;
- color: var(--orange-dark);
-}
-
.facebook-link {
- color: var(--orange-dark);
+ display: inline-block;
+ margin-top: 1rem;
+ color: #e85c2b;
+ text-decoration: none;
+ font-weight: 600;
}
-/* Sidebar */
-
-.sidebar {
- display: flex;
- flex-direction: column;
- min-width: 350px;
+.facebook-link:hover {
+ text-decoration: underline;
}
-/* Footer */
-
+/* FOOTER */
.footer {
- margin-top: 2rem;
-}
-
-.footer__content {
- 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: 2rem;
+ margin-top: 2rem;
+ border-top: 1px solid #eee;
}
-/* Media queries */
-
-@media screen and (min-width: 992px) {
- .content {
- flex-direction: row;
- }
-
- .main {
- padding-right: 2rem;
- }
+.footer p:first-child {
+ font-weight: bold;
}
-
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ 
- 
-
- 
- 
+