SHARE
TWEET

Untitled

a guest Oct 23rd, 2019 79 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <style>
  2.  #bitch{position:absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;}
  3.  
  4. @font-face {
  5.   font-family: "Skywalker";
  6.   src: url('https://dl.dropboxusercontent.com/s/lnjs9z8olojzmpv/Skywalker_alt.ttf?dl=0');
  7.   format("truetype");
  8. }
  9. ::-webkit-scrollbar {
  10.  display:none}
  11.  
  12. ::-webkit-scrollbar-thumb:vertical {
  13.  height: 0px;
  14.  background-color: #000;
  15.  border:3px solid #313136;}
  16.  
  17. ::-webkit-scrollbar-button:start:decrement,
  18. ::-webkit-scrollbar-button:end:increment {
  19.  height: 0px;
  20.  display: block;
  21.  background-color: #313136;}
  22.  
  23. ::-webkit-scrollbar-track-piece {
  24.  background-color: #313136;}
  25.  
  26. ::selection {
  27. color: #ccc;
  28. background: #000;}
  29.  
  30. a {
  31. color: #6cc2ec;
  32. font-weight: bold;
  33. text-decoration: none;
  34. -webkit-transition-duration: 0.8s;
  35. -moz-transition-duration: 0.8s;
  36. -ms-transition-duration: 0.8s;
  37. -o-transition-duration: 0.8s;
  38. transition-duration: 0.8s;
  39. }
  40.  
  41. a:hover {
  42. text-decoration: line-through;
  43. text-shadow: 4px 0px 8px #000, 0px 4px 8px #000, -4px 0px 8px #000, 0px -4px 8px #000;
  44. }
  45.  
  46. b {
  47. color: #fa8484;
  48. font-family: 'Gallow Tree';
  49. text-transform: uppercase;
  50. font-size:18px;
  51. letter-spacing: 0;
  52. font-weight:1;
  53. }
  54.  
  55. h1 {
  56.  background: url(https://i.imgur.com/cCqp22b.gif);
  57.  background-position: center;
  58.  background-size: cover;
  59.  margin-top: -1px;
  60.  line-height: 1.3vw;
  61.  font-size: 25px;
  62.  font-family: 'Cinzel';
  63.  text-align: center;
  64.  border: 3px solid #111;
  65.  color: #5c87cc;
  66. }
  67.  
  68. .particle {
  69.  width: 5px;
  70.  height: 5px;
  71.  border-radius: 50%;
  72.  box-shadow: 0px 0px 15px #fff;
  73.  background: #fff;
  74.  opacity: .5;
  75.  z-index: 10;
  76. }
  77.  
  78. @-webkit-keyframes particle-glow {
  79.  0% {
  80.  opacity: 1;
  81.  }
  82.  25% {
  83.  opacity: .5;
  84.  }
  85.  50% {
  86.  opacity: 0;
  87.  }
  88.  75% {
  89.  opacity: .5;
  90.  }
  91.  75% {
  92.  opacity: 1;
  93.  }
  94.  100% {
  95.  opacity: .5;
  96.  }
  97. }
  98.  
  99. @keyframes particle-glow {
  100.  0% {
  101.  opacity: 1;
  102.  }
  103.  25% {
  104.  opacity: .5;
  105.  }
  106.  50% {
  107.  opacity: 0;
  108.  }
  109.  75% {
  110.  opacity: .5;
  111.  }
  112.  75% {
  113.  opacity: 1;
  114.  }
  115.  100% {
  116.  opacity: .5;
  117.  }
  118. }
  119.  
  120. @-webkit-keyframes particle-fall {
  121.  0% {
  122.  top: -10%
  123.  }
  124.  100% {
  125.  top: 100%
  126.  }
  127. }
  128.  
  129. @-webkit-keyframes particle-shake {
  130.  0% {
  131.  -webkit-transform: translateX(0px);
  132.  transform: translateX(0px)
  133.  }
  134.  50% {
  135.  -webkit-transform: translateX(80px);
  136.  transform: translateX(80px)
  137.  }
  138.  100% {
  139.  -webkit-transform: translateX(0px);
  140.  transform: translateX(0px)
  141.  }
  142. }
  143.  
  144. @keyframes particle-fall {
  145.  0% {
  146.  top: -10%
  147.  }
  148.  100% {
  149.  top: 100%
  150.  }
  151. }
  152.  
  153. @keyframes particle-shake {
  154.  0% {
  155.  transform: translateX(0px)
  156.  }
  157.  50% {
  158.  transform: translateX(80px)
  159.  }
  160.  100% {
  161.  transform: translateX(0px)
  162.  }
  163. }
  164.  
  165. .particle {
  166.  position: fixed;
  167.  top: -10%;
  168.  z-index: 9999;
  169.  -webkit-animation-name: particle-fall, particle-shake, particle-glow;
  170.  -webkit-animation-duration: 10s, 3s, 4s;
  171.  -webkit-animation-timing-function: linear, ease-in-out;
  172.  -webkit-animation-iteration-count: infinite, infinite;
  173.  -webkit-animation-play-state: running, running;
  174.  animation-name: particle-fall, particle-shake, particle-glow;
  175.  animation-duration: 10s, 3s, 4s;
  176.  animation-timing-function: linear, ease-in-out;
  177.  animation-iteration-count: infinite, infinite;
  178.  animation-play-state: running, running
  179. }
  180.  
  181. .particle:nth-of-type(0) {
  182.  left: 1%;
  183.  -webkit-animation-delay: 0s, 0s;
  184.  animation-delay: 0s, 0s
  185. }
  186.  
  187. .particle:nth-of-type(1) {
  188.  left: 1%;
  189.  -webkit-animation-delay: 1s, 1s;
  190.  animation-delay: 1s, 1s
  191. }
  192.  
  193. .particle:nth-of-type(2) {
  194.  left: 9.3%;
  195.  -webkit-animation-delay: 6.6s, 5.9s;
  196.  animation-delay: 6.6s, 5.9s
  197. }
  198.  
  199. .particle:nth-of-type(3) {
  200.  left: 14.6%;
  201.  -webkit-animation-delay: 4s, 2s;
  202.  animation-delay: 4s, 2s
  203. }
  204.  
  205. .particle:nth-of-type(4) {
  206.  left: 22.9%;
  207.  -webkit-animation-delay: 2s, .2s;
  208.  animation-delay: 2s, .2s
  209. }
  210.  
  211. .particle:nth-of-type(5) {
  212.  left: 33.2%;
  213.  -webkit-animation-delay: 6.7s, 6.3s;
  214.  animation-delay: 6.7s, 6.3s
  215. }
  216.  
  217. .particle:nth-of-type(6) {
  218.  left: 41.5%;
  219.  -webkit-animation-delay: 9s, 8.9s;
  220.  animation-delay: 9s, 8.9s
  221. }
  222.  
  223. .particle:nth-of-type(7) {
  224.  left: 49.8%;
  225.  -webkit-animation-delay: 2.8s, 2.7s;
  226.  animation-delay: 2.8s, 2.7s
  227. }
  228.  
  229. .particle:nth-of-type(8) {
  230.  left: 58.1%;
  231.  -webkit-animation-delay: 10.2s, 9.90s;
  232.  animation-delay: 10.2s, 9.90s
  233. }
  234.  
  235. .particle:nth-of-type(9) {
  236.  left: 66.3%;
  237.  -webkit-animation-delay: 3.5s, 1.5s;
  238.  animation-delay: 3.5s, 1.5s
  239. }
  240. .particle:nth-of-type(10) {
  241.  left: 74.5%;
  242.  -webkit-animation-delay: 4.7s, .5s;
  243.  animation-delay: 4.7s, .5s
  244. }
  245. .particle:nth-of-type(11) {
  246.  left: 84%;
  247.  -webkit-animation-delay: 8.4s, 3.5s;
  248.  animation-delay: 8.4s, 3.5s
  249. }
  250. .particle:nth-of-type(12) {
  251.  left: 90%;
  252.  -webkit-animation-delay: 5.8s, 5.7s;
  253.  animation-delay: 5.8s, 5.7s
  254. }
  255.  
  256. body{
  257.  overflow: hidden;
  258.  background-repeat: repeat;
  259.  background-attachment: fixed;
  260.  background: linear-gradient(#c779c7, #fa8484);
  261. }
  262.  
  263. .box {
  264.  position: absolute;
  265.  bottom: 0px;
  266.  right: 0px;
  267.  width: 600px;
  268.  height: 300px;
  269.  background-color: #212121;
  270.  z-index: 2;
  271. }
  272.  
  273. .boxborder {
  274.  position: absolute;
  275.  bottom: 10px;
  276.  right: 0px;
  277.  width: 600px;
  278.  height: 300px;
  279.  background-color: black;
  280.  z-index: 1;
  281.  opacity: 0.5;
  282. }
  283.  
  284. .cerule {
  285.  position:absolute;
  286.  bottom:-111px;
  287.  right:400px;
  288.  height:700px;
  289.  width: 800px;
  290.  background-image: url('http://i.picpar.com/bH2d.png');
  291.  transform: scaleX(-1);
  292.  background-size: cover;
  293.  z-index: 3;
  294. }
  295.  
  296. .icon{
  297.  position: absolute;
  298.  bottom: 5px;
  299.  right: 390px;
  300.  height: 180px;
  301.  width: 80px;
  302.  background-image: url('http://i.picpar.com/f2Jd.png');
  303.  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  304.  background-attachment: absolute;
  305.  background-size: cover;
  306.  background-position: -50px;
  307.  z-index: 3;
  308.  filter: grayscale(100%);
  309.   transition: 1s ease-in-out;
  310. }
  311.  
  312. .icon2{
  313.  position: absolute;
  314.  bottom: 95px;
  315.  right: 435px;
  316.  height: 180px;
  317.  width: 80px;
  318.  background-image: url('http://i.picpar.com/C2Jd.png');
  319.  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  320.  background-attachment: absolute;
  321.  background-size: cover;
  322.  background-position: 0px;
  323.  z-index: 3;
  324.  filter: grayscale(100%);
  325.  transition: 1s ease-in-out;
  326. }
  327.  
  328. .icon3{
  329.  position: absolute;
  330.  bottom: 5px;
  331.  right: 480px;
  332.  height:180px;
  333.  width: 80px;
  334.  background-image: url('http://i.picpar.com/D2Jd.png');
  335.  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  336.  background-attachment: absolute;
  337.  background-size: cover;
  338.  background-position: 0px;
  339.  z-index: 3;
  340.  filter: grayscale(100%);
  341.  transition: 1s ease-in-out;
  342. }
  343.  
  344. .icon:hover {
  345.  filter: grayscale(0%);
  346. }
  347.  
  348. .icon2:hover {
  349.  filter: grayscale(0%);
  350. }
  351.  
  352. .icon3:hover {
  353.  filter: grayscale(0%);
  354. }
  355.  
  356. .text{
  357.  position: absolute;
  358.  bottom: 20px;
  359.  right: 30px;
  360.  height: 250px;
  361.  width: 330px;
  362.  color: white;
  363.  font-family: Copperplate, "Copperplate Gothic Light";
  364.  font-size: 12px;
  365.  color: #fff;
  366.  padding: 0px;
  367.  opacity: 0;
  368.  z-index: 5;
  369.  transition: 1s ease-in;
  370. }
  371.  
  372. .text:target {
  373.  opacity: 1;
  374.  z-index: 5;
  375.  }
  376.  
  377. .title {
  378.  position: absolute;
  379.  bottom: 230px;
  380.  right: -5px;
  381.  font-family: 'Skywalker';
  382.  letter-spacing: 10px;
  383.  font-size: 100px;
  384.  padding: 40px;
  385.  filter: drop-shadow(0px 00px 10px #fff);
  386.  background: -webkit-linear-gradient(right, #eee, #79e9ff);
  387.   -webkit-background-clip: text;
  388.   -webkit-text-fill-color: transparent;
  389.   z-index: 5;
  390. }
  391.  
  392. </style>
  393.  
  394. <link href="https://www.themonster.xyz/styles/fancy-fonts.css" rel="stylesheet">
  395.  
  396. <div id="bitch" oncontextmenu="return false;"></div>
  397.  
  398. <div class="particles">
  399. <div class="particle"></div>
  400. <div class="particle"></div>
  401. <div class="particle"></div>
  402. <div class="particle"></div>
  403. <div class="particle"></div>
  404. <div class="particle"></div>
  405. <div class="particle"></div>
  406. <div class="particle"></div>
  407. <div class="particle"></div>
  408. <div class="particle"></div>
  409. <div class="particle"></div>
  410. <div class="particle"></div>
  411. </div>
  412.  
  413.  
  414.  
  415. <div class="title">Cerule</div>
  416.  
  417. <div class="box"></div>
  418. <div class="boxborder"></div>
  419. <div class="cerule"></div>
  420.  
  421. <div class="icon"></div>
  422. <div class="icon2"></div>
  423. <div class="icon3"></div>
  424.  
  425. <a class='icon' href='#1'></a>
  426. <a class='icon2' href='#2'></a>
  427. <a class='icon3' href='#3'></a>
  428.  
  429. <div class='text' div id='1'>
  430. test
  431. </div></div>
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