-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
126 lines (101 loc) · 2.46 KB
/
index.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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jooiiee.se</title>
<link rel="icon" type="image/png" href="penguin.png">
</head>
<body>
<H1 class="text marquee vertical-center">Hello, World! This is a silly little website. </H1>
<!-- <H1 class="text marquee vertical-center"><a href="https://twitter.com/jooiiee1">Hello, World!</a></H1> -->
<script>let hue = 0;
function changeBackgroundColor() {
document.body.style.backgroundColor = `hsl(${hue}, 100%, 50%)`;
hue = (hue + 1) % 360; // Increment hue and wrap around at 360
}
// Change color every 100 milliseconds
setInterval(changeBackgroundColor, 100);</script>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
color: white;
transition: background-color 1s ease;
}
@keyframes colorchange
{
0% {color: red;}
20% {color: orange;}
35% {color: yellow;}
50% {color: green;}
65% {color: blue;}
80% {color: violet;}
100% {color: red;}
}
@-webkit-keyframes colorchange
{
0% {color: red;}
20% {color: orange;}
35% {color: yellow;}
50% {color: green;}
65% {color: blue;}
80% {color: violet;}
100% {color: red;}
}
@keyframes marquee {
0% { text-indent: 100% }
100% { text-indent: -100% }
}
.marquee {
width: auto;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: marquee 8s linear infinite;
}
.text {
position: relative;
font: 68px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
letter-spacing: 3px
}
.text a {
color: red;
animation: colorchange 25s infinite;
-webkit-animation: colorchange 25s infinite;
position: relative;
font: 68px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
letter-spacing: 3px;
text-decoration: none;
}
.text:after, .text::after {
z-index: 1;
content: '';
position: absolute;
top: 0; left: 0;
width: 1em; height: 2em;
<!-- background-image: linear-gradient(90deg, #0F4C81 30%, rgba(255,255,255,0)); -->
}
.text:before, .text::before {
z-index: 1;
content: '';
position: absolute;
top: 0; right: 0;
width: 1em; height: 2em;
<!-- background-image: linear-gradient(-90deg, #0F4C81 30%, rgba(255,255,255,0)); -->
}
.text a:hover {
color: white;
}
.vertical-center {
top: 30%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
</style>
</body>
</html>