-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
251 lines (243 loc) · 11.8 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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<title>Afcon2022 Cameroon</title>
</head>
<body>
<header>
<h1 class="sr-only">The header with navigation links</h1>
<nav class="mobile navbar navbar-expand-md d-md-none wrapper">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<i class="fas fa-bars c-main"></i>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav bg-light p-3">
<li class="nav-item">
<a class="nav-link c-main active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link c-main" href="about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link c-main" href="tickets.html">Tickets</a>
</li>
</ul>
</div>
</nav>
<nav class="d-none d-md-flex justify-content-end w-100 bg-main wrapper">
<ul class="top-nav">
<li class="d-inline-block px-2 py-1"><a href="https://www.facebook.com" class="text-light"><i class="fab fa-facebook-f"></i></a></li>
<li class="d-inline-block px-2 py-1"><a href="https://www.twitter.com" class="text-light"><i class="fab fa-twitter"></i></a></li>
<li class="d-inline-block px-2 py-1"><a href="#" class="text-light">English</a></li>
<li class="d-inline-block px-2 py-1"><a href="#" class="text-light">My Page</a></li>
<li class="d-inline-block px-2 py-1"><a href="#" class="text-light">Logout</a></li>
</ul>
</nav>
</header>
<nav class="sticky d-none d-md-flex justify-content-between wrapper bg-light shadow-sm">
<a href="index.html"><img class="logo" src="assets/caf-logo.png" alt="CAF logo"></a>
<ul class="bottom-nav">
<li class="d-inline-block p-3"><a class="c-main" href="about.html">About</a></li>
<li class="d-inline-block p-3"><a class="c-main" href="tickets.html">Tickets</a></li>
<li class="d-inline-block pl-3 py-2 pr-0"><a class="c-sec btn" href="tickets.html">Buy Ticket</a></li>
</ul>
</nav>
<main>
<section class="hero wrapper">
<h2 class="sr-only">This is the hero</h2>
<div class="welcome">
<p class="lead c-sec intro">"A Football Jamboree"</p>
<h2 class="c-sec bolder">AFRICAN CUP OF NATIONS, CAMEROON 2022</h2>
</div>
<div class="content">
<p class="c-main">The CAF Africa Cup of Nations, officially CAN, also referred to as AFCON, or Total Africa Cup of Nations after its headline sponsor, is the main international men's association football competition in Africa.</p>
</div>
<div class="date c-main">
<h2>2022.01.10(SAT) ~ 02.07(SUN)</h2>
<p>@ Yaounde, Douala, Limbe, Garoua, Bafoussam</p>
</div>
</section>
<section class="fixtures bg-main py-5 wrapper">
<h3 class="text-light text-center">Fixtures</h3>
<div class="line mx-auto my-3"></div>
<div class="row no-gutters ">
<div class="col-12 col-md fixture px-3 m-1 text-light">
<img class="image" src="assets/1.jpg" alt="Group A">
<h4 class="c-sec">Group A</h4>
<ul class="teams">
<li>Cameroon</li>
<li>Egypt</li>
<li>Senega</li>
<li>South Africa</li>
</ul>
</div>
<div class="col-12 col-md fixture px-3 m-1 text-light">
<img class="image" src="assets/2.jpg" alt="Group A">
<h4 class="c-sec">Group B</h4>
<ul class="teams">
<li>Nigeria</li>
<li>Moroco</li>
<li>Cape Verde</li>
<li>Togo</li>
</ul>
</div>
<div class="col-12 col-md fixture px-3 m-1 text-light">
<img class="image" src="assets/3.jpg" alt="Group A">
<h4 class="c-sec">Group C</h4>
<ul class="teams">
<li>Niger</li>
<li>Algeria</li>
<li>Mali</li>
<li>Bukina Faso</li>
</ul>
</div>
<div class="col-12 col-md d-lg-show fixture px-3 m-1 text-light">
<img class="image" src="assets/4.jpg" alt="Group A">
<h4 class="c-sec">Group D</h4>
<ul class="teams">
<li>Liberia</li>
<li>Equatoria Gunie</li>
<li>Kenya</li>
<li>Ethopia</li>
</ul>
</div>
<div class="col-12 col-md d-xl-show fixture px-3 m-1 text-light">
<img class="image" src="assets/5.jpg" alt="Group A">
<h4 class="c-sec">Group E</h4>
<ul class="teams">
<li>Tanzania</li>
<li>Uganda</li>
<li>South Sudan</li>
<li>Ghana</li>
</ul>
</div>
<div class="col-12 d-md-none fixture px-3 m-1 text-light">
<img class="image" src="assets/6.jpg" alt="Group A">
<h4 class="c-sec">Group F</h4>
<ul class="teams">
<li>Madagasca</li>
<li>Namibia</li>
<li>Ivory Coast</li>
<li>Gabon</li>
</ul>
</div>
</div>
<div class="d-flex justify-content-center mt-5">
<button type="button" class="btn bg-sec text-light w-75 py-3 bolder d-md-none">Reserve Your Spot Today</button>
<a class="see-all btn c-grey w-75 bolder d-none d-md-block" href="#">SEE ALL FIXTURES</a>
</div>
</section>
<section class="featured py-5 wrapper">
<h3 class="c-main text-center">Featured Players</h3>
<div class="line mx-auto my-3"></div>
<div class="row no-gutters justify-content-between">
<div class="col-12 col-md-6 player-wrapper my-4">
<figure>
<img class="checkboard" src="assets/checkboard.png" alt="checkboard">
<img class="player" src="assets/mane.jpg" alt="sadio mane">
</figure>
<div class="pl-2">
<h4 class="my-2">Sadio Mane</h4>
<p class="c-sec">Country: Senega | Club: Liverpool</p>
<div class="line-short my-3"></div>
<p class="small">Crowned the African Footballer of the Year in January, Mane was entirely deserving of this award.</p>
</div>
</div>
<div class="col-12 col-md-6 player-wrapper my-4">
<figure>
<img class="checkboard" src="assets/checkboard.png" alt="checkboard">
<img class="player" src="assets/salah.jpg" alt="mohamed salah">
</figure>
<div class="pl-2">
<h4 class="my-2">Mohamed Salah</h4>
<p class="c-sec">Country: Egypt | Club: Liverpool</p>
<div class="line-short my-3"></div>
<p class="small">Salah continues to achieve a measure of excellence in the Premier League that few other players can match.</p>
</div>
</div>
<div class="col-12 col-md-6 player-wrapper my-4 d-none d-md-flex">
<figure>
<img class="checkboard" src="assets/checkboard.png" alt="checkboard">
<img class="player" src="assets/hakimi.jpg" alt="mohamed salah">
</figure>
<div class="pl-2">
<h4 class="my-2">Achraf Hakimi</h4>
<p class="c-sec">Country: Moroco | Club: Inter Milan</p>
<div class="line-short my-3"></div>
<p class="small">His 10 assists puts him joint fourth in the Bundesliga, while he’s also chipped in with three goals in the league</p>
</div>
</div>
<div class="col-12 col-md-6 player-wrapper my-4 d-none d-md-flex">
<figure>
<img class="checkboard" src="assets/checkboard.png" alt="checkboard">
<img class="player" src="assets/mahrez.jpg" alt="sadio mane">
</figure>
<div class="pl-2">
<h4 class="my-2">Riyad Mahrez</h4>
<p class="c-sec">Country: Algeria | Club: Man City</p>
<div class="line-short my-3"></div>
<p class="small">Already added to last season’s trophy haul with a League Cup victory already this term.</p>
</div>
</div>
<div class="col-12 col-md-6 player-wrapper my-4 d-none d-md-flex">
<figure>
<img class="checkboard" src="assets/checkboard.png" alt="checkboard">
<img class="player" src="assets/aubameyang.jpg" alt="mohamed salah">
</figure>
<div class="pl-2">
<h4 class="my-2">Pierre-Emerick Aubameyang</h4>
<p class="c-sec">Country: Gabon | Club: Arsenal</p>
<div class="line-short my-3"></div>
<p class="small">In another tricky campaign, he has again demonstrated his consistency in front of goal with a 1i7-goal haul.</p>
</div>
</div>
<div class="col-12 col-md-6 player-wrapper my-4 d-none d-md-flex">
<figure>
<img class="checkboard" src="assets/checkboard.png" alt="checkboard">
<img class="player" src="assets/ndidi.jpg" alt="sadio mane">
</figure>
<div class="pl-2">
<h4 class="my-2">Wilfred Ndidi</h4>
<p class="c-sec">Country: Nigeria | Club: Lichester City</p>
<div class="line-short my-3"></div>
<p class="small">Finest African defensive midfielder—and best non-attacker—in the world today</p>
</div>
</div>
</div>
<button type="button" class="btn c-main bolder btn-block border py-2 my-4 bolder d-md-none">
MORE
<i class="fas fa-angle-down c-sec"></i>
</button>
</section>
<section class="partners jumbotron jumbotron-fluid bg-main">
<h3 class="text-center c-grey">Partners</h3>
<div class="line mx-auto my-3"></div>
<div class=" d-flex justify-content-center flex-wrap mt-4 wrapper">
<img class="m-3" src="assets/total-logo.png" alt="Total Logo">
<img class="m-3" src="assets/mtn.png" alt="MTN">
<img class="m-3" src="assets/orange.png" alt="Orange">
<img class="m-3" src="assets/airtel.png" alt="Airtel">
<img class="m-3" src="assets/glo.png" alt="Airtel">
</div>
</section>
</main>
<footer class="wrapper mb-5 d-flex justify-content-between align-items-center">
<h2 class="sr-only">This is the footer</h2>
<a href="index.html"><img class="logo" src="assets/caf-logo.png" alt="CAF logo"></a>
<div class="copyright">
<p class="c-main mb-2">2022 Confederation of African Football (CAF). All rights reserved</p>
<p class="c-main text d-none d-md-block">CAF represents the national football associations of Africa, runs continental, national, and club competitions, and controls the prize money, regulations and media rights to those competitions.</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>