Sarimoko/Neko
Sarimoko
/
Neko
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add 'www/windows.html'

This commit is contained in:
Sarimoko 2022-02-24 07:30:10 +00:00
parent c3f7800eac
commit 11976143a3
1 changed files with 232 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
www/windows.html Normal file
View File

@ -0,0 +1,232 @@
<!doctype html>
<html>
<head>
<title>Coming Soon | Sarimoko</title>
<style>
body {
background-color: #C9533E;
justify-content: center;
align-items: center;
display: flex;
height: 100vh;
margin: 0 auto;
overflow: hidden;
}
.container {
height: 530px;
margin: 0 auto;
position: relative;
width: 350px;
}
.window {
width: 250px;
height: 390px;
background-color: #29467a; /* dark blue */
outline: 12px solid #2d2623; /* brown */
border-left: 5px solid #439abf; /* light blue */
border-right: 5px solid #439abf; /* light blue */
position: relative;
top: 20px;
left: 45px;
}
.window:before,
.window:after {
content: '';
position: absolute;
background: linear-gradient(#439abf 50%, #2d2623 50%);
}
.window:before {
height: 15px;
width: 310px;
left: -30px;
bottom: -15px;
}
.window:after {
height: 15px;
width: 260px;
left: -5px;
top: 200px;
}
.mountain-1 {
height: 0;
width: 0;
border-bottom: 60px solid #22366d;
border-right: 20px solid transparent;
position: absolute;
bottom: 0;
}
.mountain-1:before,
.mountain-1:after {
content: '';
position: absolute;
height: 0;
width: 0;
border-bottom: 60px solid #22366d;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
}
.mountain-1:before {
bottom: -60px;
left: 5px;
}
.mountain-1:after {
bottom: -60px;
left: 35px;
}
.mountain-2 {
height: 0;
width: 0;
border-bottom: 60px solid #22366d;
border-left: 20px solid transparent;
position: absolute;
bottom: 0;
right: 0;
}
.mountain-2:before,
.mountain-2:after {
content: '';
position: absolute;
height: 0;
width: 0;
border-bottom: 60px solid #22366d;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
}
.mountain-2:before {
bottom: -60px;
right: 5px;
}
.mountain-2:after {
bottom: -60px;
right: 35px;
}
.kitty {
background-color: #2d2623;
height: 140px;
width: 50px;
position: absolute;
bottom: -15px;
left: 95px;
border-radius: 40px 40px 0 0;
}
.kitty:before {
content: '';
position: absolute;
background-color: #2d2623;
height: 80px;
width: 40px;
border-radius: 0 80px 80px 0;
bottom: 0;
left: 43px;
}
.kitty:after {
content: '';
position: absolute;
background-color: #2d2623;
height: 80px;
width: 10px;
border-radius: 5px;
bottom: -70px;
left: 45px;
transform: rotate(-15deg);
transform-origin: top;
animation: tail 4s infinite;
}
@keyframes tail {
50% {
transform: rotate(10deg);
}
}
.ears {
height: 0;
width: 0;
position: absolute;
bottom: 100px;
left: 120px;
right: 0;
}
.ears:before {
content: '';
position: absolute;
height: 0;
width: 0;
border-bottom: 15px solid #2d2623;
border-right: 15px solid transparent;
bottom: 12px;
right: 9px;
}
.ears:after {
content: '';
position: absolute;
height: 0;
width: 0;
border-bottom: 15px solid #2d2623;
border-left: 15px solid transparent;
border-bottom-left-radius: 15px;
bottom: 12px;
left: 9px;
}
.moon {
height: 80px;
width: 80px;
border-radius: 50%;
background-color: transparent;
box-shadow: -15px 8px 0 1px #e8ae4a;
position: absolute;
left: 50px;
top: 60px;
}
.star {
background-color: #e8ae4a;
height: 6px;
width: 6px;
border-radius: 50%;
position: absolute;
top: 30px;
left: 140px;
box-shadow: 80px 65px #e8ae4a, -120px 150px #e8ae4a, -120px 280px #e8ae4a;
}
</style>
</head>
<body>
<div class="container">
<div class="window">
<div class="mountain-1"></div>
<div class="mountain-2"></div>
<div class="kitty"></div>
<div class="ears"></div>
<div class="moon"></div>
<div class="star"></div>
</div>
<!-- end window -->
</div>
<!-- end container -->
</body>
</html>