Fanta Landing Page Using HTML CSS And JS With Source Code
Introduction
Hello developers friends, today everyone is welcome to this new project. Today we have created a wonderful landing page which is of a Fanta website. This Fanta website is very amazing. We have used very good animation in this website so that The design and look of the website is looking very good. We have created this website with the help of HTML CSS and JavaScript which is quite good.
Friends, we have used some different types of images in creating this website, due to which the website looks even better and better. Friends, if you also want to use those images, then you can download the complete source code given below. You can download photos with the help of button
Friends, we have used a wonderful scrolling animation in this fun website, due to which the user will have a lot of fun in viewing and using the website and the user will have a good experience on the website. Friends, if the user comes to the website and scrolls the website. So the PNG image of the bottle that we have used will be visible to the user by scrolling along with it, which looks quite good.
Friends, if you use this project then you will not only have knowledge of HTML CSS but you will also get good knowledge of JavaScript because when you use this type of project, you get knowledge of coding and you Learn how to use code correctly.
Steps to Create Fanta Website Landing Page:-
Friends, if you want to use the code of this Fanta website and this website, then it is important for you to keep some things in mind. If you do not pay attention to those important things, then you may face difficulty in using the code. Friends, like you will find below. Along with CSS, it is mandatory to have good knowledge of JavaScript. If you do not have the knowledge then you may face problems, so now you have to understand the following things carefully step by step.
- If you people want to use the code of this Fanta website and you want to get knowledge about animation from this animation website, then first of all you have to create a new folder in your computer, whose name you want. can keep.
- If you have created a new folder, then now you have to open this new folder in your code editor.
- After opening the folder in your code editor, you now have to create three files in this folder which are 👇
index.html
style.css
script.js
You have to create these three files in your folder with this name.] - Now to use the code of Fanta website, you have to upload the code given below in your file as per the heading.
Source Code:
HTML (index.html)
Fanta website Landing Page
FANTA
Flavour Updated
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.
CocaCola
Fanta
Pepsi
CSS (Style.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 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 (Script.js)
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')
Output:-
Complain Management using Python with a Graphical User Interface (GUI) Introduction: The Complain Management using Python program designed to manage complaints effectively …
COVID 19 Hospital Management Using Python [Django Framework] Introduction: The COVID-19 Hospital Management is a Python-based application that tracks web applications for Hospitals. …
Drawing Ganesha Using Python Turtle Graphics[Drawing Ganapati Using Python] Introduction In this blog post, we will learn how to draw Lord Ganesha …
Contact Management System in Python with a Graphical User Interface (GUI) Introduction: The Contact Management System is a Python-based application designed to …