پی سی دی ال امروز براتون قالب صفحات 404 یا همان قالب صفحه مورد نظر یافت نشد رو آماده کرده. این قالب با طرحی فلت و کاملا رسمی و شیک با افکتی زیبا هنگام بازشدن صفحه هست. قالب های 404 کمک زیادی تو سئو سایتتون میکنند که به نوعی میشه گفت نیاز هر سایتی هست.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Error 404 - Page not found</title> <style> html,body {height: 100%; } body {color: #4c4a50;font: 300 1em/1.5em "Lato", sans-serif;margin: 0;position: relative; } h1 {font-siez: 2em;font-weight: 900;line-height: 1.1em;margin: 0; } h2 {font-size: 1.5em;font-weight: 300;line-height: 1.1em;margin: 0; } svg {height: auto;max-width: 100%; } .container {left: 50%;position: absolute;top: 50%;transform: translate(-50%, -50%); } .display-table {display: table;width: 100%; } .display-table-cell {display: table-cell;vertical-align: middle; } .icons {display: none; } .icon {display: inline-block;height: 3em;width: 3em; } .icon-left {margin-right: 1em; } .icon-right {margin-left: 1em; } .icon-x {background-color: #ca2735;border-radius: 50%;fill: white;padding: .5em; } .page-404 {background: radial-gradient(ellipse farthest-side at right top, #2ca6e0 0%, #1766b3 100%) no-repeat; } .message {background-color: white;box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);padding: 1em 2em;text-transform: uppercase; }.message h1 {font-weight: 900; } .message h2 {font-weight: 300; } .animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both; } .bounceIn {-webkit-animation-name: bounceIn;animation-name: bounceIn;-webkit-animation-duration: .75s;animation-duration: .75s; } @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% {transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% {opacity: 0;transform: scale3d(0.3, 0.3, 0.3); } 20% {transform: scale3d(1.1, 1.1, 1.1); } 40% {transform: scale3d(0.9, 0.9, 0.9); } 60% {opacity: 1;transform: scale3d(1.03, 1.03, 1.03); } 80% {transform: scale3d(0.97, 0.97, 0.97); } 100% {opacity: 1;transform: scale3d(1, 1, 1); } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% {transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% {opacity: 0;transform: scale3d(0.3, 0.3, 0.3); } 20% {transform: scale3d(1.1, 1.1, 1.1); } 40% {transform: scale3d(0.9, 0.9, 0.9); } 60% {opacity: 1;transform: scale3d(1.03, 1.03, 1.03); } 80% {transform: scale3d(0.97, 0.97, 0.97); } 100% {opacity: 1;transform: scale3d(1, 1, 1); } } </style> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300,900"> </head> <body class="page-404"> <h2 style="position:fixed;top:10000%;width:1px; height:1px; overflow:hidden"><a href="http://pi3idl.com">قالب صفحات 404</a></h2> <div class="container"> <div class="message animated bounceIn"> <div class="display-table"> <div class="display-table-cell"> <svg class="icon icon-left icon-x"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use></svg> </div> <div class="display-table-cell"> <h1>Error 404</h1> <h2>Page not Found!</h2> </div> </div> </div> </div> <svg class="icons" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><symbol viewBox="0 0 512 512" id="icon-x"><title>x</title><path d="M438.393 374.595L319.757 255.977l118.62-118.63-63.782-63.74-118.6 118.618-118.62-118.603-63.768 63.73 118.64 118.63L73.62 374.626l63.73 63.768 118.65-118.66 118.65 118.645z"/></symbol></svg> </body> </html> |
از سایت خوبتون ممنونم عالیه
ببخشید شما غیر از آموزشای داخل سایتتون به یه فرد مبتدی هم پاسخ می دهید؟
بنده در حدی که دانشم باشه پاسخ گوی کاربرای عزیزم هستم. سوالتون رو بفرمایید (البته داخل تالار گفتگو بهتره برای توضیح دادن)
سلام به مدیر خوب سایت مطالب مفید و پر بار بود