-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
216 lines (201 loc) · 9.34 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
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VEKA - Esports & Gaming</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<!-- Additional fonts and icons -->
<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=Oxanium:wght@600;700;800&family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body class="dark-mode"> <!-- Initial dark mode, can be toggled -->
<!-- Header -->
<header>
<div class="logo">VEKA</div>
<nav class="navbar">
<a href="#live" class="nav-link flash">Live 🔴</a> <!-- 'Live' now flashes instead of 'Live Now' -->
<a href="#about" class="nav-link">About</a>
<a href="#team" class="nav-link">Team</a>
<a href="#news" class="nav-link">News</a>
<div class="dropdown language-dropdown">
<button class="dropbtn">🇬🇧 English</button> <!-- Changed to emoji flags -->
<div class="dropdown-content">
<a href="#">🇦🇪 Arabic</a>
<a href="#">🇮🇳 Hindi</a>
<a href="#">🇵🇰 Urdu</a>
<a href="#">🇫🇷 French</a>
<a href="#">🇪🇸 Spanish</a>
<a href="#" style="font-style: italic;">More Coming Soon</a>
</div>
</div>
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
</nav>
</header>
<!-- Loading Screen -->
<div id="loading-screen" style="display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, .8); z-index: 9999;">
<i class="fas fa-spinner fa-spin" style="font-size: 3rem; color: white;"></i>
</div>
<!-- Main Content Area -->
<main class="main-content">
<!-- Hero Section -->
<section class="hero" style="background-image: url('community.jpg');">
<div class="hero-content">
<h1>Create, Manage, and Experience <span>Esports</span> Like Never Before</h1>
<p>Join the ultimate platform for competitive gaming, tournament management, and community building.</p>
<button class="btn">Explore Now</button>
</div>
</section>
<!-- Live Match and Teams Represented Section -->
<section id="live-match" style="display: flex; justify-content: space-between; align-items: flex-start;">
<!-- Twitch Player -->
<iframe src="https://player.twitch.tv/?channel=vortekacademy?parent=veka.gg&muted=true&autoplay=true" frameborder="0" allowfullscreen="true" scrolling="no" height="300" width="80%"></iframe>
<iframe
id="chat_embed"
src="https://www.twitch.tv/embed/vortekacademy/chat?parent=veka.gg"
height="300"e
width="350">
</iframe>
<!-- Other Streaming Links -->
<div style="width: 20%;">
<a href="https://www.twitch.tv/twistedvortek">TwistedVorteK</a>
<a href="https://www.twitch.tv/aplesports">APLEsports</a>
<a href="https://www.twitch.tv/darkriftesports">DarkRiftEsports</a>
</div>
</section>
<!-- About Us Section -->
<section class="category-section" id="about">
<div class="image-content" style="flex: 1;">
<img src="about.png" alt="About Us" style="width: 50%; height: 300px; object-fit: cover; clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);">
</div>
<div class="text-content" style="flex: 1; padding: 20px;">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</section>
<!-- Our Projects Section -->
<section id="projects" class="category-section">
<div class="image-content">
<img src="project.jpg" alt="Our Projects" style="width: 50%; height: 300px; object-fit: cover; clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);">
</div>
<div class="text-content">
<h2>Our Projects</h2>
<p>From groundbreaking tournament software to immersive fan experiences, discover the innovative projects we've brought to life.</p>
</div>
</section>
<!-- Team Section -->
<section id="team" class="category-section">
<div class="image-content">
<img src="team.jpg" alt="Our Team" style="width: 50%; height: 300px; object-fit: cover; clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);">
</div>
<div class="text-content">
<h2>Meet Our Team</h2>
<p>Our team of gaming enthusiasts and industry veterans work tirelessly to make VEKA the go-to destination for esports.</p>
</div>
</section>
<!-- Our Socials Section -->
<section id="socials" class="category-section">
<div class="text-content">
<h2>Follow Us</h2>
<p>Stay up to date with the latest from VEKA and connect with our community on social media.</p>
<!-- Social media links -->
</div>
<div class="social-icons">
<a href="https://twitter.com/vortekacademy"><i class="fab fa-twitter"></i> /vortekacademy</a>
<a href="https://facebook.com/vortekacademy"><i class="fab fa-facebook"></i> /vortekacademy</a>
<a href="https://instagram.com/vortekacademy"><i class="fab fa-instagram"></i> /vortekacademy</a>
<!-- Add more social links as needed -->
</div>
</section>
<!-- News Section -->
<section id="news" class="category-section">
<h2>Latest Esports News</h2>
<div class="news-articles">
<article class="news-item">
<img src="news1.jpg" height="25%" width="25%" alt="Esports Championship">
<div class="news-content">
<h3>Global Esports Championship Concludes with Record Viewership</h3>
<p>This year's championship not only shattered previous records but also set a new standard for esports competitions worldwide.</p>
<a href="news1.html" class="btn">Read More</a>
</div>
</article>
<article class="news-item">
<img src="news2.jpg" height="25%" width="25%" alt="New Gaming Arena">
<div class="news-content">
<h3>New State-of-the-Art Gaming Arena Opens</h3>
<p>The newly opened arena promises to be a haven for gamers, with the latest technology and facilities.</p>
<a href="news2.html" class="btn">Read More</a>
</div>
</article>
<article class="news-item">
<img src="news3.jpg" height="25%" width="25%" alt="Esports Scholarship Program">
<div class="news-content">
<h3>University Launches Esports Scholarship Program</h3>
<p>In a groundbreaking move, the university now offers scholarships to top esports athletes, recognizing esports as a competitive discipline.</p>
<a href="news3.html" class="btn">Read More</a>
</div>
</article>
</div>
</section>
<!-- Newsletter Section -->
<section class="newsletter">
<div class="newsletter-signup">
<form>
<input type="email" placeholder="Your email address">
<button type="submit">Subscribe</button>
</form>
<h2>Join Our Newsletter</h2>
<p>Subscribe to get the latest esports news, updates, and special offers directly to your inbox.</p>
<!-- Subscription form -->
</div>
</section>
<footer>
<div class="footer-content">
<div class="footer-column">
<h3>About VEKA</h3>
<p>Discover the story behind <b>VEKA</b>, your ultimate esports platform.</p>
</div>
<div class="footer-column">
<h3>Quick Links</h3>
<a href="#live">Live Matches</a>
<a href="#about">About Us</a>
<a href="#team">Our Team</a>
<a href="#projects">Projects</a>
<a href="#news">News</a>
</div>
<div class="footer-column">
<h3>Explore</h3>
<a href="#projects">Projects</a>
<a href="#news">News</a>
</div>
<div class="footer-column">
<h3>Follow Us</h3>
<div class="social-icons">
<a href="https://twitter.com/vortekacademy" target="_blank"><i class="fab fa-twitter"></i> Twitter</a>
<a href="https://facebook.com/vortekacademy" target="_blank"><i class="fab fa-facebook-f"></i> Facebook</a>
<a href="https://instagram.com/vortekacademy" target="_blank"><i class="fab fa-instagram"></i> Instagram</a>
</div>
</div>
<div class="footer-column">
<h3>Visit Us</h3>
<address>
Burj Khalifa, 1 Sheikh Mohammed bin Rashid Blvd, Dubai, United Arab Emirates
</address>
</div>
</div>
<div class="footer-bottom">
<p>©2024 VEKA LLC - All Rights Reserved</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>