A One Page Website Coding Tutorial On The Example Of Lamborghini Site | Hacker Noon

@techyprogrammersKunaal Kumar

Hello,glad you are here. I am Kunaal who love to code I am a teen who know Full stack and make awesome web designs

Design

Hello, Glad you are here. Today, I am going to teach you how we can make this design or turn this digital design into real webpage. I made this design and I think it’s amazing. We will use HTML, CSS, and JS. We don’t use any library.

Let’s Get started.

Video Tutorial.

If you find out hard to follow this article you may consider watching these tutorial videos.

Part 1 –

Part 2 –

If you find this tutorial helpful. Please consider subscribing my youtube channel. It will really motivate me. Thanks

Let’s start

First, make 3 files

index.html, style.css, app.js

. We just need JS for our carousel.

In

index.html

write

<body>

    <!-- web opening UX -->

    <div class="anim-container">
        <span class="shutter top">
            <img src="img/logo.png" class="logo" alt="">
        </span>
        <span class="shutter bottom"></span>
    </div>

    <!-- ending of UX -->

    <!-- navbar -->
    <nav class="navbar">
        <img src="img/logo.png" class="brand-logo" alt="">
        <p class="brand-name">lamborghini</p>
    </nav>

    <!-- header carousel -->
    <div class="lambo-carousel">
        <div class="carousel">
            <h1 class="title">huracan <br> sto</h1>
            <button class="btn">explore</button>
        </div>
        <div class="carousel">
            <h1 class="title">amazing <br> concept</h1>
            <button class="btn">explore</button>
        </div>
        <div class="carousel">
            <h1 class="title">fastest <br> suv</h1>
            <button class="btn">explore</button>
        </div>

        <!-- indicators -->
        <div class="indicators">
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
    </div>

    <!-- model showcase -->

    <div class="model-container">
        <img src="img/M_ururs.png" class="model-img" alt="">
        <img src="img/M_huracan.png" class="model-img" alt="">
        <img src="img/M_aventador.png" class="model-img" alt="">

        <div class="model-content">
            <p class="heading">model</p>
            <h1 class="model-name">aventador</h1>
            <p class="link">configure your's</p>
        </div>
    </div>

    <div class="info-card">
        <div class="img-container">
            <div class="row">
                <div class="hex"></div>
                <div class="hex"></div>
            </div>
            <div class="row">
                <div class="hex"></div>
                <div class="hex"></div>
                <div class="hex"></div>
            </div>
            <div class="row">
                <div class="hex"></div>
                <div class="hex"></div>
            </div>
        </div>
        <div class="content">
            <h1 class="heading">amazing <br> power</h1>
            <button class="btn">explore</button>
        </div>
    </div>

    <div class="info-card two">
        <div class="img-container">
            <div class="row">
                <div class="hex"></div>
                <div class="hex"></div>
            </div>
            <div class="row">
                <div class="hex"></div>
                <div class="hex"></div>
                <div class="hex"></div>
            </div>
            <div class="row">
                <div class="hex"></div>
                <div class="hex"></div>
            </div>
        </div>
        <div class="content">
            <h1 class="heading"><span>aero-dynamic</span> <br> design</h1>
            <button class="btn">explore</button>
        </div>
    </div>


    <!-- dealership form -->

    <div class="dealership-container">
        <img src="img/green_lambo.png" class="dealer-car" alt="">
        <div class="form">
            <h1 class="form-title">find dealership</h1>
            <input type="text" class="find-box">
        </div>
    </div>

    <p class="footer">design and code by kunaal with love</p>

    <script src="app.js"></script>
    
</body>

After that, we will add some styles so write this in

style.css
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*:focus{
    outline: none;
}

body{
    width: 100%;
    min-height: 100vh;
    position: relative;
    font-family: 'roboto', sans-serif;
    background: #000;
}

::-webkit-scrollbar{
    width: 10px;
}

::-webkit-scrollbar-thumb{
    background: #e0a91c;
    border-radius: 20px;
}

::selection{
    background: #e0a91c;
}

/* loading animation */

.anim-container{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.shutter{
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    background: #000;
}

.shutter.top{
    top: 0;
    z-index: 2;
    animation: slide-top 2s 2.5s forwards 1;
}

.shutter.bottom{
    bottom: 0;
    animation: slide-bottom 2s 2.5s forwards 1;
}

.shutter.top .logo{
    position: absolute;
    height: 250px;
    bottom: -125px; 
    /* bottom should be eqaul to its half of the height */
    left: 50%;
    transform: translateX(-50%) rotateY(90deg);
    z-index: 2;
    animation: logo_anim .5s 1s forwards 1;
}

@keyframes logo_anim{
    0%{
        transform: translateX(-50%) rotateY(90deg);
    }
    100%{
        transform: translateX(-50%);
    }
}

.shutter.top::after{
    content: '';
    position: absolute;
    height: 3px;
    width: 100%;
    background: #fff;
    bottom: 0;
    left: -100%;
    animation: slide-in-out 1s 1.5s forwards 1;
}

@keyframes slide-in-out{
    0%{
        left: -100%;
    }
    100%{
        left: 100%;
    }
}

@keyframes slide-top{
    0%{
        top: 0;
    }
    100%{
        top: -100%;
    }
}

@keyframes slide-bottom{
    0%{
        bottom: 0;
    }
    100%{
        bottom: -100%;
    }
}

/* loading animation end */

/* carousel */

.lambo-carousel{
    position: relative;
    width: 100%;
    height: 100vh;
}

.carousel{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(img/carousel_1.png);
    background-size: cover;
    background-position: center center;
    padding-left: 5vw;
    padding-top: 20vh;
}

.carousel:nth-child(2){
    background: url(img/carousel_2.png);
    background-size: cover;
    z-index: -1;
}

.carousel:nth-child(3){
    background: url(img/carousel_3.png);
    background-size: cover;
    z-index: -1;
}

.carousel .title{
    color: #fff;
    font-size: 120px;
    text-transform: uppercase;
    opacity: 0;
}

.btn{
    opacity: 0;
    width: 150px;
    height: 40px;
    margin-top: 20px;
    background: none;
    color: #fff;
    text-transform: capitalize;
    font-size: 16px;
    cursor: pointer;
    transition: .5s;
    text-align: left;
    padding-left: 30px;
    position: relative;
    border: none;
    clip-path: polygon(0 0, 82% 0, 100% 100%, 0% 100%);
}

.btn::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(img/btn.png);
    background-size: 100% 100%;
}

.btn:hover{
    background: #fff;
    color: #000;
}

.carousel.active{
    z-index: 2;
}

.carousel.active .title,
.carousel.active .btn{
    opacity: 0;
    animation: fade-up 1s forwards 1;
}

@keyframes fade-up{
    0%{
        opacity: 0;
        transform: translateX(-50px);
    }
    100%{
        opacity: 1;
        transform: translateX(0px);
    }
}

.indicators{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 15px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    cursor: pointer;
    z-index: 3;
}

.indicators span{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    transition: .5s;
    background: rgba(0, 0, 0, 0.4);

}

.indicators span.active{
    background: #000;
}

/* carousel done */

/* navbar */

.navbar{
    position: fixed;
    top: -80px;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80px;
    z-index: 8;
    animation: slide-top 3s 1s forwards 1;
    animation-direction: reverse;
}

.brand-logo{
    height: 60px;
}

.brand-name{
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
}

/* model showcase */

.model-container{
    width: 100%;
    height: 60vh;
    position: relative;
    overflow: hidden;
    background: #000;
    padding: 40px 5vw;
    z-index: 3;
}

.model-img{
    position: absolute;
    top: 0;
    max-width: 50%;
    min-height: 100%;
    clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
}

.model-img:nth-child(3){
    left: 0;
}

.model-img:nth-child(2){
    right: 20%;
}

.model-img:nth-child(1){
    right: -15%;
}

.model-content{
    position: relative;
    color: #fff;
    text-transform: uppercase;
}

.heading{
    font-size: 40px;
}

.model-name{
    font-size: 120px;
    margin: 40px 0;
}

.link{
    font-size: 25px;
    cursor: pointer;
    position: relative;
    width: fit-content;
}

.link::before{
    content: '';
    position: absolute;
    width: 35px;
    height: 40px;
    top: -5px;
    left: -20px;
    background: url(img/hex.png);
    background-size: 100% 100%;
    transform: scale(1.5);
    transition: 1s;
}

.link:hover::before{
    transform: scale(1.5) rotate(-360deg);
}

/* info carrd */

.info-card{
    width: 100%;
    height: 520px;
    overflow: hidden;
    padding-right: 10vw;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}

.img-container{
    position: absolute;
    left: 15%;
    transform: translateX(-50%);
    top: -100px;
    width: 700px;
    height: 520px;
}

.img-container .row{
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-container .row .hex{
    width: 200px;
    height: 200px;
    background: #000;
    background-image: url(img/white_lambo_racing.png);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    margin-right: 20px;
    clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
}

.img-container .row:nth-child(2),
.img-container .row:nth-child(3){
    margin-top: -30px;
}

.content{
    position: relative;
}

.content .heading{
    color: #fff;
    text-transform: uppercase;
    font-size: 80px;
    margin-bottom: 30px;
}

.content .btn{
    opacity: 1;
}

.info-card.two{
    justify-content: flex-start;
    padding-right: 0;
    padding-left: 5vw;
    align-items: center;
    height: 550px;
}

.info-card.two .heading span{
    font-size: 50px;
}

.info-card.two .img-container{
    top: 0;
    left: 60%;
    transform: translateX(0);
}

.info-card.two .hex{
    background-image: url(img/carousel_2.png);
}

/* dealership */

.dealership-container{
    width: 100%;
    height: 60vh;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 15vw;
    position: relative;
}

.dealer-car{
    position: absolute;
    height: 100%;
    right: 50%;
}

.form{
    position: relative;
}

.form-title{
    color: #fff;
    text-transform: capitalize;
    margin-bottom: 30px;
    font-size: 50px;
    font-weight: 400;
}

.find-box{
    background-color: none;
    border: 2px solid #49b238;
    color: #fff;
    height: 40px;
    width: 300px;
    display: block;
    margin: auto;
    padding: 0 10px;
    background: #000;
    font-size: 16px;
}

/* footer */

.footer{
    text-align: center;
    width: 100%;
    background: #2f2f2f;
    color: #fff;
    padding: 5px 0;
    text-transform: capitalize;
}

@media screen and (max-width: 824px){
    .carousel .title,
    .model-name{
        font-size: 80px;
    }
    .info-card{
        padding-right: 5vw
    }
    .info-card.two{
        padding-left: 5vw;
    }
    .content .heading{
        font-size: 60px;
    }
}

@media screen and (max-width: 500px){
    .lambo-carousel{
        height: 500px;
    }
    .carousel{
        background-position: right !important;
    }
    .carousel .title,
    .model-name{
        font-size: 50px;
    }
    .model-container{
        padding: 40px 10vw;
        height: 350px;
    }
    .model-container .heading{
        font-size: 25px;
    }
    .model-img{
        max-width: 70% !important;
        width: 70%;
    }
    .model-img:nth-child(2){
        right: 0;
    }
    .model-img:nth-child(1){
        right: -20%;
    }
    .img-container{
        left: -45% !important;
        top: -10%;
        transform: translateX(0);
    }
    .info-card.two .img-container{
        left: -45% !important;
        top: 0%;
        transform: translateX(0);
    }

    .dealership-container,
    .info-card,
    .info-card.two{
        padding: 0;
        justify-content: center;
    }

    .info-card .content{
        width: 100%;
        background: rgba(0, 0, 0, 0.4);
        text-align: center;
        padding: 30px;
    }
}

And Last write JS

app.js
const animContainer = document.querySelector('.anim-container');

const carousels = [...document.querySelectorAll('.carousel')];
const indicators = [...document.querySelectorAll('.indicators span')];

let carousel_index = 0;

setTimeout(() => {
    animContainer.remove();
    carousels[0].classList.add('active');
    setIntervalForSlider();
}, 3500);

const setIntervalForSlider = () => {
    setInterval(() => {
        
        indicators[carousel_index].classList.remove('active');
        carousels[carousel_index].classList.remove('active');

        if(carousel_index == carousels.length - 1){
            carousel_index = 0
        } else{
            carousel_index++;
        }

        indicators[carousel_index].classList.add('active');
        carousels[carousel_index].classList.add('active');

    }, 3000);
}

Done. We made this awesome-looking design. We successfully turned this into a real webpage. If you find this article helpful consider following me, and if you can please subscribe to my youtube channel it will be very appreciable.

Source Code, Download Images Only

If you are interested in programming and want to know how I am 15yr old teen making these web design. You can follow me on Instagram where I post awesome web design and planning to post my game development experiments.

My Profile

If you find any mistake I made or You have any doubts. Feel free to ask me in the comment.

Thanks for reading.

by Kunaal Kumar @techyprogrammers. Hello,glad you are here. I am Kunaal who love to code I am a teen who know Full stack and make awesome web designsRead my stories

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.

read original article here