Last active
October 3, 2020 23:28
-
-
Save Synkevych/a30d057e25714cb12a27db9369286a56 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en" > | |
<head> | |
<meta charset="UTF-8"> | |
<title>CodePen - Space 404</title> | |
<style> | |
html, | |
body { | |
height: 100%; | |
width: 100%; | |
margin: 0px; | |
background: linear-gradient(90deg, #2f3640 23%, #181b20 100%); | |
} | |
.moon { | |
background: linear-gradient(90deg, #d0d0d0 48%, #919191 100%); | |
position: absolute; | |
top: -100px; | |
left: -300px; | |
width: 900px; | |
height: 900px; | |
content: ''; | |
border-radius: 100%; | |
box-shadow: 0px 0px 30px -4px rgba(0, 0, 0, 0.5); | |
} | |
.moon__crater { | |
position: absolute; | |
content: ''; | |
border-radius: 100%; | |
background: linear-gradient(90deg, #7a7a7a 38%, #c3c3c3 100%); | |
opacity: 0.6; | |
} | |
.moon__crater1 { | |
top: 250px; | |
left: 500px; | |
width: 60px; | |
height: 180px; | |
} | |
.moon__crater2 { | |
top: 650px; | |
left: 340px; | |
width: 40px; | |
height: 80px; | |
transform: rotate(55deg); | |
} | |
.moon__crater3 { | |
top: -20px; | |
left: 40px; | |
width: 65px; | |
height: 120px; | |
transform: rotate(250deg); | |
} | |
.star { | |
background: grey; | |
position: absolute; | |
width: 5px; | |
height: 5px; | |
content: ''; | |
border-radius: 100%; | |
transform: rotate(250deg); | |
opacity: 0.4; | |
animation-name: shimmer; | |
animation-duration: 1.5s; | |
animation-iteration-count: infinite; | |
animation-direction: alternate; | |
} | |
@keyframes shimmer { | |
from { | |
opacity: 0; | |
} | |
to { | |
opacity: 0.7; | |
} | |
} | |
.star1 { | |
top: 40%; | |
left: 50%; | |
animation-delay: 1s; | |
} | |
.star2 { | |
top: 60%; | |
left: 90%; | |
animation-delay: 3s; | |
} | |
.star3 { | |
top: 10%; | |
left: 70%; | |
animation-delay: 2s; | |
} | |
.star4 { | |
top: 90%; | |
left: 40%; | |
} | |
.star5 { | |
top: 20%; | |
left: 30%; | |
animation-delay: 0.5s; | |
} | |
.error { | |
position: absolute; | |
left: 100px; | |
top: 400px; | |
transform: translateY(-60%); | |
font-family: 'Righteous', cursive; | |
color: #363e49; | |
} | |
.error__title { | |
font-size: 10em; | |
} | |
.error__subtitle { | |
font-size: 2em; | |
} | |
.error__description { | |
opacity: 0.5; | |
} | |
.error__button { | |
min-width: 7em; | |
margin-top: 3em; | |
margin-right: 0.5em; | |
padding: 0.5em 2em; | |
outline: none; | |
border: 2px solid #2f3640; | |
background-color: transparent; | |
border-radius: 8em; | |
color: #576375; | |
cursor: pointer; | |
transition-duration: 0.2s; | |
font-size: 0.75em; | |
font-family: 'Righteous', cursive; | |
} | |
.error__button:hover { | |
color: #21252c; | |
} | |
.error__button--active { | |
background-color: #e67e22; | |
border: 2px solid #e67e22; | |
color: white; | |
} | |
.error__button--active:hover { | |
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5); | |
color: white; | |
} | |
.astronaut { | |
position: absolute; | |
width: 185px; | |
height: 300px; | |
left: 70%; | |
top: 50%; | |
transform: translate(-50%, -50%) rotate(20deg) scale(1.2); | |
} | |
.astronaut__head { | |
background-color: white; | |
position: absolute; | |
top: 60px; | |
left: 60px; | |
width: 60px; | |
height: 60px; | |
content: ''; | |
border-radius: 2em; | |
} | |
.astronaut__head-visor-flare1 { | |
background-color: #7f8fa6; | |
position: absolute; | |
top: 28px; | |
left: 40px; | |
width: 10px; | |
height: 10px; | |
content: ''; | |
border-radius: 2em; | |
opacity: 0.5; | |
} | |
.astronaut__head-visor-flare2 { | |
background-color: #718093; | |
position: absolute; | |
top: 40px; | |
left: 38px; | |
width: 5px; | |
height: 5px; | |
content: ''; | |
border-radius: 2em; | |
opacity: 0.3; | |
} | |
.astronaut__backpack { | |
background-color: #bfbfbf; | |
position: absolute; | |
top: 90px; | |
left: 47px; | |
width: 86px; | |
height: 90px; | |
content: ''; | |
border-radius: 8px; | |
} | |
.astronaut__body { | |
background-color: #e6e6e6; | |
position: absolute; | |
top: 115px; | |
left: 55px; | |
width: 70px; | |
height: 80px; | |
content: ''; | |
border-radius: 8px; | |
} | |
.astronaut__body__chest { | |
background-color: #d9d9d9; | |
position: absolute; | |
top: 140px; | |
left: 68px; | |
width: 45px; | |
height: 25px; | |
content: ''; | |
border-radius: 6px; | |
} | |
.astronaut__arm-left1 { | |
background-color: #e6e6e6; | |
position: absolute; | |
top: 127px; | |
left: 9px; | |
width: 65px; | |
height: 20px; | |
content: ''; | |
border-radius: 8px; | |
transform: rotate(-30deg); | |
} | |
.astronaut__arm-left2 { | |
background-color: #e6e6e6; | |
position: absolute; | |
top: 102px; | |
left: 7px; | |
width: 20px; | |
height: 45px; | |
content: ''; | |
border-radius: 8px; | |
transform: rotate(-12deg); | |
border-top-left-radius: 8em; | |
border-top-right-radius: 8em; | |
} | |
.astronaut__arm-right1 { | |
background-color: #e6e6e6; | |
position: absolute; | |
top: 113px; | |
left: 100px; | |
width: 65px; | |
height: 20px; | |
content: ''; | |
border-radius: 8px; | |
transform: rotate(-10deg); | |
} | |
.astronaut__arm-right2 { | |
background-color: #e6e6e6; | |
position: absolute; | |
top: 78px; | |
left: 141px; | |
width: 20px; | |
height: 45px; | |
content: ''; | |
border-radius: 8px; | |
transform: rotate(-10deg); | |
border-top-left-radius: 8em; | |
border-top-right-radius: 8em; | |
} | |
.astronaut__arm-thumb-left { | |
background-color: #e6e6e6; | |
position: absolute; | |
top: 110px; | |
left: 21px; | |
width: 10px; | |
height: 6px; | |
content: ''; | |
border-radius: 8em; | |
transform: rotate(-35deg); | |
} | |
.astronaut__arm-thumb-right { | |
background-color: #e6e6e6; | |
position: absolute; | |
top: 90px; | |
left: 133px; | |
width: 10px; | |
height: 6px; | |
content: ''; | |
border-radius: 8em; | |
transform: rotate(20deg); | |
} | |
.astronaut__wrist-left { | |
background-color: #e67e22; | |
position: absolute; | |
top: 122px; | |
left: 6.5px; | |
width: 21px; | |
height: 4px; | |
content: ''; | |
border-radius: 8em; | |
transform: rotate(-15deg); | |
} | |
.astronaut__wrist-right { | |
background-color: #e67e22; | |
position: absolute; | |
top: 98px; | |
left: 141px; | |
width: 21px; | |
height: 4px; | |
content: ''; | |
border-radius: 8em; | |
transform: rotate(-10deg); | |
} | |
.astronaut__leg-left { | |
background-color: #e6e6e6; | |
position: absolute; | |
top: 188px; | |
left: 50px; | |
width: 23px; | |
height: 75px; | |
content: ''; | |
transform: rotate(10deg); | |
} | |
.astronaut__leg-right { | |
background-color: #e6e6e6; | |
position: absolute; | |
top: 188px; | |
left: 108px; | |
width: 23px; | |
height: 75px; | |
content: ''; | |
transform: rotate(-10deg); | |
} | |
.astronaut__foot-left { | |
background-color: white; | |
position: absolute; | |
top: 240px; | |
left: 43px; | |
width: 28px; | |
height: 20px; | |
content: ''; | |
transform: rotate(10deg); | |
border-radius: 3px; | |
border-top-left-radius: 8em; | |
border-top-right-radius: 8em; | |
border-bottom: 4px solid #e67e22; | |
} | |
.astronaut__foot-right { | |
background-color: white; | |
position: absolute; | |
top: 240px; | |
left: 111px; | |
width: 28px; | |
height: 20px; | |
content: ''; | |
transform: rotate(-10deg); | |
border-radius: 3px; | |
border-top-left-radius: 8em; | |
border-top-right-radius: 8em; | |
border-bottom: 4px solid #e67e22; | |
}</style> | |
</head> | |
<body> | |
<!-- partial:index.partial.html --> | |
<div class="moon"></div> | |
<div class="moon__crater moon__crater1"></div> | |
<div class="moon__crater moon__crater2"></div> | |
<div class="moon__crater moon__crater3"></div> | |
<div class="star star1"></div> | |
<div class="star star2"></div> | |
<div class="star star3"></div> | |
<div class="star star4"></div> | |
<div class="star star5"></div> | |
<div class="error"> | |
<div class="error__title">404</div> | |
<div class="error__subtitle">Hmmm...</div> | |
<div class="error__description">It looks like one of the developers fell asleep</div> | |
<button class="error__button" onclick="location.href='#home'">Go back to home page</button> | |
</div> | |
<div class="astronaut"> | |
<div class="astronaut__backpack"></div> | |
<div class="astronaut__body"></div> | |
<div class="astronaut__body__chest"></div> | |
<div class="astronaut__arm-left1"></div> | |
<div class="astronaut__arm-left2"></div> | |
<div class="astronaut__arm-right1"></div> | |
<div class="astronaut__arm-right2"></div> | |
<div class="astronaut__arm-thumb-left"></div> | |
<div class="astronaut__arm-thumb-right"></div> | |
<div class="astronaut__leg-left"></div> | |
<div class="astronaut__leg-right"></div> | |
<div class="astronaut__foot-left"></div> | |
<div class="astronaut__foot-right"></div> | |
<div class="astronaut__wrist-left"></div> | |
<div class="astronaut__wrist-right"></div> | |
<div class="astronaut__cord"> | |
<canvas id="cord" height="400px" width="400px"></canvas> | |
</div> | |
<div class="astronaut__head"> | |
<canvas id="visor" width="60px" height="60px"></canvas> | |
<div class="astronaut__head-visor-flare1"></div> | |
<div class="astronaut__head-visor-flare2"></div> | |
</div> | |
</div> | |
<!-- partial --> | |
<script> | |
function drawVisor() { | |
const canvas = document.getElementById('visor'); | |
const ctx = canvas.getContext('2d'); | |
ctx.beginPath(); | |
ctx.moveTo(5, 45); | |
ctx.bezierCurveTo(15, 64, 45, 64, 55, 45); | |
ctx.lineTo(55, 20); | |
ctx.bezierCurveTo(55, 15, 50, 10, 45, 10); | |
ctx.lineTo(15, 10); | |
ctx.bezierCurveTo(15, 10, 5, 10, 5, 20); | |
ctx.lineTo(5, 45); | |
ctx.fillStyle = '#2f3640'; | |
ctx.strokeStyle = '#f5f6fa'; | |
ctx.fill(); | |
ctx.stroke(); | |
} | |
const cordCanvas = document.getElementById('cord'); | |
const ctx = cordCanvas.getContext('2d'); | |
let y1 = 160; | |
let y2 = 100; | |
let y3 = 100; | |
let y1Forward = true; | |
let y2Forward = false; | |
let y3Forward = true; | |
function animate() { | |
requestAnimationFrame(animate); | |
ctx.clearRect(0, 0, innerWidth, innerHeight); | |
ctx.beginPath(); | |
ctx.moveTo(130, 170); | |
ctx.bezierCurveTo(250, y1, 345, y2, 400, y3); | |
ctx.strokeStyle = 'white'; | |
ctx.lineWidth = 8; | |
ctx.stroke(); | |
if (y1 === 100) { | |
y1Forward = true; | |
} | |
if (y1 === 300) { | |
y1Forward = false; | |
} | |
if (y2 === 100) { | |
y2Forward = true; | |
} | |
if (y2 === 310) { | |
y2Forward = false; | |
} | |
if (y3 === 100) { | |
y3Forward = true; | |
} | |
if (y3 === 317) { | |
y3Forward = false; | |
} | |
y1Forward ? y1 += 1 : y1 -= 1; | |
y2Forward ? y2 += 1 : y2 -= 1; | |
y3Forward ? y3 += 1 : y3 -= 1; | |
} | |
drawVisor(); | |
animate(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment