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

By Anjan Shomodder
Sat Feb 26 2022
css
8 views
9 min read

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

Image description

<section id="fullpage">
    <section class="section one">
        <div class="section__content">
            <h1 class="section__content__title">Model S</h1>
            <h2 class="section__content__subtitle">
                order online for <a href="#">Touchless delivery</a>
            </h2>
        </div>

        <div class="section__action__container">
            <a class="section__action__btn action__btn__primary" href="#"
                >Custom Order</a
            >
            <a class="section__action__btn action__btn__secondary" href="#"
                >Existing inventory</a
            >
        </div>
    </section>

    <section class="section two">
        <div class="section__content">
            <h1 class="section__content__title">Model y</h1>
            <h2 class="section__content__subtitle">
                order online for <a href="#">Touchless delivery</a>
            </h2>
        </div>

        <div class="section__action__container">
            <a class="section__action__btn action__btn__primary" href="#"
                >Custom Order</a
            >
            <a class="section__action__btn action__btn__secondary" href="#"
                >Existing inventory</a
            >
        </div>
    </section>

    <section class="section three">
        <div class="section__content">
            <h1 class="section__content__title">Model 3</h1>
            <h2 class="section__content__subtitle">
                order online for <a href="#">Touchless delivery</a>
            </h2>
        </div>

        <div class="section__action__container">
            <a class="section__action__btn action__btn__primary" href="#"
                >Custom Order</a
            >
            <a class="section__action__btn action__btn__secondary" href="#"
                >Existing inventory</a
            >
        </div>
    </section>

    <section class="section four">
        <div class="section__content">
            <h1 class="section__content__title">Model x</h1>
            <h2 class="section__content__subtitle">
                order online for <a href="#">Touchless delivery</a>
            </h2>
        </div>

        <div class="section__action__container">
            <a class="section__action__btn action__btn__primary" href="#"
                >Custom Order</a
            >
            <a class="section__action__btn action__btn__secondary" href="#"
                >Existing inventory</a
            >
        </div>
    </section>

    <section class="section five">
        <div class="section__content">
            <h1 class="section__content__title">solar panels</h1>
            <h2 class="section__content__subtitle">
                Lowest Cost Solar Panels In America
            </h2>
        </div>

        <div class="section__action__container">
            <a class="section__action__btn action__btn__primary" href="#">Order now</a>
            <a class="section__action__btn action__btn__secondary" href="#"
                >Learn more</a
            >
        </div>
    </section>

    <section class="section six">
        <div class="section__content">
            <h1 class="section__content__title">Solar roofs</h1>
            <h2 class="section__content__subtitle">
                Produce Clean Energy From Your Roof
            </h2>
        </div>

        <div class="section__action__container">
            <a class="section__action__btn action__btn__primary" href="#">Order now</a>
            <a class="section__action__btn action__btn__secondary" href="#"
                >Learn more</a
            >
        </div>
    </section>

    <section class="section seven">
        <div class="section__content">
            <h1 class="section__content__title">Accessories</h1>
        </div>

        <div class="section__action__container">
            <a class="section__action__btn action__btn__primary" href="#">Shop now</a>
        </div>
    </section>
</section>

.section {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

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

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

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

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

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

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

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

.section__content {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    text-transform: capitalize;
    color: var(--primary-color);
}

.section__content__title {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.section__content__subtitle {
    font-size: 1.5rem;
    font-weight: 500;
}

.section__content__subtitle a {
    color: inherit;
}

.section__content__subtitle a:hover {
    text-decoration: underline;
}

.section__action__container {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.section__action__btn {
    font-size: 1.5rem;
    font-weight: 500;
    padding: 1rem;
    border-radius: 2rem;
    flex-basis: 80%;
    margin-bottom: 1rem;
    text-transform: capitalize;
}

.action__btn__primary {
    background: rgba(23, 26, 42, 0.8);
    color: white;
}

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

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

Image description

Add the CDN links to your html.

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

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

Let's add javascript.

new fullpage('#fullpage', {
    autoScrolling: true,
    scrollBar: true,
})

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

Image description

Include the following html inside the last full page section.

<footer class="footer">
    <ul>
        <li><a href="#">Tesla © 2021</a></li>
        <li><a href="#"> Privacy &amp; Legal </a></li>
        <li><a href="#"> contact </a></li>
        <li><a href="#">careers</a></li>
        <li><a href="#">news</a></li>
        <li><a href="#">engage</a></li>
        <li><a href="#">locations</a></li>
    </ul>
</footer>

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

Image description

:root {
    --primary-color: #181b21;
    --secondary-color: #5c5d61;
}

.footer {
    position: absolute;
    z-index: 100;
    bottom: 0;
    width: 100%;
}

.footer ul {
    width: 80%;
    margin: 2rem auto;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.footer ul li {
    margin: 0 1rem;
    margin-top: 1rem;
    text-transform: capitalize;
    font-weight: 600;
}

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

Let's build the header

Image description

<header class="header">
    <a class="header__left" href="#">
        <img class="header__logo" src="media/tesla_logo.svg" alt="" />
    </a>

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

    <div class="header__right">
        <a class="header__nav__btn" href="#">shop</a>
        <a class="header__nav__btn" href="#">account</a>
        <a class="header__nav__btn menu__btn" href="#">menu</a>
    </div>
</header>

.header {
    height: 5rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    display: flex;
    justify-content: space-between;
}

.header__middle {
    display: none;
}

.header__left {
    display: block;
    overflow: hidden;
    padding: 0 2rem;
}

.header__logo {
    height: 100%;
    width: 13rem;
}

.header__right {
    margin: auto 0;
    margin-right: 1rem;
}

.header__nav__btn {
    display: none;
    font-size: 1.4rem;
    font-weight: bold;
    padding: 1rem;
    color: var(--secondary-color);
    border-radius: 1.5rem;
    text-transform: capitalize;
    transition: background 0.3s linear;
}

.header__nav__btn:hover {
    background: #0000001c;
}

.header__nav__btn.menu__btn {
    display: inline-block;
}

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

Image description

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

<nav class="navigation">
    <div class="close__btn__container">
        <img class="navigation__close__btn" src="media/close_icon.svg" alt="" />
    </div>

    <ul>
        <li class="link__in__middle">
            <a class="nav__link" href="#">Model S</a>
        </li>
        <li class="link__in__middle">
            <a class="nav__link" href="#">Model 3</a>
        </li>
        <li class="link__in__middle">
            <a class="nav__link" href="#">Model X</a>
        </li>
        <li class="link__in__middle">
            <a class="nav__link" href="#">Model Y</a>
        </li>
        <li class="link__in__middle">
            <a class="nav__link" href="#">Solar roofs</a>
        </li>
        <li class="link__in__middle">
            <a class="nav__link" href="#">Solar panels</a>
        </li>
        <li><a class="nav__link" href="#">Existing Inventory </a></li>
        <li><a class="nav__link" href="#">Used Inventory </a></li>
        <li><a class="nav__link" href="#">Trade-In </a></li>
        <li><a class="nav__link" href="#">Test drive </a></li>
        <li><a class="nav__link" href="#">Powerwall </a></li>
        <li><a class="nav__link" href="#">Commercial Energy </a></li>
        <li><a class="nav__link" href="#">utilities </a></li>
        <li><a class="nav__link" href="#">Charging</a></li>
        <li><a class="nav__link" href="#">Find us</a></li>
        <li><a class="nav__link" href="#">Support</a></li>
        <li><a class="nav__link" href="#">Investor Relations</a></li>
    </ul>
</nav>

.navigation {
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 35rem;
    height: 100%;
    z-index: 10;
    background: #fff;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.5, 0, 0, 0.75);
}

.navigation.is--active {
    transform: translateX(0);
}

.navigation ul {
    width: 80%;
    margin: 0 auto;
}

.navigation ul li {
    width: 100%;
    padding: 1.2rem 0;
    padding-left: 2rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    border-radius: 1.2rem;
    transition: background-color 0.33s ease;
}

.nav__link {
    color: #393c41;
    font-weight: 600;
    font-size: 1.5rem;
    text-transform: capitalize;
}

.navigation ul li:hover {
    background: #0000000d;
}

.close__btn__container {
    text-align: right;
    margin: 2rem 3rem;
}

.navigation__close__btn {
    width: 3rem;
    cursor: pointer;
}

.blur__overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(1rem);
    transition: display 0.4s ease;
}

.blur__overlay.is--active {
    display: block;
}

const menuBtn = document.querySelector('.menu__btn')
const navigation = document.querySelector('.navigation')
const navCloseBtn = document.querySelector('.navigation__close__btn')

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

const IS_ACTIVE = 'is--active'

const toggleNavigation = () => {
    navigation.classList.toggle(IS_ACTIVE)
    blurOverlay.classList.toggle(IS_ACTIVE)
}

const CLICK = 'click'

menuBtn.addEventListener(CLICK, toggleNavigation)
navCloseBtn.addEventListener(CLICK, toggleNavigation)
blurOverlay.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

/* sm=600 */
/* md=900 */
/* lg=1200 */
/* xl=1600 */

@media screen and (min-width: 600px) {
    .section__action__btn {
        max-width: 30rem;
        padding: 1.5rem;
        flex-basis: 40%;
    }

    .section__action__container {
        justify-content: space-evenly;
    }
}

@media screen and (min-width: 900px) {
    .section__action__container {
        width: 70%;
    }

    .footer ul {
        width: 70%;
    }
}

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

    .header__left {
        padding: 0 2rem;
        margin: 0 3rem;
    }

    .header__right {
        margin: auto 2rem;
    }

    .link__in__middle {
        display: none;
    }

    .section__action__container {
        width: 60%;
    }

    .footer ul {
        width: 50%;
    }
}

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

    .section__action__container {
        width: 50%;
    }
}

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

Let's add header middle

<ul class="header__middle">
    <li><a class="header__nav__btn" href="#">Model S</a></li>
    <li><a class="header__nav__btn" href="#">Model 3</a></li>
    <li><a class="header__nav__btn" href="#">Model X</a></li>
    <li><a class="header__nav__btn" href="#">Model Y</a></li>
    <li><a class="header__nav__btn" href="#">solar roof</a></li>
    <li><a class="header__nav__btn" href="#">solar panels</a></li>
</ul>

.header__middle {
    display: flex;
    align-items: center;
}

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

#fullpage.no-scroll {
    overflow-y: hidden;
    max-height: 100vh;
}

const toggleNavigation = () => {
    navigation.classList.toggle(IS_ACTIVE)
    blurOverlay.classList.toggle(IS_ACTIVE)
    fullpageEl.classList.toggle('no-scroll') // add this new line
}

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

Image description

sm

Image description

MD

Image description

LG

Image description

xl

Image description

Shameless Plug

Want to create your own blog? Well, I am creating a video series where you will learn about how to create a JAMstack blog with Nextjs and Chakra-UI.

Lessons

Demo

You can demo the website from here

Features

Static Blog pages will make the website load faster.
Blogs will have code blocks with syntax highlighting and many embed components like youtube videos, GitHub gist, Tweets, and so many other things.
Autocomplete search feature for the blog posts.
Real-time view counter and so on.

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

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

By the way, I am looking for a new opportunity in a company where I can provide great value with my skills. If you are a recruiter, looking for someone skilled in full-stack web development and passionate about revolutionizing the world, feel free to contact me. Also, I am open to talking about any freelance project. I am available on Upwork

Contacts

Email: thatanjan@gmail.com
LinkedIn: @thatanjan
Portfolio: anjan
Github: @thatanjan
Instagram (personal): @thatanjan
Twitter: @thatanjan
Upwork: @thatanjan

Blogs you might want to read:

Videos might you might want to watch:

Next PostHow to create a 3d card flipping effect with vanilla HTML and CSS