├── README.md
├── IMG
    ├── Model-3.jpg
    ├── Model-S.jpg
    ├── Model-Y.jpg
    ├── tesla.png
    ├── Model-3.avif
    ├── Model-S.avif
    ├── Model-X-.avif
    ├── Model-X-.jpg
    ├── Model-Y.avif
    ├── Powerwall.jpg
    ├── tesla-fvi.png
    ├── Accessories.avif
    ├── Accessories.jpg
    ├── Powerwall.avif
    ├── tesla-dark.png
    ├── tesla-white.png
    ├── SolarPanels_D.avif
    ├── SolarPanels_D.jpg
    ├── SolarRoof-Desktop.jpg
    └── SolarRoof-Desktop.avif
├── Fonts
    ├── GothamBook.ttf
    └── GothamMedium.ttf
├── VID
    └── Homepage-Test_Drive-NA-Desktop.webm
├── CSS
    └── homepage.css
└── HTML
    └── homepage.html


/README.md:
--------------------------------------------------------------------------------
1 | # TESLA-clone
2 | This my code for my clone-tesla page.........
3 | 


--------------------------------------------------------------------------------
/IMG/Model-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/IMG/Model-3.jpg


--------------------------------------------------------------------------------
/IMG/Model-S.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/IMG/Model-S.jpg


--------------------------------------------------------------------------------
/IMG/Model-Y.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/IMG/Model-Y.jpg


--------------------------------------------------------------------------------
/IMG/tesla.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/IMG/tesla.png


--------------------------------------------------------------------------------
/IMG/Model-3.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/IMG/Model-3.avif


--------------------------------------------------------------------------------
/IMG/Model-S.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/IMG/Model-S.avif


--------------------------------------------------------------------------------
/IMG/Model-X-.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/IMG/Model-X-.avif


--------------------------------------------------------------------------------
/IMG/Model-X-.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/IMG/Model-X-.jpg


--------------------------------------------------------------------------------
/IMG/Model-Y.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/IMG/Model-Y.avif


--------------------------------------------------------------------------------
/IMG/Powerwall.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/IMG/Powerwall.jpg


--------------------------------------------------------------------------------
/IMG/tesla-fvi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/IMG/tesla-fvi.png


--------------------------------------------------------------------------------
/Fonts/GothamBook.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/Fonts/GothamBook.ttf


--------------------------------------------------------------------------------
/IMG/Accessories.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/IMG/Accessories.avif


--------------------------------------------------------------------------------
/IMG/Accessories.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/IMG/Accessories.jpg


--------------------------------------------------------------------------------
/IMG/Powerwall.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/IMG/Powerwall.avif


--------------------------------------------------------------------------------
/IMG/tesla-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/IMG/tesla-dark.png


--------------------------------------------------------------------------------
/IMG/tesla-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/IMG/tesla-white.png


--------------------------------------------------------------------------------
/Fonts/GothamMedium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/Fonts/GothamMedium.ttf


--------------------------------------------------------------------------------
/IMG/SolarPanels_D.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/IMG/SolarPanels_D.avif


--------------------------------------------------------------------------------
/IMG/SolarPanels_D.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/IMG/SolarPanels_D.jpg


--------------------------------------------------------------------------------
/IMG/SolarRoof-Desktop.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/IMG/SolarRoof-Desktop.jpg


--------------------------------------------------------------------------------
/IMG/SolarRoof-Desktop.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/IMG/SolarRoof-Desktop.avif


--------------------------------------------------------------------------------
/VID/Homepage-Test_Drive-NA-Desktop.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alfaarghya/TESLA-clone/main/VID/Homepage-Test_Drive-NA-Desktop.webm


--------------------------------------------------------------------------------
/CSS/homepage.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     padding: 0;
  3 |     margin: 0;
  4 | }
  5 | @font-face {
  6 |     font-family: myFirstFont;
  7 |     src: url(../Fonts/GothamBook.ttf);
  8 |   }
  9 | body {
 10 |     font-family: myFirstFont;
 11 | }
 12 | 
 13 | 
 14 | 
 15 | 
 16 | /*---- nav-bar ----*/
 17 | #nav-bar {
 18 |     position: fixed;
 19 |     top: 0;
 20 |     width: 100%;
 21 |     display: flex;
 22 |     justify-content: space-between;
 23 |     align-items: center;
 24 |     height: 50px;
 25 | }
 26 | 
 27 | .nav-bar {
 28 |     color: black;
 29 | }
 30 | 
 31 | #page-logo {
 32 |     height: 100px;
 33 |     width: 110px;
 34 |     padding: 8px 0 0 0;
 35 |     cursor: pointer;
 36 | }
 37 | 
 38 | #nav-bar h1 {
 39 |     padding: 0 0 0 5%;
 40 | }
 41 | 
 42 | #head-div-1 {
 43 |     margin-left: 110px;
 44 |     margin-top: 4px;
 45 | }
 46 | 
 47 | .header-list {
 48 |     display: inline-flex;
 49 |     list-style: none;
 50 | }
 51 | 
 52 | .header-list li {
 53 |     padding: 8px 15px;
 54 |     cursor: pointer;
 55 |     transition: background-color 0.3s linear, box-shadow  0.3s linear;
 56 | }
 57 | .header-list li a {
 58 |     text-decoration: none;
 59 |     color: black;
 60 | }
 61 | #nav-bar li {
 62 |     font-size: 15px;
 63 |     font-weight: 600;
 64 |     text-align: center;
 65 |     color: linear-gradient(red, yellow);
 66 | }
 67 | 
 68 | #head-div-2 {
 69 |     padding: 0 3% 0 0;
 70 |     margin-top: 4px;
 71 | }
 72 | 
 73 | .header-list li:hover {
 74 |     background: rgba(0, 0, 0, 0.1);
 75 |     border-radius: 5px;
 76 |     box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
 77 |     backdrop-filter: blur(5px);
 78 |     -webkit-backdrop-filter: blur(5px);
 79 |     transition: opacity .5s ease, visibility 0s .5s;
 80 | }
 81 | 
 82 | #page-logo, #head-div-1, #head-div-2 {
 83 |     transition: all, 0.2s;
 84 |     position: relative;
 85 | }
 86 | 
 87 | /*---- ----*/
 88 | 
 89 | /*---- Sidebar ---- */
 90 | #check, #check-acc {
 91 |     display: none;
 92 | }
 93 | 
 94 | #sidebar_menu {
 95 |     background-color: white;
 96 |     position: fixed;
 97 |     top: 0;
 98 |     right: -400px;
 99 |     height: 100vh;
100 |     width: 24vw;
101 |     overflow-y: auto;
102 |     overflow-x: auto;
103 |     box-shadow: 0 0 5px #cdcccc93;
104 |     transition: all 0.4s linear;
105 |     z-index: 10;
106 | }
107 | 
108 | #menu-close-btn {
109 |     height: 70px;
110 |     position: sticky;
111 |     top: 0;
112 |     z-index: 2;
113 |     background-color: white;
114 | }
115 | 
116 | #x-mark {
117 |     font-weight: 900;
118 |     width: 40px;
119 |     position: relative;
120 |     left: 248px;
121 |     top: 21px;
122 |     line-height: 40px;
123 |     font-size: 24px;
124 |     font-weight: 100;
125 |     cursor: pointer;
126 |     text-align: center;
127 |     
128 | }
129 | 
130 | #sidemenu {
131 |     position: absolute;
132 |     padding: 4px 0 48px 32px;
133 | }
134 | 
135 | #sidemenu ul {
136 |     list-style: none;
137 | }
138 | 
139 | #sidemenu ul li {
140 |     font-size: 14px;
141 |     font-weight: 600;
142 |     height: 20px;
143 |     width: 222px;
144 |     margin: 2px 0;
145 |     padding: 8px 8px;
146 |     cursor: pointer;
147 | }
148 | #sidemenu ul #lang-li {
149 |     padding-bottom: 20px;
150 | }
151 | #sidemenu #lang {
152 |     display: flex;
153 |     cursor: pointer;
154 | }
155 | #sidemenu #lang div div{
156 |     padding-left: 10px;
157 | }
158 | #sidemenu #lang div a{
159 |     padding-left: 10px;
160 |     text-decoration: none;
161 |     color: black;
162 | }
163 | #sidemenu #lang div a:hover {
164 |     color: #4d4d4d;
165 | }
166 | 
167 | #sidebar-blur-bg div {
168 |     position: fixed;
169 |     top: 0;
170 |     left: -100vw;
171 |     height: 100vh;
172 |     width: 100vw;
173 |     background: rgba(0, 0, 0, 0.2);
174 |     border-radius: 5px;
175 |     backdrop-filter: blur(5px);
176 |     -webkit-backdrop-filter: blur(5px);
177 |     z-index: 9;
178 | 
179 | }
180 | 
181 | #check:checked ~ #sidebar_menu {
182 |     right:0;
183 | }
184 | #check:checked ~ #sidebar-blur-bg div {
185 |     left: 0;
186 | }
187 | 
188 | #sidemenu ul li:hover {
189 |     background-color: #cdcccc47;
190 |     border-radius: 5px;
191 |     transition: background-color 0.33s ease;
192 | }
193 | #x-mark:hover {
194 |     background-color: #cdcccc47;
195 |     border-radius: 8px;
196 |     transition: background-color 0.33s ease;
197 | }
198 | 
199 | /*---- ----*/
200 | /*---- Form ----*/
201 | #check-fr {
202 |     display: none;
203 | }
204 | #fr {
205 |     height: 100vh;
206 |     position:absolute;
207 |     top:-100vh;
208 |     left: 32vw;
209 |     opacity: 0;
210 |     transition: all 0.5s linear;
211 | }
212 | #fr-box {
213 |     font: myFirstFont;
214 |     width: 482px;
215 |     height: 335px;
216 |     padding: 10px;
217 |     background-color: rgba(255, 255, 255, 0.848);
218 |     display: block;
219 |     box-shadow: 0 0 200px #4d4d4d;
220 | }
221 | 
222 | .fr-first-ln {
223 |     display: flex;
224 |     justify-content: space-between;
225 | }
226 | .fr-first-ln #x-mark-fr {
227 |     cursor: pointer;
228 | }
229 | 
230 | #fr-box form .Email {
231 |     padding: 0 77px;
232 |     width: 313px;
233 |     height: 40.333px;
234 | }
235 |  .bt-next, .bt-ca {
236 |     padding: 0 77px;
237 | }
238 | .fr-bt{
239 |     height: 35px;
240 |     width: 313px;
241 |     font-size: 17px;
242 |     border-radius: 5px;
243 |     box-shadow: none;
244 |     border: none;
245 |     cursor: pointer;
246 |     background-color: rgba(0, 0, 0, 0.8);
247 |     color: white;
248 | 
249 | }
250 | .fr-bt:hover {
251 |     background-color: rgba(0, 0, 0, 0.5);
252 |     color: white;
253 | }
254 | #email{
255 |     display: block;
256 | }
257 | .sm{
258 |     border: 1px solid #6b6b6b;
259 |     background: transparent;
260 |     border-radius: 5px;
261 |     height: 25px;
262 |     width: 300px;
263 |     font-size: 13px;
264 |     outline: none;
265 |     padding: 13px 5px 0px 5px;
266 |     /* color: #ffffff; */
267 | }
268 | 
269 | .sm:focus{
270 |     border: 1.5px solid #282828;
271 | }
272 | .sml{
273 |     height: 41.333px;
274 |     width: 314px;
275 |     position: relative;
276 |     top: -32px;
277 |     left: 24px;
278 |     font-size: 17px;
279 |     color: #4f4f4f;
280 |     pointer-events: none;
281 |     transition: 0.3s all;
282 | }
283 | 
284 | .sm:focus ~ .sml,
285 | .sm:valid ~ .sml{
286 |     top: -40px;
287 |     left: 10px;
288 |     background: transparent;
289 |     padding: 0 8px;
290 |     font-size: 80%;
291 |     color: #4f4f4f;
292 | }
293 | 
294 | .forgot-pass {
295 |     text-align: center;
296 |     cursor: pointer;
297 |     color: rgb(93, 93, 93);
298 | }
299 | .forgot-pass:hover {
300 |     color: black;
301 | }
302 | 
303 | .form-all {
304 |     margin: 30px 0;
305 | }
306 | 
307 | 
308 | #fr-box hr {
309 |     width: 314px;
310 |     margin: 0 77px;
311 | }
312 | 
313 | #check-fr:checked ~ #fr {
314 |     top: 20vh;
315 |     opacity: 1; 
316 | }
317 | 
318 | /*---- ----*/
319 | 
320 | /*---- body ----*/
321 | .body-con {
322 |     position: absolute;
323 |     top: 0;
324 |     z-index: -1;  
325 |     scroll-snap-type: y mandatory;
326 |     overflow-y:auto;
327 |     height: 100vh;
328 | }
329 | 
330 | .model-con {
331 |     scroll-snap-align: start;
332 |     background-repeat: no-repeat;
333 |     background-size: cover;
334 |     height: 100vh;
335 |     width: 100vw;
336 | }
337 | 
338 | .video-con video{
339 |     position: absolute;
340 |     width: 100vw;
341 | }
342 | 
343 | .video-con .in-all-con .in-all-con-div1 {
344 |     color: white;
345 | }
346 | 
347 | .model-s-con {
348 |     background-image: url("../IMG/Model-S.jpg");
349 |    margin-top: 120px;
350 | }
351 | 
352 | .model-3-con {
353 |     background-image: url("../IMG/Model-3.jpg"); 
354 | }
355 | .model-x-con {
356 |     background-image: url("../IMG/Model-X-.jpg");
357 | }
358 | .model-y-con {
359 |     background-image: url("../IMG/Model-Y.jpg");  
360 | }
361 | .solar-roof-con {
362 |     background-image: url("../IMG/SolarRoof-Desktop.jpg");
363 | }
364 | .solar-panels-con {
365 |     background-image: url("../IMG/SolarPanels_D.jpg");
366 | }
367 | .powerwall-con {
368 |     background-image: url("../IMG/Powerwall.jpg");
369 | }
370 | .accessory-con {
371 |     background-image: url("../IMG/Accessories.jpg");
372 | 
373 | }
374 | 
375 | .in-all-con {
376 |     font-family: myFirstFont;
377 |     text-align: center;
378 |     height: 50vh;
379 |     padding-top: 55px;
380 | }
381 | 
382 | .in-all-con  .in-all-con-div1 p {
383 |     padding-top: 10px;
384 | }
385 | 
386 | .in-all-con  .in-all-con-div2 {
387 |     margin-top: 30%;
388 | }
389 | 
390 | .in-all-con-div1 {
391 |     transform-origin: 0 0;
392 |     transform: translateY(100px);
393 |     opacity: 0;
394 |     transition-property: transform, opacity;
395 |     transition-duration: 0.5s;
396 |     transition-timing-function: ease;
397 | }
398 | .in-all-con-div1 h1 {
399 |     font-size: 40px;
400 | }
401 | .in-all-con-div1 p {
402 |     font-size: 15px;
403 | }
404 | .in-all-con-div2 {
405 |     transform-origin: 0 0;
406 |     transform: translateY(-100px);
407 |     opacity: 0;
408 |     transition-property: transform, opacity;
409 |     transition-duration: 0.5s;
410 |     transition-timing-function: ease;
411 | }
412 | 
413 | .model-con:is(:hover, :focus) .in-all-con-div2 {
414 |     transform: translateY(0);
415 |     opacity: 100%;
416 | }
417 | 
418 | .model-con:is(:hover, :focus) .in-all-con-div1 {
419 |     transform: translateY(0);
420 |     opacity: 100%;
421 | }
422 | 
423 | .in-all-con-div2 button span {
424 |     font-family: myFirstFont;
425 |     width: 100%;
426 |     font-size: 15px;
427 |     font-weight: 600;
428 | }
429 | .in-all-con-div2 button {
430 |     padding: 12px 100px;
431 |     margin: 0 10px;
432 |     border-radius: 5px;
433 |     box-shadow: none;
434 |     border: none;
435 |     cursor: pointer;
436 | }
437 | 
438 | .btn-white {
439 |     background-color: rgba(255, 255, 255, 0.8);
440 |     color: black;
441 | }
442 | 
443 | .btn-white:hover {
444 |     background-color: rgba(255, 255, 255, 0.5);
445 |     color: black;
446 | }
447 | .btn-black {
448 |     background-color: rgba(0, 0, 0, 0.8);
449 |     color: white;
450 | }
451 | .btn-black:hover {
452 |     background-color: rgba(0, 0, 0, 0.5);
453 |     color: white;
454 | }
455 | .btn-gray {
456 |     background-color: rgba(23, 26, 32, 0.5);
457 |     color: white;
458 | }
459 | .btn-gray:hover {
460 |     background-color: rgba(23, 26, 32, 0.8);
461 |     color: white;
462 | }
463 | /*---- ----*/
464 | 
465 | /*---- footer ----*/
466 | footer {
467 |     text-align: center;
468 |     position: relative;
469 |     top: 32%;
470 | }
471 | 
472 | footer ul li{
473 |     font-family: myFirstFont;
474 |     display: inline-block;
475 |     font-size: 12px;
476 |     font-weight: 600;
477 |     padding: 0 5px ;
478 |     color: rgb(93, 93, 93);
479 |     cursor: pointer;
480 | }
481 | footer ul li:hover {
482 |     color: black;
483 | }
484 | /*---- ----*/
485 | 


--------------------------------------------------------------------------------
/HTML/homepage.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
  7 |         integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
  8 |         crossorigin="anonymous" referrerpolicy="no-referrer" />
  9 |     <link rel="stylesheet"
 10 |         href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
 11 |     <title>Electric Cars, Solar & Clean Energy | Tesla</title>
 12 | 
 13 |     <link rel="icon" href="../IMG/tesla-fvi.png" type="image/x-icon">
 14 |     <link rel="stylesheet" href="../CSS/homepage.css">
 15 | </head>
 16 | 
 17 | <body>
 18 |     <div id="main-bar">
 19 |         <header>
 20 |             <div class="nav-bar" id="nav-bar">
 21 |                 <h1><img id="page-logo" src="../IMG/tesla-dark.png" alt="TESLA"></h1>
 22 |                 <div id="head-div-1">
 23 |                     <ul class="header-list">
 24 |                         <li>Model S</li>
 25 |                         <li>Model 3</li>
 26 |                         <li>Model X</li>
 27 |                         <li>Model Y</li>
 28 |                         <li>Solar Roof</li>
 29 |                         <li>Solar Panels</li>
 30 |                         <li>Powerwall</li>
 31 |                     </ul>
 32 |                 </div>
 33 | 
 34 |                 <div id="head-div-2">
 35 |                     <ul class="header-list">
 36 |                         <li>Shop</li>
 37 |                         <div>
 38 |                             <label for="check-fr">
 39 |                                 <li>Account</li>
 40 |                             </label>
 41 |                         </div>
 42 |                         <div>
 43 |                             <label for="check">
 44 |                                 <li id="menu-open-btn">Menu</li>
 45 |                             </label>
 46 |                         </div>
 47 |                     </ul>
 48 |                 </div>
 49 |             </div>
 50 |             <input type="checkbox" id="check">
 51 |             <div id="sidebar_menu">
 52 |                 <div id="menu-close-btn">
 53 |                     <label for="check">
 54 |                         <!-- <i id="x-mark" class="fa-solid fa-xmark"></i> -->
 55 |                         <span id="x-mark" class="material-symbols-outlined">
 56 |                             close
 57 |                         </span>
 58 |                     </label>
 59 |                 </div>
 60 |                 <div id="sidemenu">
 61 |                     <ul>
 62 |                         <li><span>Existing Inventory</span></li>
 63 |                         <li><span>Used Inventory</span></li>
 64 |                         <li><span>Trade-In</span></li>
 65 |                         <li><span>Demo Drive</span></li>
 66 |                         <li><span>Insurance</span></li>
 67 |                         <li><span>Fleet</span></li>
 68 |                         <li><span>Cybertruck</span></li>
 69 |                         <li><span>Roadster</span></li>
 70 |                         <li><span>Semi</span></li>
 71 |                         <li><span>Charging</span></li>
 72 |                         <li><span>Commercial Energy</span></li>
 73 |                         <li><span>Utilities</span></li>
 74 |                         <li><span>Careers</span></li>
 75 |                         <li><span>Find us</span></li>
 76 |                         <li><span>Events</span></li>
 77 |                         <li><span>support</span></li>
 78 |                         <li><span>Investor Relation</span></li>
 79 |                         <li id="lang-li">
 80 |                             <div id="lang">
 81 |                                 <span class="material-symbols-outlined">language</span>
 82 |                                 <div>
 83 |                                     <div>
 84 |                                         <strong>India</strong>
 85 |                                     </div>
 86 |                                     <a href="">English</a>
 87 |                                 </div>
 88 |                             </div>
 89 |                         </li>
 90 |                     </ul>
 91 |                 </div>
 92 |             </div>
 93 |             <div id="sidebar-blur-bg">
 94 |                 <label for="check">
 95 |                     <div></div>
 96 |                 </label>
 97 |             </div>
 98 |         </header>
 99 |     </div>
100 |     <input type="checkbox" id="check-fr">
101 |     <div id="fr">
102 |         <div id="fr-box">
103 |             <form action="" method="post">
104 |                 <div class="fr-first-ln">
105 |                     <h2>Sign In</h2>
106 |                     <label for="check-fr">
107 |                         <!-- <i id="x-mark" class="fa-solid fa-xmark"></i> -->
108 |                         <span id="x-mark-fr" class="material-symbols-outlined">
109 |                             close
110 |                         </span>
111 |                     </label>
112 |                 </div>
113 |                 <div class="Email form-all">
114 |                     <input type="text" name="eid" autocomplete="off" required="required" id="email" class="sm">
115 |                     <label class="sml" for="email">Email</label>
116 |                 </div>
117 |                 <div class="bt-next form-all">
118 |                     <button class="buton fr-bt">
119 |                         <span class="buton-link-span">Next</span>
120 |                     </button>
121 |                 </div>
122 |             </form>
123 |             <div class="forgot-pass form-all">
124 |                 <span>Trouble Signing In?</span>
125 |             </div>
126 |             <hr>
127 |             <div class="bt-ca form-all">
128 |                 <button class=" fr-bt">
129 |                     <span>Create Account</span>
130 |                 </button>
131 |             </div>
132 |         </div>
133 |     </div>
134 |     <div class="body-con">
135 | 
136 |         <div class="video-con model-con">
137 |             <video controls autoplay loop playsinline style="pointer-events: none;">
138 |                 <source src="../VID/Homepage-Test_Drive-NA-Desktop.webm" type="video/mp4">
139 |             </video>
140 |             <div class="in-all-con">
141 |                 <div class="in-all-con-div1">
142 |                     <h1>Experiance Tesla Today</h1>
143 |                     <p>Schedule a Demo Drive Today </p>
144 |                 </div>
145 |                 <div class="in-all-con-div2">
146 |                     <button class="btn-white" type="button"><span>Demo Drive</span></button>
147 |                     <!-- <button class="btn-black" type="button"><span>Custom Order</span></button> -->
148 |                     <!-- <button class="btn-gray" type="button"><span>Learn More</span></button> -->
149 |                 </div>
150 |             </div>
151 | 
152 |         </div>
153 |         <div class="model-s-con model-con">
154 |             <!-- <img src="../IMG/Model-S.avif" alt="" srcset=""> -->
155 |             <div class="in-modelS in-all-con">
156 |                 <div class="in-all-con-div1">
157 |                     <h1>Model S</h1>
158 |                     <p>Starting At 7,301,858 Rs.</p>
159 |                 </div>
160 |                 <div class="in-all-con-div2">
161 |                     <button class="btn-white" type="button"><span>Demo Drive</span></button>
162 |                     <button class="btn-black" type="button"><span>Custom Order</span></button>
163 |                     <button class="btn-gray" type="button"><span>Learn More</span></button>
164 |                 </div>
165 |             </div>
166 |         </div>
167 |         <div class="model-3-con model-con">
168 |             <!-- <img src="../IMG /Model-3.avif" alt=""> -->
169 |             <div class="in-model3 in-all-con">
170 |                 <div class="in-all-con-div1">
171 |                     <h1>Model 3</h1>
172 |                     <p>Starting At 3,317,481 Rs.</p>
173 |                 </div>
174 |                 <div class="in-all-con-div2">
175 |                     <button class="btn-white" type="button"><span>Demo Drive</span></button>
176 |                     <button class="btn-black" type="button"><span>Custom Order</span></button>
177 |                     <button class="btn-gray" type="button"><span>Learn More</span></button>
178 |                 </div>
179 |             </div>
180 |         </div>
181 |         <div class="model-x-con model-con">
182 |             <!-- <img src="../IMG/Model-X-.avif" alt=""> -->
183 |             <div class="in-all-con">
184 |                 <div class="in-all-con-div1">
185 |                     <h1>Model X</h1>
186 |                     <p>Starting At 8,127,020 Rs.</p>
187 |                 </div>
188 |                 <div class="in-all-con-div2">
189 |                     <button class="btn-white" type="button"><span>Demo Drive</span></button>
190 |                     <button class="btn-black" type="button"><span>Custom Order</span></button>
191 |                     <button class="btn-gray" type="button"><span>Learn More</span></button>
192 |                 </div>
193 |             </div>
194 |         </div>
195 |         <div class="model-y-con model-con">
196 |             <!-- <img src="../IMG/Model-Y.avif" alt=""> -->
197 |             <div class="in-all-con">
198 |                 <div class="in-all-con-div1">
199 |                     <h1>Model Y</h1>
200 |                     <p>Starting At 4,166,242 Rs.</p>
201 |                 </div>
202 |                 <div class="in-all-con-div2">
203 |                     <button class="btn-white" type="button"><span>Demo Drive</span></button>
204 |                     <button class="btn-black" type="button"><span>Custom Order</span></button>
205 |                     <button class="btn-gray" type="button"><span>Learn More</span></button>
206 |                 </div>
207 |             </div>
208 |         </div>
209 |         <div class="solar-roof-con model-con">
210 |             <!-- <img src="../IMG/SolarRoof-Desktop.avif" alt=""> -->
211 |             <div class="in-all-con">
212 |                 <div class="in-all-con-div1">
213 |                     <h1>Solar Roof</h1>
214 |                     <p>Produce Clean Energy From Your Roof</p>
215 |                 </div>
216 |                 <div class="in-all-con-div2">
217 |                     <!-- <button class="btn-white" type="button"><span>Demo Drive</span></button> -->
218 |                     <button class="btn-black" type="button"><span>Order Now</span></button>
219 |                     <button class="btn-gray" type="button"><span>Learn More</span></button>
220 |                 </div>
221 |             </div>
222 |         </div>
223 |         <div class="solar-panels-con model-con">
224 |             <!-- <img src="../IMG/SolarPanels_D.avif" alt=""> -->
225 |             <div class="in-all-con">
226 |                 <div class="in-all-con-div1">
227 |                     <h1>Solar Panels</h1>
228 |                     <p>Produce Clean Energy From Your Roof</p>
229 |                 </div>
230 |                 <div class="in-all-con-div2">
231 |                     <!-- <button class="btn-white" type="button"><span>Demo Drive</span></button> -->
232 |                     <button class="btn-black" type="button"><span>Order Now</span></button>
233 |                     <button class="btn-gray" type="button"><span>Learn More</span></button>
234 |                 </div>
235 |             </div>
236 |         </div>
237 |         <div class="powerwall-con model-con">
238 |             <!-- <img src="../IMG/Powerwall.avif" alt=""> -->
239 |             <div class="in-all-con">
240 |                 <div class="in-all-con-div1">
241 |                     <h1>Powerwall</h1>
242 |                     <p>Stores Your Solar Energy</p>
243 |                 </div>
244 |                 <div class="in-all-con-div2">
245 |                     <!-- <button class="btn-white" type="button"><span>Demo Drive</span></button> -->
246 |                     <button class="btn-black" type="button"><span>Order Now</span></button>
247 |                     <button class="btn-gray" type="button"><span>Learn More</span></button>
248 |                 </div>
249 |             </div>
250 |         </div>
251 |         <div class="accessory-con model-con">
252 |             <!-- <img src="../IMG/Accessories.avif" alt=""> -->
253 |             <div class="in-all-con">
254 |                 <div class="in-all-con-div1">
255 |                     <h1>Accessories</h1>
256 |                 </div>
257 |                 <div class="in-all-con-div2">
258 | 
259 |                     <!-- <button class="btn-white" type="button"><span>Demo Drive</span></button> -->
260 |                     <button class="btn-black" type="button"><span>Shop Now</span></button>
261 |                     <!-- <button class="btn-gray" type="button"><span>Learn More</span></button> -->
262 | 
263 |                 </div>
264 |             </div>
265 |             <footer>
266 |                 <ul>
267 |                     <li>Tesla &copy; 2023</li>
268 |                     <li>Privacy & Legal</li>
269 |                     <li>Vehicle Recalls</li>
270 |                     <li>Contact</li>
271 |                     <li>News</li>
272 |                     <li>Get Updates</li>
273 |                     <li>Locations</li>
274 |                 </ul>
275 |             </footer>
276 |         </div>
277 | 
278 |     </div>
279 | </body>
280 | 
281 | </html>


--------------------------------------------------------------------------------