قالب ۴۰۴ شیک و متحرک
قالب ۴۰۴ شیک و متحرک با این قالب متحرک و شیک ۴۰۴ شما میتوانید یک صفحه زیبا برای صفحات ناموجود و یا پاک شده خود ایجاد کنید.
برای دیدن دمو کدهای ادامه مطلب را کپی و در ابزار پیش نمایش کدبازان تست نمایید.
برای کپی کردن کدهای قالب روی کد دابل کلیک کنید سپس شروع به کپی کردن نمایید.
<body> <div class="container"> <div class="layer layer-1"> <div class="page page-1a">P</div><div class="page page-1b">P</div> <div class="page page-2a">O</div><div class="page page-2b">O</div> <div class="page page-3a">D</div><div class="page page-3b">D</div> <div class="page page-4a">E</div><div class="page page-4b">E</div> <div class="page page-5a">R</div><div class="page page-5b">R</div> </div> <div class="layer layer-2"> <div class="page page-1a">P</div><div class="page page-1b">P</div> <div class="page page-2a">O</div><div class="page page-2b">O</div> <div class="page page-3a">D</div><div class="page page-3b">D</div> <div class="page page-4a">E</div><div class="page page-4b">E</div> <div class="page page-5a">R</div><div class="page page-5b">R</div> </div> <div class="layer layer-3"> <div class="page page-1a">P</div><div class="page page-1b">P</div> <div class="page page-2a">O</div><div class="page page-2b">O</div> <div class="page page-3a">D</div><div class="page page-3b">D</div> <div class="page page-4a">E</div><div class="page page-4b">E</div> <div class="page page-5a">R</div><div class="page page-5b">R</div> </div> <div class="layer layer-4"> <div class="page page-1a">P</div><div class="page page-1b">P</div> <div class="page page-2a">O</div><div class="page page-2b">O</div> <div class="page page-3a">D</div><div class="page page-3b">D</div> <div class="page page-4a">E</div><div class="page page-4b">E</div> <div class="page page-5a">R</div><div class="page page-5b">R</div> </div> <div class="message"> <h1>404</h1> <p> متاسفانه ؛ صفحه مورد نظر شما یافت نشد </p> <a class="button" href="#">codebazan.ir</a> </div> </div> <style> @font-face { font-family: 'IRANSans'; src: url('font/IRANSansWeb.woff') format('woff'), url('font/IRANSansWeb.woff2') format('woff2'), url('font/IRANSansWeb.ttf') format('truetype'); } html, body { height: 100%; } body { margin: 0; position: relative; overflow: hidden; } .container { position: relative; width: 100%; height: 100%; margin: 0 auto; background: #B50921; } .layer { width: 100%; height: 200%; position: absolute; top: 0; left: 0; } .layer-1 { animation: down 3s linear infinite; } @keyframes down { from { transform: translateY(-50%); } to { transform: translateY(0%); } } .layer-2 { transform: rotateY(180deg); width: 90%; left: 5%; opacity: 0.8; animation: up 2s linear infinite; } @keyframes up { from { transform: translateY(0%); } to { transform: translateY(-50%); } } .layer-3 { transform: rotateY(180deg); width: 60%; left: 20%; opacity: 0.6; animation: up2 3s linear infinite; } @keyframes up2 { from { transform: translateY(0%); } to { transform: translateY(-50%); } } .layer-4 { transform: rotateX(180deg); width: 50%; left: 25%; opacity: 0.2; animation: down2 4s linear infinite; } @keyframes down2 { from { transform: translateY(-50%); } to { transform: translateY(0%); } } .page { background-color: rgba(255, 255, 255, 0.8); width: 10%; height: 10%; position: absolute; text-align: center; line-height: 150px; font-size: 100px; font-family: Helvetica, Arial, sans-serif; color: rgba(200, 0, 0, 0.1); color: transparent; } .page-1a { bottom: 0; } .page-1b { bottom: 50%; } .page-2a { top: 20%; left: 20%; } .page-2b { top: 70%; left: 20%; } .page-3a { top: 10%; left: 55%; } .page-3b { top: 60%; left: 55%; } .page-4a { top: 30%; left: 70%; } .page-4b { top: 80%; left: 70%; } .page-5a { top: 0%; left: 90%; } .page-5b { top: 50%; left: 90%; } .message { width: 100%; max-width: 400px; height: 380px; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; text-align: center; font-family: 'IRANSans'; color: #fff; } .message h1 { font-size: 10em; font-weight: normal; margin: 0; color: #fff; } .message p { margin-top: -2em; } .message .button { color: #fff; text-decoration: none; display: inline-block; border: 2px solid #fff; border-radius: 0.5em; padding: 1em; } .message .button:hover { background-color: #fff; color: #000; } </style> </body>
دیگر قالبها