assinment2/index.html at main · MirTasinDev/assinment2 · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>TechWave Podcast</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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
    rel="stylesheet">
    <link rel="stylesheet" href="style.css" />

</head>

<body>

  <!--NAVBAR-->
  <header class="header">
    <h1 class="logo">Tech<span class="logo-accent">Wave</span></h1>

    <nav class="nav">
      <a href="#">About</a>
      <a href="#">Episodes</a>
      <a href="#">Host</a>
    </nav>

    <button class="cta">Subscribe →</button>

    <div class="mobile-menu"><img src="./assets/hamburger-menu.png" alt="hamburger-menu">
    </div>
  </header>

  <!--HERO-->
  <section class="hero">
    <div class="podcast-circle">
      <img src="./assets/hero-circle.png" alt="assets">

      <span class="badge">NEW</span>
    </div>
    <div class="microphone">
      <img src="./assets/microphone.png" alt="microphone">
    </div>
    <h2 class="hero-title">TechWave</h2>
    <p class="hero-text">
      Your daily dose of tech insights, productivity hacks, and personal growth
    </p>

    <div class="hero-buttons">
      <button class="btn-primary"><img src="./assets/spotify.png" alt="spotify">
        <p>Listen on Spotify</p>
      </button>
      <button class="btn-secondary"><img src="./assets/message.png" alt="message">Subscribe</button>
    </div>
  </section>

  <!--ABOUT-->
  <section class="about">
    <h3>About The Podcast</h3>
    <p>
      TechWave is your go-to podcast for staying ahead in the fast-paced world of technology.<br />
      We break down complex topics into digestible insights, explore productivity strategies that actually work,<br />
      and share stories of personal growth from industry leaders.
    </p>

    <div class="stats">
      <div>
        <h3>150K+</h3>
        <p>Monthly Listeners</p>
      </div>
      <div>
        <h3>200+</h3>
        <p>Episodes Published</p>
      </div>
      <div>
        <h3>4.9★</h3>
        <p>Average Rating</p>
      </div>
      <div>
        <h3>50+</h3>
        <p>Industry Experts</p>
      </div>
    </div>
  </section>

  <!--WHY CHOOSE-->
  <section id="section-five">
    <h1>Why Choose TechWave</h1>
    <div class="card">
      <div class="first">
        <img src="./assets/headphone.png" alt="">
        <h2>Premium Audio Quality</h2>
        <p>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="second">
        <img src="./assets/device.png" alt="">
        <h2>Mobile Friendly</h2>
        <p>Listen on the go with seamless mobile experience and offline downloads.</p>
      </div>
      <div class="third">
        <img src="./assets/location.png" alt="">
        <h2>Global Community</h2>
        <p>Connect with tech enthusiasts from over 120 countries worldwide.</p>
      </div>
      <div class="fourr">
        <img src="./assets/resource.png" alt="">
        <h2>Exclusive Interviews</h2>
        <p>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="five">
        <img src="./assets/resource.png" alt="">
        <h2>Rich Resources</h2>
        <p>Access show notes, transcripts, and additional learning materials for every episode.</p>
      </div>
  </section>

  <!--EPISODES-->
  <section class="episodes">
    <h3>Featured Episodes</h3>
    <div class="episode-grid">
      <div class="episode-card">
        <div class="episode-info">
          <iframe width="390" height="210" src="https://www.youtube.com/embed/KKNCiRWd_j0"
            title="What Is an AI Anyway? | Mustafa Suleyman | TED" frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
          <h4>The Future of AI in Everyday Life</h4>
          <p>Exploring how artificial intelligence <br />is transforming our daily routines and what<br /> to expect in
            the next
            decade.</p>
          <span><img src="./assets/clock.png" alt="clock">22 min</span>
        </div>
      </div>

      <div class="episode-card">
        <div class="episode-info">
          <iframe width="390" height="210" src="https://www.youtube.com/embed/7vtlMRV1sxY"
            title="How to Build a Freelance Career That Works for You | The Way We Work, a TED series" frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
          <h4>Building Better Habits for Remote Work</h4>
          <p>Practical strategies for staying productive and maintaining work-life balance in a remote environment.</p>
          <span><img src="./assets/clock.png" alt="clock">4 min</span>
        </div>
      </div>

      <div class="episode-card">
        <div class="episode-info">
          <iframe width="390" height="210" src="https://www.youtube.com/embed/fZmQ_aPXJAM"
            title="The Best Tech Jobs for 2025: High Demand &amp; High Pay" frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
          <h4>Career Growth in Tech: A Roadmap</h4>
          <p>Expert advice on navigating your tech career from junior developer to senior leadership roles.</p>
          <span><img src="./assets/clock.png" alt="clock">5 min</span>
        </div>
      </div>
    </div>
  </section>

  <!--HOST-->
  <section class="host">
    <h3>Meet The Host</h3>
    <div class="host-card">
      <div><img src="./assets/host.png" alt="host"></div>
      <div class="host-info">
        <h4>Alex Kumar</h4>
        <p>
          Tech entrepreneur, productivity expert, and lifelong learner. Alex has been in the tech industry for over 10
          years,<br /> working with startups and Fortune 500 companies. Through TechWave, Alex shares insights from
          industry
          leaders and<br /> practical advice for anyone looking to grow in tech.
        </p>
      </div>
      <div class="host-icon">
        <div class="icon"><img src="./assets/linkedin.png" alt="linkedin"></div>
        <div class="icon"><img src="./assets/x.png" alt="x"></div>
        <div class="icon"><img src="./assets/instagram.png" alt="instagram"></div>
        <div class="icon"><img src="./assets/youtube.png" alt="youtube"></div>
      </div>
    </div>

  </section>

  <section id="footer">
    <div>
      <h1>Tech <span class="color">wave</span></h1>
      <ul class="footer-ul">
        <li> <a href=""><img src="./assets/spotify.png" alt="">Spotify</a></li>
        <li> <a href=""><img src="./assets/apple-podcast.png" alt="">Apple Podcast</a></li>
        <li> <a href=""><img src="./assets/youtube-podcast.png" alt="">YouTube</a></li>
        <li> <a href=""><img src="./assets/twitter.png" alt="">Twitter</a></li>
      </ul>
      <p>© 2026 TechWave Podcast. All rights reserved.</p>
    </div>
  </section>

</body>

</html>