-
Notifications
You must be signed in to change notification settings - Fork 13
/
index.html
208 lines (198 loc) · 7.57 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Airpods Pro - Apple (IN) | Anushka Chauhan</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="./assets/favicon.ico" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header>
<nav class="apple-navbar">
<div class="nav-content">
<ul class="nav-items">
<li>
<a href=""><ion-icon name="logo-apple"></ion-icon></a>
</li>
<li><a href="">Store</a></li>
<li><a href="">Mac</a></li>
<li><a href="">iPad</a></li>
<li><a href="">iPhone</a></li>
<li><a href="">Watch</a></li>
<li><a href="">AirPods</a></li>
<li><a href="">TV & Home</a></li>
<li><a href="">Only on Apple</a></li>
<li><a href="">Accessories</a></li>
<li><a href="">Support</a></li>
<li>
<a href=""><ion-icon name="search-outline"></ion-icon></a>
</li>
<li>
<a href=""><ion-icon name="bag-outline"></ion-icon></a>
</li>
</ul>
</div>
</nav>
<nav class="airpods-navbar">
<div class="nav-content">
<div class="nav-logo"><a href="#">AirPods Pro</a></div>
<ul class="nav-items">
<li><button disabled>Overview</button></li>
<li><button>Tech Specs</button></li>
<li><button>Compare</button></li>
<li><button class="buy-btn">Buy</button></li>
</ul>
</div>
</nav>
</header>
<main>
<section class="section-01 scroll-section hero-lightpass">
<div class="main-elem">
<h1>AirPods Pro</h1>
<a href=""
>Watch <span>Jump</span>
<ion-icon name="play-circle-outline"></ion-icon>
</a>
</div>
<div class="canvas-elem">
<canvas id="hero-lightpass"></canvas>
</div>
<div class="msg-elem msg-elem-01">
<p>
Active Noise Cancellation <br />
for immersive sound.
</p>
</div>
<div class="msg-elem msg-elem-02">
<p>
Transparency mode for hearing <br />
what's happening around you.
</p>
</div>
<div class="msg-elem msg-elem-03">
<p>
A customisable fit <br />
for all-day comfort.
</p>
</div>
<div class="msg-elem msg-elem-04">
<p>Magic like you've never heard.</p>
</div>
</section>
<section class="section-02 scroll-section head-bob-turn">
<div class="msg-elem">
<small>Comfort</small>
<h2>Arrival of the fittest.</h2>
</div>
<div class="canvas-elem">
<canvas id="head-bob-turn"></canvas>
</div>
</section>
<section class="section-04 static-section explode-tips">
<div class="section-04-1">
<img
src="https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/04-explode-tips/0000.jpg"
alt=""
/>
<div class="text">
We refined the details of comfort, creating a new class of in-ear
headphones with a customisable fit that forms an exceptional seal
for Active Noise Cancellation. You'll feel your music, not your
headphones.
</div>
</div>
<div class="section-04-2">
<img
src="https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/04-explode-tips/0080.jpg"
alt=""
/>
<div class="text">
Choose from three sizes of soft, flexible silicone tips that click
into place. Find the best fit — and get the best sound — by using
the Ear Tip Fit Test.
</div>
</div>
<div class="section-04-3">
<img
src="https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/04-explode-tips/0138.jpg"
alt=""
/>
<div class="text">
These internally tapered tips conform to your ear shape, keeping
AirPods Pro secure. And with vents helping equalise pressure, you
feel like there's nothing in your ears.
</div>
</div>
</section>
<section class="section-05 static-section flip-for-nc">
<div class="section-05-1">
<img
src="https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/05-flip-for-nc/0026.jpg"
alt=""
/>
<div class="text">
<p>Active Noise Cancellation</p>
<h1>
Sound that cuts <br />
out the noise.
</h1>
</div>
</div>
<div class="section-05-2">
<img
src="https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/05-flip-for-nc/0054.jpg"
alt=""
/>
<div class="text">
AirPods Pro are the only in-ear headphones with Active Noise
Cancellation that continuously adapts to the geometry of your ear
and the fit of the ear tips — blocking out the world so you can
focus on what you're listening to.
</div>
</div>
</section>
<section class="section-06 static-section transparency-head">
<img
src="https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/06-transparency-head/0008.jpg"
alt=""
/>
<div class="text">
<p>
Want to hear what's happening around you? Just press and hold the
force sensor on the stem to move between Active Noise Cancellation
and Transparency mode — which lets outside sound in, and allows
things to sound and feel natural when you're talking to people
nearby.
</p>
<p>
And when you're talking face to face with someone in a noisy
environment, Conversation Boost helps you hear more clearly by
focusing on the sound of the person directly in front of you.
</p>
</div>
</section>
</main>
<footer>
<div class="content">
<small>Copyright © 2022 Apple Inc. All rights reserved.</small>
<small>India.</small>
</div>
</footer>
</body>
<!-- Ionicons Usage -->
<script src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<!-- GSAP CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<!-- ScrollMagic CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<!-- JS Files -->
<script src="js/script.js"></script>
<script src="js/script1.js"></script>
<script src="js/script2.js"></script>
</html>