« previous next »
Pages: [1]   Go Down

Author Topic: HTML5 + CSS3 404 (Page not found)  (Read 1670 times)

Offline glamdring

  • Hero Member
  • *****
  • Posts: 552
HTML5 + CSS3 404 (Page not found)
« on: April 18, 2012, 06:35:57 PM »
I was working on a project today and accidentally created this, figured someone may like it/tweak it and or learn from it. First version has the CSS built into it, the second two are for those of you who want to load it in separate from a .css file. Soon I will add download links to the files, I will also add a few more variations/color schemes.

The second set are the same, just minus the button.

Coded using Geany, this code dose not use any images only HTML5 and CSS3.





HTML and CSS combine:
Code: [Select]
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/404.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page Not Found</title>
<style type="text/css">
* {
margin:0;
padding:0;
}

body {
background-color:#EFEFEF;
font: .9em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#wrapper{
width:600px;
margin:40px auto 0;
text-align:center;
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

#wrapper h1{
color:#FFF;
text-align:center;
margin-bottom:20px;
}

#wrapper a{
display:block;
font-size:.9em;
padding-top:20px;
color:#FFF;
text-decoration:none;
text-align:center;
}

#container {
width:600px;
padding-bottom:15px;
background-color:#FFFFFF;
}

.navtop{
height:40px;
background-color:#24B2EB;
padding:13px;
}

.content {
padding:10px 10px 25px;
background: #FFFFFF;
margin:;
color:#333;
}

a.button{
color:white;
padding:15px 20px;
text-shadow:1px 1px 0 #00A5FF;
font-weight:bold;
text-align:center;
border:1px solid #24B2EB;
margin:0px 200px;
clear:both;
background-color: #24B2EB;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
}

a.button:hover{
text-decoration:none;
background-color: #24B2EB;
}

</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<div class="navtop">
<h1>Page Not Found</h1>
</div>
<div id="content">
<br>
<p>Sorry, but the page you were trying to view does not exist.</p>
<br>
<p>This was most likly the result of either:</p>
<br>
<ul>
A mistyped address
<br>
An out-of-date link
</ul>
<br>
<br>
<a href="index.html" title="Home" class="button">Go Home</a><br />
</div>
</div>
</div>
</body>
</html>

HTML loading CSS separate
Code: [Select]
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/404.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page Not Found</title>
</head>
<body>
<div id="wrapper">
<div id="container">
<div class="navtop">
<h1>Page Not Found</h1>
</div>
<div id="content">
<br>
<p>Sorry, but the page you were trying to view does not exist.</p>
<br>
<p>This was most likly the result of either:</p>
<br>
<ul>
A mistyped address
<br>
An out-of-date link
</ul>
<br>
<br>
<a href="index.html" title="Home" class="button">Go Home</a><br />
</div>
</div>
</div>
</body>
</html>

CSS to be loaded by HTML
Code: [Select]
@charset "UTF-8";
/* CSS Document */

* {
margin:0;
padding:0;
}

body {
background-color:#EFEFEF;
font: .9em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#wrapper{
width:600px;
margin:40px auto 0;
text-align:center;
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

#wrapper h1{
color:#FFF;
text-align:center;
margin-bottom:20px;
}

#wrapper a{
display:block;
font-size:.9em;
padding-top:20px;
color:#FFF;
text-decoration:none;
text-align:center;
}

#container {
width:600px;
padding-bottom:15px;
background-color:#FFFFFF;
}

.navtop{
height:40px;
background-color:#24B2EB;
padding:13px;
}

.content {
padding:10px 10px 25px;
background: #FFFFFF;
margin:;
color:#333;
}

a.button{
    color:white;
    padding:15px 20px;
    text-shadow:1px 1px 0 #00A5FF;
    font-weight:bold;
    text-align:center;
    border:1px solid #24B2EB;
    margin:0px 200px;
    clear:both;
    background-color: #24B2EB;
border-radius:100px;
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    }

a.button:hover{
    text-decoration:none;
    background-color: #24B2EB;
}


Without Button


HTML and CSS combine
Code: [Select]
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/404.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page Not Found</title>
<style type="text/css">
* {
margin:0;
padding:0;
}

body {
background-color:#EFEFEF;
font: .9em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#wrapper{
width:600px;
margin:40px auto 0;
text-align:center;
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

#wrapper h1{
color:#FFF;
text-align:center;
margin-bottom:20px;
}

#wrapper a{
display:block;
font-size:.9em;
padding-top:20px;
color:#FFF;
text-decoration:none;
text-align:center;
}

#container {
width:600px;
padding-bottom:15px;
background-color:#FFFFFF;
}

.navtop{
height:40px;
background-color:#24B2EB;
padding:13px;
}

.content {
padding:10px 10px 25px;
background: #FFFFFF;
margin:;
color:#333;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<div class="navtop">
<h1>Page Not Found</h1>
</div>
<div id="content">
<br>
<p>Sorry, but the page you were trying to view does not exist.</p>
<br>
<p>This was most likly the result of either:</p>
<br>
<ul>
A mistyped address
<br>
An out-of-date link
</ul>
</div>
</div>
</div>
</body>
</html>

HTML loading CSS separate
Code: [Select]
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/404.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page Not Found</title>
</head>
<body>
<div id="wrapper">
<div id="container">
<div class="navtop">
<h1>Page Not Found</h1>
</div>
<div id="content">
<br>
<p>Sorry, but the page you were trying to view does not exist.</p>
<br>
<p>This was most likly the result of either:</p>
<br>
<ul>
A mistyped address
<br>
An out-of-date link
</ul>
</div>
</div>
</div>
</body>
</html>

CSS to be loaded by HTML
Code: [Select]
@charset "UTF-8";
/* CSS Document */

* {
margin:0;
padding:0;
}

body {
background-color:#EFEFEF;
font: .9em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#wrapper{
width:600px;
margin:40px auto 0;
text-align:center;
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

#wrapper h1{
color:#FFF;
text-align:center;
margin-bottom:20px;
}

#wrapper a{
display:block;
font-size:.9em;
padding-top:20px;
color:#FFF;
text-decoration:none;
text-align:center;
}

#container {
width:600px;
padding-bottom:15px;
background-color:#FFFFFF;
}

.navtop{
height:40px;
background-color:#24B2EB;
padding:13px;
}

.content {
padding:10px 10px 25px;
background: #FFFFFF;
margin:;
color:#333;
}
Logged

Offline glamdring

  • Hero Member
  • *****
  • Posts: 552
Re: HTML5 + CSS3 404 (Page not found)
« Reply #1 on: April 19, 2012, 07:56:49 AM »
You can also give the top part a nice shadow to make it pop by using this:

Code: [Select]
.navtop{
height:40px;
background-color:#24B2EB;
padding:13px;
-moz-box-shadow: 0px 7px 10px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 7px 10px rgba(0,0,0,0.3);
box-shadow: 0px 7px 10px rgba(0,0,0,0.3);
}

What I did is I added the box shadow commands under .navtop class.
Code: [Select]
-moz-box-shadow: 0px 7px 10px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 7px 10px rgba(0,0,0,0.3);
box-shadow: 0px 7px 10px rgba(0,0,0,0.3);
Logged

Offline glamdring

  • Hero Member
  • *****
  • Posts: 552
Re: HTML5 + CSS3 404 (Page not found)
« Reply #2 on: April 19, 2012, 10:33:49 AM »
New version, will update image and version above later. For now here is the CSS:

Code: [Select]
@charset "UTF-8";
/* CSS Document */

* {
margin:0;
padding:0;
}

body {
background-color:#EFEFEF;
font: .9em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#wrapper{
width:600px;
margin:40px auto 0;
text-align:center;
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

#wrapper h1{
color:#FFF;
text-align:center;
margin-bottom:20px;
}

#wrapper a{
display:block;
font-size:.9em;
padding-top:20px;
color:#FFF;
text-decoration:none;
text-align:center;
}

#container {
width:600px;
padding-bottom:15px;
background-color:#FFFFFF;
}

.navtop{
height:40px;
background-color:#24B2EB;
padding:13px;
-moz-box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
}

.content {
padding:10px 10px 25px;
background: #FFFFFF;
margin:;
color:#333;
}

a.button{
    color:white;
    padding:20px 20px;
    text-shadow:1px 1px 0 #00A5FF;
    font-weight:bold;
    text-align:center;
    border:1px solid #24B2EB;
    margin:0px 200px;
    clear:both;
    background-color: #24B2EB;
border-radius:100px;
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    -moz-box-shadow: 0px 0px 3px .1px rgba(0,0,0,0.4);
-webkit-box-shadow: 0px 0px 3px .1px rgba(0,0,0,0.4);
box-shadow: 0px 0px 3px .1px rgba(0,0,0,0.4);
    }

a.button:hover{
    text-decoration:none;
    background-color: #24B2EB;
}
Logged
Pages: [1]   Go Up
« previous next »