404 Error Message

Developer
Ariana Lynn
Size
3,143 Kb
Views
38,456
  1. 404 Error Message Previews
  2. 404 Error Message HTML Codes
  3. 404 Error Message CSS Codes

How do I make an 404 error message?

For my new site - not that 404's pages are really necessary.... What is a 404 error message? How do you make a 404 error message? This script and codes were developed by Ariana Lynn on 05 September 2022, Monday.

404 Error Message Previews
IQ Test

404 Error Message - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>404 Error Message</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="" class="fa fa-arrow-left"></a>
<div class="error"> <h1>404</h1> <p>We're sorry but it looks like that page doesn't exist anymore.</p> <input placeholder="Try searching for what you were looking for..."></input><button onclick="window.location='http://geeks.thefastmode.com/search?ordering=popular&searchphrase=any&searchword=' + this.previousSibling.value"><i class="fa fa-search"></i></button>
</div>
</body>
</html>

404 Error Message - Script Codes CSS Codes

body,
html { padding: 0; margin: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(255, 130, 45, 0.85); font-family: 'Montserrat', sans-serif; color: #fff
}
html { background: url('https://static.pexels.com/photos/818/sea-sunny-beach-holiday.jpg'); background-size: cover; background-position: bottom
}
.error { text-align: center; padding: 16px; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%)
}
h1 { margin: -10px 0 -30px; font-size: calc(17vw + 40px); opacity: .8; letter-spacing: -17px;
}
p { opacity: .8; font-size: 20px; margin: 8px 0 38px 0; font-weight: bold
}
input,
button,
input:focus,
button:focus { border: 0; outline: 0!important;
}
input { width: 300px; padding: 14px; max-width: calc(100% - 80px); border-radius: 6px 0 0 6px; font-weight: 400; font-family: 'Montserrat', sans-serif;
}
button { width: 40px; padding: 14.5px 16px 14.5px 12.5px; vertical-align: top; border-radius: 0 6px 6px 0; color: grey; background: silver; cursor: pointer; transition: all 0.4s
}
button:hover { color: white; background: #9A5C32
}
.fa-arrow-left { position: fixed; top: 30px; left: 30px; font-size: 2em; color:white; text-decoration:none
}
/* MY OLD STUFF
disregard everyhting below
 
 
  
 
error->getCode(); ?>
 
 
 
 
 
error->getMessage(); ?>
 
 
 
 
     
  •   
     
    •  
 
 
 
 
 
*/
/*html{height:100%;background:#494949}
body{background:#393939;margin:0;font-family:Gotham,"Helvetica Neue",Helvetica,Arial,sans-serif}
.logo-cont{padding:25px 30px;margin:0}
.logo-cont .logo{text-align:center;padding:20px 0 0}
.logo-cont a{font-size:45px;font-weight:400;color:#fff;text-decoration:none;display:block}
.error-box-image-inner{width:90px;height:120px;background:#221E1D;border-radius:50%;padding:35px 50px}
.error-box-image-inner img{max-width:100%;width:100%}
.error-box-code{font-size:12em;font-weight:300;color:#fff;padding:10px 20px 20px}
.error-cont-top{background:#393939}
.error-cont-bottom{background:#494949}
.error-cont-inner{padding:30px 20px}
.error-box-msg{font-size:20px;font-weight:600;color:#e2e2e2;text-shadow:none;margin:10px 0 0;padding:10px 0;width:300px;text-align:left}
.error-msg-back{font-size:15px;font-weight:300;color:#e2e2e2;margin:0 0 20px;width:300px;text-align:left}
.error-msg-back ul{margin:0;padding:0 0 0 18px}
.error-msg-back a{color:#eee}
.error-msg-back a:hover,.error-msg-back a:focus{color:#fff}
@media (min-width: 768px) and (max-width: 1024px) {
.error-box-image-inner{width:45px;height:60px;padding:22px 30px}
.error-box-code{font-size:10em}
}
@media (min-width: 400px) and (max-width: 767px) {
.logo-cont{text-align:center;display:inline-block}
.error-box-image-inner{width:45px;height:60px;padding:22px 30px}
.error-box-code{font-size:8em}
}
@media (max-width: 399px) {
.logo-cont{text-align:center;display:inline-block}
.logo-cont a{font-size:38px}
.error-box-image-inner{width:45px;height:60px;padding:22px 30px}
.error-box-msg,.error-msg-back{width:200px}
.error-box-code{font-size:6em}
}*/
404 Error Message - Script Codes
404 Error Message - Script Codes
Home Page Home
Developer Ariana Lynn
Username arianalynn
Uploaded September 05, 2022
Rating 4.5
Size 3,143 Kb
Views 38,456
Do you need developer help for 404 Error Message?

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!

Ariana Lynn (arianalynn) Script Codes
Name
Canvas Cloth with Strings
Material Note App
Dots and Shapes
Reveal Effect
Gooey Share Buttons
Chat Widget
Unit.js
Live Voting
Fireworks Show
Bubbles in the Sky
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!