-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathaboutchelsea.html
283 lines (256 loc) · 9.78 KB
/
aboutchelsea.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
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" />
<meta charset="UTF-8" />
<title>Chelsea Works</title>
<!--Style for header & footer-->
<style>
h4 {
font-size: 50px;
color: navy;
text-shadow: 2px 2px 5px gold;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
text-align: center;
background-color: royalblue;
margin: 35px;
}
header {
background-color: rgb(33, 33, 214);
height: 75px;
border-bottom: 2px solid darkblue;
}
body {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
background-color: white;
margin: 0;
}
.badge {
margin: 5px 20px;
text-align: right;
}
.topnav {
float: left;
text-align: left;
margin: 25px;
list-style: none;
display: block;
}
.topnav li {
margin: 10px;
padding: 10px 15px;
float: left;
display: block;
text-align: left;
}
.topnav a {
text-decoration: none;
color: whitesmoke;
font-weight: 600;
font-size: 18px;
}
#select-navegation {
background-color: navy;
border-radius: 5px;
}
footer {
padding: 5px;
padding-right: 20px;
background-color: rgb(33, 33, 214);
color: white;
display: flex;
justify-content: space-between;
}
</style>
<!--Style for page -->
<style>
h1 {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
color: royalblue;
font-size: 40px;
padding: 10px;
line-height: 1;
text-align: center;
}
.general-information {
padding-left: 50px;
padding-right: 50px;
display: block;
}
.general-information h1 {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 40px;
padding: 10px;
}
.cont-geneal-information {
width: 100%;
}
.cont-geneal-information img {
width: 100%;
margin-top: 5px;
text-align: center;
}
h2 {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
color: royalblue;
font-size: 40px;
padding: 10px;
line-height: 1;
text-align: center;
}
h3 {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
color: royalblue;
font-size: 40px;
padding: 10px;
line-height: 1;
text-align: center;
}
.pic1 {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.pic2 {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.general-information-text {
padding-top: 10px;
width: 100%;
text-align: center;
vertical-align: middle;
font-family: 'Times New Roman', Times, serif;
font-size: 24px;
}
h3:hover {
color: black;
}
a:hover {
color: white;
background-color: black;
padding: 10px
}
#btn1 {
color: gold;
background-color: navy;
border: 3px solid gold;
height: 50px;
}
#btn2 {
color: gold;
background-color: navy;
border: 3px solid gold;
height: 50px;
}
#btn3 {
color: gold;
background-color: navy;
border: 3px solid gold;
height: 50px;
}
</style>
</head>
<body>
<header>
<img src="images\Chelsea-FC-icon.png" class="badge" alt="badge" width="60" height="60" class="pic2" />
<ul class="topnav">
<li id="select-navegation">
<a href="index.html">HOME PAGE</a>
</li>
<li><a href='aboutchelsea.html'>ABOUT CHELSEA</a></li>
<li><a href='squad.html'>SQUAD</a></li>
<li><a href='matches.html'>MATCHES</a></li>
<li><a href='stamfordbridge.html'>STAMFORD BRIDGE</a></li>
<li><a href='contactus.html'>CONTACT</a></li>
</ul>
</header>
<h4>CHELSEA WORKS</h4>
<div style="height: 400px;">
<img src="images\chelseaflag.png" alt="flag" width="100%" height="100%" />
<br>
</div>
<div class="general-information">
<div class="cont-general-information">
<br>
<h3>About Chelsea</h3>
<div>
<img src="images\generalinfo.jpg" alt="aboutchelsea" width="300" height="300" class="pic1" />
</div>
<div class="general-information-text">
<p>
Chelsea Football Club is an English professional football club based in Fulham, West London. Founded
in 1905, the club competes in the Premier League, the top division of English football.
Domestically, the club has won six league titles, eight FA Cups, five League Cups, and four FA
Community Shields. They are nicknamed the Blues because of their badge logo being composed of a
royal blue, gold, white and red. The training ground is located near Cobham in Surrey but sessions
are not open to the general public. Instead special open days are occasionally organized at Stamford
Bridge where fans can see the team train.
</p>
<div class="mid" id="HiddenDiv" style="display: none;">
Chelsea are one of five clubs to have won all three of UEFA's main club competitions, the first
English club to achieve the UEFA treble, and the only London club to have won the Champions League.
Chelsea's home kit colours are royal blue shirts and shorts with white socks.
The past twenty-five years have been the most successful in Chelsea's history: they have won five
Premier League titles, seven FA Cups, four League Cups, two UEFA Champions League titles, two UEFA
Europa League titles, two UEFA Super Cups, and one FIFA Club World Cup during this period.
</div>
<button id="btn1" onclick="readMore('HiddenDiv')">Read More</button>
<hr />
</div>
<div class="cont-general-information">
<h3>History</h3>
<div>
<img src="images\chelseahistory.jpg" alt="chelseahistory" width="300" height="300" class="pic1" />
</div>
<div class="general-information-text">
<p>
The story of the Blues (or the Pensioners as the team was originally nicknamed) is revealed in
words, images and videos - from the dreams of the founders realised in the best stadium in the
land, to drawing big crowds with big stars, to modernising the club and winning trophies before
a financial collapse and memorable recovery, and then the upward path to the current era.
</p>
<button id="btn2" class="float-left submit-button">Learn More</button>
<hr />
</div>
<br>
<h3>Club Partners</h3>
<div>
<img src="images/chelsea-kit-three-sponsors (1).jpg" alt="chelsea-kit-three-sponsors" width="200"
height="200" class="pic1" />
</div>
<div class="general-information-text">
<p>
Nike, which agreed a 15-year-deal worth £900m to provide Chelsea's kit in 2016, said it was not
commenting on the day's Abramovich news, or where it might leave the deal. Three, who has
sponsored Chelsea since 2020, are keen for the partnership to be put on hold rather than
cancelled as new ownership would rectify any problems. The current agreement, which is thought
to be worth £40 million per year, is set to run until the summer of 2023.
</p>
<button id="btn3" class="float-left submit-button">BUY MERCH</button>
<hr />
</div>
<footer>
Chelsea Works © 2022
</footer>
</body>
<script>
function readMore(divId) {
if (document.getElementById(divId).style.display == 'none') {
document.getElementById(divId).style.display = 'block';
}
else {
document.getElementById(divId).style.display = 'none';
}
};
document.getElementById("btn2").onclick = function () {
location.href = "https://www.chelseafc.com/en/history";
};
document.getElementById("btn3").onclick = function () {
location.href = "https://www.nike.com/w/chelsea-fc-2yc65";
};
</script>
</html>