Output
In today’s computerized period, where to begin with impressions check, a well-crafted landing page can make all the contrast. Our most recent endeavor—a completely enlivened landing page for Fanta—demonstrates the control of cutting edge web innovations to charm and lock in. This web journal post investigates the plan and improvement travel of our Fanta landing page, exhibiting how HTML, CSS, and JavaScript come together to make a energetic client experience. Crafting a Vision Our mission for the Fanta landing page was clear: to reflect the brand’s perky and lively pith. Fanta’s personality is dynamic and fun, and our objective was to interpret this into an immersive computerized involvement. We pointed to plan a page that not as it were snatches consideration but too keeps clients locked in through intelligently and energized elements.
HTML: The System of Creativity HTML shapes the auxiliary skeleton of our landing page. It lays out the essential components and organizes substance into a coherent structure. For the Fanta landing page, we made a clean and semantic HTML format, guaranteeing that each element—from headers to footers—was coherently organized. This structure serves as the canvas for our movements and intuitively highlights, setting the organize for a consistent client experience.
<!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 Landing page - Codebyrolex</title>
</head>
<body>
<div id="main">
<nav>
<a href="#">Logo</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="translate(100 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: Imbuing Fashion and Animation CSS (Cascading Fashion Sheets) is where plan and activity start to prosper. We utilized CSS to fashion the landing page with dynamic colors, eye-catching typography, and smooth moves. The genuine enchantment, in any case, lies in our utilize of CSS movements. By leveraging keyframes and move properties, we made movements that bring inactive components to life. For occasion, as clients scroll, components easily move into see, improving visual intrigued and directing consideration. Float impacts were included to intuitively components like buttons to give prompt criticism and empower client interaction. These activitys are outlined to be both captivating and useful, guaranteeing that they complement the client involvement or maybe than diminish from it.
@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 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-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:#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: 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: 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: rgb(255, 149, 0);
padding: 1vw 2vw;
}
#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;
}
JavaScript: Including Profundity and Interactivity JavaScript is the motor behind the intuitively highlights of the landing page. With JavaScript, we presented energetic components such as parallax looking over and intuitively exhibits. For case, clients can press through distinctive Fanta flavors, activating livelinesss that uncover nitty gritty data approximately each item. This interactivity not as it were locks in clients but moreover makes a difference them investigate the brand’s offerings in an natural manner. JavaScript moreover plays a pivotal part in guaranteeing that activitys and intelligent happen at the right minutes. By carefully scripting the timing and triggers for different activitys, we made a cohesive and responsive involvement that adjusts to client interactions. Ensuring a Consistent Involvement Over Devices In the world of web plan, responsiveness is key. We planned the Fanta landing page with a responsive format to guarantee it performs delightfully on any gadget, from desktop screens to portable phones. CSS media questions were utilized to adjust the plan for diverse screen sizes, making beyond any doubt that movements and intelligently components stay successful and outwardly engaging in any case of the gadget used. Balancing Aesthetics with Performance and interactivity are fundamental for client engagement, execution cannot be ignored.
We centered on optimizing the page to guarantee speedy stack times and smooth execution. Pictures were optimized for web utilize, and movements were actualized in a way that minimizes affect on page speed. JavaScript was moreover overseen to maintain a strategic distance from any execution slack, guaranteeing that the client encounter remains liquid and enjoyable. The Control of Activity in Client Engagement Animations can altogether improve client encounter when utilized fittingly. On the Fanta landing page, planned to lock in clients and make a sense of fervor. Smooth moves and intuitively components direct clients through the substance, making the encounter both agreeable and enlightening. This approach adjusts with Fanta’s brand personality, making a computerized encounter that mirrors the fun and dynamic nature of the brand. Incorporating Client Feedback User input is a crucial component in refining any web extend. After the starting dispatch of the Fanta landing page, we assembled bits of knowledge from clients to assess their involvement. This input was instrumental in making alterations and advancements, guaranteeing that the page meets client desires and gives a consistent, agreeable experience. Looking Ahead: Grasping Future Trends The field of web plan is ceaselessly advancing, and remaining ahead of patterns is significant.
var tl = gsap.timeline({scrollTrigger:{
trigger: ".two",
start: "0% 95%",
end: "70% 50%",
scrub: true,
// markers: true,
}})
tl.to("#fanta",{
top: "120%",
left: "0%"
}, 'orange')
tl.to("#orange-cut",{
top:"160%",
left: "23%"
}, 'orange')
tl.to("#orange",{
width: "15%",
top:"160%",
right: "10%"
}, 'orange')
tl.to("#leaf",{
top:"110%",
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')
Check above content There is Zip File in Zip File all Assets and Source code is provided
