با سلام خدمت دوستان عزیز چند هفته ای متاسفانه نتونستم تاپیک مفیدی در انجمن ارسال کنم ... انشا... داریم با چند تن از دوستان سایت مخصوص طراحی سایت میزنیم ... تا بچه های رزبلاگی رو به بهترین شکل .. وردپرسی کنیم ... خوب حالا:
مشخصات :
نام : super 404 thm
طراحی و کدنویسی : سالار وب : بنده حقیر
مرورگرها : پیشرفته ...
کد ها :
<!doctype html>
<html lang="fa">
<meta charset="utf-8">
<meta name="desinger" content="salar sadeghi">
<head>
<style>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
}
html { height: 100%; } /* always display scrollbars */
body { height: 100%; font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold }
input { outline: none }
table {
border-collapse: collapse;
border-spacing: 0;
}
img {
border: 0;
max-width: 100%;
}
a { text-decoration: none }
a:hover { text-decoration: underline }
.clear { clear: both }
.clear:before,
.container:after {
content: "";
display: table;
}
.clear:after { clear: both }
/* IE 6/7 */
.clear { zoom: 1 }
body {
background: #dfdfdf repeat;
font-family: Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
overflow: hidden;
}
@font-face {
font-family: 'TeXGyreScholaRegular';
src: url('../font/texgyreschola-regular-webfont.eot');
src: url('../font/texgyreschola-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/texgyreschola-regular-webfont.woff') format('woff'),
url('../font/texgyreschola-regular-webfont.ttf') format('truetype'),
url('../font/texgyreschola-regular-webfont.svg#TeXGyreScholaRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TeXGyreScholaBold';
src: url('../font/texgyreschola-bold-webfont.eot');
src: url('../font/texgyreschola-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('t../font/exgyreschola-bold-webfont.woff') format('woff'),
url('../font/texgyreschola-bold-webfont.ttf') format('truetype'),
url('../font/texgyreschola-bold-webfont.svg#TeXGyreScholaBold') format('svg');
font-weight: normal;
font-style: normal;
}
@-webkit-keyframes main {
0% {
-webkit-transform: scale3d(0.1, 0.1, 1);
opacity: 0;
}
45% {
-webkit-transform: scale3d(1.07, 1.07, 1);
opacity: 1;
}
70% { -webkit-transform: scale3d(0.95, 0.95, 1) }
100% { -webkit-transform: scale3d(1, 1, 1) }
}
@-moz-keyframes main {
0% {
-moz-transform: scale(0.1, 0.1);
opacity: 0;
}
45% {
-moz-transform: scale(1.07, 1.07);
opacity: 1;
}
70% { -moz-transform: scale(0.95, 0.95) }
100% { -moz-transform: scale(1, 1) }
}
@-webkit-keyframes logo {
0% { opacity: 0 }
100% { opacity: 1 }
}
@-webkit-keyframes footer {
0% { top: -30px }
100% { top: 0 }
}
.clear { clear: both }
.clear:before,
.container:after {
content: "";
display: table;
}
.clear:after { clear: both }
.clear { zoom: 1 }
.left { float: left }
.right { float: right }
#wrapper {
height: 100%;
background-image: linear-gradient(bottom, rgba(0,0,0,.0) 0%, rgba(0,0,0,.20) 100%);
background-image: -o-linear-gradient(bottom, rgba(0,0,0,.0) 0%, rgba(0,0,0,.20) 100%);
background-image: -moz-linear-gradient(bottom, rgba(0,0,0,.0) 0%, rgba(0,0,0,.20) 100%);
background-image: -webkit-radial-gradient(rgba(0,0,0,.0) 0%, rgba(0,0,0,.20) 100%);
background-image: -ms-linear-gradient(bottom, rgba(0,0,0,.0) 0%, rgba(0,0,0,.20) 100%);
}
.logo {
position: absolute;
background:none;
width: 200px;
height: 80px;
top: 1%;
left: 1%;
z-index: 1;
animation: logo 1.5s 1;
-webkit-animation: logo 1.5s 1;
-moz-animation: logo 1.5s 1;
-o-animation: logo 1.5s 1;
-ms-animation: logo 1.5s 1;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.logo:hover { opacity: .75 !important }
#main {
position: relative;
width: 600px;
margin: 0 auto;
padding-top: 8%;
animation: main .8s 1;
animation-fill-mode: forwards;
-webkit-animation: main .8s 1;
-webkit-animation-fill-mode: forwards;
-moz-animation: main .8s 1;
-moz-animation-fill-mode: forwards;
-o-animation: main .8s 1;
-o-animation-fill-mode: forwards;
-ms-animation: main .8s 1;
-ms-animation-fill-mode: forwards;
}
#main #header h1 {
position: relative;
display: block;
font: 72px 'TeXGyreScholaBold', Arial, sans-serif;
color: #0061a5;
text-shadow: 2px 2px #f7f7f7;
text-align: center;
}
#main #header h1 span.sub {
position: relative;
font-size: 21px;
top: -20px;
padding: 0 10px;
font-style: italic;
}
#main #header h1 span.icon {
position: relative;
display: inline-block;
top: -6px;
margin: 0 10px 5px 0;
background: #0061a5;
width: 50px;
height: 50px;
-moz-box-shadow: 1px 2px white;
-webkit-box-shadow: 1px 2px white;
box-shadow: 1px 2px white;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
color: #dfdfdf;
font-size: 46px;
line-height: 48px;
font-weight: bold;
text-align: center;
text-shadow: 0 0;
}
#main #content {
position: relative;
width: 600px;
background: white;
-moz-box-shadow: 0 0 0 3px #ededed inset, 0 0 0 1px #a2a2a2, 0 0 20px rgba(0,0,0,.15);
-webkit-box-shadow: 0 0 0 3px #ededed inset, 0 0 0 1px #a2a2a2, 0 0 20px rgba(0,0,0,.15);
box-shadow: 0 0 0 3px #ededed inset, 0 0 0 1px #a2a2a2, 0 0 20px rgba(0,0,0,.15);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
z-index: 5;
}
#main #content h2 {
background: url(../img/404_s-divider.jpg) no-repeat;
background-position: bottom;
padding: 12px 0 22px 0;
font: 20px 'TeXGyreScholaRegular', Arial, sans-serif;
color: #8e8e8e;
text-align: center;
}
#main #content p {
position: relative;
padding: 20px;
font-size: 16px;
line-height: 1.3em;
font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-weight:bold;
color: #b5b5b5;
}
#main #content .utilities { padding: 20px }
#main #content .utilities form .input-container {
position: relative;
width: 290px;
}
#main #content .utilities form .input-container input[type=text] {
width: 280px;
height: 34px;
padding: 0 8px;
background: white;
border: solid 1px #cdcdcd;
outline: none;
-moz-box-shadow: 0 3px 3px rgba(0,0,0,.05) inset;
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,.05) inset;
box-shadow: 0 3px 3px rgba(0,0,0,.05) inset;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 14px;
color: #696969;
-webkit-font-smoothing: antialiased;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
#main #content .utilities .input-container input[type=text]:focus { border: solid 1px #9f9f9f }
#main #content .utilities form .input-container button#search {
position: absolute;
display: block;
top: 9px;
right: 0;
background: white url(../img/404_search.png) no-repeat;
width: 18px;
height: 18px;
border: none;
cursor: pointer;
opacity: .3;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
#main #content .utilities form .input-container button#search:hover { opacity: .6 }
#main #content .utilities .button {
display: inline-block;
height: 34px;
margin: 0 0 0 6px;
padding: 0 18px;
background: #006db0;
background-image: linear-gradient(bottom, #0062a6 0%, #0079bb 100%);
background-image: -o-linear-gradient(bottom, #0062a6 0%, #0079bb 100%);
background-image: -moz-linear-gradient(bottom, #0062a6 0%, #0079bb 100%);
background-image: -webkit-linear-gradient(bottom, #0062a6 0%, #0079bb 100%);
background-image: -ms-linear-gradient(bottom, #0062a6 0%, #0079bb 100%);
-moz-box-shadow: 0 0 0 1px #003255, 0 1px 3px rgba(0, 50, 85, 0.5), 0 1px #00acd8 inset;
-webkit-box-shadow: 0 0 0 1px #003255, 0 1px 3px rgba(0, 50, 85, 0.5), 0 1px #00acd8 inset;
box-shadow: 0 0 0 1px #003255, 0 1px 3px rgba(0, 50, 85, 0.5), 0 1px #00acd8 inset;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 14px;
line-height: 34px;
color: white;
font-weight: bold;
text-shadow: 0 -1px #00385a;
text-decoration: none;
}
#main #content .utilities .button:hover {
background: #0081c6;
background-image: linear-gradient(bottom, #006fbb 0%, #008dce 100%);
background-image: -o-linear-gradient(bottom, #006fbb 0%, #008dce 100%);
background-image: -moz-linear-gradient(bottom, #006fbb 0%, #008dce 100%);
background-image: -webkit-linear-gradient(bottom, #006fbb 0%, #008dce 100%);
background-image: -ms-linear-gradient(bottom, #006fbb 0%, #008dce 100%);
-moz-box-shadow: 0 0 0 1px #003255, 0 1px 3px rgba(0, 50, 85, 0.5), 0 1px #00c1e4 inset;
-webkit-box-shadow: 0 0 0 1px #003255, 0 1px 3px rgba(0, 50, 85, 0.5), 0 1px #00c1e4 inset;
box-shadow: 0 0 0 1px #003255, 0 1px 3px rgba(0, 50, 85, 0.5), 0 1px #00c1e4 inset;
}
#main #content .utilities .button:active {
background: #0081c6;
background-image: linear-gradient(bottom, #008dce 0%, #006fbb 100%);
background-image: -o-linear-gradient(bottom, #008dce 0%, #006fbb 100%);
background-image: -moz-linear-gradient(bottom, #008dce 0%, #006fbb 100%);
background-image: -webkit-linear-gradient(bottom, #008dce 0%, #006fbb 100%);
background-image: -ms-linear-gradient(bottom, #008dce 0%, #006fbb 100%);
-moz-box-shadow: 0 0 0 1px #003255, 0 1px 3px rgba(0, 50, 85, 0.5), 0 1px #00c1e4 inset;
-webkit-box-shadow: 0 0 0 1px #003255, 0 1px 3px rgba(0, 50, 85, 0.5), 0 1px #00c1e4 inset;
box-shadow: 0 0 0 1px #003255, 0 1px 3px rgba(0, 50, 85, 0.5), 0 1px #00c1e4 inset;
}
#main #content .utilities .button-container .button:focus { color: black }
#main #footer {
position: relative;
top: -30px;
padding: 5px 0;
text-align: center;
z-index: 1;
animation: footer .4s .8s 1;
animation-fill-mode: forwards;
-webkit-animation: footer .4s .8s 1;
-webkit-animation-fill-mode: forwards;
-moz-animation: footer .4s .8s 1;
-moz-animation-fill-mode: forwards;
-o-animation: footer .4s .8s 1;
-o-animation-fill-mode: forwards;
-ms-animation: footer .4s .8s 1;
-ms-animation-fill-mode: forwards;
}
#main #footer ul {
font: 13px 'TeXGyreScholaRegular', Arial, sans-serif;
text-shadow: 0 1px white;
}
#main #footer ul li {
display: inline;
margin: 0 12px;
}
#main #footer ul li a {
font: 13px 'TeXGyreScholaRegular', Arial, sans-serif;
color: #696969;
text-shadow: 0 1px white;
text-decoration: none;
}
#main #footer ul li a:hover {
color: #0061a5;
text-decoration: underline;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>404 - Page Not Found</title>
<link rel="stylesheet" type="text/css" href="styles/css/main.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper"><a class="logo" href="#"></a>
<div id="main">
<header id="header">
<h1><span class="icon">!</span>404<span class="sub">page not found</span></h1>
</header>
<div id="content">
<h2>صفحه مورد نظر شما یافت نشد</h2>
<P align="right">صفحه مورد نظر شما یافت نشد شاید ادرس را اشتباه وارد کرده اید یا این برگه توسط مدیر سایت حذف شده است یا سعی مجدد کنید یا به مدیر سایت اطلاع دهید</p>
<div class="utilities">
<RB:Blog_Search_Block>
<div class="input-container">
<input name="search" id="search" class="left" placeholder="search..." type="text">
<input id="search" type="submit">
</div>
</RB:Blog_Search_Block>
<a style="direction:rtl;" class="button right" href="#" onClick="history.go(-1);return true;">برگشت...</a><a class="button right" href="">تماس با ما</a>
<div class="clear"></div>
</div>
</div>
<div id="footer">
<ul>
<li><a href="">صفحه اصلی</a></li>
<li><a href="">عضویت</a></li>
<li><a href="">تماس با ما</a></li>
<li><a href="">عناوین سایت</a></li>
<li><a href="">ارشیو</a></li>
</ul>
</div>
</div>
</div>
</html>
با تشکر باعث دل گرمی بنده میشوید ...
یا علی
