API tools faq
paste
CartoonCartoons

Sinny

CartoonCartoons
Jul 1st, 2020
96
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.04 KB | None | 0 0
raw download clone embed print report
  1. ------------ PLEASE READ -------------
  2.  
  3. ------------ PASTE INTO STYLE ----------------
  4.  
  5.  
  6.  
  7. @import url('//fonts.googleapis.com/css?family=Teko');
  8. @import url('//fonts.googleapis.com/css?family=Notable');
  9.  
  10. ::-webkit-scrollbar {width: 1px; height: 1px; background: #; }
  11. ::-webkit-scrollbar-thumb { background-color:#; }
  12.  
  13. a:link, a:visited, a:active{color: #1F0C25; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; text-decoration:none;text-shadow:1px 1px 0px #000;}
  14.  
  15. a:hover { color: #fff; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; }
  16.  
  17. h1 {color: #C3BAB6;text-align: center;font-family:'Notable', sans-serif;font-size: 25px;line-height:25px;letter-spacing:.2vw;background: -webkit-linear-gradient(#C50B42, #2D052A);
  18. -webkit-background-clip: text;
  19. -webkit-text-fill-color: transparent;}
  20.  
  21. i {color:#1F0C25;font-style: italic;}
  22. b {color:#1F0C25;font-weight: bold;}
  23.  
  24.  
  25. body{background-image: linear-gradient(to right, #8B5C90 , #000);background-repeat:repeat;overflow:hidden;-webkit-animation: fadein 5s;
  26. -moz-animation: fadein 5s;
  27. -ms-animation: fadein 5s;
  28. -o-animation: fadein 5s;
  29. animation: fadein 5s;}
  30.  
  31.  
  32. @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
  33. @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
  34. @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
  35.  
  36. @keyframes fadein {
  37. from { opacity: 0; }
  38. to { opacity: 1; }
  39. }
  40.  
  41.  
  42. @-moz-keyframes fadein {
  43. from { opacity: 0; }
  44. to { opacity: 1; }
  45. }
  46.  
  47.  
  48. @-webkit-keyframes fadein {
  49. from { opacity: 0; }
  50. to { opacity: 1; }
  51. }
  52.  
  53. @-ms-keyframes fadein {
  54. from { opacity: 0; }
  55. to { opacity: 1; }
  56. }
  57.  
  58.  
  59. @-o-keyframes fadein {
  60. from { opacity: 0; }
  61. to { opacity: 1; }
  62. }
  63.  
  64. #content {position: fixed;left: 0px;top: 0px; right: 0px; bottom: 0px;}
  65.  
  66. #switch{position:absolute;left:-100%;top:-100%;}
  67.  
  68. #switch + label {position: absolute;z-index: 4;height:150px;width:150px;left:10px;bottom:240px;background: url(https://i.imgur.com/GLjsrCZ.png);background-size: 100%;background-repeat:no-repeat;position: absolute;margin: 0;opacity: .8;transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;-ms-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;transition: all .5s ease-in-out;}
  69.  
  70. #switch + label:hover {position: absolute;z-index: 4;background: url(https://i.imgur.com/Y2ZTcOt.png);background-size: 100%;background-repeat:no-repeat;position: absolute;margin: 0;transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;-ms-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;transition: all .5s ease-in-out;}
  71.  
  72. #switch:checked + label {position:absolute;height:150px;width:150px;left:400px;bottom:240px;background: url(https://i.imgur.com/Y2ZTcOt.png);background-size: 100%;background-repeat:no-repeat;opacity:1;z-index: 25;transition: all 1.5s ease-in-out;-moz-transition: all 1.5s ease-in-out;-ms-transition: all 1.5s ease-in-out;-o-transition: all 1.5s ease-in-out;transition: all 1.5s ease-in-out;}
  73.  
  74. .smoke{position:absolute;z-index:2;background-image:url(https://www.onlygfx.com/wp-content/uploads/2018/01/black-smoke-2-927x1024.png);background-size:100%;background-repeat:no-re-eat;opacity:.6;width:800px;height:700px;bottom:0px;left:400px;}
  75.  
  76. .topbox{position:absolute;z-index:1;background-image:url(https://www.transparenttextures.com/patterns/carbon-fibre-big.png);background-color:#565179;border:2px solid #000;border-radius:5px;box-shadow:1px 1px 3px #000;opacity:0;width:490px;height:170px;bottom:430px;left:-1500px;}
  77. #switch:checked ~ .topbox{left:30px;position: absolute;z-index:2;opacity: 1;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
  78.  
  79. .topbox1{position:absolute;z-index:1;background-color:#D9CFCE;box-shadow:0px 0px 3px #D9CFCE;border-radius:5px;opacity:0;width:470px;height:150px;bottom:440px;left:-1500px;}
  80. #switch:checked ~ .topbox1{left:40px;position: absolute;z-index:3;opacity: .6;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
  81.  
  82. .tbox1{position:absolute;z-index:1;border-radius:5px;opacity:0;width:460px;height:140px;bottom:445px;left:-1500px;font-family:'Teko';font-size:18px;line-height:15px;color:#000;overflow-y:scroll;}
  83. #switch:checked ~ .tbox1{left:40px;position: absolute;z-index:3;opacity: 1;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
  84.  
  85. .leftbox{position:absolute;z-index:1;background-image:url(https://www.transparenttextures.com/patterns/carbon-fibre-big.png);background-color:#86839E;border:2px solid #000;border-radius:5px;opacity:0;width:200px;height:200px;bottom:215px;box-shadow:1px 1px 3px #000;left:-1500px;}
  86. #switch:checked ~ .leftbox{left:30px;position: absolute;z-index:2;opacity: 1;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
  87.  
  88. .leftbox1{position:absolute;z-index:1;background-color:#D9CFCE;box-shadow:0px 0px 3px #D9CFCE;border-radius:5px;opacity:0;width:180px;height:180px;bottom:225px;left:-1500px;}
  89. #switch:checked ~ .leftbox1{left:40px;position: absolute;z-index:3;opacity: .6;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
  90.  
  91. .tbox2{position:absolute;z-index:1;border-radius:5px;opacity:0;width:170px;height:170px;bottom:235px;left:-1500px;font-family:'Teko';font-size:18px;line-height:15px;color:#000;overflow-y:scroll;}
  92. #switch:checked ~ .tbox2{left:45px;position: absolute;z-index:3;opacity: 1;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
  93.  
  94. .bottombox{position:absolute;z-index:1;background-image:url(https://www.transparenttextures.com/patterns/carbon-fibre-big.png);background-color:#B7B1CD;border:2px solid #000;border-radius:5px;box-shadow:1px 1px 3px #000;opacity:0;width:490px;height:170px;bottom:30px;left:-1500px;}
  95. #switch:checked ~ .bottombox{left:30px;position: absolute;z-index:2;opacity: 1;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
  96.  
  97. .bottombox1{position:absolute;z-index:1;background-color:#D9CFCE;box-shadow:0px 0px 3px #D9CFCE;border-radius:5px;opacity:0;width:470px;height:150px;bottom:40px;left:-1500px;}
  98. #switch:checked ~ .bottombox1{left:40px;position: absolute;z-index:2;opacity: .6;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
  99.  
  100. .tbox3{position:absolute;z-index:1;border-radius:5px;opacity:0;width:460px;height:140px;bottom:45px;left:-1500px;font-family:'Teko';font-size:18px;line-height:15px;color:#000;overflow-y:scroll;}
  101. #switch:checked ~ .tbox3{left:45px;position: absolute;z-index:2;opacity: 1;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
  102.  
  103. .holder{position:absolute;opacity:0;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
  104.  
  105. #switch:checked ~ .holder{position: absolute;z-index:20;opacity: 1;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
  106.  
  107. .maintext {position:fixed;background-color:#000;width:353px;height:570px;bottom:30px;left:540px;opacity:0;z-index:1;line-height:18px;font-family:'Teko';font-size:17px;color:#1C6081;overflow-y:scroll;text-align:left;border:2px solid #000;border-radius:5px;box-shadow:1px 1px 3px #000;}
  108. .maintext:target {transition: all 1s ease-out;-webkit-transition: all 1s ease-out;-moz-transition: all 1s ease-out;-ms-transition: all 1s ease-out;-o-transition: all 1s ease-out;transition: all 1s ease-out;z-index:11;opacity:1;}
  109.  
  110. .navbar {Position:absolute;width:50px; height:50px;left:-1500px;bottom:215px;z-index:1;opacity:0;text-align:center;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
  111. #switch:checked ~ .navbar{left:250px;position: absolute;z-index:15;opacity: 1;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
  112.  
  113.  
  114. .nav1 {background-color:#000;position:absolute;background-image:url(https://i.imgur.com/DdVVSRQ.jpg);background-repeat:no-repeat;background-size:100%;background-position:50% 10%;border:2px solid #000;border-radius:5px;left:0px;bottom:0px;width:270px;height:30px;z-index:10;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}.nav1:hover {box-shadow:1px 1px 3px #000;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
  115.  
  116. .nav2 {background-color:#000;background-image:url(https://i.imgur.com/hcf7NPo.jpg);background-repeat:no-repeat;background-size:100%;background-position:50% 15%;border:2px solid #000;border-radius:5px;position:absolute;left:0px;bottom:40px;width:270px;height:30px;z-index:10;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}.nav2:hover {box-shadow:1px 1px 3px #000;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
  117.  
  118. .nav3 {background-color:#000;background-image:url(https://i.imgur.com/yYIk36A.jpg);background-repeat:no-repeat;background-size:100%;background-position:50% 20%;border:2px solid #000;border-radius:5px;position:absolute;left:0px;bottom:83px;width:270px;height:30px;z-index:10;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}.nav3:hover {box-shadow:1px 1px 3px #000;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
  119.  
  120. .nav4 {background-color:#000;background-image:url(https://i.imgur.com/I8qW2hY.jpg);background-repeat:no-repeat;background-size:100%;background-position:50% 10%;border:2px solid #000;border-radius:5px;position:absolute;left:0px;bottom:129px;width:270px;height:30px;z-index:10;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}.nav4:hover {box-shadow:1px 1px 3px #000;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
  121.  
  122. .nav5 {background-color:#000;background-image:url(https://i.imgur.com/6JtYSYf.jpg);background-repeat:no-repeat;background-size:100%;background-position:50% 15%;border:2px solid #000;border-radius:5px;position:absolute;left:0px;bottom:170px;width:270px;height:30px;z-index:10;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}.nav5:hover {box-shadow:1px 1px 3px #000;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
  123.  
  124.  
  125. .credit{bottom:0vw;left:96vw;width: 5vw;height: 6vw;opacity: 1;overflow: hidden;position: fixed;}
  126.  
  127. ---------- END STYLE------------
  128.  
  129.  
  130. -----------PASTE INTO BODY-------------
  131.  
  132.  
  133.  
  134. <div id="content" >
  135. <input type="checkbox" name="toggle" id="switch" /><label for="switch"></label>
  136.  
  137. <div class="smoke"></div>
  138. <div class="topbox"></div><div class="leftbox"></div><div class="bottombox"></div><div class="topbox1"></div><div class="leftbox1"></div><div class="bottombox1"></div>
  139.  
  140. <div class="tbox1">
  141.  
  142. <h1>title</h1>
  143.  
  144. this is normal text
  145. <i>italics</i> - <b>bold</b><bR>
  146. <a href="" target="_Blank">This is a link</a><br>
  147. </div>
  148.  
  149. <div class="tbox2">
  150.  
  151. <h1>title</h1>
  152.  
  153. this is normal text
  154. <i>italics</i> - <b>bold</b><bR>
  155. <a href="" target="_Blank">This is a link</a><br>
  156. </div>
  157.  
  158. <div class="tbox3">
  159.  
  160. <h1>title</h1>
  161.  
  162. this is normal text
  163. <i>italics</i> - <b>bold</b><bR>
  164. <a href="" target="_Blank">This is a link</a><br>
  165. Profile coded by <a target="_blank" href="https://roleplay.chat/profile.php?user=ReverieStyles" target="_blank">RStyles</a>. Hit them up if you're interested in a code.
  166. </div>
  167.  
  168. <div class="holder">
  169. <div id="01" class="maintext"><img src="https://i.imgur.com/DdVVSRQ.jpg" width="100%">
  170. </div>
  171. <div id="02" class="maintext"><img src="https://i.imgur.com/hcf7NPo.jpg" width="100%" height="100%">
  172. </div>
  173. <div id="03" class="maintext"><img src="https://i.imgur.com/yYIk36A.jpg" width="100%" height="100%">
  174. </div>
  175. <div id="04" class="maintext"><img src="https://i.imgur.com/I8qW2hY.jpg" width="100%">
  176. </div>
  177. <div id="05" class="maintext"><img src="https://i.imgur.com/6JtYSYf.jpg" width="100%" height="100%">
  178. </div>
  179.  
  180. </div>
  181.  
  182. <div class="navbar">
  183. <a class="nav1" href="#01"></a><a class="nav2" href="#02"></a><a class="nav3" href="#03"></a><a class="nav4" href="#04"></a><a class="nav5" href="#05"></a></div>
  184. </div>
  185.  
  186.  
  187. <div class="credit"><a target="_blank" href="https://roleplay.chat/profile.php?user=ReverieStyles" target="_blank"><img src="https://i.imgur.com/fgKTyd3.png" width="100%"></a>
Add Comment
Please, Sign In to add comment
Public Pastes
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!