API tools faq
paste
CartoonCartoons

Daddy Mort

CartoonCartoons
Jan 11th, 2022
227
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.52 KB | None | 0 0
raw download clone embed print report
  1. PLEASE PLACE IN STYLE
  2.  
  3.  
  4.  
  5. @import url('//fonts.googleapis.com/css?family=Creepster');
  6. @import url('//fonts.googleapis.com/css?family=Teko');
  7.  
  8. body{background-image:url(https://steamcdn-a.akamaihd.net/steamcommunity/public/images/items/616880/c2da208fc41d5fcdd8e5b75c3cb60bf1851baa01.jpg);background-size:100% 100%;overflow:hidden;}
  9.  
  10. ::-webkit-scrollbar {width: 2px; height: 1px; background: #; }
  11. ::-webkit-scrollbar-thumb { background-color:#; box-shadow:0px 0px 3px #; border-radius:2px;}
  12.  
  13. a:link, a:visited, a:active{color: #B770C7; text-shadow:0vw 0vw .2vw #B770C7; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out;}
  14.  
  15. a:hover { color: #C9A594; text-shadow:0vw 0vw .2vw #C9A594; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out;}
  16.  
  17. h1{font-family:'Creepster';line-height:1vw;color:#fff;text-shadow:0vw 0vw .2vw #fff;letter-spacing:.2vw;}
  18.  
  19. .floating {
  20. animation-name: floating;
  21. animation-duration: 3s;
  22. animation-iteration-count: infinite;
  23. animation-timing-function: ease-in-out;
  24. margin-left: 30px;
  25. margin-top: 5px;
  26. }
  27.  
  28. @keyframes floating {
  29. 0% { transform: translate(0, 0px); }
  30. 50% { transform: translate(0, 15px); }
  31. 100% { transform: translate(0, -0px); }
  32. }
  33.  
  34. .tooltip {position: relative;display: inline-block;}
  35.  
  36. .tooltip .tooltiptext {visibility: hidden;width: 17vw;background-image:url(https://i.imgur.com/d8K3IKG.png);background-size:100%;background-repeat:no-repeat;
  37. color:#fff;height:19.5vw;text-shadow: 0vw 0vw 1vw #fff;text-align: center;border-radius: 1vw;padding: 1vw 1vw;bottom:0vw;left:61vw;transform: translateX(-50%);position: fixed;z-index: 20;font-family:'Teko';font-size:1.2vw;}
  38.  
  39. .tooltip:hover .tooltiptext {visibility: visible;}
  40.  
  41. .overlay{z-index:1;position:absolute;left:0vw;bottom:0vw;width:100%;height:100%;background-image:url(https://thumbs.gfycat.com/AbandonedMajesticHornet-size_restricted.gif);background-size:100%;opacity:.3;}
  42.  
  43. .pic{position:absolute;background-image:url(https://i.imgur.com/HR5B7Ud.png);background-size:100%;background-repeat:no-repeat;width:28vw;height:48vw;z-index:2;bottom:0vw;left:3vw;opacity:.9;}
  44.  
  45. .pic2{position:absolute;background-image:url(https://i.imgur.com/GnjeCCo.png);background-size:100%;background-repeat:no-repeat;width:28vw;height:45vw;z-index:2;animation: floating 3s ease-in-out infinite;bottom:5vw;left:1vw;opacity:.8;}
  46.  
  47. .maintext {position:fixed;width:18.5vw;height:0vw;left:31vw;bottom:.5vw;opacity:0;z-index:1;line-height:18px;font-family:'Teko';font-size:1.2vw;color:#fff;text-shadow:0vw 0vw .1vw #fff;overflow-y:scroll;text-align:center;background-color:#592E67;border-radius:.2vw;box-shadow:0vw 0vw .5vw #2D1A37;border-top:.7vw solid #2D1A37;border-bottom:.7vw solid #2D1A37;padding:0vw 1vw;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;}
  48. .maintext:target {height:35vw;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:21;opacity:.8;}
  49.  
  50. .navbar {Position:absolute;width:40vw;height:5vw;left:0vw;bottom:5vw;z-index:10;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;}
  51.  
  52. .nav1 {background-image:url(https://i.imgur.com/5jpmmzr.png);background-size:100%;position:absolute;left:2vw;bottom:25.5vw;width:4vw;height:4vw;z-index:10;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;animation: floating 2s ease-in-out infinite;}.nav1:hover {background-image:url(https://media.discordapp.net/attachments/849274985214509097/930462508928606218/unknown.png);background-size:100%;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
  53.  
  54. .nav2 {background-image:url(https://i.imgur.com/5jpmmzr.png);background-size:100%;position:absolute;left:21vw;bottom:35vw;width:4vw;height:4vw;z-index:10;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;animation: floating 2s ease-in-out infinite;}.nav2:hover {background-image:url(https://media.discordapp.net/attachments/849274985214509097/930462508928606218/unknown.png);background-size:100%;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
  55.  
  56. .nav3 {background-image:url(https://i.imgur.com/5jpmmzr.png);background-size:100%;position:absolute;left:13vw;bottom:16vw;width:4vw;height:4vw;z-index:10;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;animation: floating 2s ease-in-out infinite;}.nav3:hover {background-image:url(https://media.discordapp.net/attachments/849274985214509097/930462508928606218/unknown.png);background-size:100%;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
  57.  
  58. .nav4 {background-image:url(https://i.imgur.com/5jpmmzr.png);background-size:100%;position:absolute;left:4vw;bottom:9vw;width:4vw;height:4vw;z-index:10;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;animation: floating 2s ease-in-out infinite;}.nav4:hover {background-image:url(https://media.discordapp.net/attachments/849274985214509097/930462508928606218/unknown.png);background-size:100%;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
  59.  
  60. .nav5 {background-image:url(https://i.imgur.com/5jpmmzr.png);background-size:100%;position:absolute;left:9vw;bottom:2vw;width:4vw;height:4vw;z-index:10;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;animation: floating 2s ease-in-out infinite;}.nav5:hover {background-image:url(https://media.discordapp.net/attachments/849274985214509097/930462508928606218/unknown.png);background-size:100%;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
  61.  
  62. .pic3:hover{border:.2vw solid #fff;box-shadow:0vw 0vw .2vw #fff;border-radius:.5vw;}
  63. .pic3{width:4vw;height:4vw;border:.2vw solid #000;box-shadow:0vw 0vw .2vw #000;border-radius:.5vw;}
  64.  
  65.  
  66.  
  67.  
  68.  
  69.  
  70. ----------------PLEASE PLACE IN BODY ------------
  71.  
  72.  
  73. <div class="overlay"></div><div class="pic"></div><div class="pic2"></div>
  74.  
  75. <div id="01" class="maintext">
  76. <h1>Title</h1>
  77. text goes here<br>
  78. this is a <a href="" target="_blank">link</a><br>
  79.  
  80. <div class="tooltip">Tooltip<span class="tooltiptext">Information goes here, this does not scroll but as you can see you put plenty of text in here. </span>
  81. </div><Br>
  82. Profile coded by <a href="https://roleplay.chat/profile.php?user=Braixen" target="_blank">Tia</a>.
  83.  
  84.  
  85. </div>
  86.  
  87. <div id="02" class="maintext">
  88. <h1>Title</h1>
  89. text goes here<br>
  90. this is a <a href="" target="_blank">link</a>
  91. </div>
  92.  
  93. <div id="03" class="maintext">
  94. <h1>Title</h1>
  95.  
  96. <div class="tooltip"><a target="_blank" href="profile link here" target="_blank"><img src="http://images6.fanpop.com/image/photos/35300000/Morty-Icon-pokemon-guys-35365176-100-100.png" class="pic3"></a><span class="tooltiptext">friend description goes here</span>
  97. </div>
  98.  
  99.  
  100. <div class="tooltip"><a target="_blank" href="profile link here" target="_blank"><img src="http://images6.fanpop.com/image/photos/35300000/Morty-Icon-pokemon-guys-35365176-100-100.png" class="pic3"></a><span class="tooltiptext">friend description goes here</span>
  101. </div>
  102.  
  103.  
  104. <div class="tooltip"><a target="_blank" href="profile link here" target="_blank"><img src="http://images6.fanpop.com/image/photos/35300000/Morty-Icon-pokemon-guys-35365176-100-100.png" class="pic3"></a><span class="tooltiptext">friend description goes here</span>
  105. </div>
  106.  
  107.  
  108. <div class="tooltip"><a target="_blank" href="profile link here" target="_blank"><img src="http://images6.fanpop.com/image/photos/35300000/Morty-Icon-pokemon-guys-35365176-100-100.png" class="pic3"></a><span class="tooltiptext">friend description goes here</span>
  109. </div>
  110. </div>
  111.  
  112. <div id="04" class="maintext">
  113. <h1>Title</h1>
  114. text goes here<br>
  115. this is a <a href="" target="_blank">link</a>
  116. </div>
  117.  
  118. <div class="navbar">
  119. <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>
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!