-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
187 lines (181 loc) · 10.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electric Cars, Solar & Clean Energy | Tesla</title>
<link rel="icon" href="./assets/images/favicon.ico" />
<link rel="stylesheet" href="./assets/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./assets/vendor/animate/animate.min.css">
<link rel="stylesheet" href="./assets/vendor/swiper/swiper-bundle.min.css">
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<nav class="navbar fixed-top navbar-dark bg-transparent d-flex justify-content-between align-items-center"
style="padding: .5em 3.5em .5em 3.5em;">
<a class="navbar-brand text-white" href="#!">
<svg class="tds-icon" style="inline-size: calc(24px*5);" viewBox="0 0 342 35"
xmlns="http://www.w3.org/2000/svg">
<path
d="M0 .1a9.7 9.7 0 0 0 7 7h11l.5.1v27.6h6.8V7.3L26 7h11a9.8 9.8 0 0 0 7-7H0zm238.6 0h-6.8v34.8H263a9.7 9.7 0 0 0 6-6.8h-30.3V0zm-52.3 6.8c3.6-1 6.6-3.8 7.4-6.9l-38.1.1v20.6h31.1v7.2h-24.4a13.6 13.6 0 0 0-8.7 7h39.9v-21h-31.2v-7h24zm116.2 28h6.7v-14h24.6v14h6.7v-21h-38zM85.3 7h26a9.6 9.6 0 0 0 7.1-7H78.3a9.6 9.6 0 0 0 7 7zm0 13.8h26a9.6 9.6 0 0 0 7.1-7H78.3a9.6 9.6 0 0 0 7 7zm0 14.1h26a9.6 9.6 0 0 0 7.1-7H78.3a9.6 9.6 0 0 0 7 7zM308.5 7h26a9.6 9.6 0 0 0 7-7h-40a9.6 9.6 0 0 0 7 7z"
fill="currentColor"></path>
</svg>
</a>
<ul class="navbar-nav d-flex flex-row font-weight-700">
<li class="nav-item active mr-4">
<a class="nav-link" href="#">Vehicles <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item mr-4">
<a class="nav-link" href="#">Energy</a>
</li>
<li class="nav-item mr-4">
<a class="nav-link" href="#">Charging</a>
</li>
<li class="nav-item mr-4">
<a class="nav-link" href="#">Discover</a>
</li>
<li class="nav-item mr-4">
<a class="nav-link" href="#">Shop</a>
</li>
</ul>
<div class="d-flex justify-content-around align-items-center">
<a href="#!" class="nav-link text-white" style="padding: 0 .5em;">
<svg class="tds-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor"
d="M12 20.5a8.5 8.5 0 1 1 0-17 8.5 8.5 0 0 1 0 17Zm0 1.5c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm0-6a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm.053-3.533a7.8 7.8 0 0 1 .92-.767 6.97 6.97 0 0 0 .746-.61 2.31 2.31 0 0 0 .468-.635c.126-.253.188-.548.188-.883 0-.374-.082-.723-.246-1.048-.158-.324-.415-.588-.771-.792-.356-.203-.81-.305-1.362-.305-.575 0-1.045.116-1.411.347a1.991 1.991 0 0 0-.788.89c-.06.134-.11.272-.148.413-.111.414-.445.767-.874.767-.428 0-.784-.35-.71-.772.07-.407.2-.79.386-1.15.301-.583.758-1.048 1.37-1.394C10.435 6.176 11.185 6 12.07 6c.93 0 1.687.181 2.273.544.59.358 1.014.803 1.271 1.337.257.533.386 1.07.386 1.608 0 .545-.085 1.012-.254 1.403-.17.385-.375.698-.616.94-.235.242-.55.514-.943.817-.312.247-.561.46-.747.635-.18.176-.33.385-.451.627-.05.099-.087.2-.113.302-.108.424-.422.787-.86.787-.437 0-.806-.356-.76-.79a2.948 2.948 0 0 1 .797-1.743Z">
</path>
</svg>
</a>
<a href="#!" class="nav-link text-white" style="padding: 0 .5em;">
<svg class="tds-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor"
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10ZM9.254 20.047a8.147 8.147 0 0 1-.768-1.378c-.404-.91-.722-1.985-.935-3.169h-3.3a8.526 8.526 0 0 0 5.003 4.547Zm.603-1.988c.336.757.718 1.324 1.103 1.69.382.364.732.501 1.04.501.308 0 .658-.137 1.04-.5.385-.367.767-.934 1.103-1.69.321-.723.588-1.59.78-2.56H9.076c.192.97.459 1.837.78 2.56ZM8.75 12c0 .691.036 1.36.103 2h6.294c.067-.64.103-1.309.103-2 0-.691-.036-1.36-.103-2H8.853c-.067.64-.103 1.309-.103 2Zm-1.405-2H3.737a8.522 8.522 0 0 0-.237 2c0 .689.082 1.359.237 2h3.608a20.75 20.75 0 0 1 0-4Zm1.732-1.5h5.845c-.19-.97-.458-1.837-.779-2.56-.336-.756-.718-1.323-1.103-1.69-.382-.363-.732-.5-1.04-.5-.308 0-.658.137-1.04.5-.385.367-.767.934-1.103 1.69-.321.723-.588 1.59-.78 2.56Zm7.577 1.5a20.728 20.728 0 0 1 0 4h3.61a8.52 8.52 0 0 0 .236-2 8.52 8.52 0 0 0-.237-2h-3.609Zm3.094-1.5a8.526 8.526 0 0 0-5.002-4.547c.287.408.543.873.768 1.378.404.91.722 1.985.935 3.169h3.3Zm-12.197 0c.213-1.184.531-2.26.935-3.169.225-.505.48-.97.768-1.378A8.526 8.526 0 0 0 4.252 8.5h3.3Zm7.963 10.169c-.225.505-.48.97-.768 1.378a8.526 8.526 0 0 0 5.002-4.547h-3.3c-.212 1.184-.53 2.26-.934 3.169Z">
</path>
</svg>
</a>
<a href="#!" class="nav-link text-white" style="padding: 0 .5em;">
<svg class="tds-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor"
d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zM6.858 18.752c.605-1.868 2.722-3.24 5.142-3.24 2.42 0 4.537 1.372 5.142 3.24C15.712 19.844 13.933 20.5 12 20.5s-3.712-.656-5.142-1.748zm11.469-1.095c-1.02-2.165-3.483-3.645-6.327-3.645s-5.307 1.48-6.327 3.645A8.456 8.456 0 0 1 3.5 12c0-4.687 3.813-8.5 8.5-8.5 4.687 0 8.5 3.813 8.5 8.5a8.456 8.456 0 0 1-2.173 5.657zM12 6a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zm0 5.5c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2z">
</path>
</svg>
</a>
</div>
</nav>
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<div class="row">
<div class="col-12 h-100vh">
<div class="overlay-bg source">
<video class="video-fit" preload="auto" playsinline="" data-autoplay-desktop="true"
data-autoplay-portrait="true" data-autoplay-mobile="true" data-play-on-hover="false"
muted="" loop=""
data-src-desktop="./assets/videos/Model-3-Main-Hero-Video-Desktop-NA.mp4"
data-src-portrait="./assets/videos/Model-3-Main-Hero-Video-Desktop-NA.mp4"
data-src-mobile="https://digitalassets.tesla.com/tesla-contents/video/upload/Model-3-Main-Hero-Video-Mobile-NA.mp4"
data-src="./assets/videos/Model-3-Main-Hero-Video-Desktop-NA.mp4" data-object-fit="true"
src="./assets/videos/Model-3-Main-Hero-Video-Desktop-NA.mp4" data-loaded="true"
autoplay=""></video>
</div>
<div
class="overlay-bg information d-flex flex-column justify-content-between align-items-center text-white pb-3">
<div class="text animate__animated animate__fadeInDown text-center"
style="margin-top: 6.5em;" data-swiper-parallax="-150"
data-swiper-parallax-duration="1000" data-swiper-parallax-opacity="0">
<h1>Model Y</h1>
<h5>From $32,890*</h5>
<p class="small">After Federal Tax Credit & Est. Gas Savings</p>
</div>
<div class="text animate__animated animate__fadeInDown text-center"
data-swiper-parallax="150" data-swiper-parallax-duration="1000"
data-swiper-parallax-opacity="0">
<div class="col-12 mb-3">
<button type="button" style="padding: 10px 100px 10px 100px;"
class="btn btn-transparent-white font-weight-700">Order Now</button>
<button type="button" style="padding: 10px 100px 10px 100px;"
class="btn btn-transparent-black font-weight-700 ml-4">Demo Drive</button>
</div>
<p class="small">*Price before incentives and savings is $43,990, excluding taxes and fees. Subject to change.<br/>
Learn about est. gas savings.</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row">
<div class="col-12 h-100vh">
<div class="overlay-bg source">
<img src="./assets/images/Homepage-Model-X-Desktop-LHD.avif" class="img-fluid">
</div>
<div
class="overlay-bg information d-flex flex-column justify-content-between align-items-center text-white pb-3">
<div class="text animate__animated animate__fadeInDown text-center"
style="margin-top: 6.5em;" data-swiper-parallax="-150"
data-swiper-parallax-duration="1000" data-swiper-parallax-opacity="0">
<h1>Model 3</h1>
<h5>From $28,490*</h5>
<p class="small">After Federal Tax Credit & Est. Gas Savings</p>
</div>
<div class="text animate__animated animate__fadeInDown text-center"
data-swiper-parallax="150" data-swiper-parallax-duration="1000"
data-swiper-parallax-opacity="0">
<div class="col-12 mb-3">
<button type="button" style="padding: 10px 100px 10px 100px;"
class="btn btn-transparent-white font-weight-700">Order Now</button>
<button type="button" style="padding: 10px 100px 10px 100px;"
class="btn btn-transparent-black font-weight-700 ml-4">Demo Drive</button>
</div>
<p class="small">*Price before incentives and savings is $38,990, excluding taxes and fees. Subject to change.<br/>
Learn about est. gas savings.</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row">
<div class="col-12 h-100vh">
<div class="overlay-bg source">
<img src="./assets/images/Homepage-Model-Y-Global-Desktop.avif" class="img-fluid">
</div>
<div
class="overlay-bg information d-flex flex-column justify-content-between align-items-center text-white pb-3">
<div class="text animate__animated animate__fadeInDown text-center"
style="margin-top: 6.5em;" data-swiper-parallax="-150"
data-swiper-parallax-duration="1000" data-swiper-parallax-opacity="0">
<h1>Model S</h1>
<h5>From $71,090*</h5>
<p class="small">After Est. Gas Savings</p>
</div>
<div class="text animate__animated animate__fadeInDown text-center"
data-swiper-parallax="150" data-swiper-parallax-duration="1000"
data-swiper-parallax-opacity="0">
<div class="col-12 mb-3">
<button type="button" style="padding: 10px 100px 10px 100px;"
class="btn btn-transparent-white font-weight-700">Order Now</button>
<button type="button" style="padding: 10px 100px 10px 100px;"
class="btn btn-transparent-black font-weight-700 ml-4">Demo Drive</button>
</div>
<p class="small">*Price before savings is $74,990, excluding taxes and fees. Subject to change. <br/>
Learn about est. gas savings.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<script src="./assets/vendor/jquery/jquery.min.js"></script>
<script src="./assets/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="./assets/vendor/bootstrap/js/popper.min.js"></script>
<script src="./assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="./assets/js/main.js"></script>
</body>
</html>