-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
185 lines (175 loc) · 9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css">
<title>Apple</title>
<link rel="icon" type="image/x-icon" href="images/favicon.png">
</head>
<body>
<div id="main">
<div id="nav">
<h3>Vision Pro</h3>
<button>Notify Me</button>
</div>
<div id="page">
<video src="vedios/vision-pro.mp4" muted ></video>
<div id="page-footer">
<h3>Introducing</h3>
<img src="https://www.apple.com/v/apple-vision-pro/a/images/overview/hero/apple_vision_pro_logo__ux94yix23r6y_large.png" alt="">
</div>
</div>
<div id="page2">
<video src="vedios/2nd-video.mp4" muted autoplay loop></video>
<h1>Welcome to the era of spatial computing.</h1>
</div>
<div id="page3">
<video src="vedios/3rd-video.mp4" muted autoplay loop></video>
<h1>Apple Vision Pro seamlessly blends <br>
digital content with your physical space.</h1>
</div>
<div id="page4">
<video src="vedios/4th-video.mp4" autoplay muted loop></video>
<h1>You navigate simply by using your <br>
eyes, hands, and voice.</h1>
</div>
<div id="page5">
<video src="vedios/5th-video.mp4"></video>
<h1>So you can do the things you love <br>
in ways never before possible.</h1>
</div>
<div id="page6">
<h1>You’ve never seen everything like this before.</h1>
<div id="page6-details">
<img src="images/apple_vision_pro_logo.png" alt="">
<div id="page6-links">
<h3>Watch the film</h3>
<h3>Watch the event > </h3>
</div>
<h3>Available early next year in the U.S.</h3>
</div>
<img src="images/product-img.jpg" alt="">
<button>+ Take a closer look at Vision Pro</button>
</div>
<div id="page7">
<video src="vedios/7thpage-video.mp4"></video>
<div id="page7-content">
<h2>Apps</h2>
<span>Free your desktop.</span>
<span>And your apps will follow.</span>
</div>
</div>
<div id="page8">
<div id="page8-content">
<div id="leftdiv">
<h2>Your apps live in <br> your space.</h2>
</div>
<div id="rightdiv">
<span>With Vision Pro, you have an infinite canvas that transforms how you use the apps you love. Arrange apps anywhere and scale them to the perfect size, making the workspace of your dreams a reality — all while staying present in the world around you. Browse the web in Safari, create a to-do list in Notes, chat in Messages, and seamlessly move between them with a glance.</span>
<button>+ Learn more about apps</button>
</div>
</div>
</div>
<div id="page9">
<h3>Design</h3>
<h1>Designed by Apple.</h1>
<p>Apple Vision Pro is the result of decades of experience designing high‑performance, mobile, and wearable devices — culminating in the most ambitious product Apple has ever created. Vision Pro integrates incredibly advanced technology into an elegant, compact form, resulting in an amazing experience every time you put it on.</p>
</div>
<div id="page10">
<canvas></canvas>
</div>
<div id="page11">
<h1><span>Enclosure.</span> A singular piece of three-dimensionally formed laminated glass flows into an aluminum alloy frame that curves to wrap around your face.</h1>
</div>
<div id="page12">
<h1><span>Light Seal.</span> The Light Seal gently flexes to conform to your face, delivering a precise fit while blocking out stray light.</h1>
</div>
<div id="page13">
<h1><span>Head Band.</span> The Head Band provides cushioning, breathability, and stretch. The Fit Dial lets you adjust Apple Vision Pro precisely to your head.</h1>
</div>
<div id="page14">
<h1><span>Power.</span> The external battery supports up to 2 hours of use, and all‑day use when plugged in.1</h1>
</div>
<div id="page15">
<h1><span>Sound.</span> Speakers positioned close to your ears deliver rich Spatial Audio while keeping you aware of your surroundings.</h1>
</div>
<div id="page16">
<div id="left16"></div>
<div id="right16"></div>
</div>
<div id="page17">
<div id="page17-center">
<video src="vedios/page17-video.mp4" autoplay muted ></video>
</div>
</div>
<div id="page18">
<p>
A singular piece of <span>three-dimensionally formed laminated glass</span> acts as an optical surface for the cameras and sensors that view the world. It flows seamlessly into a <span> custom aluminum alloy frame</span> that gently curves to wrap around your face while serving as an attachment point for the <span>Light Seal.</span>
</p>
<div id="page18-img-div">
<img src="./images/page18-img.jpg" alt="">
<button> + Learn more about design</button>
</div>
</div>
<div id="page19">
<video src="vedios/page19-video.mp4" autoplay muted></video>
<div id="page19-text">
<h3>visionOS</h3>
<h1>Apple’s first spatial <br>
operating system.</h1>
</div>
<div id="page19-content">
<div id="page19-left">
<h1>Interaction designed <br> for spatial computing.</h1>
</div>
<div id="page19-right">
<p>Built on the foundation of macOS, iOS, and iPadOS, visionOS enables powerful spatial experiences. Control Apple Vision Pro with your eyes, hands, and voice — interactions feel intuitive and magical. Simply look at an element, tap your fingers together to select, and use the virtual keyboard or dictation to type.</p>
</div>
</div>
<div id="page19-images">
<div id="left-img">
<img src="./images/page19-left.jpg" alt="">
</div>
<div id="right-img">
<img src="./images/page19-right.jpg" alt="">
</div>
</div>
</div>
<div id="page20">
<h2>Technology</h2>
<h1>Innovation you can <br> see, hear, and feel.</h1>
<div id="page20-desc">
<p>
<span>
<span class="highlight">Pushing boundaries from the inside out.</span> Spatial experiences on
</span>
<span> Apple Vision Pro are only possible through groundbreaking Apple </span>
<span>technology. Displays the size of a postage stamp that deliver more </span>
<span>pixels than a 4K TV to each eye. Incredible advances in </span>
<span>Spatial Audio. A revolutionary dual‑chip design featuring custom </span>
<span>Apple silicon. A sophisticated array of cameras and sensors. All the </span>
<span>elements work together to create an unprecedented experience </span>
<span>you have to see to believe.</span>
</p>
</div>
</div>
<div id="page21">
<canvas></canvas>
</div>
<div id="page22">
<h1>More pixels than a 4K TV. For each eye.</h1>
<p>
The <span>custom micro‑OLED display system</span>
features 23 million pixels, delivering stunning resolution and colors.
And a specially designed three‑element lens creates the feeling of a display that’s everywhere you look.
</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js" integrity="sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
</body>
</html>