Guest User

Untitled

a guest
Sep 17th, 2019
132
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