-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
198 lines (181 loc) · 12.3 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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='og:viewport' content='width=device-width,initial-scale=1'>
<meta name="og:description" content="Sfx">
<title>Skparab1 - sfx</title>
<link rel="stylesheet" href="about.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="icon" type="image/x-icon" href="pacman-favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Finlandica&display=swap" rel="stylesheet">
</head>
<body>
<div id="notif" style="width: 100%; height: 50px; padding: 0px; float: left; z-index: 2; background: rgb(199, 3, 3); display: none"></div>
<nav id="nav1">
<ul class="nav-items" id="nav">
<li><a id="fav" href="https://skparab1.github.io"><img src="favicon.png" height="30px;"></a></li>
<li><a id='header1' class="header" href="https://skparab1.github.io">Home</a></li>
<li><a id='header2' class="header" href="https://skparab1.github.io/about">About</a></li>
<li><a id='header3' class="header" href="https://skparab1.github.io/#projects">Projects</a></li>
</ul>
</nav>
<h1 id="title" style="z-index: -1"></h1>
<div id='more' class="fullwidth" style="display: none;">
<a href="https://skparab1.github.io/blog/pacman-ghost-algorithm.html">
<div class="fifth">
<img width="50%" src="hires.png">
<h1 class="inside5th">Alternative Pacman Ghost algorithm</h1>
</div>
</a>
<a href="https://skparab1.github.io/blog/js-url-shortener.html">
<div class="fifth">
<img width="50%" src="hires.png">
<h1 class="inside5th">Easy url shortener with js and Github Pages</h1>
</div>
</a>
<a href="https://skparab1.github.io/blog/canvas-graphics.html">
<div class="fifth">
<img width="50%" src="hires.png">
<h1 class="inside5th">Everything you need for Canvas graphics</h1>
</div>
</a>
<a href="https://skparab1.github.io/blog/canvas-vs-p5.html">
<div class="fifth">
<img width="50%" src="hires.png">
<h1 class="inside5th">Html canvas vs p5.js</h1>
</div>
</a>
<a href="https://skparab1.github.io/blog/pacman-ghost-algorithm.html">
<div class="fifth">
<img width="50%" src="ghdb.png">
<h1 class="inside5th">Github as a Database</h1>
</div>
</a>
</div>
<div id='hcontainer' class="fullwidth">
<h1 id='head' style="font-size: 50px; padding-bottom: 0px; position:absolute">Lucid Air</h1>
<div id="headoverlay" style="position: absolute; width: 26%; height: 70%; background-image: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0));"></div>
<div id="headoverlay2" style="position: absolute; width: 26%; height: 70%; background-image: linear-gradient(to right,rgba(0,0,0,0));"></div>
<h1 id='head1' style="font-size: 25px; padding-top: 0px; position: absolute;">The World's Coolest Electric car</h1>
<img id='mainimg' style='width: 50%; z-index: -1;' src="main.png">
</div>
<br>
<div id="overlay3" style="position: absolute; width: 100%; height: 120%; background-color: rgba(0,0,0,1); z-index: 5; left: 0px; top: 0px;"></div>
<div style="z-index: -1; width: 100%; position: fixed; left: 0px; top: 0px; ">
<video width="100%" autoplay muted loop id="vid">
<source src="thisisgonnabesocool.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div id="vidovl" style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background-image: linear-gradient(to right,rgba(0,0,0,0.0),rgba(0,0,0,0.0));"></div>
<a href='https://lucidmotors.com/air'><button id='dis1' class="discover">Discover Air</button></a>
<a href='https://lucidmotors.com'><button id='dis2' class="discover">Lucid motors</button></a>
<h1 id="muter" style="position: absolute; color: white; width: 50px; height: 50px;">🔊</h1>
<div id='fwb' class="fullwidthblocker" style="float: left; z-index:3;">
<div class="halfwidth">
<img src="lucid.jpg" width="100%">
</div>
<div class="halfwidth" style="padding-left: 25px; padding-right: 25px;">
<h1 id='firstsrc' style="font-size: auto; text-align: left;">Introducing Lucid Air. The longest range,
fastest charging luxury electric car in the world.
With incredible horsepower and an unrivaled
range of up to 520 miles per charge, it's like no
car you've ever known. All packed into
an elegantly efficient design - inspired by
California. </h1>
<div id="ovlbody" style="position: absolute; width: 26%; height: 70%; background-image: linear-gradient(to right,rgba(0,0,0,0.75),rgba(0,0,0,0.75));"></div>
</div>
</div>
<div style="position: absolute; z-index: 100; height: 100px; width: 100%;" id="niceoverlay">
<img id='luc' style="z-index: 100;" width='100%' src="lucidover.png">
</div>
<div id="lucoverlay" style="position: absolute;z-index: 101;" ></div>
<div class="fullwidth" id="readertext1" style="position: fixed; top: 100px; z-index:2; height: 500px; width: auto;">
<h1 id="line1" class="bodytextfirst">At Lucid, we believe in the dream ahead.</h1>
<h1 id="line1c" class="bodytextfirst" style="position: absolute; color: rgb(202, 202, 202); overflow-x: hidden; overflow-y:unset; white-space: nowrap;">At Lucid, we believe in the dream ahead.</h1>
<h1 id="line2" class="bodytextfirst">Our relentless focus on innovation, luxury</h1>
<h1 id="line2c" class="bodytextfirst" style="position: absolute; color: rgb(202, 202, 202); overflow-x: hidden; overflow-y:unset; white-space: nowrap; display: none;">Our relentless focus on innovation, luxury</h1>
<h1 id="line3" class="bodytextfirst">and sustainability moves us toward a future</h1>
<h1 id="line3c" class="bodytextfirst" style="position: absolute; color: rgb(202, 202, 202); overflow-x: hidden; overflow-y:unset; white-space: nowrap; display: none;">and sustainability moves us toward a future</h1>
<h1 id="line4" class="bodytextfirst">where you no longer have to choose between</h1>
<h1 id="line4c" class="bodytextfirst" style="position: absolute; color: rgb(202, 202, 202); overflow-x: hidden; overflow-y:unset; white-space: nowrap; display: none;">where you no longer have to choose between</h1>
<h1 id="line5" class="bodytextfirst">doing great things and doing the right thing.</h1>
<h1 id="line5c" class="bodytextfirst" style="position: absolute; color: rgb(202, 202, 202); overflow-x: hidden; overflow-y:unset; white-space: nowrap;">doing great things and doing the right thing.</h1>
</div>
<div class="fullblock"></div>
<div class="fullblock"></div>
<div class="fullblock"></div>
<div class="fullblock"></div>
<div class="fullblock"></div>
<div class="fullblock" style="height: 200px; padding-bottom: 0px;"></div>
<video id="v2" src="animbest.mov" width="100%" style="z-index: 350;"></video>
<div class="fullblock"></div>
<div class="fullblock" id='enddisp' style="background-color: rgb(43, 43, 43);">
<div class="rightblock" style="background: black; height: 100%;">
<video id='designv' src='thisisgonnabesocool.mp4' height="112%" autoplay muted loop></video>
<img id='chargingv' src="charging.webp" width="120%" alt="image of lucid air charging" style="display: none">
<img id='performancev' src="performance.webp" width="120%" alt="image of lucid air sapphire driving" style="display: none">
<img id='connectivityv' src="connectivity.webp" width="120%" alt="image of lucid air interior cockpit" style="display: none">
</div>
<div class="leftblock" style="background: rgb(43, 43, 43); height: 100%;">
<div id="ddesign">
<h1>Design</h1>
<h2 style="line-height: 40px; font-family:monospace; color:rgb(183, 183, 183)">Electric has never looked so good. Freed from the rules of traditional automotive design, Air redefines shape, proportion, and dimension of a luxury sedan – while imbuing thoughtful craftsmanship into every detail.</h2>
<h4 id='d1' style="color: goldenrod; opacity: 0;">0.197 - coefficient of drag</h4>
<h4 id='d2' style="color: goldenrod; opacity: 0;">Largest frunk - of any electric car</h4>
<h4 id='d3' style="color: goldenrod; opacity: 0;">Glass Canopy - available roof design</h4>
<h4 id='d4' style="color: goldenrod; opacity: 0;">Sustainable - materials and finishes</h4>
</div>
<div id="dcharging" style="display: none;">
<h1>Charging</h1>
<h2 style="line-height: 40px; font-family:monospace; color:rgb(183, 183, 183)">Lucid began as a battery company, and now helps power the world’s most advanced electric racecars. Thanks to our proprietary Wunderbox charging system, Air charges fast whether at home or at a charging station.</h2>
<h4 id='c1' style="color: goldenrod; opacity: 0;">12 minutes - approximately for 200-mile charge</h4>
<h4 id='c2' style="color: goldenrod; opacity: 0;">Ultra-fast 900V+ - charging system</h4>
<h4 id='c3' style="color: goldenrod; opacity: 0;">3,500+ fast chargers - across America</h4>
<h4 id='c4' style="color: goldenrod; opacity: 0;">Bi-directional - charging capabilities</h4>
</div>
<div id="dperformance" style="display: none;">
<h1>Performance</h1>
<h2 style="line-height: 40px; font-family:monospace; color:rgb(183, 183, 183)">This thing really moves. Our obsessive focus on efficiency and intelligence make Air a total tour de force. Along with track-proven power, its record-breaking range means you can take it anywhere – fast.</h2>
<h4 id='p1' style="color: goldenrod; opacity: 0;">1,200+ HP - max power</h4>
<h4 id='p2' style="color: goldenrod; opacity: 0;">516 miles - EPA estimated range up to</h4>
<h4 id='p3' style="color: goldenrod; opacity: 0;">DreamDrive - advanced driver assistance system</h4>
<h4 id='p4' style="color: goldenrod; opacity: 0;">Ultra-efficient - EV powertrain</h4>
</div>
<div id="dconnectivity" style="display: none;">
<h1>Connectivity</h1>
<h2 style="line-height: 40px; font-family:monospace; color:rgb(183, 183, 183)">The advanced technology within Air is the real deal. From the moment you open the Lucid app, to the immersive in-car experience, every interaction is designed to be instant, intuitive, and exactly as you wish.</h2>
<h4 id='ce1' style="color: goldenrod; opacity: 0;">34-inch, 5K - Glass Cockpit display</h4>
<h4 id='ce2' style="color: goldenrod; opacity: 0;">Over-the-air - software updates</h4>
<h4 id='ce3' style="color: goldenrod; opacity: 0;">21-speaker - Surreal Sound Pro system</h4>
<h4 id='ce4' style="color: goldenrod; opacity: 0;">Alexa-enabled - voice commands</h4>
</div>
</div>
</div>
<div id='www' style="height: 1000px; background-color: black; position: fixed; width: 100%; top: 5000px; z-index: 1000;"></div>
<div id='end' style="height: 1000px; background-color: black; position: absolute; width: 100%; top: 5000px; z-index: 1000; color: white;">
<h1 style="text-align: center;">The end</h1>
<h2 style="text-align: center;">Credits</h2>
<h3 style="text-align: center;">Video content from Throttle house</h3>
<h3 style="text-align: center;">Image content from Lucid motors websites</h3>
<h3 style="text-align: center;">Content heavily based on Lucid motors websites</h3>
<h3 style="text-align: center;">Special effects based on Lucid motors websites</h3>
<h3 style="text-align: center;">Note: This website was create solely for displaying and testing special effects, and is not meant to redisplay adapted content</h3>
</div>
<div class="fullblock"></div>
<div class="fullblock"></div>
<div class="fullblock"></div>
<div class="fullblock"></div>
<div class="fullblock"></div>
<div class="fullblock"></div>
<div class="fullblock"></div>
<div class="fullblock"></div>
<div class="fullblock"></div>
<div class="fullblock"></div>
<div class="fullblock"></div>
<div class="fullblock"></div>
<script src="index.js"></script>
</body>
</html>