232 lines
3.7 KiB
HTML
232 lines
3.7 KiB
HTML
<!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> |