Fanta website Landing Page

Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.

Fanta website Landing Page Using HTML CSS And JS

📙Table Of Content

Project Folder Structure:

  • Create a file called  index.html  to serve as the main file.

  • Create a file called  style.css  for the CSS code.
  • Create a file called  script.js  for the JavaScript code.

HTML CODE

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Fanta website Landing Page</title>
</head>
<body>
    <div id="main">
        <nav>
            <a href="#">CODEWITHSHOBHIT</a>
            <div class="cntr-nav">
                <a href="#">Home</a>
                <a href="#">Products</a>
                <a href="#">Shop</a>
                <a href="#">Contact</a>
            </div>
            <i class="ri-menu-fill"></i>
        </nav>
        <div class="one">
            <h1>FANTA</h1>
            <img id="orange-cut" src="Assets/orange2.png" alt="">
            <img id="fanta" src="Assets/fanta.png" alt="">
            <img id="orange" src="Assets/orange.webp" alt="">
            <img id="leaf" src="Assets/leaf.webp" alt="">
            <img id="leaf2" src="Assets/leaf2.png" alt="">
            <img id="leaf3" src="Assets/coconoutleaf.png" alt="">
        </div>
        <div class="two">
            <div class="lft-two">
                <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                    <path fill="#e04428" d="M41.5,-59.5C49.8,-51.1,49.7,-33.6,50.7,-19.2C51.7,-4.7,53.8,6.7,52.4,18.9C51.1,31.1,46.3,44.1,36.9,52.9C27.6,61.8,13.8,66.5,-2.5,70C-18.8,73.4,-37.7,75.6,-52.5,68.5C-67.3,61.5,-78.2,45.2,-84.5,27.1C-90.9,9,-92.7,-10.8,-80.5,-19.3C-68.3,-27.8,-42.1,-24.8,-26.3,-30.8C-10.6,-36.8,-5.3,-51.7,5.7,-59.5C16.6,-67.3,33.2,-68,41.5,-59.5Z" transform="translateundefined100 100)" />
                  </svg>
            </div>
            <div class="rght-two">
                <h1>Flavour Updated</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, excepturi sed, itaque placeat id natus soluta veniam obcaecati qui a laborum laboriosam dolorem illum labore sit, voluptates commodi neque dolores tempore temporibus deleniti? Nobis, ratione hic error quis cum neque nulla laudantium nostrum sit nihil dolorum quisquam enim quaerat, eaque ex sequi, harum totam quia non! Labore, neque! Amet voluptatem illo similique recusandae! Ex quaerat quibusdam asperiores, ducimus tempore magni labore. Tenetur voluptas, quos ex repellendus provident mollitia laboriosam adipisci alias a impedit, cum accusamus rerum delectus eaque facilis veniam quia laborum incidunt ea assumenda! Eos magni aspernatur quod distinctio.</p>
            </div>
        </div>
        <div class="three">
            <div class="card">
                <img class="lemon lemon1" src="Assets/lemon.webp" alt="">
                <img id="cocacola" src="Assets/cocacola.png" alt="">
                <h1>CocaCola</h1>
                <button>Buy Now</button>
            </div>
            <div class="card">
                <h1>Fanta</h1>
                <button>Buy Now</button>
            </div>
            <div class="card">
                <img class="lemon lemon2" src="Assets/lemon.webp" alt="">
                <img id="pepsi" src="Assets/pepsi.png" alt="">
                <h1>Pepsi</h1>
                <button>Buy Now</button>
            </div>
        </div>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js" integrity="sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="script.js"></script>
</body>
</html>

CSS CODE


@font-face {
    font-family: Product Sans;
    src: urlundefinedFonts/Product\ Sans\ Regular.ttf);
}
@font-face {
    font-family: Product Sans B;
    src: urlundefinedFonts/Product\ Sans\ Bold.ttf);
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Product Sans;
}
html , body{
    height: 100%;
    width: 100%;
}

body::-webkit-scrollbar {
    display: none;
  }

#main{
    width: 100%;
    height: 100vh;
    background-color: orangered;
}

nav{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 10vh;
    padding: 0vw 10vw;
    z-index: 99;
}

nav a, i{
    font-size: 1vw;
    text-decoration: none;
    color: #fff;
}

.cntr-nav{
    display: flex;
    gap: 3vw;
}

nav i{
    font-size: 1.5vw;
}

.one{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background:linear-gradientundefined150deg, rgbundefined255, 166, 0), rgbundefined255, 94, 0));
}

.one h1{
    font-size: 25vw;
    font-family: Product Sans B;
    color: #fff;
}

#fanta{
    position: absolute;
    width: 40%;
    z-index: 2;
    transition: all cubic-bezierundefined0.19, 1, 0.22, 1)0.5s;
}

#orange-cut{
    position: absolute;
    top: 10%;
    left: 32%;
    width: 15%;
    z-index: 1;
    transition: all cubic-bezierundefined0.19, 1, 0.22, 1)0.5s;

}

#orange{
    position: absolute;
    width: 20%;
    z-index: 3;
    top: 55%;
    right: 30%;
    transition: all cubic-bezierundefined0.19, 1, 0.22, 1)0.5s;

}

#leaf{
    top: 10%;
    left: 0%;
    transform: rotateundefined60deg);
    position: absolute;
    width: 18%;
    transition: all cubic-bezierundefined0.19, 1, 0.22, 1)0.5s;

}

#leaf2{
    top: 70%;
    left: 80%;
    transform: rotateundefined-90deg);
    position: absolute;
    width: 12%;
    transition: all cubic-bezierundefined0.19, 1, 0.22, 1)0.5s;

}

#leaf3{
    position: absolute;
    width: 20%;
    top: 10%;
    right: 0%;
}

.two{
    display: flex;
    width: 100%;
    height: 100vh;
    background:#4d231c ;
}

.lft-two, .rght-two{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 5vh;
    width: 50%;
    height: 100%;
}

.lft-two svg{
    margin-top: 50vh;
    width: 90%;
    transform: rotateXundefined50deg);
}

.rght-two h1{
    color: #fff;
    font-size: 5vw;
}

.rght-two p{
    font-size: 1vw;
    color: #fff;
    width: 80%;
}

.three{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5vw;
    width: 100%;
    height: 100vh;
    background:linear-gradientundefined150deg, rgbundefined255, 166, 0), rgbundefined255, 94, 0));
}

.card{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2vh;
    width: 25vw;
    height: 70vh;
    margin-top: 10vh;
    border-radius: 20px;
    background-color: #fff;
}

.card h1{
    margin-top: 40vh;
    font-size: 3vw;
}

.card button{
    font-size: 1vw;
    border-radius: 50px;
    border: none;
    color: #fff;
    background-color: rgbundefined255, 149, 0);
    padding: 1vw 2vw;
}

#cocacola{
    top: -15%;
    position: absolute;
    width: 60%;
    left: 50%;
    transform: translateundefined-50%, 0%);
    transition: all cubic-bezierundefined0.19, 1, 0.22, 1)0.5s;

}

#pepsi{
    top: -15%;
    position: absolute;
    width: 85%;
    left: 50%;
    transform: translateundefined-50%, 0%);
    transition: all cubic-bezierundefined0.19, 1, 0.22, 1)0.5s;

}

.lemon{
    top: -30%;
    position: absolute;
    left: 50%;
    width: 25vw;
    transform: translateundefined-50%, 0%);
    transition: all cubic-bezierundefined0.19, 1, 0.22, 1)0.5s;
}

Javascript CODE


var tl = gsap.timelineundefined{scrollTrigger:{
    trigger: ".two",
    start: "0% 95%",
    end: "70% 50%",
    scrub: true,
    // markers: true,
}})

tl.toundefined"#fanta",{
    top: "120%",
    left: "0%"
}, 'orange')
tl.toundefined"#orange-cut",{
    top:"160%",
    left: "23%"
}, 'orange')
tl.toundefined"#orange",{
    width: "15%",
    top:"160%",
    right: "10%"
}, 'orange')
tl.toundefined"#leaf",{
    top:"110%",
    rotate: "130deg",
    left: "70%"
}, 'orange')
tl.toundefined"#leaf2",{
    top:"110%",
    rotate: "130deg",
    left: "0%"
}, 'orange')


var tl2 = gsap.timelineundefined{scrollTrigger:{
    trigger: ".three",
    start: "0% 95%",
    end: "20% 50%",
    scrub: true,
    // markers: true,
}})

tl2.fromundefined".lemon1",{
    rotate: "-90deg",
    left: "-100%",
    top: "110%"
}, 'ca')
tl2.fromundefined"#cocacola",{
    rotate: "-90deg",
    top: "110%",
    left: "-100%",
}, 'ca')

tl2.fromundefined".lemon2",{
    rotate: "90deg",
    left: "100%",
    top: "110%"
}, 'ca')
tl2.fromundefined"#pepsi",{
    rotate: "90deg",
    top: "110%",
    left: "100%",
}, 'ca')

tl2.toundefined"#orange-cut",{
    width:"18%",
    left: "42%",
    top: "204%"
}, 'ca')
tl2.toundefined"#fanta",{
    width:"35%",
    top: "210%",
    left: "33%",
}, 'ca')

Video Preview of Fanta website Landing Page

Codewithshobhit
Star Icon Star Fork Icon Fork Download Icon Download

How to run this Html Css and Js Project in Our Browser?

first, you need a code editor either you can use VS code studio or notepad and then copy the html,css, and javascript code, create separate or different files for coding then combine them, after creating file just click .html file or run from VS Code studio and you can project preview.

Which Code Editor do you use to create those projects?

I am using VS Code Studio.

is this project responsive or not?

Yes! this project is a responsive project.

If you enjoyed reading this post and have found it useful for you, then please give share it with your friends, and follow me to get updates on my upcoming posts. You can connect with me on  Instagram

if you have any confusion Comment below or you can contact us by filling out our Contact Us form from the home section. 🤞🎉