-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
293 lines (246 loc) · 15.9 KB
/
Copy pathindex.html
File metadata and controls
293 lines (246 loc) · 15.9 KB
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
284
285
286
287
288
289
290
291
292
293
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TechWave</title>
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
<!-- Google Font CDN -->
<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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
rel="stylesheet">
<!-- Tailwind CDN -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-[#1A0B2E] max-w-[1600px] mx-auto text-[white]">
<!-- Hero Section -->
<header class="bg-[#1A0B2E]">
<!-- Navbar -->
<nav class="w-[75%] max-md:w-[90%] mx-auto py-7.5 flex justify-between items-center border-b-[#412567]">
<img class="max-sm:w-[40%] cursor-pointer" src="assets/logo.png" alt="">
<ul class="flex gap-8 font-medium max-md:hidden">
<li><a href="">About</a></li>
<li><a href="">Episodes</a></li>
<li><a href="">Host</a></li>
</ul>
<button id="move"
class="max-md:hidden px-4.5 py-2 rounded-[30px] cursor-pointer bg-linear-to-tr from-[#F7E93F] from-0% via-[#FB09B4] via-60% to-[#9100F8] to-100% font-semibold">
Subscribe →
</button>
<img class=" cursor-pointer md:hidden" src="assets/hamburger-menu.png" alt="">
</nav>
<hr class="opacity-[0.2]">
<!-- Banner Section -->
<section id="banner" class="bg-[url(assets/hero-bg.png)] bg-no-repeat bg-contain sm:bg-position-[0%_15%] sm:bg-size-[100%_100%] max-sm:bg-position-[0_30px]">
<div class=" py-23 max-sm:py-5 max-w-[550px] mx-auto text-center">
<div id="slide"
class="bg-[url(assets/hero-circle.png)] bg-no-repeat bg-center bg-contain mb-8 max-sm:mb-4 relative max-sm:h-[150px] ">
<img class="mx-auto py-17 max-w-[200px] max-sm:max-w-15 max-sm:pt-7" src="assets/microphone.png"
alt="">
<button id="btn" class="bg-[#00FF88] text-black px-3 rounded-[1000px] text-[18px] shadow-[0_3px_27px_0_#1A0B2E] font-semibold absolute max-sm:text-[12px] max-sm:px-2 top-0 left-[58%]
animate-[move_2s_ease-in-out_1] ">NEW</button>
</div>
<h1 class="text-[3.8rem] font-extrabold mb-2">TechWave</h1>
<p class="mb-6 ">Your daily dose of tech insights, productivity <span class="sm:hidden"><br></span>
hacks, and personal growth</p>
<div
class="flex justify-center gap-2 max-sm:justify-around max-sm:flex-wrap max-sm:w-[98%] max-sm:mx-auto animate-[move_2s_ease-in-out_1] ">
<button
class="flex gap-2 items-center
px-4.5 py-2 rounded-[30px] cursor-pointer bg-linear-to-tr from-[#F7E93F] from-0% via-[#FB09B4] via-60% to-[#9100F8] to-100% font-semibold">
<img class="w-5 h-5" src="assets/spotify.png" alt="">
Listen on Spotify
</button>
<button
class="flex gap-2 items-center text-[#00FF88] border-[#00FF88] border px-4.5 py-2 rounded-[30px] cursor-pointer">
<img class="w-5 h-4 " src="assets/message.png" alt="">
Subscribe
</button>
</div>
</div>
</section>
</header>
<main class=" ">
<!-- About Section -->
<section class="w-[75%] max-w-[1200px] mx-auto text-center max-sm:mt-10 max-sm:w-[90%]">
<h4 class="text-5xl font-bold mb-4 max-sm:text-3xl">About the Podcast</h4>
<p class="leading-7 text-[0.8rem] ">TechWave is your go-to podcast for staying ahead in the fast-paced world
of technology. <span><br class="max-sm:hidden"></span>
We break down complex topics into digestible insights, explore productivity strategies that actually
work, <span><br class="max-sm:hidden"></span>
and share stories of personal growth from industry leaders.
<span><br class="max-sm:hidden"></span>
<br>
<span class="max-sm:mt-2 max-sm:block">Join thousands of young professionals and tech enthusiasts who
start their day with TechWave.</span>
</p>
<hr class="my-20 opacity-[0.1]">
</section>
<!-- Overview Section -->
<section class="w-[75%] max-w-[1200px] mx-auto grid grid-cols-4 gap-4 mb-30 max-sm:grid-cols-2 max-sm:w-[90%] ">
<div class="text-center">
<h2 class="text-5xl font-extrabold text-[#00FF88] mb-4 max-sm:text-[40px]">150K+</h2>
<p class="uppercase text-[0.8rem]">Monthly Listeners</p>
</div>
<div class="text-center">
<h2 class="text-5xl font-extrabold text-[#00FF88] mb-4 max-sm:text-[40px]">200+</h2>
<p class="uppercase text-[0.8rem]">Episodes Published</p>
</div>
<div class="text-center">
<h2 class="text-5xl font-extrabold text-[#00FF88] mb-4 max-sm:text-[40px]">4.9★</h2>
<p class="uppercase text-[0.8rem]">Average Rating</p>
</div>
<div class="text-center">
<h2 class="text-5xl font-extrabold text-[#00FF88] mb-4 max-sm:text-[40px]">50+</h2>
<p class="uppercase text-[0.8rem]">Industry Experts</p>
</div>
</section>
<!-- Feature Section -->
<!-- why choose techwave -->
<section class=" bg-[#230E3D]">
<div class="xl:w-[75%] w-[90%] max-w-[1200px] mx-auto py-30 max-sm:py-10 max-sm:w-[90%]">
<h3 class="mb-10 text-5xl font-bold text-center max-sm:text-3xl">Why Choose TechWave</h3>
<div class="grid gap-7 grid-cols-2 lg:grid-cols-3 lg:grid-rows-3 max-md:grid-cols-1">
<div
class="p-10 bg-[#35116566] rounded-[40px] lg:row-span-2 flex flex-col justify-center max-sm:p-6">
<img class="w-[60px]" src="assets/headphone.png" alt="">
<h4 class="text-2xl font-bold my-4">Premium Audio Quality</h4>
<p class="opacity-[0.6]">Experience crystal-clear sound with professional-grade recording
equipment and expert audio engineering. Every episode
is mastered for optimal listening across all devices and platforms.</p>
</div>
<div
class="p-10 bg-[#35116566] rounded-[40px] lg:col-span-2 flex flex-col justify-center max-sm:p-6">
<img class="w-[60px]" src="assets/device.png" alt="">
<h4 class="text-2xl font-bold my-4">Mobile Friendly</h4>
<p class="opacity-[0.6]">Listen on the go with seamless mobile experience and offline downloads.
</p>
</div>
<div
class="p-10 bg-[#35116566] rounded-[40px] lg:col-span-2 flex flex-col justify-center max-sm:p-6">
<img class="w-[60px]" src="assets/location.png" alt="">
<h4 class="text-2xl font-bold my-4">Global Community</h4>
<p class="opacity-[0.6]">Connect with tech enthusiasts from over 120 countries worldwide.</p>
</div>
<div class="p-10 bg-[#35116566] rounded-[40px] lg:col-span-2 max-sm:p-6">
<img src="assets/power.png" alt="">
<h4 class="text-2xl font-bold my-4">Exclusive Interviews</h4>
<p class="opacity-[0.6]">Get unprecedented access to industry titans, startup founders, and tech
visionaries. Our host secures exclusive
conversations you won't find anywhere else, diving deep into their journeys, failures, and
success strategies.</p>
</div>
<div class="p-10 bg-[#35116566] rounded-[40px] max-sm:p-6 max-md:col-span-1 max-lg:col-span-2">
<img src="assets/resource.png" alt="">
<h4 class="text-2xl font-bold my-4">Rich Resources</h4>
<p class="opacity-[0.6]">Access show notes, transcripts, and additional learning materials for
every episode.</p>
</div>
</div>
</div>
</section>
<!-- Episod Section -->
<section class="">
<div class=" max-w-[1200px] mx-auto py-30 max-sm:py-12">
<h3 class="mb-10 text-5xl font-bold text-center max-sm:text-3xl">Featured Episodes</h3>
<div class="flex gap-7 flex-wrap justify-center max-sm:w-[90%] max-sm:mx-auto">
<div class="bg-[#250D44] max-w-[380px] rounded-2xl">
<iframe class="rounded-t-2xl" width="100%" height="215"
src="https://www.youtube.com/embed/u1tNniPLCI0?si=CPUQvpeDQLo9DRvj"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>
<h4 class="px-6 pt-4 text-2xl font-bold my-4">The Future of AI in Everyday Life</h4>
<p class="px-6 opacity-[0.6]">Exploring how artificial intelligence is transforming our daily
routines and what to expect in the next decade.</p>
<div class="flex items-center gap-2 px-6 pt-3 pb-6">
<img class="w-5 h-5" src="assets/clock.png" alt="">
<p class="text-[#00FF88] font-semibold">42 min</p>
</div>
</div>
<div class="bg-[#250D44] max-w-[380px] rounded-2xl">
<iframe class="rounded-t-2xl" width="100%" height="215" src="https://www.youtube.com/embed/4sWE3RhtV1c?si=hWTxeMeoj5b9RHMd"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<h4 class="px-6 pt-4 text-2xl font-bold my-4">Building Better Habits for Remote Work</h4>
<p class="px-6 opacity-[0.6]">Practical strategies for staying productive and maintaining work-life balance in a remote environment.</p>
<div class="flex items-center gap-2 px-6 pt-3 pb-6">
<img class="w-5 h-5" src="assets/clock.png" alt="">
<p class="text-[#00FF88] font-semibold">35 min</p>
</div>
</div>
<div class="bg-[#250D44] max-w-[380px] rounded-2xl">
<iframe class="rounded-t-2xl" width="100%" height="215" src="https://www.youtube.com/embed/6NISZblCgkU?si=tmZwlelCb2p8RDmz"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<h4 class="px-6 pt-4 text-2xl font-bold my-4">Career Growth in Tech: A Roadmap</h4>
<p class="px-6 opacity-[0.6]">Expert advice on navigating your tech career from junior developer to senior leadership roles.</p>
<div class="flex items-center gap-2 px-6 pt-3 pb-6">
<img class="w-5 h-5" src="assets/clock.png" alt="">
<p class="text-[#00FF88] font-semibold">51 min</p>
</div>
</div>
</div>
</div>
</section>
<!-- Host section -->
<section class="lg:mb-30 max-sm:mb-10 mb-20">
<h3 class="mb-10 text-5xl font-bold text-center max-sm:text-3xl">Meet the Host</h3>
<div class="max-w-[1200px] w-[90%] lg:w-[75%] mx-auto bg-[#250D44] p-10 flex gap-6 items-center rounded-[40px] max-sm:flex-col max-sm:text-center max-sm:p-6">
<img src="assets/host.png" alt="">
<div class="">
<h5 class="text-3xl font-bold mb-4">Alex Kumar</h5>
<p class="opacity-[0.6] mb-4">Tech entrepreneur, productivity expert, and lifelong learner. Alex has been in the tech industry for over 10 years,
working with startups and Fortune 500 companies. Through TechWave, Alex shares insights from industry leaders and
practical advice for anyone looking to grow in tech.</p>
<div class="flex gap-4 items-center max-sm:justify-center">
<div class="p-2.5 border rounded-3xl border-[#533C72]">
<img class="w-5 h-5 " src="assets/linkedin.png" alt="">
</div>
<div class="p-3 border rounded-3xl border-[#533C72]">
<img class="w-4 h-4 bg-[#250D44]" src="assets/x.png" alt="">
</div>
<div class="p-2.5 border rounded-3xl border-[#533C72]">
<img class="w-5 h-5 bg-[#250D44] " src="assets/instagram.png" alt="">
</div>
<div class="p-2.5 border rounded-3xl border-[#533C72]">
<img class="w-5 h-5 bg-[#250D44] " src="assets/youtube.png" alt="">
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="py-30 max-sm:py-10 bg-[url(assets/footer-bg.png)] bg-no-repeat
bg-size-[100%_100%]">
<div class="max-w-[544px] max-sm:w-[90%] mx-auto text-center ">
<img class="mx-auto h-[50px] max-sm:h-8" src="assets/logo.png" alt="">
<div class="mt-8 max-sm:mt-4 flex justify-between max-sm:flex-wrap gap-4 max-sm:justify-center">
<div class="flex items-center gap-2">
<img class="w-6 h-6" src="assets/spotify.png" alt="">
<span class="opacity-[0.6]">Spotify</span>
</div>
<div class="flex items-center gap-2 ">
<img class="w-6 h-6" src="assets/apple-podcast.png" alt="">
<span class="opacity-[0.6]">Apple Podcasts</span>
</div>
<div class="flex items-center gap-2">
<img class="w-6 h-5" src="assets/youtube-podcast.png" alt="">
<span class="opacity-[0.6]">YouTube</span>
</div>
<div class="flex items-center gap-2">
<img class="w-6 h-5" src="assets/twitter.png" alt="">
<span class="opacity-[0.6]">Twitter</span>
</div>
</div>
<p class="mt-8 max-sm:mt-4 opacity-[0.6]">© 2026 TechWave Podcast. All rights reserved.</p>
</div>
</footer>
</body>
</html>