Skip to content

ZA | May-2025 | Malusi Skunyana | Bikes For Refugees #526

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MalusiS wants to merge 23 commits into
base: main
Choose a base branch
from
Open

ZA | May-2025 | Malusi Skunyana | Bikes For Refugees #526

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
c383472
updated code indentation and spacing
MalusiS May 18, 2025
fa10c33
replaced <div>s with semantic HTML tags
MalusiS May 18, 2025
0774670
removed unnecessary classes
MalusiS May 18, 2025
d005804
replaced unnecessary classes with elements
MalusiS May 18, 2025
ddc11b5
updated hero section styling
MalusiS May 18, 2025
9de42a5
created a <div> for the hero section buttons
MalusiS May 18, 2025
cc1c862
updated hover effects of the second hero section button
MalusiS May 18, 2025
061d708
created global button styling rules
MalusiS May 18, 2025
097700c
set all button borders to {none}
MalusiS May 18, 2025
a630f60
fixed .sidebar image links and added alt text
MalusiS May 19, 2025
24a9287
created new rules for .sidebar articles
MalusiS May 19, 2025
87ae0f6
updated margins and alignment of .sidebar elements
MalusiS May 19, 2025
c4a72c1
updated the padding of navigation links
MalusiS May 19, 2025
3bd42ae
updated buttons
MalusiS May 19, 2025
f171cc0
created a <div> with class {main_articles}
MalusiS May 19, 2025
be54924
created {main-article} class
MalusiS May 19, 2025
a197ed3
created styling rules for the main article classes
MalusiS May 19, 2025
539faac
resized hero image
MalusiS May 19, 2025
9fa63b0
changed font size of .sidebar article
MalusiS May 19, 2025
97fed87
change text alignment of .main-article
MalusiS May 19, 2025
b0e561b
changed margins and font-size of articles in the <main>
MalusiS May 19, 2025
e42658a
changed hover effects of the first hero button
MalusiS May 19, 2025
613abfe
created hover effects for links in the top navigation menu
MalusiS May 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
297 changes: 157 additions & 140 deletions index.html
View file
Open in desktop
Copy link

@fearcyf fearcyf May 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Formating can be improved. Centering the text and better use of headers will help.

Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
Expand All @@ -16,164 +18,179 @@
/>
<link rel="stylesheet" href="styles/style.css" />

<title>Bikes for Refugees</title>
<title>Bikes for Refugees</title>

</head>

<body>
<div class="header">

<a href="#">
<img
src="images/bikes-for-refugees_logo.jpg"
alt="Logo for Bikes for Refugees Scotland"
class="header__logo"
/>
</a>
<header>

<a href="#">
<img
src="images/bikes-for-refugees_logo.jpg"
alt="Logo for Bikes for Refugees Scotland"
class="header__logo"
/>
</a>

<nav>
<ul class="navigation__list">
<li class="navigation__item">
<a class="navigation__link" href="#">Home</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#">About Us</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#">News & Events</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#">Contact Us</a>
</li>
</ul>
</nav>

<button>Donate Now</button>

</header>

<section class="content">

<main>

<aside class="alert">
You've helped us give <span class="text-highlight">72</span> bikes
to refugees and asylum seekers so far. <strong>Thank you!</strong>
</aside>

<section class="hero">
<h1>Bikes for Refugees</h1>
<p>
Providing donated bikes and accessories to refugees and asylum
seekers in Scotland.
</p>
<div class="hero_buttons">
<button>Donate a bike</button>
<button>Volunteer</button>
</div>
</section>

<div>
<ul class="navigation__list">
<li class="navigation__item">
<a class="navigation__link" href="#">Home</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#">About Us</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#">News & Events</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#">Contact Us</a>
</li>
</ul>
</div>

<button>Donate Now</button>

</div>

<div class="content">
<div class="main">
<div class="alert">
You've helped us give <span class="text-highlight">72</span> bikes
to refugees and asylum seekers so far. <strong>Thank you!</strong>
</div>
<section>

<div class="hero">
<h1>Bikes for Refugees</h1>
<p>
Providing donated bikes and accessories to refugees and asylum
seekers in Scotland.
</p>
<button>Donate a bike today</button>
<button>Volunteer</button>
</div>
<h2 class="heading-underline">Learn more</h2>

<div>
<h2 class="heading-underline">Learn more</h2>

<div>
<div class="article">
<h3 class="article__title">Why do refugees need bikes?</h3>
<p class="article__summary">
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.
</p>
<p class="article__read-more">
<a href="#">
<span class="arrow-right"></span>
Learn more
</a>
</p>
</div>

<div class="article">
<h3 class="article__title">How can I help?</h3>
<p class="article__summary">
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.
</p>
<p class="article__read-more">
<a href="#">
<span class="arrow-right"></span>
Learn more
</a>
</p>
</div>
</div>
</div>
</div>

<div class="sidebar">
<h2 class="heading-underline">Upcoming events</h2>

<div class="article">
<img
class="article__thumbnail"
src="spring-fundraisers_thumbnail.jpg"
alt=""
/>
<div class="article__content">
<h3 class="article__title">
<a class="article__title-link" href="#">Join us for our Spring fundraisers</a>
</h3>
<div class="main_articles">

<article class="main-article">
<h3 class="article__title">Why do refugees need bikes?</h3>
<p class="article__summary">
Riders needed now to help raise awareness and funds for BfR and
Médecins Sans Frontières.
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.
</p>
</div>
</div>
<p class="article__read-more">
<a href="#">
<span class="arrow-right"></span>
Learn more
</a>
</p>
</article>

<article class="main-article">
<h3 class="article__title">How can I help?</h3>
<p class="article__summary">
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.
</p>
<p class="article__read-more">
<a href="#">
<span class="arrow-right"></span>
Learn more
</a>
</p>
</article>

<div class="article">
<img
class="article__thumbnail"
src="bikes-for-refugees_logo.jpg"
alt=""
/>
<div class="article__content">
<h3 class="article__title">
<a class="article__title-link" href="#">Bike dropoff event in Edinburgh on May 11</a>
</h3>
</div>
</div>

<div class="article">
<img
class="article__thumbnail"
src="edinburgh-damascus_thumbnail.png"
Copy link

@fearcyf fearcyf May 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pictures aren't showing on your web-page

Copy link
Author

@MalusiS MalusiS May 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The images are showing, just like in the original. Please see the attached screenshot. There may be an issue on your side.

Screenshot from 2025-05-20 20-15-14

Copy link

@fearcyf fearcyf May 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ran your code again in my browser - not showing. I'll try again tomorrow.

Copy link

@fearcyf fearcyf May 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's giving me a 404 error

Copy link
Author

@MalusiS MalusiS May 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is very strange because on my side it is fine.

Screenshot from 2025-05-20 21-32-59

alt=""
/>
<div class="article__content">
<h3 class="article__title">
<a class="article__title-link" href="#">Help us cycle 4,797km</a>
</h3>
<p class="article__summary">
We need you to help us cycle 4797km, the distance of Edinburgh
to Damascus.
</p>
</div>
</section>

</main>

<aside class="sidebar">
<h2 class="heading-underline">Upcoming events</h2>

<article>
<img
class="article__thumbnail"
src="./images/spring-fundraisers_thumbnail.jpg"
alt="A tree branch with pink flowers"
/>
<div class="article__content">
<h3 class="article__title">
<a class="article__title-link" href="#">Join us for our Spring fundraisers</a>
</h3>
<p class="article__summary">
Riders needed now to help raise awareness and funds for BfR and
Médecins Sans Frontières.
</p>
</div>
</article>

<article>
<img
class="article__thumbnail"
src="./images/bikes-for-refugees_logo.jpg"
alt="A logo for Bikes for Refugees Scotland"
/>
<div class="article__content">
<h3 class="article__title">
<a class="article__title-link" href="#">Bike dropoff event in Edinburgh on May 11</a>
</h3>
</div>
</article>

<article>
<img
class="article__thumbnail"
src="./images/edinburgh-damascus_thumbnail.png"
alt="A signpost of the route from Edinburgh to Damascus"
/>
<div class="article__content">
<h3 class="article__title">
<a class="article__title-link" href="#">Help us cycle 4,797km</a>
</h3>
<p class="article__summary">
We need you to help us cycle 4797km, the distance of Edinburgh
to Damascus.
</p>
</div>
</article>

<a
href="https://www.facebook.com/BikesforRefugeesScotland/events/?ref=page_internal"
target="_blank"
class="facebook-link"
>
<span class="fa fa-facebook-square"></span>
All Facebook events
</a>

<a
href="https://www.facebook.com/BikesforRefugeesScotland/events/?ref=page_internal"
target="_blank"
class="facebook-link"
>
<span class="fa fa-facebook-square"></span>
All Facebook events
</a>
</div>
</div>

<div class="footer">
</aside>

</section>

<footer>
<div class="footer__content">
<p>
<strong>Bikes for Refugees Scotland is a volunteer-led project to help
people explore and make connections with their local communities.</strong>
</p>
<p>Website by Code Your Future</p>
</div>
</div>
</div>
</footer>

</body>
</html>

</html>
Loading