SHARE
TWEET

M!ckey N@0b

Gray-Hacker-Zones May 22nd, 2019 71 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!--
  2.       Title:            M!ck4y N@0b
  3.       Start Date:       Sat Jan 25
  4.       End Date:         Mon Jan 28
  5.       Development Time: 6 hours
  6.  
  7. -->
  8.  
  9. <div id="main-wrapper">
  10.   <div id="box">
  11.  
  12.     <div id="top-background-bars-wrapper" class="background-bars-wrapper">
  13.       <div class="bar1 background-bar"></div>
  14.       <div class="bar2 background-bar"></div>
  15.       <div class="bar3 background-bar"></div>
  16.       <div class="bar4 background-bar"></div>
  17.       <div class="bar5 background-bar"></div>
  18.       <div class="bar6 background-bar"></div>
  19.       <div class="bar7 background-bar"></div>
  20.       <div class="bar8 background-bar"></div>
  21.       <div class="bar9 background-bar"></div>
  22.       <div class="bar10 background-bar"></div>
  23.     </div>
  24.  
  25.     <div id="bottom-background-bars-wrapper" class="background-bars-wrapper">
  26.       <div class="bar1 background-bar"></div>
  27.       <div class="bar2 background-bar"></div>
  28.       <div class="bar3 background-bar"></div>
  29.       <div class="bar4 background-bar"></div>
  30.       <div class="bar5 background-bar"></div>
  31.       <div class="bar6 background-bar"></div>
  32.       <div class="bar7 background-bar"></div>
  33.       <div class="bar8 background-bar"></div>
  34.       <div class="bar9 background-bar"></div>
  35.       <div class="bar10 background-bar"></div>
  36.     </div>
  37.  
  38.     <svg id="skull" viewbox="0 0 500 565" xmlns="http://www.w3.org/2000/svg">
  39.           <defs>
  40.  
  41.             <filter id="softGlow" height="300%" width="400%" x="-75%" y="-75%">
  42.  
  43.               <feMorphology operator="dilate" radius="5" in="SourceAlpha" result="thicken" />
  44.               <feGaussianBlur in="thicken" stdDeviation="5" result="blurred" />
  45.               <feFlood flood-color="rgb(255,0,0)" result="glowColor" />
  46.               <feComposite in="glowColor" in2="blurred" operator="in" result="softGlow_colored" />
  47.  
  48.               <feMerge>
  49.                 <feMergeNode in="softGlow_colored"/>
  50.                 <feMergeNode in="SourceGraphic"/>
  51.               </feMerge>
  52.  
  53.             </filter>
  54.  
  55.           </defs>
  56.  
  57.           <g transform="translate(50 330)">
  58.           <path fill="white" stroke="black" stroke-width="20" filter="url(#softGlow)"
  59.                                              d="
  60.                                              M 0 0
  61.                                              a 215 215 0 1 1 400 0
  62.                                              v 50
  63.                                              h 20
  64.                                              v 90
  65.                                              l -20 20
  66.                                              h -80
  67.                                              v -30
  68.                                              v 70
  69.                                              h -240
  70.                                              v -70
  71.                                              v 30
  72.                                              h -80
  73.                                              l -20 -20
  74.                                              v -90
  75.                                              h 20
  76.                                              z"/>
  77.           <circle id="left-eye" fill="red" stroke="black" stroke-width="20"
  78.                                                           cx="100" cy="0" r="50" />
  79.           <use href="#left-eye" x="200" y="0" />
  80.  
  81.           <path id="nose" fill="none" stroke="black" stroke-width="20"
  82.                                                      d="
  83.                                                      M 200 50
  84.                                                      v 40" />
  85.           <use id="tooth" href="#nose" x="-90" y="100" />
  86.           <use href="#tooth" x="40" y="0" />
  87.           <use href="#tooth" x="90" y="0" />
  88.           <use href="#tooth" x="140" y="0" />
  89.           <use href="#tooth" x="180" y="0" />
  90.           </g>
  91.         </svg>
  92.     <div class="warning-msg">ACCESS DENIED</div>
  93.   </div>
  94. </div>
  95. <style>
  96. html,
  97. body {
  98.   height: 100%;
  99.   width: 100%;
  100.   background-color: black;
  101. }
  102. #main-wrapper {
  103.   height: 100%;
  104.   display: flex;
  105.   justify-content: center;
  106.   align-items: center;
  107. }
  108. #box {
  109.   border-color: red;
  110.   border-style: solid;
  111.   border-width: 1px;
  112.   position: relative;
  113.   background-color: red;
  114.   width: 80%;
  115.   height: 80%;
  116.   display: flex;
  117.   justify-content: center;
  118.   align-items: center;
  119.   flex-direction: column;
  120. }
  121. #skull {
  122.   padding: 2vh;
  123.   padding-bottom: 0;
  124.   position: relative;
  125.   z-index: 3;
  126. }
  127. .warning-msg {
  128.   position: relative;
  129.   padding: 1.5vw;
  130.   color: white;
  131.   font-weight: bold;
  132.   font-size: 5vw;
  133.   z-index: 4;
  134.   font-family: 'VT323', monospace;
  135.   letter-spacing: 0.5em;
  136. }
  137. .background-bars-wrapper {
  138.   position: absolute;
  139.   display: flex;
  140.   width: 100%;
  141.   height: 50%;
  142. }
  143. #bottom-background-bars-wrapper {
  144.   align-items: flex-end;
  145.   bottom: 0;
  146.   left: 0;
  147.   z-index: 1;
  148. }
  149. #top-background-bars-wrapper {
  150.   align-items: flex-start;
  151.   top: 0;
  152.   left: 0;
  153.   z-index: 2;
  154. }
  155. .bar1 {
  156.   animation-delay: 0.1s;
  157. }
  158. .bar2 {
  159.   animation-delay: 0.2s;
  160. }
  161. .bar3 {
  162.   animation-delay: 0.3s;
  163. }
  164. .bar4 {
  165.   animation-delay: 0.4s;
  166. }
  167. .bar5 {
  168.   animation-delay: 0.5s;
  169. }
  170. .bar6 {
  171.   animation-delay: 0.5s;
  172. }
  173. .bar7 {
  174.   animation-delay: 0.4s;
  175. }
  176. .bar8 {
  177.   animation-delay: 0.3s;
  178. }
  179. .bar9 {
  180.   animation-delay: 0.2s;
  181. }
  182. .bar10 {
  183.   animation-delay: 0.1s;
  184. }
  185. .background-bar {
  186.   animation-timing-function: ease;
  187.   animation-duration: 0.4s;
  188.   animation-name: bar;
  189.   animation-iteration-count: infinite;
  190.   animation-direction: alternate;
  191.   height: 50%;
  192.   width: 10%;
  193.   margin-left: 1px;
  194.   margin-right: 1px;
  195.   background-color: black;
  196. }
  197. @-webkit-keyframes bar {
  198.   from {
  199.     height: 50%;
  200.   }
  201.   to {
  202.     height: 90%;
  203.   }
  204. }
  205. @keyframes bar {
  206.   from {
  207.     height: 50%;
  208.   }
  209.   to {
  210.     height: 90%;
  211.   }
  212. }
  213. </style>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top