100JSProjects
ProjectsExplore all projects
100JS_WORKSPACE/Build · Learn · Repeat
100JSProjects

Practical HTML, CSS, and JavaScript projects designed to help you turn concepts into real skills—one build at a time.

01Explore

./All projects./About./Contact./Privacy

02Resources

./GitHub repository./Support the project

© 2026 100 JS Projects. Built for developers.

TermsCookiesContact
JS// Project Details

Double Landing PageHTML, CSS & JavaScript Project

HTML5CSS3JavaScript
PROJECT_PREVIEW
Double Landing Page project preview
Live preview availableReady
README.mdProject overview

Project Description

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.

Technologies Used

HTML5CSS3JavaScript
Preview

Live Demo

Experience the project in action with our interactive live demo.

View Live Demo
Repository

Source Code

Explore the complete source code and learn how it's built.

View on GitHub
JS// Related Projects

Keep Building with Similar Projects

Continue your learning journey with these handpicked projects that share similar concepts and technologies

Dice Roll Simulator project preview
HTMLCSSJavaScript

Dice Roll Simulator

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
Temperature Converter project preview
HTMLCSSJavaScript

Temperature Converter

This project aims to create a temperature converter for beginners. The final version of the project includes three inputs for Celsius, Fahrenheit, and Kelvin temperature formats. When you change any of these inputs, for example, if you choose 100 degrees Celsius, you will see the equivalent Celsius value in Fahrenheit and Kelvin formats. Additionally, if you change one input, you will see a real-time change inside the other inputs. For instance, changing the Fahrenheit input to 100 degrees will show you that it is equal to 37 degrees Celsius and 311 Kelvin. To create this project, we will learn how to use an "onchange" event listener to track changes inside the inputs. We will also use the switch statement to track changes based on the name of the input we are working on. Additionally, we will use CSS to give the project a modern look, inspired by newMorphISM design. In summary, this project will help us learn how to create a temperature converter using JavaScript and CSS, and we will learn how to track changes using event listeners and switch statements.

View project
Recipe Book App project preview
HTMLCSSJavaScript

Recipe Book App

In this project, we're developing a recipe book application that features a variety of recipes obtained through a free recipe API. We need an API key to access this API. Each time the page is refreshed, a new set of recipes with distinct ingredients will be displayed. Additionally, a link is provided to access the recipe website.

View project
{ }View All Projects