forked from CodeYourFuture/bikes-for-refugees
/
index.html
148 lines (135 loc) · 6.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!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">
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//maxcdn.bootstrapcdn.com">
<link rel="dns-prefetch" href="//code.jquery.com">
<link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/style.css">
<title>Bikes for Refugees | Scotland</title>
</head>
<body>
<div class="header container">
<div class="navigation navbar navbar-toggleable-md navbar-light">
<button class="navigation__toggle navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navigation__toggle-icon navbar-toggler-icon"></span>
</button>
<a class="navigation__logo navbar-brand" href="/" >
<img class="img-fluid" src="images/bikes-for-refugees_logo.jpg" alt="Logo for Bikes for Refugees Scotland">
<h1 class="sr-only">Bikes for Refugees Scotland - Providing donated bikes and accessories to refugees and asylum seekers.</h1>
</a>
<div class="navigation__content collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News & Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
<button>Donate Now</button>
</div>
</div>
</div>
<div id="content" class="container">
<div class="alert">
You've helped us give <span id="donation-count-alert">72</span> bikes to refugees and asylum seekers. <strong>Thank you!</strong>
</div>
<div class="row">
<div class="main col-lg-8">
<div class="jumbotron">
<h1>Bikes for Refugees</h1>
<p>Providing donated bikes and accessories to refugees and asylum seekers in Scotland.</p>
<hr class="my-4">
<button>Donate a bike today</button>
<button>Volunteer</button>
</div>
<div>
<h2 class="heading-underline">Learn more</h2>
<article class="article">
<h6 class="article__title">
Why do refugees need bikes?
</h6>
<p>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="fa fa-caret-right"></span>
Learn more
</a>
</p>
</article>
<article class="article">
<h6 class="article__title">
How can I help?
</h6>
<p>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="fa fa-caret-right"></span>
Learn more
</a>
</p>
</article>
</div>
</div>
<div class="sidebar col-lg-4">
<h2 class="heading-underline">Upcoming events</h2>
<article class="article">
<a href="#">
<img class="img-fluid" src="https://raw.githubusercontent.com/Code-Your-Future/syllabus/master/html-css/assets/news-spring-fundraisers.jpg" alt="">
</a>
<h6 class="article__title article__title--sidebar">
<a href="#">Join us for our Spring fundraisers</a>
</h6>
<p>Riders needed now to help raise awareness and funds for BfR and Médecins Sans Frontières.</p>
</article>
<article class="article">
<a href="#">
<img class="img-fluid" src="https://raw.githubusercontent.com/Code-Your-Future/syllabus/master/html-css/assets/bikes-for-refugees-logo.jpg" alt="">
</a>
<h6 class="article__title article__title--sidebar">
<a href="#">Bike dropoff event in Edinburgh on May 11</a>
</h6>
</article>
<article class="article">
<a href="#">
<img class="img-fluid" src="https://raw.githubusercontent.com/Code-Your-Future/syllabus/master/html-css/assets/news-cycle.jpg" alt="">
</a>
<h6 class="article__title article__title--sidebar">
<a href="#">Help us cycle 4,797km</a>
</h6>
<p>We need you to help us cycle 4797km, the distance of Edinburgh to Damascus.</p>
</article>
<a href="https://www.facebook.com/BikesforRefugeesScotland/events/?ref=page_internal" class="facebook-link">
<span class="fa fa-facebook-square"></span>
All Facebook events
</a>
</div>
</div> <!-- end of row -->
</div>
<div class="footer container">
<div class="row">
<div class="col-lg-8">
<p class="text-center">
Bikes for Refugees Scotland is a volunteer-led project to help people explore and make connections with their local communities.
</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>