Add 'www/windows.html'
This commit is contained in:
parent
c3f7800eac
commit
11976143a3
|
|
@ -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>
|
||||
Loading…
Reference in New Issue