aviel900

halloween 404 error page

Aug 2nd, 2019
152
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.18 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <title>404 Halloween page</title>
  3. <style>
  4. *{
  5.   padding: 0;
  6.   margin: 0;
  7.   box-sizing: border-box;
  8. }
  9.  
  10. *::before,
  11. *::after {
  12.     content: '';
  13.   position: absolute;
  14. }
  15.  
  16. body{
  17.     background: #1B0034;
  18.     background-image: linear-gradient( 135deg, #1B0034 10%, #33265C 100%);
  19.     background-attachment: fixed;
  20.     background-size: cover;
  21.  
  22. }
  23.  
  24. .error {
  25.     width: 100%;
  26.     height: auto;
  27.     margin: 50px auto;
  28.     text-align: center;
  29.     margin-bottom: 0;
  30. }
  31.  
  32. .dracula{
  33.     width: 230px;
  34.     height: 300px;
  35.     display: inline-block;
  36.     margin: auto;
  37.     overflowX: hidden;
  38. }
  39.  
  40. .error .p {
  41.     height: 100%;
  42.     color: #C0D7DD;
  43.     font-size: 280px;
  44.     margin: 50px;
  45.     display: inline-block;
  46.     font-family: 'Anton', sans-serif;
  47.     font-family: 'Combo', cursive;
  48. }
  49.  
  50.  
  51. .con {
  52.   width: 500px;
  53.   height: 500px;
  54.   position: relative;
  55.   margin: 9% auto 0;
  56. animation: ani9 0.7s ease-in-out infinite  alternate ;}
  57.  
  58. @keyframes ani9 {
  59.     0%{
  60.     transform: translateY(10px);   
  61.   }
  62.  
  63.   100%{
  64.     transform: translateY(30px);   
  65.   }
  66.  
  67. }
  68.  
  69.  
  70. .con > * {
  71.   position: absolute;
  72.   top: 0; left: 0;
  73. }
  74.  
  75. .hair{
  76.   top: -20px;
  77.   width: 210px;
  78.   height: 200px;
  79.   background: #C0D7DD;
  80.   border-radius: 0 50% 0 50%;
  81.   transform: rotate(45deg);
  82.   background: #33265C;
  83. }
  84. .hair-r{
  85.   left: 20px;
  86.   width: 210px;
  87.   height: 200px;
  88.   background: #C0D7DD;
  89.   border-radius: 0 50% 0 50%;
  90.   transform: rotate(45deg);
  91.   background: #33265C;
  92.  
  93. }
  94. .head {
  95.   width: 200px;
  96.   height: 200px;
  97.   background: #C0D7DD;
  98.   border-radius: 0 50% 0 50%;
  99.   transform: rotate(45deg);
  100. }
  101. .eye {
  102.  width: 20px; height:20px;
  103.   background: #111113;
  104.   border-radius: 50%;
  105.   top: 15%; left: 11.5%;
  106.   transition: .3s linear;
  107. }
  108. .eye-r{left: 24%;}
  109.  
  110. .mouth {
  111.   width: 60px;
  112.   height: 20px;
  113.   background: #840021;
  114.   top: 20%;
  115.   left: 14%;
  116.   border-radius: 50% / 0 0 100% 100%;
  117. }
  118. .mouth::after{
  119.  
  120.   border-left: 5px solid transparent;
  121.   border-right: 5px solid transparent;
  122.   border-top: 13px solid #FFFFFF;
  123.   left: 10px;
  124.  
  125. }
  126. .mouth::before{
  127.   border-left: 5px solid transparent;
  128.   border-right: 5px solid transparent;
  129.   border-top: 13px solid #FFFFFF;
  130.   left: 40px;
  131. }
  132.  
  133. .blod {
  134.   width: 8px;
  135.   height: 20px;
  136.   background: #840021;
  137.   top: 23%; left: 17%;
  138.   border-radius: 20px;
  139. }
  140. .blod::after{
  141.    width: 2px;
  142.   height: 10px;
  143.   background: #FFF;
  144.   top: 20%; left: 10%;
  145.   border-radius: 20px;
  146.  
  147. }
  148. .blod2 {
  149.   top: 23%; left: 20%;
  150.   width: 13px;
  151.   height: 13px;
  152.   border-radius: 50% 50% 50% 0;
  153.   transform: rotate(130deg);
  154.   animation: blod 2s linear infinite;
  155.   opacity: 0;
  156. }
  157. @keyframes blod {
  158.   0%   {opacity: 1;}  
  159.   100%   {background:red; opacity: 0; top:50%;}
  160.  
  161.  
  162. }
  163.  
  164.  
  165.  
  166. /* page-ms */
  167. .page-ms {transform: translateY(-50px);}
  168.  
  169. .error p.page-msg {
  170.     text-align: center;
  171.     color: #C0D7DD;
  172.     font-size: 30px;
  173.     font-family: 'Combo', cursive;
  174.     margin-bottom: 20px;
  175. }
  176. button.go-back {
  177.         font-size: 30px;
  178.     font-family: 'Combo', cursive;
  179.     border: none;
  180.     padding: 10px 20px;
  181.     cursor: pointer;
  182.     transition: 0.3s linear;
  183.     z-index: 9;
  184.     border-radius: 10px;
  185.     background: #C0D7DD;
  186.     color: #33265C;
  187.     box-shadow: 0 0 10px 0 #C0D7DD;
  188.     margin-top: 20px;
  189. }
  190. button:hover {box-shadow: 0 0 20px 0 #C0D7DD;}
  191.  
  192.  
  193. </style>
  194. <div class="container">
  195.    
  196.     <div  class="error">
  197.         <p class="p">4</p>
  198.         <span class="dracula">         
  199.             <div class="con">
  200.                 <div class="hair"></div>
  201.                 <div class="hair-r"></div>
  202.                 <div class="head"></div>
  203.             <div class="eye"></div>
  204.             <div class="eye eye-r"></div>
  205.             <div class="mouth"></div>
  206.             <div class="blod"></div>
  207.             <div class="blod blod2"></div>
  208.             </div>
  209.         </span>
  210.         <p class="p">4</p>
  211.        
  212.         <div class="page-ms">
  213.             <p class="page-msg"> Ups, die Seite wurde nicht gefunden! </p>
  214.             <a href="../"><button class="go-back">Zurück</button></a>
  215.         </div>
  216. </div>
  217. </div>
  218. <!--    nice soundtrack -->
  219. <iframe style="width:0;height:0;border:0; border:none;" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/510878118&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
Advertisement
Add Comment
Please, Sign In to add comment