Error Page Design

by Pratik Bhoir

HTML

<div class="errorBody innerBlock">
    <img class="innerBlock errorImage" src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/System-Error-icon.png" alt="">
    <p class="errorTitle">404 PAGE NOT FOUND</p>
    <p class="errorDesc">The requested URL/File was not found on this server. <a href="">Go Home</a>
    </p>
</div>

CSS

.errorBody {
    height:500px;
    text-align:center;
    padding-top:120px;
}
.innerBlock {
    display: table;
    margin: 0 auto;
}
p {
    margin: 11px 0 22px;
    overflow: hidden;
}
.errorImage {
    width:300px;
    height:300px;
}
.errorTitle {
    font-size:30px;
    font-weight:bold;
}
.errorDesc {
    color:grey;
    font-size:20px;
}
.errorDesc a {
    color:orange;
    text-decoration:none;
    font-weight:bold;
}