Hey there, You are most welcome to this article. Today we are going to create a Fruit Juice Landing Page. 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.
To create the basic structure of a website, you’ll need to create six files: index.html, style.css and script.js
Fruit Juice Landing Page HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fruit Juice Landing Page</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<main>
<nav>
<img decoding="async" src="./images/logo.png" alt="logo" class="logo" />
<div class="menu-text">
<p>Home</p>
<p>Flavor</p>
<p>About</p>
</div>
<button>Shop online</button>
</nav>
<div class="content">
<div class="juice-text">
<p id="h1">Orange Juice</p>
<p class="juice-info">
Orange juice is a liquid extract of the orange tree fruit, produced
by squeezing or reaming oranges. It comes in several different
varieties, including blood orange, navel oranges, valencia orange,
clementine, and tangerine.
</p>
</div>
<div class="photos">
<div class="juice-wrapper activePhoto">
<img decoding="async" src="./images/juice1.png" alt="juice1" class="static-juice">
</div>
<div class="juice-wrapper">
<img decoding="async" src="./images/juice2.png" alt="juice2" class="static-juice">
</div>
<div class="juice-wrapper">
<img decoding="async" src="./images/juice3.png" alt="juice3" class="static-juice">
</div>
<div class="juice-wrapper ">
<img decoding="async" src="./images/juice4.png" alt="juice4" class="static-juice">
</div>
</div>
</div>
<div class="juice-wheel">
<img decoding="async" src="./images/juice1.png" alt="juice1" class="dynamic-juice-1" />
<img decoding="async" src="./images/juice2.png" alt="juice1" class="dynamic-juice-2" />
<img decoding="async" src="./images/juice3.png" alt="juice1" class="dynamic-juice-3" />
<img decoding="async" src="./images/juice4.png" alt="juice1" class="dynamic-juice-4" />
</div>
<div class="fruits-wheel">
<img decoding="async" src="./images/bgorange.png" alt="orange" class="dynamic-fruits-1">
<img decoding="async" src="./images/bgplumb.png" alt="plumb" class="dynamic-fruits-2">
<img decoding="async" src="./images/bgkiwi.png" alt="kiwi" class="dynamic-fruits-3">
<img decoding="async" src="./images/bgstrawberry.png" alt="strawberry" class="dynamic-fruits-4">
</div>
</main>
</body>
</html>
Explanation Of HTML Code
1. <!DOCTYPE html>: This is the document type declaration. It informs the web browser that the document is an HTML5 document.
2. <html lang=”en”>: This tag defines the root of the HTML document. The lang attribute specifies the language of the document, which is English in this case.
3. <head>: This section contains meta-information about the HTML document, such as the character encoding, viewport settings, and the title of the page.
– <meta charset=”UTF-8″ />: This meta tag specifies the character encoding of the document as UTF-8, which supports a wide range of characters.
– <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />: This meta tag sets the viewport to the width of the device’s screen and sets the initial zoom level to 1.0. This is important for responsive web design.
– <title>Fruit Juice Landing Page</title>: This sets the title of the web page, which appears in the browser’s title bar or tab.
– <link rel=”stylesheet” href=”style.css” />: This links the HTML document to an external CSS file named style.css for styling purposes.
– <script src=”script.js” defer></script>: This links the HTML document to an external JavaScript file named script.js. The defer attribute tells the browser to defer the execution of the script until after the document has been parsed.
4. <body>: This is the main content of the HTML document.
– <main>: This is the main section of the page, containing the primary content.
– <nav>: This section contains navigation links and possibly a logo.
– <img src=”./images/logo.png” alt=”logo” class=”logo” />: This is an image element representing the logo of the website. The src attribute specifies the path to the image file, and the alt attribute provides alternative text for accessibility purposes.
– <div class=”menu-text”>: This is a container for navigation menu items.
– <p>Home</p>: This is a paragraph element representing a menu item for the Home page.
– <p>Flavor</p>: This is a paragraph element representing a menu item for the Flavor page.
– <p>About</p>: This is a paragraph element representing a menu item for the About page.
– <button>Shop online</button>: This is a button element for online shopping.
– <div class=”content”>: This section contains the main content of the landing page.
– <div class=”juice-text”>: This is a container for text related to the fruit juice.
– <p id=”h1″>Orange Juice</p>: This is a paragraph element with the ID “h1” representing the heading for the orange juice section.
– <p class=”juice-info”>…</p>: This is a paragraph element with the class “juice-info” containing information about orange juice.
– <div class=”photos”>: This is a container for displaying photos of different fruit juices.
– <div class=”juice-wrapper activePhoto”>: This is a container for displaying individual juice photos. The activePhoto class indicates that this container is currently active.
– <img src=”./images/juice1.png” alt=”juice1″ class=”static-juice”>: This is an image element representing the first juice. The src attribute specifies the path to the image file, and the alt attribute provides alternative text.
– <div class=”juice-wheel”>: This section contains a rotating wheel of fruit juice images.
– <img src=”./images/juice1.png” alt=”juice1″ class=”dynamic-juice-1″ />: These are image elements representing different fruit juices. Each image has a class indicating its position on the wheel.
– <div class=”fruits-wheel”>: This section contains a rotating wheel of fruit images.
– <img src=”./images/bgorange.png” alt=”orange” class=”dynamic-fruits-1″>: These are image elements representing different fruits. Each image has a class indicating its position on the wheel.
This HTML code creates the structure and content of a landing page for a fruit juice website, including navigation, information about orange juice, photo displays, and rotating wheels of fruit juice and fruit images.
Here we have the output for the above code, it doesn’t consist of CSS and Javascript as we will do that in the next part given below
Fruit Juice Landing Page CSS Code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: #191629;
}
main{
position: relative;
display: flex;
justify-content: space-between;
flex-direction: column;
width: 900px;
height: 550px;
border-radius: 20px;
overflow: hidden;
-webkit-box-shadow: -7px 10px 111px -33px rgba(0,0,0,0.75);
-moz-box-shadow: -7px 10px 111px -33px rgba(0,0,0,0.75);
box-shadow: -7px 10px 111px -33px rgba(0,0,0,0.75);
background: linear-gradient(90deg, rgba(167,162,244,1) 0%, rgba(112,112,143,1) 35%, rgba(166,149,13,1) 100%, rgba(0,212,255,1) 100%);
}
nav{
display: flex;
justify-content:space-between;
padding: 20px 30px;
align-items: center;
z-index: 1;
}
.logo{
width: 40px;
height: 40px;
}
.menu-text{
display: flex;
gap:50px;
font-weight: 600;
color:white;
}
.juice-text{
z-index: 1;
}
#h1{
text-align: center;
color:white;
}
.juice-info{
text-align: center;
margin-top: 20px;
color: white;
}
button{
font-size: 18px;
padding: 10px 30px;
border-radius: 15px;
background-color: transparent;
border: 1px solid white;
color:white;
cursor: pointer;
}
.content{
display: flex;
flex-direction: column;
width: 50%;
gap:80px;
margin: 30px;
}
.juice-wrapper{
width: 90px;
height: 120px;
padding-bottom:10px ;
z-index: 1;
}
.static-juice{
width: 100%;
height: 100%;
cursor:pointer;
}
.photos{
display: flex;
margin-left: 20px;
}
.activePhoto{
border-bottom: 2px solid white;
}
.juice-wheel{
width: 500px;
height: 500px;
border-radius: 50%;
position: absolute;
right:-280px;
bottom:-300px;
transform: rotate(-45deg);
transition: transform 1s;
z-index: 1;
}
.juice-wheel img{
width: 320px;
}
.dynamic-juice-1{
position: absolute;
top:-350px;
right:90px;
}
.dynamic-juice-2{
position: absolute;
transform: rotate(90deg);
right:-290px;
top:30px;
}
.dynamic-juice-3{
position: absolute;
transform: rotate(180deg);
bottom:-350px;
right:83px;
}
.dynamic-juice-4{
position: absolute;
transform: rotate(-90deg);
top:30px;
left:-290px
}
.fruits-wheel{
width: 700px;
height: 700px;
border-radius: 50%;
position: absolute;
top:-600px;
left:-480px;
transform: rotate(-45deg);
transition: transform 1s;
z-index: 0;
}
.fruits-wheel img{
width: 650px;
opacity: 40%;
}
.dynamic-fruits-1{
position: absolute;
transform: rotate(90deg);
bottom: -500px;
left:10px;
}
.dynamic-fruits-2{
position: absolute;
transform: rotate(180deg);
bottom: 200px;
left:-580px;
}
.dynamic-fruits-3{
position: absolute;
transform: rotate(100deg);
top: -350px;
left:90px;
}
.dynamic-fruits-4{
position: absolute;
bottom: 120px;
right:-600px;
}
.fade-in {
animation: fadeIn 1.5s forwards;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
Explanation Of CSS Code
1. *: This selector applies styles to all elements on the page. The properties set here ensure that elements have no padding or margin, and the box-sizing is set to border-box. The font-family is set to a sans-serif font.
2. body: This styles the entire body of the page.
– width: 100%; height: 100vh;: Sets the width to 100% of the viewport width and the height to 100% of the viewport height.
– display: flex; justify-content: center; align-items: center;: Aligns the content vertically and horizontally in the center of the page.
– overflow: hidden;: Hides any overflow content.
– background-color: #191629;: Sets the background color of the body.
3. main: Styles the main content section of the page.
– position: relative;: Positions the element relative to its normal position on the page.
– display: flex; justify-content: space-between; flex-direction: column;: Displays the content in a flex container with a column layout and space-between alignment.
– width: 900px; height: 550px;: Sets the width and height of the main section.
– border-radius: 20px;: Adds rounded corners to the main section.
– overflow: hidden;: Hides any overflow content.
– background: linear-gradient(…);: Applies a linear gradient background to the main section.
4. nav: Styles the navigation section.
– display: flex; justify-content: space-between; align-items: center;: Aligns navigation items horizontally with space between them and vertically centered.
– padding: 20px 30px;: Adds padding to the navigation section.
– z-index: 1;: Sets the stacking order of the navigation section.
5. .logo: Styles the logo image.
– width: 40px; height: 40px;: Sets the width and height of the logo image.
6. .menu-text: Styles the menu text items.
– display: flex; gap: 50px;: Displays menu text items in a flex container with a gap between them.
– font-weight: 600; color: white;: Sets the font weight and color of the menu text.
Certainly! Here’s the continuation and explanation of the CSS code:
7. .juice-text: Styles the container for the text related to the fruit juice.
– z-index: 1;: Sets the stacking order of the juice text container, ensuring it appears above other elements.
8. #h1: Styles the heading element with the ID “h1”.
– text-align: center; color: white;: Aligns the text in the center horizontally and sets the color to white.
9. .juice-info: Styles the paragraph element with the class “juice-info”.
– text-align: center; margin-top: 20px; color: white;: Aligns the text in the center horizontally, adds a top margin of 20 pixels, and sets the color to white.
10. button: Styles the button element.
– font-size: 18px; padding: 10px 30px; border-radius: 15px;: Sets the font size, padding, and border radius of the button.
– background-color: transparent; border: 1px solid white; color: white;: Sets the background color to transparent, adds a white border, and sets the text color to white.
– cursor: pointer;: Changes the cursor to a pointer when hovering over the button.
11. .content: Styles the container for the main content of the landing page.
– display: flex; flex-direction: column; width: 50%; gap: 80px; margin: 30px;: Displays the content in a flex container with a column layout, sets the width to 50% of its parent container, adds a gap of 80 pixels between child elements, and adds margin space of 30 pixels.
12. .juice-wrapper: Styles the container for individual juice photos.
– width: 90px; height: 120px; padding-bottom: 10px; z-index: 1;: Sets the width, height, and bottom padding of the juice wrapper, and sets the stacking order.
13. .static-juice: Styles the static juice images.
– width: 100%; height: 100%; cursor: pointer;: Sets the width and height to 100% of their container, and changes the cursor to a pointer when hovering over the images.
14. .photos: Styles the container for displaying photos of different fruit juices.
– display: flex; margin-left: 20px;: Displays the photos in a flex container with a left margin of 20 pixels.
15. .activePhoto: Styles the currently active photo container.
– border-bottom: 2px solid white;: Adds a white bottom border to indicate the active photo.
16. .juice-wheel: Styles the rotating wheel of fruit juice images.
– width: 500px; height: 500px; border-radius: 50%; position: absolute; right: -280px; bottom: -300px; transform: rotate(-45deg); transition: transform 1s; z-index: 1;: Sets the width, height, border radius, position, rotation, transition effect, and stacking order of the juice wheel.
17. .juice-wheel img: Styles the fruit juice images within the juice wheel.
– width: 320px;: Sets the width of the juice images.
18. .dynamic-juice-1, .dynamic-juice-2, .dynamic-juice-3, .dynamic-juice-4: Styles the individual fruit juice images within the juice wheel.
– These classes specify the position and rotation of each juice image within the wheel.
19. .fruits-wheel: Styles the rotating wheel of fruit images.
– Similar to .juice-wheel, but for the fruit images.
20. .fruits-wheel img: Styles the fruit images within the fruits wheel.
– Similar to .juice-wheel img, but for the fruit images.
21. .dynamic-fruits-1 to .dynamic-fruits-4: Styles the individual fruit images within the fruits wheel.
– Similar to .dynamic-juice-1 to .dynamic-juice-4, but for the fruit images.
22. .fade-in and @keyframes fadeIn: These styles and keyframes control the fade-in animation for the juice text container.
These CSS styles collectively define the layout, appearance, and animations of various elements on the fruit juice landing page.
After writing the HTML and CSS code provided above, this is how the webpage looks. However, it’s not functioning correctly because JavaScript hasn’t been added yet. Let’s scroll down to add the JavaScript.
Fruit Juice Landing Page Javascript Code
const juiceArray = document.querySelectorAll(".juice-wrapper");
const title = document.querySelector("h1");
const description = document.querySelector(".juice-info");
const juiceWheel = document.querySelector(".juice-wheel");
const fruitsWheel = document.querySelector(".fruits-wheel");
const juiceText = document.querySelector(".juice-text");
let currentJuice = juiceArray[0];
let deg = -45;
const juiceData = [
{
name: "Orange Juice",
descriptioN:
"Orange juice is a liquid extract of the orange tree fruit, produced by squeezing or reaming oranges. It comes in several different varieties, including blood orange, navel oranges, valencia orange, clementine, and tangerine.",
backgroundColor:
"linear-gradient(90deg, rgba(167,162,244,1) 0%, rgba(112,112,143,1) 35%, rgba(166,149,13,1) 100%, rgba(0,212,255,1) 100%)",
},
{
name: "Plum Juice",
descriptioN:
"A luscious elixir extracted from ripe plums. Bursting with rich flavor and natural sweetness, it delivers a refreshing and satisfying experience. Indulge in the succulent essence of plums while enjoying the numerous health benefits it offers.",
backgroundColor:
"linear-gradient(90deg, rgba(2,19,45,1) 4%, rgba(120,109,181,1) 49%, rgba(230,132,132,1) 100%, rgba(0,212,255,1) 100%)",
},
{
name: "Kiwi Juice",
descriptioN:
"A vibrant and tangy elixir extracted from ripe kiwis. Packed with essential nutrients, it offers a refreshing and invigorating experience. The perfect balance of sweetness and tanginess makes it a popular choice for a healthy and flavorful beverage.",
backgroundColor:
"linear-gradient(90deg, rgba(9,111,55,1) 0%, rgba(39,196,129,1) 49%, rgba(47,209,232,1) 100%, rgba(0,212,255,1) 100%)",
},
{
name: "Strawberry Juice",
descriptioN:
"Strawberry Juice is a refreshing fresh fruit juice that is full of vitamin C and antioxidants and lot of invigorating flavor. Apart from fresh and ripe strawberries, this recipe also uses lime juice to make it tantalizing.",
backgroundColor:
"linear-gradient(90deg, rgba(101,18,18,1) 0%, rgba(186,44,44,1) 49%, rgba(235,134,80,1) 100%, rgba(0,212,255,1) 100%)",
},
];
juiceArray.forEach((element, index) => {
element.addEventListener("click", () => {
document.querySelector("main").style.background =
juiceData[index].backgroundColor;
deg = deg - 90;
juiceWheel.style.transform = `rotate(${deg}deg)`;
fruitsWheel.style.transform = `rotate(${deg}deg)`;
title.innerHTML = juiceData[index].name;
description.innerHTML = juiceData[index].descriptioN;
currentJuice.classList.remove("activePhoto");
element.classList.add("activePhoto");
currentJuice = element;
juiceText.classList.add("fade-in");
setTimeout(() => {
juiceText.classList.remove("fade-in");
}, 1000);
});
});
Explanation Of Javascript Code
1. const juiceArray = document.querySelectorAll(“.juice-wrapper”);: This line selects all elements with the class “juice-wrapper” and stores them in the juiceArray variable.
2. const title = document.querySelector(“h1”);, const description = document.querySelector(“.juice-info”);, const juiceWheel = document.querySelector(“.juice-wheel”);, const fruitsWheel = document.querySelector(“.fruits-wheel”);, const juiceText = document.querySelector(“.juice-text”);: These lines select specific elements from the DOM and store them in variables for easy access later in the code.
3. let currentJuice = juiceArray[0];: This initializes the currentJuice variable with the first element from the juiceArray.
4. let deg = -45;: This initializes the deg variable with the initial rotation degree value.
5. const juiceData = […]: This array stores data about different types of fruit juices, including name, description, and background color gradient.
6. juiceArray.forEach((element, index) => {…});: This loop iterates over each juice element in the juiceArray and attaches a click event listener to each one.
– element.addEventListener(“click”, () => {…});: This adds a click event listener to each juice element. When clicked, it triggers the function inside the arrow function.
– document.querySelector(“main”).style.background = juiceData[index].backgroundColor;: This line changes the background color of the main section to the corresponding background color gradient from the juiceData array.
– deg = deg – 90; juiceWheel.style.transform = rotate(${deg}deg); fruitsWheel.style.transform = rotate(${deg}deg);: These lines rotate the juice wheel and fruits wheel by 90 degrees clockwise each time a juice element is clicked.
– title.innerHTML = juiceData[index].name; description.innerHTML = juiceData[index].descriptioN;: These lines update the title and description elements with the name and description of the selected juice from the juiceData array.
– currentJuice.classList.remove(“activePhoto”); element.classList.add(“activePhoto”); currentJuice = element;: These lines remove the “activePhoto” class from the previously selected juice element, add it to the currently selected juice element, and update the currentJuice variable.
– juiceText.classList.add(“fade-in”);: This adds a CSS class called “fade-in” to the juiceText element, triggering a fade-in animation.
– setTimeout(() => {…}, 1000);: This sets a timeout to remove the “fade-in” class after 1000 milliseconds (1 second), effectively ending the fade-in animation.
