This project creates a dynamic hoverboard effect using HTML, CSS, and JavaScript. When the user hovers over squares in the grid, the squares change color and produce a glowing effect.
To see a live demo of the hoverboard, open the index.html file in a web browser. You will see a grid of squares that change color and glow when you hover over them.
- Dynamic color change: Squares change to random colors on hover.
- Glowing effect: Each square produces a glowing effect when hovered.
- Smooth transitions: The color changes and glow effects are smoothly animated.
To install and run the project locally, follow these steps:
- Clone the repository:
git clone https://github.com/ThisIsAR7/hoverboard.git
- Navigate to the project directory:
cd hoverboard - Open
index.htmlin your browser:open index.html
To use this project, simply open the index.html file in a web browser. The page will display a grid of squares that change color and glow when hovered over.
- Number of squares: Change the
SQUARESconstant inscript.jsto increase or decrease the number of squares. - Colors: Modify the
colorsarray inscript.jsto change the available colors for the squares. - Square size: Adjust the
heightandwidthproperties in the.squareclass instyle.cssto change the size of the squares. - Grid size: Adjust the
max-widthproperty in the.containerclass instyle.cssto change the overall size of the grid.
The project consists of the following files:
- index.html: The main HTML file that sets up the structure of the page.
- style.css: The CSS file that styles the page.
- script.js: The JavaScript file that contains the logic for the hoverboard effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Hoverboard</title>
</head>
<body>
<div class="container" id="container"></div>
<script src="script.js"></script>
</body>
</html>