In this project, we're designing a double landing page showcasing two products: Apple and Samsung. When hovering over a product, that side becomes larger than the other. The button also has a beautiful transition and animation effect, and a background image is added to enhance visual appeal. To achieve the hover effect, we'll use JavaScript to add and remove classes that change each side's styling. This creates a visual size change when hovering over each product.
Create these three files, copy the code into each one, then open index.html with Live Server.
double-landing-page/ ├── index.html ├── style.css └── index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Double Landing Page</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="split left">
<h1>Apple</h1>
<button class="btn">Buy Now</button>
</div>
<div class="split right">
<h1>Samsung</h1>
<button class="btn">Buy Now</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Continue your learning journey with these handpicked projects that share similar concepts and technologies
%202.webp?alt=media&token=7ffdb0b5-c934-43e2-a7a1-029e283cce6f)
In this project, you will learn how to build a testimonial slider using HTML, CSS and JavaScript. We use a timer to change the sliders automatically and also we have added a bountiful animation showing the slides.
View project
Welcome to the Dice Roll Simulator project. The final version of the project features a dice at the center of the screen and a "Roll dice" button. The button triggers an animation and generates a random number, which is displayed in the center of the dice when clicked, t. Additionally, the number is added to a history list. To achieve this, we used modern CSS to style the dice and added a JavaScript event listener to the button. The listener generates a random number, saves it to an array, and updates the history list.
View project
In this project, we create a rock, paper, and scissors game. The computer will also choose a random option, and the results will be displayed. You can win, lose, or tie. Scores are tracked at the bottom. We'll use HTML for structure, CSS for a modern look, and JavaScript to generate the computer's choice and compare the results. This game is an interactive way to test your luck and strategy against a computer opponent.
View project