-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
166 lines (147 loc) · 7.48 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
<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css">
<title>Apple-Vision</title>
</head>
<body>
<div id="main">
<div id="page1">
<nav>
<h3>Vision Pro</h3>
<button>Notify me </button>
</nav>
<video
src="https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/hero/large_2x.mp4"
muted></video>
<div id="intro">
<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">
<h1>Welcome to the era of spatial computing.</h1>
<video
src="https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/foundation-spatial-computing/large.mp4"
autoplay loop muted></video>
</div>
<div id="page3">
<h1>Apple Vision Pro seamlessly blends <br> digital content with your physical space.</h1>
<video
src="https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/foundation-digital-canvas/large.mp4"
autoplay loop muted></video>
</div>
<div id="page3-1">
<h1>You navigate simply by using your <br> eyes, hands, and voice.</h1>
<video src="https://www.apple.com/newsroom/videos/media/gestures/large_2x.mp4" autoplay loop muted></video>
</div>
<div id="page3-2">
<h1>
So you can do the things you love <br> in ways never before possible.
</h1>
<video src="https://www.apple.com/newsroom/videos/media/entertainment/large_2x.mp4" autoplay loop
muted></video>
</div>
<div id="page4">
<div id="page4-in">
<h1>You’ve never seen everything like this before.</h1>
<img src="https://www.apple.com/v/apple-vision-pro/a/images/overview/intro/logo__4zgkuyebgtem_large.png"
alt="">
</div>
<div id="page4-inner">
<h2>Watch the film <i class="ri-pause-circle-fill"></i></h2>
<h2>Watch the event <i class="ri-arrow-right-s-line"></i></h2>
<h3>Available early next year in the U.S.</h3>
</div>
<img src="https://www.apple.com/v/apple-vision-pro/a/images/overview/intro/hardware_base__ecl2v43j73o2_large.jpg"
alt="">
<button> + Take a closer look at Vision Pro</button>
</div>
<div id="page5">
<div id="page5-in">
<h5>Apps</h5>
<h1>Free your desktop. <br>And your apps will follow.</h1>
</div>
<video src="https://www.apple.com/newsroom/videos/media/multitasking/large_2x.mp4" autoplay loop
muted></video>
</div>
<div id="page6">
<div id="left">
<h3>Your apps live in <br> your space.</h3>
</div>
<div id="right">
<p>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.</p>
<button> + Learn more about apps</button>
</div>
</div>
<div id="page7">
<div id="page7-in">
<h5>Connection</h5>
<h1>Get on the same page. <br>
In the same space.</h1>
</div>
<video src="https://www.apple.com/newsroom/videos/media/facetime/large_2x.mp4" autoplay loop muted></video>
</div>
<div id="page8">
<div id="left">
<h3>Make meetings <br> more meaningful.</h3>
</div>
<div id="right">
<p>Vision Pro makes it easy to collaborate and connect wherever you are. FaceTime video tiles are
life-size, and as new people join, the call simply expands in your room. Within FaceTime, you can
also use apps to collaborate with colleagues on the same documents simultaneously.</p>
<button> + Learn more about photos and videos</button>
</div>
</div>
<div id="page9">
<div id="page9-in">
<h4>Design</h4>
<h1>Designed by Apple.</h1>
<h5>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.</h5>
</div>
</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
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>EyeSight</span>. An outward display reveals your eyes while wearing Vision Pro, letting others know when you are
using apps or fully</h1>
</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/ScrollTrigger.min.js"
integrity="sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></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="script.js"></script>
</body>
</html>