404 Error Page
How do I make an 404 error page?
What is a 404 error page? How do you make a 404 error page? This script and codes were developed by WebSonick on 15 October 2022, Saturday.
404 Error Page - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>404 Error Page</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <img src="http://web3world.ru/Demo/HTML/404-stranica/images/bg2.jpg" id="bg" alt="" /><!-- Background image -->
<div class="bg_overlay"></div><!-- Pattern -->
<div id="wrap"> <div id="block"> <div id="content"> <div class="top_img"> <div class="img_eror"></div> </div> <div class="srch"> <div class="search"> <form method="get" id="s-form" action="#" class="s-form"> <fieldset> <input type="text" class="s_text" name="s" id="s" value="Enter a keyword..." onfocus="this.value=(this.value=='Enter a keyword...') ? '' : this.value;" onblur="this.value=(this.value=='') ? 'Enter a keyword...' : this.value;" /> <input type="submit" class="s_button" value="Search" id="searchsubmit" /> </fieldset> </form> </div> </div> <div class="text_eror"> <h1>"Ooops! Page not found..."</h1> <p>Enter a keyword(s) in the search field above, maybe you'll find the page you're looking for. <br /> Or, you can take a look at our <a href="#">SITEMAP</a>. You can also return <a href="#">HOME</a>.</p> </div> </div> </div>
</div>
<script type="text/javascript" src="http://web3world.ru/Demo/HTML/404-stranica/js/jquery.js"></script><script type="text/javascript" src="http://web3world.ru/Demo/HTML/404-stranica/js/introtzikas.js"></script>
<script type="text/javascript" src="http://web3world.ru/Demo/HTML/404-stranica/js/script.js"></script>
<script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $().introtzikas({ line: 'white', speedwidth: 2000, speedheight: 1000, bg: '#474747', lineheight: 2 }); }); //]]> </script>
</body>
</html>
404 Error Page - Script Codes CSS Codes
body {
margin:0px;
padding:0px;
visibility:hidden;
background-color:white;
background-image:none
}
#bg {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.bg_overlay{
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background:transparent url(http://web3world.ru/Demo/HTML/404-stranica/images/pattern.png) repeat top left;
z-index:2;
}
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
#wrap {
width: 807px;
background:#ccc;
margin: 0 auto;
z-index: 3;
}
#block {
position:absolute;
width: 807px;
height: 473px;
top:50%;
margin-top:-235px;
background: url(http://web3world.ru/Demo/HTML/404-stranica/images/4bg.png) no-repeat center center;
z-index: 4;
}
#content {
position: relative;
padding: 20px;
}
.img_eror {
width: 369px;
height: 169px;
background: url(http://web3world.ru/Demo/HTML/404-stranica/images/404.png) no-repeat center center;
margin: 0 auto;
}
.top_img {
margin-bottom: 5px;
}
.search {
width: 513px;
height: 82px;
background: url(http://web3world.ru/Demo/HTML/404-stranica/images/001.png) no-repeat center center;
margin: 0 auto;
}
.text_eror {
text-align: center;
font-family: 'Maven Pro', cursive;
}
.text_eror a {
color: #222;
text-decoration: none;
}
.text_eror a:hover {
color: #111;
text-decoration: none;
border-bottom: 1px dotted #111;
}
.text_eror h1 {
font-size: 40px;
line-height: 80px;
font-weight: 700;
color: #757575;
}
.text_eror p {
font-size: 16px;
line-height: 32px;
font-weight: 500;
color: #333;
}
.s_text {
margin: 28px 0 0 30px;
width: 307px;
font-size: 16px;
font-family: 'Maven Pro', cursive;
color: #555;
padding: 3px 0;
border: 0 !important;
}
.s_button {
width: 142px;
height: 50px;
background: url(../images/002.png) no-repeat 0 0px;
border: 0;
margin-left: 10px;
font-size: 18px;
color: #333;
text-align: center;
}
.s_button:hover {
background: url(http://web3world.ru/Demo/HTML/404-stranica/images/002.png) no-repeat 0 -48px;
cursor: pointer;
}
/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block;
}
body { line-height: 1;
}
ol, ul { list-style: none;
}
blockquote, q { quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
Developer | WebSonick |
Username | WebSonick |
Uploaded | October 15, 2022 |
Rating | 3.5 |
Size | 3,203 Kb |
Views | 10,120 |
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!
Name | Size |
JQuery Clock | 2,413 Kb |
CSS Game - The Right Move | 5,565 Kb |
CSS3 Menus | 3,644 Kb |
World Map Navigation | 2,393 Kb |
TinyMce Tetx Editor | 2,331 Kb |
CSS3 3D Books | 4,834 Kb |
Blog Simple Web Page | 3,146 Kb |
Jump Animated Text | 1,978 Kb |
Clock jQuery.js | 2,480 Kb |
In second lives - HTML5 CANVAS 3D demo | 5,514 Kb |
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!
Name | Username | Size |
A vuejs widget | Chrgl86 | 2,869 Kb |
Whyutils | LeYvan | 3,752 Kb |
Drag n Drop | Martin42 | 2,594 Kb |
Em Test | Rodesco | 1,784 Kb |
Button shaking | SusanneLundblad | 2,227 Kb |
Box Shadow Effects | Retrofuturistic | 2,143 Kb |
Tumblr API | Juanv911 | 2,436 Kb |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
Twitch JSON API | Jvhti | 2,808 Kb |
Simple Flat Menu | Jeplaa | 2,467 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!