API tools faq
paste
CartoonCartoons

project

CartoonCartoons
Jul 13th, 2024
191
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.41 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. @import url('//fonts.googleapis.com/css?family=Yesteryear');
  3. @import url('//fonts.googleapis.com/css?family=Aladin');
  4. @import url('//fonts.googleapis.com/css?family=Audiowide');
  5. @import url('//fonts.googleapis.com/css?family=Teko');
  6.  
  7. body{overflow:hidden;background-image:url(https://64.media.tumblr.com/9129bd384b7e0ecf6fd5d3b9070e2d3e/2dfdaa3dd905833e-d1/s1280x1920/75009ef3c3fbaee6d770259038122e13786294a9.png);background-size:100%;}
  8.  
  9. ::-webkit-scrollbar {width: .2vw; height: .1vw; background: #; }
  10. ::-webkit-scrollbar-thumb { background-color:#62A383; box-shadow:0vw 0vw .2vw #000; border-radius:.2vw;}
  11.  
  12. h1{font-family:'Audiowide';line-height:1.7vw;font-size:2.5vw;color:#D2EEA0;border-bottom:.2vw solid #8EC195;text-shadow: 2px 0 0 #8EC195, -2px 0 0 #8EC195, 0 2px 0 #8EC195, 0 -2px 0 #8EC195, 1px 1px #8EC195, -1px -1px 0 #8EC195, 1px -1px 0 #8EC195, -1px 1px 0 #8EC195;text-align:center;}
  13.  
  14. i{font-style:italic;color:#83CF60;text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;}
  15.  
  16. b{font-weight:bold;color:#609B7B;text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;}
  17.  
  18. a:link, a:visited, a:active{ -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out;color:#D2EEA0;text-shadow: 2px 0 0 #5C8559, -2px 0 0 #5C8559, 0 2px 0 #5C8559, 0 -2px 0 #5C8559, 1px 1px #5C8559, -1px -1px 0 #5C8559, 1px -1px 0 #5C8559, -1px 1px 0 #5C8559;}
  19.  
  20. a:hover { color:#8EC195;text-shadow: 2px 0 0 #5C8559, -2px 0 0 #5C8559, 0 2px 0 #5C8559, 0 -2px 0 #5C8559, 1px 1px #5C8559, -1px -1px 0 #5C8559, 1px -1px 0 #5C8559, -1px 1px 0 #5C8559; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; }
  21.  
  22. #N{position:absolute;background-image:url(https://i.imgur.com/kVjswRJ.png);background-size:95%;background-repeat:no-repeat;left:1vw;bottom:0vw;height:49vw;width:50vw;z-index:1;}
  23.  
  24. .border{position:absolute;width:100%;height:1.5vw;left:0vw;bottom:1.4vw;background-color:#f9accb;box-shadow:0vw 0vw 1vw #fff;z-index:2;}
  25.  
  26. .title{position:absolute;font-family:'Yesteryear';font-size:5vw;background: -webkit-linear-gradient(#f9accb, #6e95b6);
  27. -webkit-background-clip: text;
  28. -webkit-text-fill-color: transparent;left:22vw;bottom:.5vw;z-index:4;}
  29. .titleshadow{position:absolute;font-family:'Yesteryear';font-size:5vw;color:#fff;text-shadow:0vw 0vw .2vw #fff;left:22vw;bottom:0.5vw;z-index:3;}
  30.  
  31. .title2{position:absolute;font-family:'Yesteryear';font-size:2.6vw;background: -webkit-linear-gradient(#000, #000);
  32. -webkit-background-clip: text;
  33. -webkit-text-fill-color: transparent;left:.0vw;bottom:0vw;width:100%;z-index:4;}
  34. .title2shadow{position:absolute;font-family:'Yesteryear';font-size:2.6vw;color:#000;text-shadow:0vw 0vw .2vw #000;left:0vw;bottom:0vw;z-index:3;width:100%;}
  35.  
  36. .navbar {Position:absolute;left:1vw;bottom:5vw;z-index:5;opacity:1;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;}
  37.  
  38. .nav1 {position:absolute;background-color:#EAFCCC;box-shadow:0vw 0vw .2vw #fff;left:0vw;opacity:1;bottom:0vw;width:1.5vw;height:3vw;border-radius:.3vw;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 {height:4.5vw;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
  39.  
  40. .nav2 {position:absolute;background-color:#EAFCCC;box-shadow:0vw 0vw .2vw #fff;left:2.5vw;opacity:1;bottom:0vw;width:1.5vw;height:3vw;border-radius:.3vw;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 {height:4.5vw;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
  41.  
  42. .nav3 {position:absolute;background-color:#EAFCCC;box-shadow:0vw 0vw .2vw #fff;left:5vw;opacity:1;bottom:0vw;width:1.5vw;height:3vw;border-radius:.3vw;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 {height:4.5vw;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
  43.  
  44. .nav4 {position:absolute;background-color:#EAFCCC;box-shadow:0vw 0vw .2vw #fff;left:7.5vw;opacity:1;bottom:0vw;width:1.5vw;height:3vw;border-radius:.3vw;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 {height:4.5vw;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
  45.  
  46. .nav5 {position:absolute;background-color:#EAFCCC;box-shadow:0vw 0vw .2vw #fff;left:10vw;opacity:1;bottom:0vw;width:1.5vw;height:3vw;border-radius:.3vw;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 {height:4.5vw;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
  47.  
  48. .nav6 {position:absolute;background-image:url(https://i.imgur.com/Qi0vNPL.png);background-size:100%;left:-2.2vw;opacity:1;bottom:-4.7vw;width:2.3vw;height:3vw;border-radius:.3vw;z-index:10;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}.nav6:hover {background-image:url(https://i.imgur.com/ATnjWZr.png);height:3vw;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
  49.  
  50. .nav7 {position:absolute;background-image:url(https://i.imgur.com/Qi0vNPL.png);background-size:100%;left:0vw;opacity:1;bottom:-4.7vw;width:2.3vw;height:3vw;border-radius:.3vw;z-index:10;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}.nav7:hover {background-image:url(https://i.imgur.com/ATnjWZr.png);height:3vw;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
  51.  
  52. .nav8 {position:absolute;background-image:url(https://i.imgur.com/Qi0vNPL.png);background-size:100%;left:2.2vw;opacity:1;bottom:-4.7vw;width:2.3vw;height:3vw;border-radius:.3vw;z-index:10;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}.nav8:hover {background-image:url(https://i.imgur.com/ATnjWZr.png);height:3vw;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
  53.  
  54. .nav9 {position:absolute;background-image:url(https://i.imgur.com/Qi0vNPL.png);background-size:100%;left:4.4vw;opacity:1;bottom:-4.7vw;width:2.3vw;height:3vw;border-radius:.3vw;z-index:10;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}.nav9:hover {background-image:url(https://i.imgur.com/ATnjWZr.png);height:3vw;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
  55.  
  56. .nav10 {position:absolute;background-image:url(https://i.imgur.com/Qi0vNPL.png);background-size:100%;left:6.6vw;opacity:1;bottom:-4.7vw;width:2.3vw;height:3vw;border-radius:.3vw;z-index:10;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}.nav10:hover {background-image:url(https://i.imgur.com/ATnjWZr.png);height:3vw;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
  57.  
  58. .nav11 {position:absolute;background-image:url(https://i.imgur.com/Qi0vNPL.png);background-size:100%;left:8.8vw;opacity:1;bottom:-4.7vw;width:2.3vw;height:3vw;border-radius:.3vw;z-index:10;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}.nav11:hover {background-image:url(https://i.imgur.com/ATnjWZr.png);height:3vw;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
  59.  
  60. .maintext {position:fixed;left:62vw;bottom:17vw;width:30vw;height:15vw;opacity:0;z-index:1;border-radius:.3vw;box-shadow:0vw 0vw .5vw #fff;line-height:1.3vw;font-family:'Teko';font-size:1.3vw;color:#1C2029;text-shadow:0vw 0vw .1vw #000;overflow-y:scroll;text-align:center;background-color:#EAFCCC;transition: all .5s ease-out;-webkit-transition: all .5s ease-out;-moz-transition: all .5s ease-out;-ms-transition: all .5s ease-out;-o-transition: all .5s ease-out;transition: all .5s ease-out;}
  61. .maintext:target {transition: all .5s ease-out;-webkit-transition: all .5s ease-out;-moz-transition: all .5s ease-out;-ms-transition: all .5s ease-out;-o-transition: all .5s ease-out;transition: all .5s ease-out;z-index:11;opacity:1;}
  62.  
  63. .maintext2 {position:fixed;left:63vw;bottom:1vw;width:30vw;height:11.5vw;opacity:0;z-index:1;border-radius:.3vw;box-shadow:0vw 0vw .5vw #fff;line-height:1.3vw;font-family:'Teko';font-size:1.3vw;color:#1C2029;text-shadow:0vw 0vw .1vw #000;overflow-y:scroll;text-align:left;background-color:#EAFCCC;transition: all .5s ease-out;-webkit-transition: all .5s ease-out;-moz-transition: all .5s ease-out;-ms-transition: all .5s ease-out;-o-transition: all .5s ease-out;transition: all .5s ease-out;}
  64. .maintext2:target {transition: all .5s ease-out;-webkit-transition: all .5s ease-out;-moz-transition: all .5s ease-out;-ms-transition: all .5s ease-out;-o-transition: all .5s ease-out;transition: all .5s ease-out;z-index:11;opacity:1;}
  65.  
  66. .tooltip {position: relative;display: inline-block;}
  67.  
  68. .tooltip .tooltiptext {
  69. visibility: hidden;color:#000;text-align: center;bottom:13.7vw;left:54.5vw;transform: translateX(-50%);position: fixed;z-index: 20;font-family:'Aladin';font-size:1.6vw;letter-spacing:.5vw;}
  70.  
  71. .tooltip:hover .tooltiptext {visibility: visible;}
  72.  
  73. .tooltip2 {position: relative;display: inline-block;}
  74.  
  75. .tooltip2 .tooltiptext {background-color:#EAFCCC;
  76. visibility: hidden;color:#000;border-radius:.3vw;box-shadow:0vw 0vw .2vw #fff;text-align: center;left:77.5vw;bottom:1vw;width:30vw;height:11.5vw;transform: translateX(-50%);position: fixed;z-index: 20;font-family:'Teko';font-size:1.3vw;}
  77.  
  78. .tooltip2:hover .tooltiptext {visibility: visible;}
  79.  
  80. .pic{width:5vw;height:5vw;border:.2vw solid #7BB982;box-shadow:0vw 0vw .2vw #fff;border-radius:.5vw;}
  81. .pic:hover{border:.2vw solid #000;box-shadow:0vw 0vw .2vw #000;border-radius:.5vw;}
  82.  
  83. </style>
  84.  
  85. <div id="N"></div>
  86. <div class="border"></div>
  87. <div class="title">"Scientifically Beautiful Results."</div>
  88. <div class="titleshadow">"Scientifically Beautiful Results."</div>
  89. <div class="title2"><marquee>科学的に美しい結果</marquee></div>
  90. <div class="title2shadow"><marquee>科学的に美しい結果</marquee></div>
  91.  
  92. <div id="001" class="maintext">
  93. <h1>Title</h1>
  94.  
  95. This is normal text.<br>
  96. <i>Italics</i> - <b>Bold</b><br>
  97. <a href="" target="_blank">This is a link</a><Br>
  98.  
  99. profile coded by <a href="https://roleplay.chat/profile.php?user=Yellow." target="_blank">short-stack</a>
  100. </div>
  101.  
  102. <div id="002" class="maintext">
  103. <h1>Title 2</h1>
  104.  
  105. </div>
  106.  
  107. <div id="003" class="maintext">
  108. <h1>Title 3</h1>
  109.  
  110. </div>
  111.  
  112. <div id="004" class="maintext">
  113. <h1>Title 4</h1>
  114.  
  115. <div class="tooltip2"><a href="link goes here" target="_blank"><img src="https://i.imgur.com/IHu5EMd.png" class="pic"></a><span class="tooltiptext"><h1>Friend Name</h1>
  116.  
  117. Information for friend goes here</span></div>
  118.  
  119. <div class="tooltip2"><a href="link goes here" target="_blank"><img src="https://i.imgur.com/IHu5EMd.png" class="pic"></a><span class="tooltiptext"><h1>Friend Name</h1>
  120.  
  121. Information for friend goes here</span></div>
  122.  
  123. <div class="tooltip2"><a href="link goes here" target="_blank"><img src="https://i.imgur.com/IHu5EMd.png" class="pic"></a><span class="tooltiptext"><h1>Friend Name</h1>
  124.  
  125. Information for friend goes here</span></div>
  126.  
  127. <div class="tooltip2"><a href="link goes here" target="_blank"><img src="https://i.imgur.com/IHu5EMd.png" class="pic"></a><span class="tooltiptext"><h1>Friend Name</h1>
  128.  
  129. Information for friend goes here</span></div>
  130.  
  131. </div>
  132.  
  133. <div id="005" class="maintext">
  134. <h1>Title 5</h1>
  135.  
  136. </div>
  137.  
  138. <div id="P1" class="maintext2">
  139. <h1>Pokemon</h1>
  140.  
  141. <img src="https://i.imgur.com/2Gvxlx2.png" width="80vw" align="left"> text goes here<br>
  142. and here<bR>
  143. and here<bR>
  144. and here
  145.  
  146. </div>
  147.  
  148. <div id="P2" class="maintext2">
  149. <h1>Pokemon 2</h1>
  150.  
  151. <img src="https://i.imgur.com/2Gvxlx2.png" width="80vw" align="left"> text goes here<br>
  152. and here<bR>
  153. and here<bR>
  154. and here
  155.  
  156. </div>
  157.  
  158. <div id="P3" class="maintext2">
  159. <h1>Pokemon 3</h1>
  160.  
  161. <img src="https://i.imgur.com/2Gvxlx2.png" width="80vw" align="left"> text goes here<br>
  162. and here<bR>
  163. and here<bR>
  164. and here
  165.  
  166. </div>
  167.  
  168. <div id="P4" class="maintext2">
  169. <h1>Pokemon 4</h1>
  170.  
  171. <img src="https://i.imgur.com/2Gvxlx2.png" width="80vw" align="left"> text goes here<br>
  172. and here<bR>
  173. and here<bR>
  174. and here
  175.  
  176. </div>
  177.  
  178. <div id="P5" class="maintext2">
  179. <h1>Pokemon 5</h1>
  180.  
  181. <img src="https://i.imgur.com/2Gvxlx2.png" width="80vw" align="left"> text goes here<br>
  182. and here<bR>
  183. and here<bR>
  184. and here
  185.  
  186. </div>
  187.  
  188. <div id="P6" class="maintext2">
  189. <h1>Pokemon 6</h1>
  190.  
  191. <img src="https://i.imgur.com/2Gvxlx2.png" width="80vw" align="left"> text goes here<br>
  192. and here<bR>
  193. and here<bR>
  194. and here
  195.  
  196. </div>
  197.  
  198. <div class="navbar">
  199. <div class="tooltip"><a class="nav1" href="#001"></a><span class="tooltiptext">Title</span></div>
  200. <div class="tooltip"><a class="nav2" href="#002"></a><span class="tooltiptext">Title</span></div>
  201. <div class="tooltip"><a class="nav3" href="#003"></a><span class="tooltiptext">Title</span></div>
  202. <div class="tooltip"><a class="nav4" href="#004"></a><span class="tooltiptext">Title</span></div>
  203. <div class="tooltip"><a class="nav5" href="#005"></a><span class="tooltiptext">Title</span></div>
  204.  
  205. <div class="tooltip"><a class="nav6" href="#P1"></a><span class="tooltiptext">Title</span></div>
  206.  
  207. <div class="tooltip"><a class="nav7" href="#P2"></a><span class="tooltiptext">Title</span></div>
  208.  
  209. <div class="tooltip"><a class="nav8" href="#P3"></a><span class="tooltiptext">Title</span></div>
  210.  
  211. <div class="tooltip"><a class="nav9" href="#P4"></a><span class="tooltiptext">Title</span></div>
  212.  
  213. <div class="tooltip"><a class="nav10" href="#P5"></a><span class="tooltiptext">Title</span></div>
  214.  
  215. <div class="tooltip"><a class="nav11" href="#P6"></a><span class="tooltiptext">Title</span></div>
  216.  
  217. </div>
Advertisement
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!