add web files
This commit is contained in:
parent
3b0a10727c
commit
a05b8f8875
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>oke.moe</title>
|
||||
<link rel="stylesheet" type="text/css" href="/styles.css">
|
||||
<link rel="icon" type="image/png" href="/favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1><span id="left"><span class="fast-flicker">O</span>KE</span><span id="right">.M<span class="flicker">OE</span></span></h1>
|
||||
</header>
|
||||
<picture>
|
||||
<source srcset="/img/kinakopeek.webp">
|
||||
<source srcset="/img/kinakopeek.png">
|
||||
<img src="/img/kinakopeek.png" alt="Kinako peeking" class="kinako">
|
||||
</picture>
|
||||
<picture>
|
||||
<source srcset="/img/karenpeek.webp">
|
||||
<source srcset="/img/karenpeek.png">
|
||||
<img src="/img/karenpeek.png" alt="Karen peeking" class="karen">
|
||||
</picture>
|
||||
<picture>
|
||||
<source srcset="/img/meguminpeek.webp">
|
||||
<source srcset="/img/meguminpeek.png">
|
||||
<img src="/img/meguminpeek.png" alt="Megumin peeking" class="megumin">
|
||||
</picture>
|
||||
<picture class="nezuko">
|
||||
<source srcset="/img/nezukopeek.webp">
|
||||
<source srcset="/img/nezukopeek.png">
|
||||
<img src="/img/nezukopeek.png" alt="Nezuko peeking" class="nezuko">
|
||||
</picture>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,328 @@
|
|||
@font-face {
|
||||
font-family: clip;
|
||||
font-display: swap;
|
||||
src: url(/font/clip.woff2) format("woff2");
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body, .frame, .container {
|
||||
font-family: "Arial", sans-serif;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
min-width: 100vw;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hide;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
header {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: clip, "Arial", sans-serif;
|
||||
font-size: 96px;
|
||||
color: #f2f2f2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#left {
|
||||
color: #ffe6ff;
|
||||
text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
|
||||
-0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
|
||||
0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
|
||||
animation: shine-one 2s forwards, flicker 3s infinite;
|
||||
}
|
||||
|
||||
#right {
|
||||
color: #b2f3f2;
|
||||
text-shadow: 0 0 0.6rem #b2f3f2, 0 0 1.5rem #75f1f1,
|
||||
-0.2rem 0.1rem 1rem #75f1f1, 0.2rem 0.1rem 1rem #75f1f1,
|
||||
0 -0.5rem 2rem #1cf3f1, 0 0.5rem 3rem #1cf3f1;
|
||||
animation: shine-two 2s forwards, flicker 6s infinite;
|
||||
}
|
||||
|
||||
.flicker {
|
||||
animation: shine-two 2s forwards, blink-two 10s 1s infinite;
|
||||
}
|
||||
|
||||
.fast-flicker {
|
||||
animation: shine-one 2s forwards, blink-one 3s 2s infinite;
|
||||
}
|
||||
|
||||
.kinako {
|
||||
height: 35vw;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.karen {
|
||||
height: 30vw;
|
||||
width: auto;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.megumin {
|
||||
height: auto;
|
||||
width: 20vw;
|
||||
transform: rotate(180deg);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 55%;
|
||||
}
|
||||
|
||||
.nezuko {
|
||||
height: auto;
|
||||
width: 20vw;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
@keyframes shine-one {
|
||||
0% {
|
||||
color: #6b1839;
|
||||
text-shadow: none;
|
||||
}
|
||||
100% {
|
||||
color: #ffe6ff;
|
||||
text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
|
||||
-0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
|
||||
0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shine-two {
|
||||
0% {
|
||||
color: #178685;
|
||||
text-shadow: none;
|
||||
}
|
||||
100% {
|
||||
color: #b2f3f2;
|
||||
text-shadow: 0 0 0.6rem #b2f3f2, 0 0 1.5rem #75f1f1,
|
||||
-0.2rem 0.1rem 1rem #75f1f1, 0.2rem 0.1rem 1rem #75f1f1,
|
||||
0 -0.5rem 2rem #1cf3f1, 0 0.5rem 3rem #1cf3f1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink-one {
|
||||
0%,
|
||||
22%,
|
||||
36%,
|
||||
75% {
|
||||
color: #ffe6ff;
|
||||
text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
|
||||
-0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
|
||||
0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
|
||||
}
|
||||
28%,
|
||||
33% {
|
||||
color: #ff65bd;
|
||||
text-shadow: none;
|
||||
}
|
||||
82%,
|
||||
97% {
|
||||
color: #ff2483;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink-two {
|
||||
0%,
|
||||
22%,
|
||||
36%,
|
||||
75% {
|
||||
color: #ddfefd;
|
||||
text-shadow: 0 0 0.6rem #b2f3f2, 0 0 1.5rem #75f1f1,
|
||||
-0.2rem 0.1rem 1rem #75f1f1, 0.2rem 0.1rem 1rem #75f1f1,
|
||||
0 -0.5rem 2rem #1cf3f1, 0 0.5rem 3rem #1cf3f1;
|
||||
}
|
||||
28%,
|
||||
33% {
|
||||
color: #75f1f1;
|
||||
text-shadow: 0 0 0.6rem #b2f3f2, 0 0 1.5rem #75f1f1;
|
||||
}
|
||||
82%,
|
||||
97% {
|
||||
color: #178685;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes flicker {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
4% {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
6% {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
8% {
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
10% {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
11% {
|
||||
opacity: 0.922;
|
||||
}
|
||||
|
||||
12% {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
14% {
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
16% {
|
||||
opacity: 0.98;
|
||||
}
|
||||
|
||||
17% {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
19% {
|
||||
opacity: 0.93;
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 0.99;
|
||||
}
|
||||
|
||||
24% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
26% {
|
||||
opacity: 0.94;
|
||||
}
|
||||
|
||||
28% {
|
||||
opacity: 0.98;
|
||||
}
|
||||
|
||||
37% {
|
||||
opacity: 0.93;
|
||||
}
|
||||
|
||||
38% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
39% {
|
||||
opacity: 0.96;
|
||||
}
|
||||
|
||||
42% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
44% {
|
||||
opacity: 0.97;
|
||||
}
|
||||
|
||||
46% {
|
||||
opacity: 0.94;
|
||||
}
|
||||
|
||||
56% {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
58% {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 0.99;
|
||||
}
|
||||
|
||||
68% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
70% {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
72% {
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
93% {
|
||||
opacity: 0.93;
|
||||
}
|
||||
|
||||
95% {
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
97% {
|
||||
opacity: 0.93;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
h1 {
|
||||
font-size: 84px;
|
||||
}
|
||||
.kinako {
|
||||
height: 30vh;
|
||||
}
|
||||
.karen {
|
||||
height: 25vh;
|
||||
}
|
||||
.megumin {
|
||||
width: 15vh;
|
||||
}
|
||||
.nezuko {
|
||||
width: 15vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
h1 {
|
||||
font-size: 72px;
|
||||
}
|
||||
.kinako {
|
||||
height: 25vh;
|
||||
}
|
||||
.karen {
|
||||
height: 25vh;
|
||||
}
|
||||
.megumin {
|
||||
width: 15vh;
|
||||
}
|
||||
.nezuko {
|
||||
width: 15vh;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue