این هم یک قالب 404 بسیار زیبا برای سایت تفریحی
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- <meta name="viewport" content="width=1200, initial-scale=1.0, maximum-scale=1.0"/> --> <meta name="viewport" content="width=1310;initial-scale=1.0;minimum-scale=1.0; maximum-scale=1.0"/> <link href='http://fonts.googleapis.com/css?family=Cabin&v1' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="http://molo.me/css/style.css?v=1" type="text/css" media="all" /> <link rel="stylesheet" href="http://up.snowpic.ir/up/snowpic/404/Fun-Bird/profile_slider.css?v=1" type="text/css" media="all" /> <link rel="shortcut icon" href="http://up.snowpic.ir/up/snowpic/404/Fun-Bird/favicon.ico"/> <title>Page Not Found</title> <script type="text/javascript" src="http://up.snowpic.ir/up/snowpic/404/Fun-Bird/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="http://up.snowpic.ir/up/snowpic/404/Fun-Bird/jquery.easing.min.js"></script> <script type="text/javascript" src="http://up.snowpic.ir/up/snowpic/404/Fun-Bird/jquery.lavalamp.js"></script> <script type="text/javascript" src="http://up.snowpic.ir/up/snowpic/404/Fun-Bird/jquery.elastic.source.js"></script> <script type="text/javascript" src="http://up.snowpic.ir/up/snowpic/404/Fun-Bird/top_up-min.js"></script> <script type="text/javascript" src="http://up.snowpic.ir/up/snowpic/404/Fun-Bird/jquery.watermarkinput.js"></script> <script type="text/javascript" src="http://up.snowpic.ir/up/snowpic/404/Fun-Bird/custom-checkbox.js"></script> <script type="text/javascript" src="http://up.snowpic.ir/up/snowpic/404/Fun-Bird/jquery.sexyslider.min.js"></script> <script type="text/javascript" src="http://up.snowpic.ir/up/snowpic/404/Fun-Bird/jquery.carousel.min.js"></script> <script type="text/javascript" src="http://up.snowpic.ir/up/snowpic/404/Fun-Bird/jquery.tinyscrollbar.min.js"></script> <script type="text/javascript" src="http://up.snowpic.ir/up/snowpic/404/Fun-Bird/jquery.liveready.js"></script> <script type="text/javascript" src="http://up.snowpic.ir/up/snowpic/404/Fun-Bird/orbitaltooltip.js"></script> <script type="text/javascript" src="http://up.snowpic.ir/up/snowpic/404/Fun-Bird/raphael-min.js"></script> </head> <body class="white"> <div id="top-orange-line"></div> <div id="top-bg-cloud-white-bg"><div id="top-bg-cloud-white"></div></div> <div class="content-wrapper" style="height: 85px;"> <div id="top-bar-wrapper"> <span id="logo"><a href="/"><img src="http://up.snowpic.ir/up/snowpic/404/Fun-Bird/logo.png"></a></span> <span id="navigation"> <div id="navigation-link-area"> <ul class="lavaLampWithImage" id="1"> <li class="current" style="display: none;"><a href="/" style="width: 0px; height: 30px;"></a></li> <li class="no-show" ><a href="/" style="width: 81px; height: 34px;"></a></li> <li class="first"><a href="/pop" style="width: 70px; height: 34px;"></a></li> <li ><a href="/photooftheday" style="width: 138px; height: 34px;"></a></li> <li ><a href="/hot" style="width: 39px; height: 34px;"></a></li> <li ><a href="/badge" style="width: 52px; height: 34px;"></a></li> <li ><a href="/blog/category/tips/" style="width: 95px; height: 34px;"></a></li> <li ><a href="http://support.molo.me" style="width: 68px; height: 34px;" target="_blank"></a></li> </ul> </div> </span> </div> </div><script type="text/javascript"> var width,height; var line; var count = 0; var motions = new Array(); var molo = new Image(); var prevMotion = null; var paper = null; for(var i=0;i<80;i++){ motions.push(Math.round(40*Math.sin(i/40*Math.PI))); } $(window).resize(function(event){ width = $(document.body).width(); if(paper != null){ paper.setSize(width,height); } $('#molo-image').css('left', Math.floor((width - molo.width)*0.5)); }); $(document).ready(function(){ molo.src = "http://up.snowpic.ir/up/snowpic/404/Fun-Bird/molome_404.png"; $('#molo').hide(); width = window.innerWidth;//parseInt($(document.body).css('width').replace("px","")); height = 300; var imageWidth = parseInt($('#molo-image').css('width').replace("px","")); paper = Raphael(document.getElementById("rope-anim"), width, height); $("#1").lavaLamp({ fx: "backout", speed: 700, click: function(event, menuItem) { return true; } }); $('#error').css('height',$(document).height()-parseInt($('#error').css('padding-top').replace("px",""))-180+"px"); $(document.body).css('overflow','hidden'); var frontWidth = 250; var cloudFront = function(){ $('#cloud-front').css('left',width+frontWidth); $('#cloud-front').animate({ left: -frontWidth },12000,"linear",function(){ setTimeout(cloudFront,100); }); }; cloudFront(); var backWidth = 123; var cloudBack = function(){ $('#cloud-back').css('left',width+backWidth); $('#cloud-back').animate({ left: -frontWidth },24000,"linear",function(){ setTimeout(cloudBack,100); }); }; cloudBack(); var callback = function(){ if(count != 0 && motions[count-1] == motions[count]){ setTimeout(callback,20); }else{ if(line != null){ line.remove(); } $('#molo').animate({marginTop:motions[count]},20,"linear",callback); line = paper.path("M0 80S"+Math.round(width/2)+" "+(prevMotion*2.325+135)+" "+width+" 80"); line.attr("stroke", "#BBBBBB"); line.attr("stroke-width", "3"); //line.attr("stroke-opacity", "0.5"); } prevMotion = motions[count]; count = (count+1) % motions.length; }; if (molo.complete){ $('#molo').attr('src',molo.src); $('#molo').show(); $('#molo-image').css('left', Math.floor((width - molo.width)*0.5)); callback(); }else{ molo.onload = function(){ $('#molo').attr('src',molo.src); $('#molo').show(); $('#molo-image').css('left', Math.floor((width - molo.width)*0.5)); callback(); }; } }); </script> <!-- <div id="content"> <h1>404 صفحه ی مورد نظر شما پیدا نشد!</h1> <p>The page you requested was not found.</p></div> --> <img id="cloud-back" src="http://up.snowpic.ir/up/snowpic/404/Fun-Bird/404_small_cloud.png" style="z-index:1;position:absolute;top:120px" /> <img id="cloud-front" src="http://up.snowpic.ir/up/snowpic/404/Fun-Bird/404_big_cloud.png" style="z-index:1;position:absolute;top:170px" /> <div id="rope-anim" style="z-index:3;position:absolute;left:0px;top:60px"> </div> <div id="molo-image" align="center" style="position:absolute;top:126px;z-index:999"> <img id="molo" src=""/> </div> <div id="error" style="text-align:center;padding-top:450px"> <span style="font-size:36px;color:#7C999B;font-weight:bold">404 Error</span> <br/> <span style="font-size:26px;color:#AAAAAA">صفحه ی مورد نظر شما پیدا نشد</span> </div> <div class="content-wrapper"> <div id="bottom-line-white"></div> <div id="bottom-content-wrapper"> <div id="left">© 2013 SnowPic.ir copy right </div> <div id="right"> <ul class="bottom-menu"> <li><a href="/"> صفحه ی اصلی </a></li> <li><a href="/Panel">پنل </a></li> <li><a href="/Contact">تماس با ما </a></li> <li><a href="/Posts">آرشیو </a></li> <li><a href="/Forum">انجمن</a></li> <li><a href="/terms">قوانین </a></li> <li><a href="/register">عضویت </a></li> <li><a href="http://facebook.com/">فیس بوک </a></li> <li><a href="http://twitter.com/">توییر </a></li> </ul> </div> </div> </div> </body> </html>
