Last active
May 6, 2024 05:02
-
-
Save PrabothCharith/3adfa3e18bc1614cd951cf59da9d3493 to your computer and use it in GitHub Desktop.
Error Page Design
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
<div class="text"> | |
<div>Server Error</div> | |
<h1>503</h1> | |
<hr> | |
<div>Service Temporarily Unavailable</div> | |
<h1>That's what you can do</h1> | |
</div> | |
<div class="astronaut"> | |
<img src="https://images.vexels.com/media/users/3/152639/isolated/preview/506b575739e90613428cdb399175e2c8-space-astronaut-cartoon-by-vexels.png" alt="" class="src"> | |
</div> |
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
document.addEventListener("DOMContentLoaded",function(){ | |
var body=document.body; | |
setInterval(createStar,100); | |
function createStar(){ | |
var right=Math.random()*500; | |
var top=Math.random()*screen.height; | |
var star=document.createElement("div"); | |
star.classList.add("star") | |
body.appendChild(star); | |
setInterval(runStar,10); | |
star.style.top=top+"px"; | |
function runStar(){ | |
if(right>=screen.width){ | |
star.remove(); | |
} | |
right+=3; | |
star.style.right=right+"px"; | |
} | |
} | |
}) |
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
body{ | |
margin:0; | |
padding:0; | |
font-family: 'Tomorrow', sans-serif; | |
height:100vh; | |
background-image: linear-gradient(to top, #2e1753, #1f1746, #131537, #0d1028, #050819); | |
display:flex; | |
justify-content:center; | |
align-items:center; | |
overflow:hidden; | |
} | |
.text{ | |
position:absolute; | |
top:10%; | |
color:#fff; | |
text-align:center; | |
} | |
h1{ | |
font-size:50px; | |
} | |
.star{ | |
position:absolute; | |
width:2px; | |
height:2px; | |
background:#fff; | |
right:0; | |
animation:starTwinkle 3s infinite linear; | |
} | |
.astronaut img{ | |
width:100px; | |
position:absolute; | |
top:55%; | |
animation:astronautFly 6s infinite linear; | |
} | |
@keyframes astronautFly{ | |
0%{ | |
left:-100px; | |
} | |
25%{ | |
top:50%; | |
transform:rotate(30deg); | |
} | |
50%{ | |
transform:rotate(45deg); | |
top:55%; | |
} | |
75%{ | |
top:60%; | |
transform:rotate(30deg); | |
} | |
100%{ | |
left:110%; | |
transform:rotate(45deg); | |
} | |
} | |
@keyframes starTwinkle{ | |
0%{ | |
background:rgba(255,255,255,0.4); | |
} | |
25%{ | |
background:rgba(255,255,255,0.8); | |
} | |
50%{ | |
background:rgba(255,255,255,1); | |
} | |
75%{ | |
background:rgba(255,255,255,0.8); | |
} | |
100%{ | |
background:rgba(255,255,255,0.4); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment