Fanta Animated Landing Page Using Html & Css

Fanta Animated Landing Page Using Html , CSS & Js

Introduction

The project focuses on creating an engaging and visually appealing card interface for a product display. This design integrates modern web techniques to enhance user experience through animations and a structured layout, making it suitable for a variety of applications such as e-commerce, portfolios, or informational cards..

HTML :

<!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="icon" type="image/x-icon" href="./Assets/favicon.ico">
    <link rel="stylesheet" href="style.css">
    <title>Prime by KSI</title>
</head>
<body>
    <div id="main">
        <nav>
            <img src="Assets/prime-logo.png" alt="Prime-Logo">
            <div class="cntr-nav">
                <a href="#">Home</a>
                <a href="#">Products</a>
                <a href="#">Flavors</a>
                <a href="#">Shop</a>
                <a href="#">Contact</a>
            </div>
            <i class="ri-menu-fill"></i>
        </nav>
        <div class="one">
            <h1>PRIME</h1>
            <img id="prime-bottle" src="Assets/prime-bottle.png" alt="Prime Drink Bottle">
            <img id="fruit1" src="Assets/lemon.webp" alt="Fruit">
            <img id="fruit2" src="Assets/raspberry.webp" alt="Fruit">
        </div>
        <div class="two">
            <div class="lft-two">
                <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                    <path fill="#228B22" 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="translate(100 100)" />
                </svg>
            </div>
            <div class="rght-two">
                <h1>Flavors Updated</h1>
                <p>Introducing Prime's exciting range of flavors: a thrilling fusion of vibrant fruits that tantalizes your taste buds! Our new Prime drinks burst with a symphony of refreshing flavors: Blue Raspberry, Tropical Punch, Lemon Lime, and more.</p>
            </div>
        </div>
        <div class="three">
            <div class="card">
                <img class="lemon lemon1" src="Assets/lemon.webp" alt="">
                <img id="prime-bottle1" src="Assets/prime-blue.png" alt="">
                <h1>Blue Raspberry</h1>
                <button>Buy Now</button>
            </div>
            <div class="card">
                <h1>Tropical Punch</h1>
                <button>Buy Now</button>
            </div>
            <div class="card">
                <img class="lemon lemon2" src="Assets/lemon.webp" alt="">
                <img id="prime-bottle2" src="Assets/prime-green.png" alt="">
                <h1>Lemon Lime</h1>
                <button>Buy Now</button>
            </div>
        </div>
        <footer>
            <div class="footer-links">
              <a href="#home">Home</a>
              <a href="#Products">Products</a>
              <a href="#flavors">Flavors</a>
              <a href="#Shop">Shop</a>
              <a href="#contact">Contact</a>
            </div>
            <p>© 2024 Prime. All Rights Reserved. | Created By Mz Dev Code</p>
        </footer>
    </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>

Card Structure

The card is composed of several main elements:

Image Section: This area showcases the product image prominently, capturing the user’s attention immediately.
Title: A bold and concise title that conveys the product name or main feature.
Description: A brief paragraph providing essential details about the product, highlighting its unique selling points.
Action Button: A call-to-action (CTA) button that encourages users to take a specific action, such as ‘Buy Now’ or ‘Learn More.’
Rating Section: Visual representation of product ratings, such as stars, to quickly communicate quality.

Animation Effects

Animations play a crucial role in enhancing interactivity:

Button Animation: The CTA button features a gentle pulse effect, drawing attention and indicating its importance.

Hover Effects: When users hover over the card, it subtly enlarges and lifts slightly to create a 3D effect, inviting interaction.

Fade-In Animation: The card components fade in sequentially when the page loads, creating a smooth and welcoming introduction to the content.

CSS

@font-face {
    font-family: Product Sans;
    src: url(Fonts/Product\ Sans\ Regular.ttf);
}
@font-face {
    font-family: Product Sans B;
    src: url(Fonts/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 img{
    margin-top: 2vh;
    width: 8vw;
    cursor: pointer;
}
nav a{
    font-size: 1vw;
    text-decoration: none;
    color: #3c4043;
    cursor: pointer;
}
nav i{
    font-size: 1vw;
    text-decoration: none;
    cursor: pointer;
    color:#fff
}
nav button{
  align-items: center;
  appearance: none;
  background-color: #fff;
  border-radius: 24px;
  border-style: none;
  box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  fill: currentcolor;
  font-family: "Google Sans",Roboto,Arial,sans-serif;
  font-size: 14px;
  font-weight: 500;
  height: 48px;
  justify-content: center;
  letter-spacing: .25px;
  line-height: normal;
  max-width: 100%;
  overflow: visible;
  padding: 2px 24px;
  position: relative;
  text-align: center;
  text-transform: none;
  transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),opacity 15ms linear 30ms,transform 270ms cubic-bezier(0, 0, .2, 1) 0ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: auto;
  will-change: transform,opacity;
  z-index: 0;
}

nav button:hover {
  background: #F6F9FE;
  color: #174ea6;
}

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

nav i{
    font-size: 1.5vw;
}

.one{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background:linear-gradient(150deg, rgb(255, 166, 0), rgb(255, 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-bezier(0.19, 1, 0.22, 1)0.5s;
}

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

}

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

}

#leaf{
    top: 10%;
    left: 0%;
    transform: rotate(60deg);
    position: absolute;
    width: 18%;
    transition: all cubic-bezier(0.19, 1, 0.22, 1)0.5s;

}

#leaf2{
    top: 70%;
    left: 80%;
    transform: rotate(-90deg);
    position: absolute;
    width: 12%;
    transition: all cubic-bezier(0.19, 1, 0.22, 1)0.5s;

}

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

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

.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: rotateX(50deg);
}

.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-gradient(150deg, rgb(255, 166, 0), rgb(255, 94, 0));
}

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

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

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

#cocacola{
    top: -15%;
    position: absolute;
    width: 60%;
    left: 50%;
    transform: translate(-50%, 0%);
    transition: all cubic-bezier(0.19, 1, 0.22, 1)0.5s;

}

#pepsi{
    top: -15%;
    position: absolute;
    width: 85%;
    left: 50%;
    transform: translate(-50%, 0%);
    transition: all cubic-bezier(0.19, 1, 0.22, 1)0.5s;

}

.lemon{
    top: -30%;
    position: absolute;
    left: 50%;
    width: 25vw;
    transform: translate(-50%, 0%);
    transition: all cubic-bezier(0.19, 1, 0.22, 1)0.5s;
}
footer {
    background:linear-gradient(150deg, rgb(255, 166, 0), rgb(255, 94, 0));
    padding: 20px 0;
    text-align: center;
    box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.5);
  }
  
  .footer-links a {
    margin-right: 20px;
    text-decoration: none;
    color: #ffffff;
  }
  
  footer p {
    margin-top: 10px;
    font-size: 14px;
    color:black
  }

JS :

var tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".two",
    start: "0% 95%",
    end: "70% 50%",
    scrub: true,
  },
});

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

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

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

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

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

Conclusion

The design effectively combines structure, animation, and thoughtful styling to create an engaging user experience. By emphasizing visual hierarchy and interactivity, this card design not only attracts attention but also facilitates easy navigation and interaction, making it an excellent choice for modern web applications.

Post Views: 58

Mzdevcode