DEV Community

Cover image for Lamborghini Amazing One page website Coding Blog
Modern Web
Modern Web

Posted on • Updated on

Lamborghini Amazing One page website Coding Blog

#uiweekly #ux #css #webdev

Design

Slide 3 Final

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 video.

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>
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

Done. We made this awesome looking design. We successfully turned this into real webpage. If you find this article helpful consider following me, and if you can please subscribe 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 comment.

Thanks for reading.

Top comments (0)

Read next

lindagrey profile image

Why Are Chatbots In Demand, And How Do They Work?

Linda Grey -

szabgab profile image

GitHub Sponsor the Servo Rust project!

Gabor Szabo -

tarequr profile image

Laravel Error Fix: How to Handle "Attempt property on null"

Tarequr Rahman Sabbir -

muratcanyuksel profile image

Finding the right blockchain developer for non technical entrepreneurs

Murat Can Yüksel -