-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (147 loc) · 8.83 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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Rocket league event</title>
</head>
<body>
<header>
<div id="social-media" class="py-1">
<a href="#"><img src="Assets/icons/facebook.svg" alt="facebook"></a>
<a href="#"><img src="Assets/icons/twitter.svg" alt="twitter"></a>
<a href="#">English</a>
<a href="https://salimer.github.io/Portfolio/">My Page</a>
<a href="#">Logout</a>
</div>
<nav class="navbar navbar-expand-md p-1 bg-light">
<div class="container-fluid bg-light">
<a class="navbar-brand" href="index.html"><img id="top-logo" src="Assets/images/Rocket_League_logo.png" alt="Rocket_League_logo"></a>
<button id="hamburger" class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ps-3" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-lg-0">
<li class="desktop-hide">
<a href="index.html"><img id="mobile-menu-logo" src="Assets/images/Rocket_League_logo.png" alt="Rocket_League_logo"></a>
</li>
<li class="nav-item">
<a id="home" class="nav-link active" aria-current="page" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#main-program">Program</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Join</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#partner-home">Sponsor</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a id="RLCS" class="nav-link" href="#">RLCS</a>
</li>
<li class="desktop-hide">
<a href="https://www.facebook.com/s.bamahfoodh"><img src="Assets/icons/facebook.svg" alt="facebook"></a>
</li>
<li class="desktop-hide">
<a href="#"><img src="Assets/icons/twitter.svg" alt="twitter"></a>
</li>
<li class="desktop-hide">
<a href="https://salimer.github.io/Portfolio/">My Page</a>
</li>
<li class="desktop-hide">
<a href="#">Logout</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<section id="home-bg" class="headline py-5 px-4 d-flex align-items-center justify-content-center justify-content-md-start">
<div class="headline-text d-flex flex-column justify-content-center py-3">
<span>Hello, Rocket league fans</span>
<h1 class="my-2">Rocket League<br>Championship Series<br><span>2023</span></h1>
<p class="border border-3 p-3 py-3 my-4">
THE ROCKET LEAGUE CHAMPIONSHIP SERIES (RLCS) 2022-23 SEASON IS HERE. THE WORLD'S PREMIER PROFESSIONAL ROCKET LEAGUE COMPETITION IS BACK WITH $6,000,000 IN PRIZING UP FOR GRABS. SIGN UP NOW TO COMPETE AGAINST THE BEST TEAMS IN THE WORLD. DO YOU HAVE WHAT IT TAKES?
</p>
<h2>2022.10.15<span> (THU) ~ </span>16 <span>(FRI)</span></h2>
<span id="location">@ Düsseldorf, Germany at PSD Bank Dome</span>
</div>
</section>
<section id="main-program" class="main-program d-flex flex-column align-items-center p-4">
<h3 class="">↓ Main Program ↓</h3>
<div class="underline mb-4"></div>
<div class="main-program-cards">
<article class="card d-flex flex-row px-2 py-3 align-items-center my-2 flex-md-column">
<img src="Assets/icons/eye-solid.svg" class="card-img-top" alt="..">
<span class="card-title mx-2 my-0">10:00 AM</span>
<p class="card-text text-light">Doors open to the public</p>
</article>
<article class="card d-flex flex-row px-2 py-3 align-items-center my-2 flex-md-column">
<img src="Assets/icons/comments-solid.svg" class="card-img-top" alt="..">
<span class="card-title mx-2 my-0">11:00 AM</span>
<p class="card-text text-light">Pre-show starts, featuring analysis and discussion of the upcoming matches</p>
</article>
<article class="card d-flex flex-row px-2 py-3 align-items-center my-2 flex-md-column">
<img src="Assets/icons/gamepad-solid.svg" class="card-img-top" alt="..">
<span class="card-title mx-2 my-0">12:00 PM</span>
<p class="card-text text-light">First match of the day begins</p>
</article>
<article class="card d-flex flex-row px-2 py-3 align-items-center my-2 flex-md-column">
<img src="Assets/icons/gamepad-solid.svg" class="card-img-top" alt="..">
<span class="card-title mx-2 my-0">01:30 PM</span>
<p class="card-text text-light">Second match of the day begins</p>
</article>
<article class="card d-flex flex-row px-2 py-3 align-items-center my-2 flex-md-column">
<img src="Assets/icons/gamepad-solid.svg" class="card-img-top" alt="..">
<span class="card-title mx-2 my-0">03:00 PM</span>
<p class="card-text text-light">Third match of the day begins</p>
</article>
<article class="card d-flex flex-row px-2 py-3 align-items-center my-2 flex-md-column">
<img src="Assets/icons/gamepad-solid.svg" class="card-img-top" alt="..">
<span class="card-title mx-2 my-0">04:30 PM</span>
<p class="card-text text-light">Fourth match of the day begins</p>
</article>
<article class="card d-flex flex-row px-2 py-3 align-items-center my-2 flex-md-column">
<img src="Assets/icons/magnifying-glass-chart-solid.svg" class="card-img-top" alt="..">
<span class="card-title mx-2 my-0">06:00 PM</span>
<p class="card-text text-light">Post-show begins, featuring analysis and discussion of the day's matches</p>
</article>
</div>
<button id="main-program-button" type="button" class="btn btn-danger py-4 px-5 my-4">Join RLCS 22-23</button>
<a id="whole-program" class="py-4 px-5 my-4" href="#">SEE THE WHOLE PROGRAM</a>
</section>
<section id="featured" class="featured d-flex flex-column align-items-center p-2">
<h3 class="mt-5">Featured teams</h3>
<div class="underline mb-4"></div>
<div class="featured-cards d-flex flex-column flex-md-row justify-content-around">
</div>
<div class="see-more d-flex justify-content-center my-2 py-2"><h5 class="m-0"><span>↓</span>SEE MORE<span>↓</span></h5></div>
</section>
<section id="partner-home" class="partner d-flex flex-column align-items-center p-4 text-center">
<h3 class="text-light">Partner</h3>
<div class="underline mb-4"></div>
<div class="partner-imgs w-100 d-flex flex-wrap flex-md-row justify-content-around align-items-center">
<img id="f1" class="p-1" src="Assets/partners/F1-logo red.svg" alt="F1-logo">
<img id="redbull" class="p-1" src="Assets/partners/redbullenergydrink.svg" alt="RedBull logo">
<img id="ford" class="p-1" src="Assets/partners/Ford_logo_flat.svg" alt="Ford logo">
<img id="mclaren" class="p-1" src="Assets/partners/mclaren.svg" alt="Mclaren logo">
</div>
</section>
</main>
<footer id="footer-home" class="footer d-flex justify-content-around align-items-center">
<img src="Assets/images/Rocket_League_logo.png" alt="Rocket_League_logo">
<p class="m-0">2023 Rocket League.<br>Some Rights Reserved</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>