: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.

Uplatnit