Electrical Magic Project
Hi Guys!
Welcome to INFO HUB
Today, I want to share my Html project.
- The name of my project is "Electrical Magic".
⦁ Work of project.
1. When you click on the "ON Button" you will see that the bulb has on.
2. When you click on the "OFF Button" you will see that the bulb has off.
You can watch the work of the project in this video.
The code of this project is given below:-
- This is "index.html".
<!DOCTYPE html>
<html>
<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">
<link rel="shortcut icon" href="favicon.png" type="jpg/png">
<title>Electrical Magic</title>
<style>
div {
padding: 70px;
border: 1px solid #4CAF50;
border-radius: 100px;
width: device;
height: device;
}
h1 {text-align: center;}
</style>
</head>
<body style="background-image: url('background.jpg');">
<h1 style="font-family: Lucida Handwriting;color: rgb(255, 255, 255);">Electrical Magic</h1><br>
<hr>
<div style="background-image: url('off_bulb_background.jpg');">
<br><br><br>
<a href="electrical_magic_2.html"><img src="on_button.jpg" alt="need strong net" style="width:125px;height:125px;"></a>
<br><br>
<img src="off_button.jpg" alt="need strong net" style="width:125px;height:125px;"></a>
</div>
</body>
</html>
- This is "electrical_magic2.html".
<!DOCTYPE html>
<html>
<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">
<link rel="shortcut icon" href="favicon.png" type="jpg/png">
<title>Electrical Magic</title>
<style>
div {
padding: 70px;
border: 1px solid #4CAF50;
border-radius: 100px;
width: device;
height: device;
}
h1 {text-align: center;}
</style>
</head>
<body style="background-image: url('background1.jpg');">
<h1 style="font-family: Lucida Handwriting;color: rgb(255, 255, 255);">Electrical Magic</h1> <br>
<hr>
<div style="background-image: url('on_bulb_background.jpg');">
<br><br><br>
<img src="on_button.jpg" alt="need strong net" style="width:125px;height:125px;">
<br><br>
<a href="index.html"><img src="off_button.jpg" alt="need strong net" style="width:125px;height:125px;"></a>
</div>
</body>
</html>
The files that I used in this project.
- off_bulb_background.jpg
- on_bulb_background.jpg
- on_button.jpg
- off_button.jpg
- favicon.png
Comments
Post a Comment