100 lines
3.2 KiB
HTML
100 lines
3.2 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
body {
|
|
background-color: #003366;
|
|
margin-top: 20px;
|
|
}
|
|
img {
|
|
height: 50%;
|
|
width: 50%;
|
|
}
|
|
p {
|
|
text-align: center;
|
|
}
|
|
.angle14 {
|
|
transform: rotate(14deg)
|
|
}
|
|
.angle11 {
|
|
transform: rotate(-11deg)
|
|
}
|
|
/* the following shamelessly stolen from https://xenobyte.xyz */
|
|
/* lmao */
|
|
html::before {
|
|
content: "";
|
|
display: block;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: calc(100% + 32px);
|
|
height: calc(100% + 32px);
|
|
background-image: url("../img/scanlines.png");
|
|
background-position: 0 0;
|
|
background-repeat: repeat;
|
|
z-index: 10000000;
|
|
animation: ScanlineAnimationLeft 2s linear infinite;
|
|
opacity: 2.0;
|
|
}
|
|
|
|
html::after {
|
|
content: "";
|
|
display: block;
|
|
position: fixed;
|
|
left: -32px;
|
|
top: 0;
|
|
width: calc(100% + 32px);
|
|
height: calc(100% + 32px);
|
|
background-image: url("../img/scanlines.png");
|
|
background-position: 0 0;
|
|
background-repeat: repeat;
|
|
z-index: 10000000;
|
|
animation: ScanlineAnimationRight 0.4s linear infinite;
|
|
opacity: 2.0;
|
|
}
|
|
|
|
@keyframes ScanlineAnimationLeft {
|
|
0% {
|
|
transform: translateX(0px) translateY(0px);
|
|
}
|
|
100% {
|
|
transform: translateX(-32px) translateY(-32px);
|
|
}
|
|
}
|
|
|
|
@keyframes ScanlineAnimationRight {
|
|
0% {
|
|
transform: translateX(0px) translateY(0px);
|
|
}
|
|
100% {
|
|
transform: translateX(32px) translateY(-32px);
|
|
}
|
|
}
|
|
|
|
/* https://orangeable.com/css/animated-gradient-text */
|
|
|
|
.lesbian {
|
|
background: linear-gradient(-44deg, #D52D00, #EF7627, #FF9A56, #FFFFFF, #D162A4, #B55690, #A30262);
|
|
background-size: 300%;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-weight: bold;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: animated_text 8s ease-in-out infinite;
|
|
-moz-animation: animated_text 8s ease-in-out infinite;
|
|
-webkit-animation: animated_text 8s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes animated_text {
|
|
0% { background-position: 0px 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0px 50%; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p><img src="../img/gloria/jett_frame1.png"></p>
|
|
<p class="angle14">sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text</p>
|
|
<p class="lesbian angle14">sample text but it's gay sample text but it's gay sample text but it's gay sample text but it's gay sample text but it's gay sample text but it's gay sample text but it's gay sample text but it's gay sample text but it's gay sample text but it's gay sample text but it's gay sample text but it's gay sample text but it's gay sample text but it's gay sample text but it's gay sample text but it's gay sample text but it's gay sample text but it's gay sample text but it's gay sample text but it's gay sample text but it's gay</p>
|
|
</body>
|
|
</html>
|