-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
179 lines (170 loc) · 8.43 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Blinker:wght@100&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="load-page">
<div id="load" class="center"><img src="./images/f1logocolor.png" alt=""></div>
</div>
<div class="header">
<img src="./images/F1-logo.png" alt="">
<div class="nav-links">
<a href="#" class="left" >H O M E</a>
<a href="#" class="left">L I N K</a>
<a href="#" class="left">L I N K N E W</a>
<a href="#" class="left">H O M E</a>
<a href="#" class="left">H O M E</a>
</div>
</div>
<div class="intro-paral">
<div class="content">
<h1>Dutch Grand Prix</h1> <img src="./images/dutch.png" height="20vh" alt="">
<h2 class="sub-title" id="event_Title">Free Practice 1:</h2>
<h4 class="grandPrix-duration">03 SEP - 05 SEP</h4>
</div>
<div id="countdown">
<div class="count-cont" id="count-cont">
<ul>
<li><span id="days" class="num-time" >DAYS</span></li>
<li><span id="hours"class="num-time" >HOURS</span></li>
<li><span id="minutes"class="num-time">MINUTES</span></li>
<li><span id="seconds" class="num-time">SECONDS</span></li>
</ul>
<ul>
<li><span class="timing" >DAYS</span></li>
<li><span class="timing" >HOURS</span></li>
<li><span class="timing" >MINUTES</span></li>
<li><span class="timing" >SECONDS</span></li>
</ul>
</div>
<div class="rolex-logo">
<img src="./images/rolex-logo-green.png" alt="">
</div>
</div>
<div id="content" class="emoji">
<span id="headline" >Lights Out and away we go!</span>
</div>
</div>
<h4 class="gp-name">Formula 1 Heineken Dutch Grand Prix 2021</h4>
<h1 class="circuit-name" >CIRCUIT ZANDVOORT</h1>
<div class="track-condition-container">
<div class="track-img">
<img src="./images/image.png" alt="">
</div>
<div class="track-info">
<div class="info-col-1">
<h1 class="info-title" >First Grand Prix <span class="info-ans" >1952</span> </h1>
<h1 class="info-title" >Number of Laps <span class="info-ans" >72</span> </h1>
<h1 class="info-title" >Race Distance <span class="info-ans" >306km</span> </h1>
<h1 class="info-title" >Circuit Length <span class="info-ans" >4.259km</span> </h1>
</div>
<div class="info-col-2">
<iframe width="100%" height="70%" src="https://www.youtube.com/embed/xE1tlQwFfTg" autoplay="true" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen autoplay mute></iframe>
</div>
<div class="info-wide">
<h1 class="lapRec-title">Lap Record</h1>
<h1 class="lapRecord">1:46.286</h1>
<div class="team-info">
<h3 class="driverName">Valterri Bottas</h3>
<img src="./images/amg.png" class="logo-team" alt="">
</div>
</div>
</div>
</div>
<div class="card-container">
<div class="card-style" id="card1">
<div class="img-container">
<img src="./images/card1.jpg" alt="">
</div>
<h2>Ricciardo ‘proud’ as he and McLaren team mate Norris prepare for 200th and 50th GP starts</h2>
<p>The Belgian Grand Prix will see Ricciardo become the 20th driver in history to make a 200th F1 start</p>
</div>
<div class="card-style" id="card2">
<div class="img-container">
<img src="./images/card2.jpg" alt="">
</div>
<h2>Ross Brawn on a challenging day at Spa, Russell's brilliance, and looking ahead to F1’s return to Zandvoort</h2>
<p>Formula 1 saw its shortest ever Grand Prix after torrential rain hit Spa on Sunday,</p>
</div>
<div class="card-style" id="card3">
<div class="img-container">
<img src="./images/card3.jpg" alt="max">
</div>
<h2>‘It’s not how you want to win’ says Verstappen as he’s declared the winner after handful of laps at Spa</h2>
<p>The young dutchman looks determined on taking the top spot...</p>
</div>
</div>
<section class="carousel" aria-label="Gallery">
<ol class="carousel__viewport">
<li id="carouselslide1" tabindex="0" class="carousel__slide">
<div class="content__slide">
<img src="./images/news1.jpg" alt="">
<h1>6 Winners and 5 Losers from the Belgian GP weekend – Who shone in the rain at Spa?</h1>
</div>
<div class="carousel_snapper">
<a href="#carouselslide4" class="carousel_prev">
Go to last slide
</a>
<a href="#carouselslide2" class="carousel_next">
Go to next slide
</a>
</div>
</li>
<li id="carouselslide2" tabindex="0" class="carousel__slide">
<div class="content__slide">
<img src="./images/news2.jpg" alt="">
<h1>Perez says pre-Belgian GP crash ‘could have happened to anyone’ as he praises Red Bull mechanics' repair job</h1>
</div>
<div class="carousel_snapper">
<a href="#carouselslide1" class="carousel_prev">
Go to last slide
</a>
<a href="#carouselslide3" class="carousel_next">
Go to next slide
</a>
</div>
</li>
<li id="carouselslide3" tabindex="0" class="carousel__slide">
<div class="content__slide">
<img src="./images/news3.jpg" alt="">
<h1>‘He knows what he’s talking about’ – Capito reveals what Jenson Button messaged him moments after Russell’s Q3 lap</h1>
</div>
<div class="carousel_snapper">
<a href="#carouselslide2" class="carousel_prev">
Go to last slide
</a>
<a href="#carouselslide4" class="carousel_next">
Go to next slide
</a>
</div>
</li>
<li id="carouselslide4" tabindex="0" class="carousel__slide">
<div class="content__slide">
<img src="./images/news4.jpg" alt="">
<h1>Formula 1's first-ever onboard camera compared to Alonso's visor cam, side-by-side</h1>
</div>
<div class="carousel_snapper">
<a href="#carouselslide3" class="carousel_prev">
Go to last slide
</a>
<a href="#carouselslide1" class="carousel_next">
Go to next slide
</a>
</div>
</li>
</ol>
</section>
<script src="./script.js"></script>
</body>
</html>