SHARE
TWEET

Untitled

a guest Sep 17th, 2019 117 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>You Are A Retard</title>
  6.     <style>
  7.     @import 'https://fonts.googleapis.com/css?family=Modak';
  8. html, body {
  9.   width: 100%;
  10.   height: 100%;
  11.   display: flex;
  12.   justify-content: center;
  13.   align-items: center;
  14.   overflow: hidden;
  15.   background: black;
  16. }
  17.  
  18. .container {
  19.   -webkit-transform: rotate(-45deg);
  20.           transform: rotate(-45deg);
  21.   -webkit-animation: rotation 200s linear;
  22.           animation: rotation 200s linear;
  23. }
  24.  
  25. @-webkit-keyframes rotation {
  26.   0% {
  27.     -webkit-transform: rotate(-45deg);
  28.             transform: rotate(-45deg);
  29.   }
  30.   100% {
  31.     -webkit-transform: rotate(360deg);
  32.             transform: rotate(360deg);
  33.   }
  34. }
  35.  
  36. @keyframes rotation {
  37.   0% {
  38.     -webkit-transform: rotate(-45deg);
  39.             transform: rotate(-45deg);
  40.   }
  41.   100% {
  42.     -webkit-transform: rotate(360deg);
  43.             transform: rotate(360deg);
  44.   }
  45. }
  46. .text {
  47.   width: 3000px;
  48.   text-align: center;
  49.   font-family: "Modak", sans-serif;
  50.   font-size: 8rem;
  51.   letter-spacing: -0.4rem;
  52.   -webkit-transform-origin: top left;
  53.           transform-origin: top left;
  54.   transition: all 2s ease-in-out;
  55. }
  56. .text:nth-child(1) {
  57.   background: yellow;
  58.   color: black;
  59. }
  60. .text:nth-child(2) {
  61.   background: black;
  62.   color: yellow;
  63. }
  64. .text:nth-child(3) {
  65.   background: yellow;
  66.   color: black;
  67. }
  68. .text:nth-child(4) {
  69.   background: black;
  70.   color: yellow;
  71. }
  72. .text:nth-child(5) {
  73.   background: yellow;
  74.   color: black;
  75. }
  76. .text:nth-child(6) {
  77.   background: black;
  78.   color: yellow;
  79. }
  80. .text:hover:nth-child(odd) {
  81.   -webkit-transform: translateX(-200%);
  82.           transform: translateX(-200%);
  83. }
  84. .text:hover:nth-child(even) {
  85.   -webkit-transform: translateX(200%);
  86.           transform: translateX(200%);
  87. }
  88.  
  89.     </style>
  90.   </head>
  91.   <body>
  92.     <div class="container">  
  93.         <div class="text">You Are Retarded</div>
  94.         <div class="text">You Are Retarded</div>
  95.         <div class="text">You Are Retarded</div>
  96.         <div class="text">You Are Retarded</div>
  97.         <div class="text">You Are Retarded</div>
  98.         <div class="text">You Are Retarded</div>
  99.       </div>
  100.   </body>
  101. </html>
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