8000 Added Web Page · CodeMacrocosm/Web-a-Thon@df657e3 · GitHub
[go: up one dir, main page]
Skip to content

Commit df657e3

Browse files
hayagreevan-vhayagreevan-v
committed
Added Web Page
1 parent ad99a03 commit df657e3

File tree

3 files changed

+54
-0
lines changed

3 files changed

+54
-0
lines changed

‎web/pages/hayagreevan-v.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Hiii</title>
7+
<link rel="stylesheet" href="../stylesheet/hayagreevan-v.css">
8+
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div>
13+
<h1>Hello world</h1>
14+
<p>Centered a Div in css & Added a Mouse hover effect in js</p>
15+
</div>
16+
</div>
17+
18+
<script src="../scripts/hayagreevan-v.js"></script>
19+
</body>
20+
</html>

‎web/scripts/hayagreevan-v.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const h1 = document.querySelector("h1");
2+
const p = document.querySelector("p");
3+
const container = document.querySelector(".container");
4+
5+
h1.addEventListener("mouseover",()=>{
6+
container.style.backgroundColor='white';
7+
})
8+
9+
h1.addEventListener("mouseleave",()=>{
10+
container.style.backgroundColor='aqua';
11+
})
12+
13+
p.addEventListener("mouseover",()=>{
14+
container.style.backgroundColor='grey';
15+
})
16+
17+
p.addEventListener("mouseleave",()=>{
18+
container.style.backgroundColor='aqua';
19+
})

‎web/stylesheet/hayagreevan-v.css

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.container{
2+
display: flex;
3+
align-items: center;
4+
height: 98vh;
5+
justify-content: center;
6+
background-color: aqua;
7+
color: orangered;
8+
}
9+
h1{
10+
text-align: center;
11+
}
12+
p{
13+
text-align: center;
14+
color: blueviolet;
15+
}

0 commit comments

Comments
 (0)
0