-
Notifications
You must be signed in to change notification settings - Fork 1
/
dark.html
66 lines (57 loc) · 1.84 KB
/
dark.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Bg Toggle</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0;
min-height: 100vh;
transition: 0.5s ease-in;
}
h1,
p,
button {
font-family: 'Poppins', sans-serif;
text-align: center;
}
.bg-dark {
background-color: #000;
color: white;
transition: 0.5s ease-in;
}
button {
padding: 10px;
background-color: white;
border: 1px solid black;
color: black;
cursor: pointer;
border-radius: 0px;
transition: 0.2s ease-in-out;
}
button:hover {
background-color: #000;
transition: 0.2s ease-in;
color: white;
}
</style>
</head>
<body>
<h1>Press Toggle to Change Background Color</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum quibusdam officiis in sint eum dicta similique
corrupti, dignissimos architecto cumque minima facere totam quidem aut temporibus rerum tenetur. Eius, ipsum!.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima architecto ipsum assumenda eaque animi quae
recusandae modi, laudantium velit, consequuntur alias dolores iste a pariatur quidem, commodi in harum. Sed!.
</p>
<div class="button">
<button type="button" class="dark">Toggle</button>
</div>
</body>
<script src="dark.js"></script>
</html>