From a34faf8dc2d59489548551230554bf0f45d7e19d Mon Sep 17 00:00:00 2001 From: Tam Date: Tue, 30 Sep 2025 00:12:04 +0200 Subject: [PATCH] homework about refugee's bike modified --- .idea/.gitignore | 8 ++++ .idea/.name | 1 + .idea/bikes-for-refugees.iml | 12 +++++ .idea/modules.xml | 8 ++++ .idea/vcs.xml | 6 +++ index.html | 46 +++++++++--------- styles/style.css | 91 ++++++++++++++++++++++++++++++++++-- 7 files changed, 144 insertions(+), 28 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/.name create mode 100644 .idea/bikes-for-refugees.iml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 00000000..13566b81 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/.name b/.idea/.name new file mode 100644 index 00000000..64233a9e --- /dev/null +++ b/.idea/.name @@ -0,0 +1 @@ +index.html \ No newline at end of file diff --git a/.idea/bikes-for-refugees.iml b/.idea/bikes-for-refugees.iml new file mode 100644 index 00000000..24643cc3 --- /dev/null +++ b/.idea/bikes-for-refugees.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 00000000..3aaaabd0 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 00000000..35eb1ddf --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 76254c13..92249150 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@ -
+
-
+
+ -
+ -
+
You've helped us give 72 bikes @@ -59,19 +59,19 @@
-

Bikes for Refugees

-

+

Bikes for Refugees

+

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

- - + +
-
+

Learn more

-
+

Why do refugees need bikes?

@@ -101,17 +101,17 @@

How can I help?

-
+
-
+ +
-
+

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

Website by Code Your Future

-
+ diff --git a/styles/style.css b/styles/style.css index 4d1c088e..56333fe8 100644 --- a/styles/style.css +++ b/styles/style.css @@ -23,6 +23,25 @@ button { color: var(--grey-dark); font-size: 1rem; } +button { + font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; + color: var(--white); + font-size: 1rem; + background-color: var(--orange-dark); + border: none; + outline: none; + border-radius: 3px; +} + +button:hover { + font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; + color: var(--orange-dark); + font-size: 1rem; + background-color: var(--white); + border: none; + outline: none; + border-radius: 3px; +} h1,h2,h3,h4,h5,h6 { margin-top: 0; @@ -66,7 +85,7 @@ p { } .navigation__item { - padding: 0.5rem 0; + padding: 0.5rem 15px; } .navigation__link { @@ -103,6 +122,7 @@ p { .content { display: flex; flex-direction: column; + align-items: stretch; } /* Alert */ @@ -120,10 +140,38 @@ p { /* hero */ .hero { - background-image: url("header-bike.jpg"); + background-image: url("../images/header-bike.jpg"); background-color: var(--grey-light); + color: var(--white); + /*background-position: 100%;*/ + height: 360px; + background-size: cover; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 5px; + padding-left: 35px; + flex-direction: row; +} + +.part1 { + position: relative; + top: 50px; +} +.part2 { + position: relative; + top: -10px; +} + +.part3 { + position: relative; + bottom: 80px; } +.part4 { + position: relative; + top: 50px; +} .hero h1 { margin-bottom: 1rem; font-size: 2.5rem; @@ -161,10 +209,16 @@ p { /* Article */ -.article { +article { margin-bottom: 1rem; + display: flex; + gap: 10px; +} +.article { + border: 2px solid var(--grey-light); + border-radius: 3px; + padding: 1rem; } - .article__title { margin-bottom: 0.5rem; font-size: 1rem; @@ -184,6 +238,7 @@ p { .article__thumbnail { object-fit: contain; width: 5rem; + padding-left: 10px; } .article__read-more { @@ -209,14 +264,18 @@ p { .facebook-link { color: var(--orange-dark); + text-align: right; } /* Sidebar */ .sidebar { - display: flex; + /*display: flex;*/ flex-direction: column; min-width: 350px; + position: relative; + top: -300px; + } /* Footer */ @@ -237,6 +296,10 @@ p { font-size: 0.85rem; } +a:hover { + color: var(--orange-dark); +} + /* Media queries */ @media screen and (min-width: 992px) { @@ -248,3 +311,21 @@ p { padding-right: 2rem; } } +aside { + display: flex; + justify-content: flex-end; + flex-direction: row; + row-gap: 1rem; +} + +/*for the images and the texts on the right side*/ +.article2 { + display: flex; + gap: 1rem; + border: 2px solid var(--grey-light); + border-radius: 3px; +} +.footer { + position: relative; + top: 25px; +} \ No newline at end of file