SImple 404 page
SImple 404 page
by Adi Jaya
HTML
<div id="wrap-page404">
<div class="page404">
<h2>
<span class="big red">4</span>
<span class="big blue">0</span>
<span class="big green">4</span>
</h2>
<h3>
Maaf Halaman yang anda cari tidak ada, atau mungkin terhapus.
</h3>
<a href="#" class="id5btn1 bgred"><span>✓</span>BACK TO HOME</a>
</div>
</div>
CSS
#wrap-page404 {
position: absolute;
z-index:10000;
background: #fff;
font-family: "arial",verdana, sans-serif;
width: 100%;
left: 0;
right: 0;
height: 100%;
}
.page404 {
position: relative;
margin: 20% 0;
text-align: center;
}
.big {font-size:500%;}
.red {color:#ff8e8e;}
.blue {color:#7272e0;}
.green {color:#74b574;}
/*backtohome*/
.id5btn1 {
display: inline-block;
border: none;
outline: none;
cursor: pointer;
text-align: center;
height: 50px;
line-height: 50px;
padding-right: 30px;
padding-left: 70px;
position: relative;
color: rgb(255,255,255);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 15px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";
zoom: 1;
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true);
}
.id5btn1 span {
position: absolute;
left: 0;
top: 0;
width: 50px;
background-color: rgba(0,0,0,0.5);
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-right: 1px solid rgba(0,0,0,0.15);
}
.id5btn1:active{
position: relative;
top: 3px;
}
.bgred {
background-color: #e74c3c;
}
JavaScript
/*
bisa dikreasikan dengan java script random post
setting lagi css biar pas, baik warna atau pun responsive di mobile
https://facebook.com/nafis3333
*/