قالب ۴۰۴ شیک و متحرک

قالب ۴۰۴ شیک و متحرک با این قالب متحرک و شیک ۴۰۴ شما میتوانید یک صفحه زیبا برای صفحات ناموجود و یا پاک شده خود ایجاد کنید.

برای دیدن دمو کدهای ادامه مطلب را کپی و در ابزار پیش نمایش کدبازان تست نمایید.

برای کپی کردن کدهای قالب روی کد دابل کلیک کنید سپس شروع به کپی کردن نمایید.

 

قالب 404

<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>

 

دیگر قالبها

قالب ۴۰۴ ردپا سبک و تیره

صفحه ۴۰۴ متحرک-بانس

 

قالب ۴۰۴ GitHub برای سایت و وبلاگ

قالب ۴۰۴ monkey متحرک زیبا

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *