:root {
background-color: #000;
background-image: url("https://png.pngtree.com/element_origin_min_pic/16/10/27/205811f1e9497cb.jpg");
background-size: auto auto;
background-repeat: repeat;
background-position: center;
min-height: 100%;
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
font-family: sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body, .wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
p {
margin-bottom: 0em;
}
a {
text-decoration: none;
background-color: transparent;
}
/* =====================
Class Selectors
====================== */
.wrapper {
max-width: 1140px;
margin: 0 auto;
}
/* Number Count */
.number {
color: #fff;
font-size: 5em;
text-align: center;
position: absolute;
top: -30px;
visibility: hidden;
opacity: 0;
}
/* Buttons */
.btn {
border-radius:5px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:14px;
padding:12px 35px;
margin: 0 10px;
-webkit-transition: all 200ms;
-o-transition: all 200ms;
transition: all 200ms;
}
.btn-start {
-webkit-box-shadow: 0px 4px 0px 0px #3dc21b;
box-shadow: 0px 4px 0px 0px #3dc21b;
background-color:#44c767;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #18ab29;
text-shadow:0px 1px 0px #2f6627;
}
.btn-pass {
-webkit-box-shadow: 0px 4px 0px 0px #d83e3e;
box-shadow: 0px 4px 0px 0px #d83e3e;
background-color:#e64a4a;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #ca3636;
text-shadow:0px 1px 0px #9e2525;
}
.btn:hover {
-webkit-box-shadow: 0px 4px 0px 0px #f4f4f4;
box-shadow: 0px 4px 0px 0px #f4f4f4;
border-bottom-color: #f4f4f4;
}
.btn:active {
position:relative;
top:1px;
}
.moon {
width: 400px;
height: 400px;
background-image: url("https://image.flaticon.com/icons/svg/284/284474.svg");
background-size: 400px 400px;
background-repeat: no-repeat;
position: absolute;
left: 5%;
-webkit-transform: translateY(-493em);
-ms-transform: translateY(-493em);
transform: translateY(-493em);
}
a.rocket {
background: transparent;
display: inline;
padding: 0;
margin: 0;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -64%);
-ms-transform: translate(-50%, -64%);
transform: translate(-50%, -64%);
z-index: 100;
}
.place {
margin: 150px 0 60px;
}
.place::before {
content: "";
display: block;
width: 200px;
height: 250px;
border: 10px solid #f4f4f4;
border-bottom-width: 25px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, -87%);
-ms-transform: translate(-50%, -87%);
transform: translate(-50%, -87%);
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-color: #aab;
transition: border-radius 6s, border-color 500ms;
transition-delay: 12s;
}
.skynight {
width: 100%;
height: auto;
-webkit-transition: all 12s ease-in-out;
-o-transition: all 12s ease-in-out;
transition: all 12s ease-in-out;
text-align: center;
padding-top: 5em;
}
img[src*="rocket"] {
width: auto;
height: 180px;
}
/* =====================
Target Selectors
====================== */
:target ~ .place::before {
transition-delay: 0s;
border-top-color: transparent;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* Count from 1 to 3 */
:target ~ .one,
:target ~ .two,
:target ~ .three,
:target ~ .go {
-webkit-animation: count 1s ease-out;
animation: count 1s ease-out;
}
:target ~ .two {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
:target ~ .three {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
:target ~ .go {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
/* Start the fire of Rocket */
:target img[src*="rocket"] {
-webkit-animation: fire 11s ease-out forwards;
animation: fire 11s ease-out forwards;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
/* Rocket moving on the sky */
:target a {
-webkit-animation: moving 11s ease-in-out forwards;
animation: moving 11s ease-in-out forwards;
-webkit-animation-delay: 3.5s;
animation-delay: 3.5s;
}
/* Go up the screen */
:target {
padding-bottom: 1000em;
padding-top: 6em;
-webkit-transition-delay: 5s;
-o-transition-delay: 5s;
transition-delay: 5s;
}
/* =====================
Keyframes For Animation
====================== */
@-webkit-keyframes count {
0% {
visibility: visible;
opacity: 1;
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes count {
0% {
visibility: visible;
opacity: 1;
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes fire {
10% {
-webkit-box-shadow: 0 110px 100px -4px rgba(255, 255, 255, 0.90);
box-shadow: 0 110px 100px -4px rgba(255, 255, 255, 0.90);
}
20% {
-webkit-box-shadow: 0 140px 120px -8px rgba(255, 255, 255, 0.87),
0 140px 45px -45px rgba(255, 45, 22, 0.92);
box-shadow: 0 140px 120px -8px rgba(255, 255, 255, 0.87),
0 140px 45px -45px rgba(255, 45, 22, 0.92);
}
50% {
-webkit-box-shadow: 0 140px 45px -45px rgba(255, 45, 22, 0.92);
box-shadow: 0 140px 45px -45px rgba(255, 45, 22, 0.92);
}
80% {
-webkit-box-shadow: 0 140px 45px -50px rgba(255, 49, 22, 0.9);
box-shadow: 0 140px 45px -50px rgba(255, 49, 22, 0.9);
}
100% {
-webkit-box-shadow: 0 0 0 0;
box-shadow: 0 0 0 0;
}
}
@keyframes fire {
10% {
-webkit-box-shadow: 0 110px 100px -4px rgba(255, 255, 255, 0.90);
box-shadow: 0 110px 100px -4px rgba(255, 255, 255, 0.90);
}
20% {
-webkit-box-shadow: 0 140px 120px -8px rgba(255, 255, 255, 0.87),
0 140px 45px -45px rgba(255, 45, 22, 0.92);
box-shadow: 0 140px 120px -8px rgba(255, 255, 255, 0.87),
0 140px 45px -45px rgba(255, 45, 22, 0.92);
}
50% {
-webkit-box-shadow: 0 140px 45px -45px rgba(255, 45, 22, 0.92);
box-shadow: 0 140px 45px -45px rgba(255, 45, 22, 0.92);
}
80% {
-webkit-box-shadow: 0 140px 45px -50px rgba(255, 49, 22, 0.9);
box-shadow: 0 140px 45px -50px rgba(255, 49, 22, 0.9);
}
100% {
-webkit-box-shadow: 0 0 0 0;
box-shadow: 0 0 0 0;
}
}
@-webkit-keyframes moving {
55% {
top: 38%;
}
75% {
top: 43%;
}
90%{
top: 45%;
}
100% {
top: 50%;
}
}
@keyframes moving {
55% {
top: 38%;
}
75% {
top: 43%;
}
90%{
top: 45%;
}
100% {
top: 50%;
}
}
/* =====================
Responsive Screen
====================== */
@media only screen and (max-width: 400px) {
.moon {
background-size: 300px 300px;
}
}
Sem patří váš dlouhý nadpis
Sem vložte podnadpis
Klikněte a můžete začít psát. Ut perspiciatis unde omnis iste natus error sit voluptatem.
Klikněte a můžete začít psát. Vel eum iure reprehenderit qui in ea voluptate velit.
Klikněte a můžete začít psát. Ex ea commodi consequatur quis autem vel eum iure.