Menu

How to build a Tesla clone with vanilla html, css and javascript

Build the tesla clone.

In this blog, you will learn how to build a tesla clone using vanilla HTML, CSS and JavaScript.

Knowledge Requirements:

  • Html
  • CSS
  • JavaScript

Features

  • Full page sections
  • Every section will have a snapping effect.
  • Navigation menu
  • Fully responsive

Video tutorial

I have already made a video about it on my youtube channel. Check that out.

Please like and subscribe to Cules Coding. It motivates me to create more content like this.

Live Preview

You can preview this page visiting this link

Resources

All source code and media files can be found in the github repo.

So, Let's start. We are going to build the page using the mobile-first approach.

Build the sections

1<section id="fullpage">
2    <section class="section one">
3        <div class="section__content">
4            <h1 class="section__content__title">Model S</h1>
5            <h2 class="section__content__subtitle">
6                order online for <a href="#">Touchless delivery</a>
7            </h2>
8        </div>
9

10        <div class="section__action__container">
11            <a class="section__action__btn action__btn__primary" href="#"
12                >Custom Order</a
13            >
14            <a class="section__action__btn action__btn__secondary" href="#"
15                >Existing inventory</a
16            >
17        </div>
18    </section>
19

20    <section class="section two">
21        <div class="section__content">
22            <h1 class="section__content__title">Model y</h1>
23            <h2 class="section__content__subtitle">
24                order online for <a href="#">Touchless delivery</a>
25            </h2>
26        </div>
27

28        <div class="section__action__container">
29            <a class="section__action__btn action__btn__primary" href="#"
30                >Custom Order</a
31            >
32            <a class="section__action__btn action__btn__secondary" href="#"
33                >Existing inventory</a
34            >
35        </div>
36    </section>
37

38    <section class="section three">
39        <div class="section__content">
40            <h1 class="section__content__title">Model 3</h1>
41            <h2 class="section__content__subtitle">
42                order online for <a href="#">Touchless delivery</a>
43            </h2>
44        </div>
45

46        <div class="section__action__container">
47            <a class="section__action__btn action__btn__primary" href="#"
48                >Custom Order</a
49            >
50            <a class="section__action__btn action__btn__secondary" href="#"
51                >Existing inventory</a
52            >
53        </div>
54    </section>
55

56    <section class="section four">
57        <div class="section__content">
58            <h1 class="section__content__title">Model x</h1>
59            <h2 class="section__content__subtitle">
60                order online for <a href="#">Touchless delivery</a>
61            </h2>
62        </div>
63

64        <div class="section__action__container">
65            <a class="section__action__btn action__btn__primary" href="#"
66                >Custom Order</a
67            >
68            <a class="section__action__btn action__btn__secondary" href="#"
69                >Existing inventory</a
70            >
71        </div>
72    </section>
73

74    <section class="section five">
75        <div class="section__content">
76            <h1 class="section__content__title">solar panels</h1>
77            <h2 class="section__content__subtitle">
78                Lowest Cost Solar Panels In America
79            </h2>
80        </div>
81

82        <div class="section__action__container">
83            <a class="section__action__btn action__btn__primary" href="#">Order now</a>
84            <a class="section__action__btn action__btn__secondary" href="#"
85                >Learn more</a
86            >
87        </div>
88    </section>
89

90    <section class="section six">
91        <div class="section__content">
92            <h1 class="section__content__title">Solar roofs</h1>
93            <h2 class="section__content__subtitle">
94                Produce Clean Energy From Your Roof
95            </h2>
96        </div>
97

98        <div class="section__action__container">
99            <a class="section__action__btn action__btn__primary" href="#">Order now</a>
100            <a class="section__action__btn action__btn__secondary" href="#"
101                >Learn more</a
102            >
103        </div>
104    </section>
105

106    <section class="section seven">
107        <div class="section__content">
108            <h1 class="section__content__title">Accessories</h1>
109        </div>
110

111        <div class="section__action__container">
112            <a class="section__action__btn action__btn__primary" href="#">Shop now</a>
113        </div>
114    </section>
115</section>
1.section {
2    background-repeat: no-repeat;
3    background-size: cover;
4    background-position: center;
5}
6

7.section.one {
8    background-image: url(../media/1.avif);
9}
10

11.section.two {
12    background-image: url(../media/2.avif);
13}
14

15.section.three {
16    background-image: url(../media/3.avif);
17}
18

19.section.four {
20    background-image: url(../media/4.avif);
21}
22

23.section.five {
24    background-image: url(../media/5.avif);
25}
26

27.section.six {
28    background-image: url(../media/6.avif);
29}
30

31.section.seven {
32    background-image: url(../media/7.avif);
33}
34

35.section__content {
36    position: absolute;
37    top: 20%;
38    left: 50%;
39    transform: translateX(-50%);
40    width: 100%;
41    text-align: center;
42    text-transform: capitalize;
43    color: var(--primary-color);
44}
45

46.section__content__title {
47    font-size: 4rem;
48    font-weight: bold;
49    margin-bottom: 0.5rem;
50}
51

52.section__content__subtitle {
53    font-size: 1.5rem;
54    font-weight: 500;
55}
56

57.section__content__subtitle a {
58    color: inherit;
59}
60

61.section__content__subtitle a:hover {
62    text-decoration: underline;
63}
64

65.section__action__container {
66    position: absolute;
67    bottom: 15%;
68    left: 50%;
69    transform: translateX(-50%);
70    width: 100%;
71    text-align: center;
72    display: flex;
73    flex-wrap: wrap;
74    justify-content: center;
75}
76

77.section__action__btn {
78    font-size: 1.5rem;
79    font-weight: 500;
80    padding: 1rem;
81    border-radius: 2rem;
82    flex-basis: 80%;
83    margin-bottom: 1rem;
84    text-transform: capitalize;
85}
86

87.action__btn__primary {
88    background: rgba(23, 26, 42, 0.8);
89    color: white;
90}
91

92.action__btn__secondary {
93    background: rgba(255, 255, 255, 0.65);
94    color: var(--primary-color);
95}

Explaination:

  • First, we have wrapped all the sections into a container id of #fullpage. We will need this for making the full page look.
  • In every section, we have attached background images.
  • Every section will have to subsection.
    1. Section content with title and subtitle.
    2. Section actions that will have the action buttons at the bottom.

Let's make the snapping effect. We need to use the fullpagejs library

Add the CDN links to your html.

1<head>
2    <link
3        rel="stylesheet"
4        href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css"
5        integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w=="
6        crossorigin="anonymous"
7        referrerpolicy="no-referrer"
8    />
9</head>
10

11<body>
12    <script
13        src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"
14        integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg=="
15        crossorigin="anonymous"
16        referrerpolicy="no-referrer"
17    ></script>
18</body>

Let's add javascript.

1new fullpage('#fullpage', {
2    autoScrolling: true,
3    scrollBar: true,
4})

Explanation:

  • We have just created a new instance of fullpage. And passed the section container selector.

And now you have the full page effect.

Let's build the footer

Include the following html inside the last full page section.

1<footer class="footer">
2    <ul>
3        <li><a href="#">Tesla © 2021</a></li>
4        <li><a href="#"> Privacy &amp; Legal </a></li>
5        <li><a href="#"> contact </a></li>
6        <li><a href="#">careers</a></li>
7        <li><a href="#">news</a></li>
8        <li><a href="#">engage</a></li>
9        <li><a href="#">locations</a></li>
10    </ul>
11</footer>

Let's create two css variables for color. If you don't know about css variables, you can check this blog out.

1:root {
2    --primary-color: #181b21;
3    --secondary-color: #5c5d61;
4}
1.footer {
2    position: absolute;
3    z-index: 100;
4    bottom: 0;
5    width: 100%;
6}
7

8.footer ul {
9    width: 80%;
10    margin: 2rem auto;
11    display: flex;
12    justify-content: space-evenly;
13    flex-wrap: wrap;
14}
15

16.footer ul li {
17    margin: 0 1rem;
18    margin-top: 1rem;
19    text-transform: capitalize;
20    font-weight: 600;
21}
22

23.footer ul li a {
24    color: var(--secondary-color);
25    font-size: 1.2rem;
26}

Let's build the header

1<header class="header">
2    <a class="header__left" href="#">
3        <img class="header__logo" src="media/tesla_logo.svg" alt="" />
4    </a>
5

6    <ul class="header__middle"></ul>
7

8    <div class="header__right">
9        <a class="header__nav__btn" href="#">shop</a>
10        <a class="header__nav__btn" href="#">account</a>
11        <a class="header__nav__btn menu__btn" href="#">menu</a>
12    </div>
13</header>
1.header {
2    height: 5rem;
3    position: fixed;
4    top: 0;
5    left: 0;
6    width: 100%;
7    z-index: 5;
8    display: flex;
9    justify-content: space-between;
10}
11

12.header__middle {
13    display: none;
14}
15

16.header__left {
17    display: block;
18    overflow: hidden;
19    padding: 0 2rem;
20}
21

22.header__logo {
23    height: 100%;
24    width: 13rem;
25}
26

27.header__right {
28    margin: auto 0;
29    margin-right: 1rem;
30}
31

32.header__nav__btn {
33    display: none;
34    font-size: 1.4rem;
35    font-weight: bold;
36    padding: 1rem;
37    color: var(--secondary-color);
38    border-radius: 1.5rem;
39    text-transform: capitalize;
40    transition: background 0.3s linear;
41}
42

43.header__nav__btn:hover {
44    background: #0000001c;
45}
46

47.header__nav__btn.menu__btn {
48    display: inline-block;
49}

Explanation:

  • The header will have three parts.
    1. Header logo
    2. Header middle part. It will be some navigation links. But only will be visible on large screens.
    3. Header right part will have three links. But only the menu link will be visible to toggle the right navigation.

Let's build the right navigation

1<div class="blur__overlay"></div>
2

3<nav class="navigation">
4    <div class="close__btn__container">
5        <img class="navigation__close__btn" src="media/close_icon.svg" alt="" />
6    </div>
7

8    <ul>
9        <li class="link__in__middle">
10            <a class="nav__link" href="#">Model S</a>
11        </li>
12        <li class="link__in__middle">
13            <a class="nav__link" href="#">Model 3</a>
14        </li>
15        <li class="link__in__middle">
16            <a class="nav__link" href="#">Model X</a>
17        </li>
18        <li class="link__in__middle">
19            <a class="nav__link" href="#">Model Y</a>
20        </li>
21        <li class="link__in__middle">
22            <a class="nav__link" href="#">Solar roofs</a>
23        </li>
24        <li class="link__in__middle">
25            <a class="nav__link" href="#">Solar panels</a>
26        </li>
27        <li><a class="nav__link" href="#">Existing Inventory </a></li>
28        <li><a class="nav__link" href="#">Used Inventory </a></li>
29        <li><a class="nav__link" href="#">Trade-In </a></li>
30        <li><a class="nav__link" href="#">Test drive </a></li>
31        <li><a class="nav__link" href="#">Powerwall </a></li>
32        <li><a class="nav__link" href="#">Commercial Energy </a></li>
33        <li><a class="nav__link" href="#">utilities </a></li>
34        <li><a class="nav__link" href="#">Charging</a></li>
35        <li><a class="nav__link" href="#">Find us</a></li>
36        <li><a class="nav__link" href="#">Support</a></li>
37        <li><a class="nav__link" href="#">Investor Relations</a></li>
38    </ul>
39</nav>
1.navigation {
2    position: fixed;
3    top: 0;
4    right: 0;
5    width: 80%;
6    max-width: 35rem;
7    height: 100%;
8    z-index: 10;
9    background: #fff;
10    transform: translateX(100%);
11    transition: transform 0.5s cubic-bezier(0.5, 0, 0, 0.75);
12}
13

14.navigation.is--active {
15    transform: translateX(0);
16}
17

18.navigation ul {
19    width: 80%;
20    margin: 0 auto;
21}
22

23.navigation ul li {
24    width: 100%;
25    padding: 1.2rem 0;
26    padding-left: 2rem;
27    margin-bottom: 0.5rem;
28    cursor: pointer;
29    border-radius: 1.2rem;
30    transition: background-color 0.33s ease;
31}
32

33.nav__link {
34    color: #393c41;
35    font-weight: 600;
36    font-size: 1.5rem;
37    text-transform: capitalize;
38}
39

40.navigation ul li:hover {
41    background: #0000000d;
42}
43

44.close__btn__container {
45    text-align: right;
46    margin: 2rem 3rem;
47}
48

49.navigation__close__btn {
50    width: 3rem;
51    cursor: pointer;
52}
53

54.blur__overlay {
55    display: none;
56    position: fixed;
57    top: 0;
58    left: 0;
59    width: 100%;
60    height: 100%;
61    z-index: 9;
62    background: rgba(0, 0, 0, 0.5);
63    backdrop-filter: blur(1rem);
64    transition: display 0.4s ease;
65}
66

67.blur__overlay.is--active {
68    display: block;
69}
1const menuBtn = document.querySelector('.menu__btn')
2const navigation = document.querySelector('.navigation')
3const navCloseBtn = document.querySelector('.navigation__close__btn')
4

5const blurOverlay = document.querySelector('.blur__overlay')
6

7const IS_ACTIVE = 'is--active'
8

9const toggleNavigation = () => {
10    navigation.classList.toggle(IS_ACTIVE)
11    blurOverlay.classList.toggle(IS_ACTIVE)
12}
13

14const CLICK = 'click'
15

16menuBtn.addEventListener(CLICK, toggleNavigation)
17navCloseBtn.addEventListener(CLICK, toggleNavigation)
18blurOverlay.addEventListener(CLICK, toggleNavigation)

Explanation:

  • Some links on the right navigation will be present on the header middle navigation. That's why they have an extra class link__in__middle.
  • The navigation will only be visible if the is--active class is present.
  • We will toggle the class when we will click on the menu button and navigation close icon.
  • If the nav is open, then a blurred background will be visible. It will also close the nav if it is clicked.

And our webpage is almost done. We only need to make it responsive. And also we need to create the header middle navigation.

Let's make the webpage responsive

1/* sm=600 */
2/* md=900 */
3/* lg=1200 */
4/* xl=1600 */
5

6@media screen and (min-width: 600px) {
7    .section__action__btn {
8        max-width: 30rem;
9        padding: 1.5rem;
10        flex-basis: 40%;
11    }
12

13    .section__action__container {
14        justify-content: space-evenly;
15    }
16}
17

18@media screen and (min-width: 900px) {
19    .section__action__container {
20        width: 70%;
21    }
22

23    .footer ul {
24        width: 70%;
25    }
26}
27

28@media screen and (min-width: 1200px) {
29    .header__nav__btn {
30        display: inline-block;
31    }
32

33    .header__left {
34        padding: 0 2rem;
35        margin: 0 3rem;
36    }
37

38    .header__right {
39        margin: auto 2rem;
40    }
41

42    .link__in__middle {
43        display: none;
44    }
45

46    .section__action__container {
47        width: 60%;
48    }
49

50    .footer ul {
51        width: 50%;
52    }
53}
54

55@media screen and (min-width: 1600px) {
56    .footer ul {
57        width: 40%;
58    }
59

60    .section__action__container {
61        width: 50%;
62    }
63}

Now our website is responsive. But we have to add the header middle.

Let's add header middle

1<ul class="header__middle">
2    <li><a class="header__nav__btn" href="#">Model S</a></li>
3    <li><a class="header__nav__btn" href="#">Model 3</a></li>
4    <li><a class="header__nav__btn" href="#">Model X</a></li>
5    <li><a class="header__nav__btn" href="#">Model Y</a></li>
6    <li><a class="header__nav__btn" href="#">solar roof</a></li>
7    <li><a class="header__nav__btn" href="#">solar panels</a></li>
8</ul>
1.header__middle {
2    display: flex;
3    align-items: center;
4}

Explanation:

  • Header middle links will be the same as the Header nav buttons.
  • They will be visible on LG screens

Block scroll while right nav is open

1#fullpage.no-scroll {
2    overflow-y: hidden;
3    max-height: 100vh;
4}
1const toggleNavigation = () => {
2    navigation.classList.toggle(IS_ACTIVE)
3    blurOverlay.classList.toggle(IS_ACTIVE)
4    fullpageEl.classList.toggle('no-scroll') // add this new line
5}

Explanation:

  • If the no-scroll class is present on the fullpage container, then scroll will be blocked

And that's it. Our webpage is ready.

xs

sm

MD

LG

xl

Shameless Plug

I have made an Xbox landing page clone with React and Styled components. I hope you will enjoy it. Please consider like this video and subscribe to my channel.

That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.

Contacts

Blogs you might want to read:

Videos might you might want to watch:

Previous PostResponsive images with aspect ratio without any media queries
Next PostHow to create a 3d card flipping effect with vanilla HTML and CSS