Advertisement
CartoonCartoons

celestebbbbb

Jul 28th, 2020
197
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.45 KB | None | 0 0
  1. --------- STYLE ----------
  2.  
  3. @import url('//fonts.googleapis.com/css?family=Original Surfer');
  4. @import url('//fonts.googleapis.com/css?family=Ruge Boogie');
  5. @import url('//fonts.googleapis.com/css?family=Sevillana');
  6. @import url('//fonts.googleapis.com/css?family=Codystar');
  7.  
  8. @import url('//fonts.googleapis.com/css?family=Indie Flower');
  9.  
  10. ::-webkit-scrollbar {width: .3vw; height: 1vw; background: #; }
  11. ::-webkit-scrollbar-thumb { background-color:#; border-radius:5vw;}
  12.  
  13. a:link, a:visited, a:active{color: #E2C7FF; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out;}
  14.  
  15. a:hover { color: #D189FF; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; }
  16.  
  17. h1 {color: #D8973B;text-align: center;font-family:'Indie Flower', sans-serif;font-size: 25px;line-height:20px;}
  18.  
  19. i {color:#DE6072;font-style: italic;text-shadow: 2px 0 0 #B43141, -2px 0 0 #B43141, 0 2px 0 #B43141, 0 -2px 0 #B43141, 1px 1px #B43141, -1px -1px 0 #B43141, 1px -1px 0 #B43141, -1px 1px 0 #B43141;}
  20.  
  21. b {color:#DE6072;font-style: bold;text-shadow: 2px 0 0 #B43141, -2px 0 0 #B43141, 0 2px 0 #B43141, 0 -2px 0 #B43141, 1px 1px #B43141, -1px -1px 0 #B43141, 1px -1px 0 #B43141, -1px 1px 0 #B43141;}
  22.  
  23. body{overflow:hidden;background-image: linear-gradient(#0D1927, #304B68, #8092A6, #E6ABC1, #D09EB2, #DEC3E5);background-position:0% 100%;}
  24.  
  25. @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
  26. @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
  27. @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
  28.  
  29. @-webkit-keyframes action {0% { transform: translateY(0); }100% { transform: translateY(-10px); }}
  30. @keyframes action {0% { transform: translateY(0); }100% { transform: translateY(-10px); }}
  31.  
  32. .tooltip {padding:1px;
  33. position: relative;
  34. display: inline-block;
  35. color:#DBDAFD;
  36. text-shadow: 2px 0 0 #314151, -2px 0 0 #314151, 0 2px 0 #314151, 0 -2px 0 #314151, 1px 1px #314151, -1px -1px 0 #314151, 1px -1px 0 #314151, -1px 1px 0 #314151;
  37. 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;}
  38.  
  39. .tooltip:hover{
  40. position: relative;
  41. display: inline-block;
  42. color:#fff;
  43. 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;
  44. }
  45.  
  46. .tooltip .tooltiptext {
  47. visibility: hidden;
  48. background-color:#DBDAFD;box-shadow:2px 2px 1px #314151;
  49. width:80px;
  50. padding:0px 0px;
  51. color: #000000;text-shadow:0px 0px 0px #fff;
  52. font-size:18px;
  53. text-align: center;
  54. border-radius: 5px;
  55. position: absolute;
  56. z-index: 1;
  57. top: 95%;
  58. left: 50%;
  59. margin-left:-40px;}
  60.  
  61. .tooltip .tooltiptext {
  62. opacity: 0;
  63. 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;
  64. }
  65.  
  66. .tooltip:hover .tooltiptext {
  67. opacity: 1;
  68. 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.  
  71. .tooltip:hover .tooltiptext {
  72. visibility: visible;
  73. }
  74.  
  75. a.tip {
  76. text-decoration: none;}
  77.  
  78. a.tip:hover {
  79. cursor: help;
  80. position: relative;}
  81.  
  82. a.tip span {
  83. display: none;}
  84.  
  85. a.tip:hover span {
  86. border: #334454 2px solid;
  87. padding: 5px 20px 5px 5px;
  88. display: block;
  89. z-index: 100;
  90. background: #DBDAFD no-repeat 100% 5%;
  91. left: 70px;
  92. width: 150px;
  93. color:#314151;
  94. font-family:'teko';
  95. font-size:15px;
  96. height:50px;
  97. position: absolute;
  98. top: -50px;
  99. text-decoration: none;
  100. border-radius:10px;
  101. opacity:1;}
  102.  
  103. .celeste{position:absolute;background-image:url(http://i.picpar.com/1pJe.png);background-size:100%;background-repeat:no-repeat;width:400px;height:500px;bottom:0px;left:0px;z-index:2;}
  104.  
  105. .overlay{position:absolute;left:0px;bottom:0px;width:100%; height:100%;background-image:url(https://www.transparenttextures.com/patterns/asfalt-light.png);z-index:2;}
  106.  
  107. #content {position: fixed;left: 0px;top: 0px; right: 0px; bottom: 0px;}
  108.  
  109. #switch{position:absolute;left:-100%;top:-100%;}
  110.  
  111. #switch + label {position: absolute;z-index: 4;height:65px;width:65px;left:110px;bottom:387px;background: url(http://i.picpar.com/2pJe.png);background-size: 100%;background-repeat:no-repeat;position: absolute;margin: 0;opacity: 1;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;cursor: help;}
  112.  
  113. #switch + label:hover {position: absolute;z-index: 4;background: url(http://i.picpar.com/2pJe.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;-webkit-animation:spin 5s linear infinite;-moz-animation:spin 5s linear infinite;
  114. animation:spin 5s linear infinite;}
  115.  
  116. #switch:checked + label {position:absolute;height:65px;width:65px;left:108px;bottom:389px;background: url(http://i.picpar.com/2pJe.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;cursor: help;-webkit-animation:spin 5s linear infinite;-moz-animation:spin 5s linear infinite;
  117. animation:spin 5s linear infinite;}
  118.  
  119. .box{position:absolute;width:0px;height:360px;bottom:10px;left:280px;border-left:3px solid #354656;border-radius:10px;color:#334454;background-color:#BFAAC9;opacity:1;z-index:1;background-image:url(https://www.nicepng.com/png/full/408-4083349_report-abuse-space-stars-png-transparent.png);background-size:cover;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;}
  120. #switch:checked ~ .box{width:600px;position: absolute;z-index:1;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;}
  121.  
  122. .banner{position:absolute;background-image:url(https://i.redd.it/atld4xbdnyv41.jpg);width:170px;height:290px;background-size:100%;left:80px;bottom:70px;opacity:0;z-index:1;border-radius:5px;box-shadow:0px 0px 5px #CBE5EE;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;}
  123. #switch:checked ~ .banner{left:700px;position: absolute;z-index:4;opacity: .7;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;}
  124.  
  125. .title{position:absolute;z-index:1;left:80px;width:500px;bottom:10px;font-size:60px;line-height:60px;font-family:'Sevillana';text-align:center;background-position:10% 10%;background-image:url(https://thumbs.gfycat.com/AnimatedDeficientAlleycat-size_restricted.gif);-webkit-background-clip: text; -webkit-text-fill-color: transparent;-webkit-transition: all 1s;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;letter-spacing:3px;}
  126. #switch:checked ~ .title{left:230px;width:500px;position: absolute;z-index:4;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;}
  127.  
  128. .titlea{position:absolute;z-index:1;left:80px;width:500px;bottom:10px;font-size:60px;line-height:60px;font-family:'Sevillana';text-align:center;-webkit-transition: all 1s;opacity:1;text-shadow: 2px 0 0 #DBC3E7, -2px 0 0 #DBC3E7, 0 2px 0 #DBC3E7, 0 -2px 0 #DBC3E7, 1px 1px #DBC3E7, -1px -1px 0 #DBC3E7, 1px -1px 0 #DBC3E7, -1px 1px 0 #DBC3E7;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;letter-spacing:3px;}
  129. #switch:checked ~ .titlea{left:230px;width:500px;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;}
  130.  
  131. .titleb{position:absolute;z-index:1;left:80px;width:500px;bottom:10px;font-size:60px;line-height:60px;font-family:'Sevillana';text-align:center;-webkit-transition: all 1s;opacity:1;text-shadow: 0px 0px 10px #fff;opacity:0;letter-spacing:3px;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;}
  132. #switch:checked ~ .titleb{left:230px;width:500px;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;}
  133.  
  134. .title2{position:absolute;z-index:1;left:80px;width:500px;bottom:8px;font-size:60px;line-height:60px;font-family:'Ruge Boogie';text-align:center;-webkit-transition: all 1s;opacity:0;background-position:70% 0%;background-image:url(https://thumbs.gfycat.com/AnimatedDeficientAlleycat-size_restricted.gif);-webkit-background-clip: text; -webkit-text-fill-color: transparent;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;}
  135. #switch:checked ~ .title2{left:500px;width:500px;position: absolute;z-index:4;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;}
  136.  
  137. .title2a{position:absolute;z-index:1;opacity:0;left:80px;width:500px;bottom:8px;font-size:60px;line-height:60px;font-family:'Ruge Boogie';text-align:center;text-shadow: 2px 0 0 #DBC3E7, -2px 0 0 #DBC3E7, 0 2px 0 #DBC3E7, 0 -2px 0 #DBC3E7, 1px 1px #DBC3E7, -1px -1px 0 #DBC3E7, 1px -1px 0 #DBC3E7, -1px 1px 0 #DBC3E7;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;}
  138. #switch:checked ~ .title2a{left:500px;width:500px;position: absolute;z-index:3;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;}
  139.  
  140. .title2b{position:absolute;z-index:1;opacity:0;left:80px;width:500px;bottom:8px;font-size:60px;line-height:60px;font-family:'Ruge Boogie';text-align:center;-webkit-transition: all 1s;text-shadow: 0px 0px 10px #fff;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;}
  141. #switch:checked ~ .title2b{left:500px;width:500px;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;}
  142.  
  143. .title3{position:absolute;z-index:1;opacity:1.7;left:85px;width:500px;bottom:390px;font-size:30px;line-height:60px;font-family:'Codystar';text-align:center;-webkit-transition: all 1s;font-style:italic;color:#B8D6F2;text-shadow: 0px 0px 5px #fff;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;}
  144. #switch:checked ~ .title3{position: absolute;z-index:2;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;}
  145.  
  146. #tab1,#tab2,#tab3,#tab4,#tab5{opacity:0;}
  147.  
  148. #tabbed1,#tabbed2,#tabbed3,#tabbed4,#tabbed5{opacity: 0;position: absolute;transition: all 1s;-webkit-transition: all 1s;background-color:#;color:#C8CFFF;text-shadow:1px 1px 1px #8991FF;font-family:'Original Surfer', sans-serif;font-size: 15px;line-height: 18px;width:260px;height:190px;overflow-y:scroll;}
  149.  
  150. #Tab1:checked ~ #topt #tabbed1,
  151. #Tab2:checked ~ #topt #tabbed2,
  152. #Tab3:checked ~ #topt #tabbed3,
  153. #Tab4:checked ~ #topt #tabbed4,
  154. #Tab5:checked ~ #topt #tabbed5{width:260px;opacity: 1;z-index:10;}
  155.  
  156. #Tab1:checked ~ .textb,#Tab1:checked ~ .textb{
  157. width:280px;opacity:.4;z-index:5;transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
  158.  
  159. #Tab2:checked ~ .textb2,#Tab2:checked ~ .textb2{
  160. width:280px;opacity:.4;z-index:5;transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
  161.  
  162. #Tab3:checked ~ .textb3,#Tab3:checked ~ .textb3{
  163. width:280px;opacity:.4;z-index:5;transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
  164.  
  165. #Tab4:checked ~ .textb4,#Tab4:checked ~ .textb4{
  166. width:280px;opacity:.4;z-index:5;transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
  167.  
  168. .holder{position:absolute;z-index:4;opacity:0;left:-1000px;bottom:0px;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;}
  169. #switch:checked ~ .holder{left:0px;z-index:10;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;}
  170.  
  171. .button{background:url(http://i.picpar.com/mpJe.gif);background-size:100%;height:70px;
  172. Width:70px;position:absolute;opacity:1;z-index:10;left:370px;bottom:290px;transition: all .5s ease-in-out;-webkit-animation: action 1.5s infinite alternate;animation: action 1.5s infinite alternate;}
  173. .button:hover{background-image:url(http://i.picpar.com/npJe.gif);}
  174.  
  175. .button2{background:url(http://i.picpar.com/npJe.gif);background-size:100%;height:70px;
  176. Width:70px;position:absolute;opacity:1;z-index:10;left:450px;bottom:290px;transition: all .5s ease-in-out;-webkit-animation: action 1s infinite alternate;animation: action 1s infinite alternate;}
  177. .button2:hover{background-image:url(http://i.picpar.com/mpJe.gif);}
  178.  
  179. .button3{background:url(http://i.picpar.com/mpJe.gif);background-size:100%;height:70px;
  180. Width:70px;position:absolute;opacity:1;z-index:10;left:530px;bottom:290px;transition: all .5s ease-in-out;-webkit-animation: action 1.5s infinite alternate;animation: action 1.5s infinite alternate;}
  181. .button3:hover{background-image:url(http://i.picpar.com/npJe.gif);}
  182.  
  183. .button4{background:url(http://i.picpar.com/npJe.gif);background-size:100%;height:70px;
  184. Width:70px;position:absolute;opacity:1;z-index:10;left:610px;bottom:290px;transition: all .5s ease-in-out;-webkit-animation: action 1s infinite alternate;animation: action 1s infinite alternate;}
  185. .button4:hover{background-image:url(http://i.picpar.com/mpJe.gif);}
  186.  
  187. .button5{background:url(http://i.picpar.com/qpJe.png);background-size:100%;height:70px;
  188. Width:70px;position:absolute;opacity:1;z-index:10;left:570px;bottom:5px;transition: all .5s ease-in-out;}
  189. .button5:hover{-webkit-animation:spin 5s linear infinite;-moz-animation:spin 5s linear infinite;
  190. animation:spin 5s linear infinite;}
  191.  
  192. #topt{width:260px;height:190px;left:410px;bottom:90px;position:absolute;border-radius:5px;}
  193.  
  194. #topt{opacity: 1; transition: all 1s; -webkit-transition: all 1s;}
  195.  
  196. #topt{opacity: 0; transition: all 1s; -webkit-transition: all 1s;}
  197.  
  198. #switch:checked ~ #topt{opacity: 1;}
  199.  
  200. .textb,.textb2,.textb3,.textb4{position:absolute;width:0px;height:210px;opacity:0;left:400px;bottom:80px;border-radius:5px;z-index: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;}
  201. #switch:checked ~ .textb,.textb2,.textb3,.textb4{background-color:#C6CEFF;box-shadow:0px 0px 5px #C6CEFF;position: absolute;z-index:2;opacity: .4;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;}
  202.  
  203. .credit{bottom:0vw;left:96vw;width: 5vw;height: 6vw;opacity: 1;overflow: hidden;position: fixed;z-index:100;}
  204.  
  205. ------------- END STYLE----------
  206.  
  207.  
  208. ---------- PLACE IN BODY -----------
  209.  
  210.  
  211. <div id="content" >
  212. <input type="checkbox" name="toggle" id="switch" /><label for="switch"></label>
  213.  
  214.  
  215. <input type="radio" name="HubSwitch" id="Tab1">
  216. <input type="radio" name="HubSwitch" id="Tab2">
  217. <input type="radio" name="HubSwitch" id="Tab3">
  218. <input type="radio" name="HubSwitch" id="Tab4">
  219. <input type="radio" name="HubSwitch" id="Tab5">
  220.  
  221. <div class="celeste"></div>
  222. <div class="overlay"></div>
  223. <div class="title">Celeste </div>
  224. <div class="titlea">Celeste </div>
  225. <div class="titleb">Celeste </div>
  226. <div class="title2">hootie hoot!</div><div class="title2a">hootie hoot!</div><div class="title2b">hootie hoot!</div>
  227. <div class="title3">follow the stars</div>
  228. <div class="box"></div>
  229. <div class="banner"></div>
  230. <div class="textb"></div><div class="textb2"></div><div class="textb3"></div><div class="textb4"></div>
  231.  
  232. <div id="topt">
  233. <div id="tabbed1">
  234. this is normal text<bR>
  235. <i>italics</i> - <b>bold</b><br>
  236. <a href="" target="_blank">link</a><bR>
  237.  
  238. star in between the titles below reset the tabs. reclick the spinning star to reset the whole profile.
  239. </div>
  240.  
  241. <div id="tabbed2">
  242. text goes here help 2
  243. </div>
  244.  
  245. <div id="tabbed3">
  246. text goes here help 3
  247. </div>
  248.  
  249. <div id="tabbed4">
  250. 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.
  251. </div>
  252.  
  253. </div>
  254.  
  255. <div class="holder">
  256. <label for="Tab1"><div class="button"></div></label>
  257. <label for="Tab2"><div class="button2"></div></label>
  258. <label for="Tab3"><div class="button3"></div></label>
  259. <label for="Tab4"><div class="button4"></div></label>
  260. <label for="Tab5"><div class="button5"></div></label>
  261. </div>
  262.  
  263. <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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement