Lamborghini Amazing One page website Coding Blog
Tags: uiweekly, ux, css, webdev
Published: 2021-05-13 07:58:40

#Design

![Slide 3 Final](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkr5ppiq4yzp23fsym0z.png)

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 - 
{% youtube gWp9FbzsxQw %}

###Part 2 -
{% youtube CMr8cO-yLLQ %}

>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

```html
<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`

```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`
```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 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](https://github.com/kunaal438/lambo-website-concept)
[Download Images Only](https://drive.google.com/drive/folders/11ix4ZqAj8Cf-LWM7nOBx2NTfScIQTAwN?usp=sharing)

>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](https://www.instagram.com/techy_programmers/)

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

Thanks for reading.