-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
212 lines (193 loc) · 9.24 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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> All Across Wales | About </title>
<!-- Style sheets -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/responsivity.css">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
</head>
<body id="index-sheet">
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-light" id="nav-bar-marathon">
<div class="container-fluid">
<div class="d-flex flex-row">
<a class="navbar-brand" href="">
<img src="/img/logos/logo3.png" alt="Logo - Man running past the finish line.">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/index.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/registration.html">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/results.html">Results</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#donate">Donate</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact-sheet">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- End of Navigation Bar -->
<!-- Start of Main Page -->
<main>
<div class="container-fluid" id="main-page">
<div class="row">
<!-- Front Page -->
<div class="col-12" id="front-page">
<!-- Written Content -->
<div class="written">
<h1>
Welcome to the All Across Wales Marathon <br>
</h1>
<p class="marathon-text">
We, the All Across Foundation, are here to provide you with an experience
that accepts all individuals as we run across the great lands that comprise Wales.
</p>
<p class="marathon-text">
We are a non-profitable organization and are maintained by your donations! Feel free
to donate to us and help continue this great anual tradition!
</p>
</div>
<!-- End of Written Content -->
<!-- Interactive Buttons -->
<div class="col-12" id="buttons-front">
<button type="button" class="btn btn-outline-warning border-2">
<a href="/"> Make a Change! </a>
</button>
<button type="button" class="btn btn-outline-warning border-2">
<a href="/registration.html" target="_BLANK"> Register! </a>
</button>
</div>
<!-- End of Interactive Buttons -->
</div>
<!-- End of Front Page -->
</div>
</div>
</main>
<!-- End of Main Page -->
<!-- Start of 1st Section - Donate -->
<section id="donate">
<div class="container-fluid justify-content-center">
<div class="row d-flex justify-content-center">
<div class="col-12 col-lg-6 order-2 donate-text">
<h2 class="py-3">Donate to the All Across Foundation!</h2>
<p>
We at the All Across Foundation provide support and care to those who cannot afford treatment
for cardiovascular disease. To help fund this effort, we host the annual Across-Wales Marathon
that unites the many boroughs and cities of Wales under this great event that begins on the
edges of Swansea and ends in the town of Pembroke.
</p>
<p>
If not for the funds that we receive annually, we would be unable to host this great event, let
alone help those who benefit from the good will that it inspires.
</p>
<h2 class="py-3">Remember!</h2>
<p>
In the UK alone, around 7.4 million people live with heart and circulatory disease, just over
ten percent of the kingdom's population. Do not wait until it is too late! Go see a doctor and
get help - you are not alone!
</p>
</div>
<!-- Side image -->
<div class="col-lg-6 order-1 d-none d-lg-block donate-img">
<img src="/img/auxiliary/blood-pressure.jpg"
alt="Nurse measuring the heart pressure of another nurse.">
<div class="container">
<button type="button" class="btn btn-outline-warning border-2 donate-button">
<a href="#donate"> Make a Change! </a>
</button>
</div>
</div>
</div>
</section>
<!-- End of Section - Donate -->
<!-- 2nd Section - Contact -->
<section id="contact-sheet">
<div class="container">
<h2 class="py-3"> Contact Us </h2>
<p>
If you wish to contact us with the All Across Foundation, contact us via our social medias.
Otherwise, please call the number below or send us an email, and we will get back to you as soon as
possible!
</p>
<hr>
<div class="contact-inputs container-fluid">
<div class="row d-flex flex-row">
<div class="col-12 col-md-6 order-1">
<div class="info num">
<div class="c-number contact">
<div class="text-center">
<span>#</span>
</div>
<div class="number">
01234 123 12 12
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 order-2">
<div class="info em">
<div class="c-email contact">
<div class="text-center">
<span>@</span>
</div>
<div class="email">
public@allacross.co.uk
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="container-fluid icons">
<a href="/">
<img src="/img/icons/facebook.png" alt="Facebook Icon">
</a>
<a href="/">
<img src="/img/icons/instagram.png" alt="Instagram Icon">
</a>
<a href="/">
<img src="/img/icons/twitter.png" alt="Twitter Icon">
</a>
<a href="/">
<img src="/img/icons/linkedin.png" alt="LinkedIn Icon">
</a>
</div>
</div>
</section>
<footer>
<div class="logo container-fluid d-flex flex-row justify-content-center">
<div class="f-logo">
<img class="img-fluid" src="/img/logos/logo1.png" alt="Secondary logo - Man crossing finish line">
</div>
</div>
<div class="rights container-fluid">
<h5 class="text-center">Across Wales Marathon - Student Project - Created by Lucas Faustino Axelson</h5>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous">
</script>
</body>
</html>