Simple 404 page using HTML & CSS only!
Create a simple 404 page with just HTML & CSS with beginner level coding! If this is your first time
coding then this will really help you get started. This is a really basic version of a 404 Page. It contains neither bootstrap
nor Javascript!
This was a project I used in this website a while ago (from the time of writing), which was then removed.
It is made using HTML & CSS only... A pretty basic template for people who want to get into web development.
NOTE: This does not use bootstrap, hence it is not responsive, this is just a basic template.
If you don't know what this means then in simple words, this template is not non-desktop friendly
Let's get into the coding part:
This is the HTML of the template:
<!-- Simple 404 Page using HTML & CSS -->
<!-- Author: Godnon Dsilva -->
<!DOCTYPE html>
<html>
<head>
<!-- Enter your title of the page -->
<title>404 - Page not found</title>
<!-- Link the CSS posted below to this page, change the href -->
<link rel="stylesheet" href="/404.css" >
<!-- Enter your website icon -->
<link rel="icon" href="YOUR_WEBSITE_ICON_LINK">
<!-- This one is very important, don't skip this part! -->
<base href=""> <!-- Enter your website URL here -->
<!-- Just some important metas, you can ignore these -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- If you want to learn more about them then visit https://www.w3schools.com/tags/tag_meta.asp -->
</head>
<body>
<main>
<center>
<br /><br /><br /><br /><br /><br/>
<h1>404 - Page not found!</h1>
<p>Oops! Itseems like you're lost, let me help you find your way back home!<br />
The following problems could be the case:<br><br>
• The link is broken<br />
• This page never existed<br />
• This page has been removed<br /><br /><br /></p>
<h3><a href="/">Click here to go back home</a></h3>
<br /><br /><br /><br />
</center>
</main>
</body>
</html>
This concludes the HTML part of the template.
Moving on to CSS part
/* Simple 404 Page using HTML & CSS */
/* Author: Godnon Dsilva */
/* Imported fonts */
@import url('https://fonts.googleapis.com/css?family=Anton');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
/* CSS */
body {
background-color: #222;
font-family: 'Anton', sans-serif;
margin: 0;
}
body > main > center > p {
color: #ddd;
font-family: 'Open Sans'. sans-serif !important;
}
body > main > center > h1 {
text-transform: uppercase;
color: #0077ff;
font-size: 48px;
}
body > main > center > h3 > a {
text-transform: uppercase;
font-size: 18px;
color: #000;
background-color: #0077ff;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #0077ff;
border-radius: 5px;
}