404 Page

Developer
Saransh Sinha
Size
2,666 Kb
Views
30,360
  1. 404 Page Previews
  2. 404 Page HTML Codes
  3. 404 Page CSS Codes

How do I make an 404 page?

Simple animated 404 page for a startup I'm working with.. What is a 404 page? How do you make a 404 page? This script and codes were developed by Saransh Sinha on 13 September 2022, Tuesday.

404 Page Previews
IQ Test

404 Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>404 Page</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg width="380px" height="500px" viewBox="0 0 837 1045" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <path d="M353,9 L626.664028,170 L626.664028,487 L353,642 L79.3359724,487 L79.3359724,170 L353,9 Z" id="Polygon-1" stroke="#007FB2" stroke-width="6" sketch:type="MSShapeGroup"></path> <path d="M78.5,529 L147,569.186414 L147,648.311216 L78.5,687 L10,648.311216 L10,569.186414 L78.5,529 Z" id="Polygon-2" stroke="#EF4A5B" stroke-width="6" sketch:type="MSShapeGroup"></path> <path d="M773,186 L827,217.538705 L827,279.636651 L773,310 L719,279.636651 L719,217.538705 L773,186 Z" id="Polygon-3" stroke="#795D9C" stroke-width="6" sketch:type="MSShapeGroup"></path> <path d="M639,529 L773,607.846761 L773,763.091627 L639,839 L505,763.091627 L505,607.846761 L639,529 Z" id="Polygon-4" stroke="#F2773F" stroke-width="6" sketch:type="MSShapeGroup"></path> <path d="M281,801 L383,861.025276 L383,979.21169 L281,1037 L179,979.21169 L179,861.025276 L281,801 Z" id="Polygon-5" stroke="#36B455" stroke-width="6" sketch:type="MSShapeGroup"></path> </g>
</svg>
<div class="message-box"> <h1>404</h1> <p>Page not found</p> <div class="buttons-con"> <div class="action-link-wrap"> <a onclick="history.back(-1)" class="link-button link-back-button">Go Back</a> <a href="" class="link-button">Go to Home Page</a> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

404 Page - Script Codes CSS Codes

body { background-color: #2F3242;
}
svg { position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -400px;
}
.message-box { height: 200px; width: 380px; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: 50px; color: #FFF; font-family: Roboto; font-weight: 300;
}
.message-box h1 { font-size: 60px; line-height: 46px; margin-bottom: 40px;
}
.buttons-con .action-link-wrap { margin-top: 40px;
}
.buttons-con .action-link-wrap a { background: #68c950; padding: 8px 25px; border-radius: 4px; color: #FFF; font-weight: bold; font-size: 14px; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; cursor: pointer; text-decoration: none; margin-right: 10px
}
.buttons-con .action-link-wrap a:hover { background: #5A5C6C; color: #fff;
}
#Polygon-1 , #Polygon-2 , #Polygon-3 , #Polygon-4 , #Polygon-4, #Polygon-5 { -webkit-animation: float 1s infinite ease-in-out alternate; animation: float 1s infinite ease-in-out alternate;
}
#Polygon-2 { -webkit-animation-delay: .2s; animation-delay: .2s;
}
#Polygon-3 { -webkit-animation-delay: .4s; animation-delay: .4s;
}
#Polygon-4 { -webkit-animation-delay: .6s; animation-delay: .6s;
}
#Polygon-5 { -webkit-animation-delay: .8s; animation-delay: .8s;
}
@-webkit-keyframes float {	100% { -webkit-transform: translateY(20px); transform: translateY(20px); }
}
@keyframes float {	100% { -webkit-transform: translateY(20px); transform: translateY(20px); }
}
@media (max-width: 450px) { svg { position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -190px; } .message-box { top: 50%; left: 50%; margin-top: -100px; margin-left: -190px; text-align: center; }
}
404 Page - Script Codes
404 Page - Script Codes
Home Page Home
Developer Saransh Sinha
Username saransh
Uploaded September 13, 2022
Rating 4.5
Size 2,666 Kb
Views 30,360
Do you need developer help for 404 Page?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Saransh Sinha (saransh) Script Codes
Name
New Pen
Gravity Animated Poster
A Pen by Saransh Sinha
SERIAL Logo - single element
Avatar Aang SVG Animated
The Space Game Concept screen
Parallax Star background in CSS
COSMOS Title Card CSS3
Readr for Reddit
Flat Notifications - FlatNotify.js v0.1
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!