CartoonCartoons

Catman

Aug 6th, 2020
65
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.48 KB | None | 0 0
  1. -----PLACE IN STYLE--------------
  2.  
  3. @import url('//fonts.googleapis.com/css?family=Khand');
  4. @import url('//fonts.googleapis.com/css?family=Orbitron');
  5.  
  6. @import url('//fonts.googleapis.com/css?family=Indie Flower');
  7.  
  8. ::-webkit-scrollbar {width: .3vw; height: 1vw; background: #; }
  9. ::-webkit-scrollbar-thumb { background-color:#; border-radius:5vw;}
  10.  
  11. a:link, a:visited, a:active{color: #200F31; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out;text-shadow:1px 1px 2px #200F31;}
  12.  
  13. a:hover { color: #fff; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; }
  14.  
  15. h1 {color: #1C0D2E;text-align: center;font-family:'Orbitron', sans-serif;font-size: 25px;line-height:20px;}
  16.  
  17. h2 {color: #1C0D2E;text-align: center;font-family:'Orbitron', sans-serif;font-size: 15px;line-height:14px;display:inline;}
  18.  
  19. i {color:#5B9B72;font-style: italic;text-shadow: 2px 0 0 #194F2C, -2px 0 0 #194F2C, 0 2px 0 #194F2C, 0 -2px 0 #194F2C, 1px 1px #194F2C, -1px -1px 0 #194F2C, 1px -1px 0 #194F2C, -1px 1px 0 #194F2C;}
  20.  
  21. b {color:#5B9B72;font-style: bold;text-shadow: 2px 0 0 #194F2C, -2px 0 0 #194F2C, 0 2px 0 #194F2C, 0 -2px 0 #194F2C, 1px 1px #194F2C, -1px -1px 0 #194F2C, 1px -1px 0 #194F2C, -1px 1px 0 #194F2C;}
  22.  
  23. body{overflow:hidden;background-image:url(https://www.transparenttextures.com/patterns/carbon-fibre.png);background-color:#8A85AA;}
  24.  
  25. .overlay{position:absolute;left:0px;bottom:0px;background-image:url(https://thumbs.gfycat.com/WelldocumentedFlatCoyote-size_restricted.gif);background-size:100%;background-repeat:no-repeat;width:100%;height:100%;z-index:1;opacity:.5;}
  26.  
  27. #holder{position:absolute;background-image:url(https://www.transparenttextures.com/patterns/carbon-fibre-big.png);bottom:15px;left:5px;width:1100px;height:410px;opacity:1;z-index:2;background-color:#8F7BB6;box-shadow:5px 5px 1px #201C29;border-radius:5px;}
  28.  
  29. .mainpic{position:absolute;left:10px;bottom:10px;background-image:url(http://i.picpar.com/NALe.jpg);background-size:100%;background-repeat:no-repeat;width:300px;height:390px;z-index:3;opacity:1;border-radius:5px;box-shadow:0px 0px 2px #201C29;border:2px solid #201C29;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;}
  30. .mainpic:hover{background-image:url(https://i.imgur.com/GZX7FNw.jpg);background-size:100%;background-repeat:no-repeat;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;}
  31.  
  32. .banner{position:absolute;width:400px;height:204px;bottom:195px;left:685px;background-image:url(https://i.imgur.com/MOy5Rvj.jpg);background-position:0% 40%;background-repeat:no-repeat;background-size:100%;border-radius:5px;box-shadow:0px 0px 2px #201C29;border:2px solid #201C29;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;}
  33. .banner:hover{background-image:url(https://i.imgur.com/VBlc4WX.jpg);background-size:100%;background-position:0% 60%;background-repeat:no-repeat;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;}
  34.  
  35. .box{position:absolute;width:350px;height:207px;bottom:195px;left:324px;background-color:#C6B2EC;box-shadow:0px 0px 5px #C6B2EC;border-radius:5px;z-index:3;opacity:.7;}
  36.  
  37. .text{position:absolute;width:330px;height:187px;bottom:205px;left:334px;background-color:#;border-radius:5px;font-family:'Khand';font-size:15px;overflow-y:scroll;line-height:14px;z-index:3;opacity: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;}
  38. .text:hover{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;}
  39.  
  40. .box2{position:absolute;width:350px;height:170px;bottom:10px;left:324px;background-color:#C6B2EC;box-shadow:0px 0px 5px #C6B2EC;border-radius:5px;z-index:3;opacity:.7;}
  41.  
  42. .text2{position:absolute;width:330px;height:150px;bottom:20px;left:334px;font-family:'Khand';font-size:15px;overflow-y:scroll;line-height:14px;border-radius:5px;z-index:3;opacity: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}
  43. .text2:hover{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;}
  44.  
  45. .box3{position:absolute;width:195px;height:170px;bottom:10px;left:687px;background-color:#C6B2EC;box-shadow:0px 0px 5px #C6B2EC;border-radius:5px;z-index:3;opacity:.7;}
  46.  
  47. .text3{position:absolute;width:175px;height:150px;bottom:20px;left:697px;font-family:'Khand';font-size:15px;overflow-y:scroll;line-height:14px;border-radius:5px;z-index:3;opacity: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}
  48. .text3:hover{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;}
  49.  
  50. .box4{position:absolute;width:194px;height:170px;bottom:10px;left:895px;background-color:#C6B2EC;box-shadow:0px 0px 5px #C6B2EC;border-radius:5px;z-index:3;opacity:.7;}
  51.  
  52. .text4{position:absolute;width:174px;height:150px;bottom:20px;left:905px;font-family:'Khand';font-size:15px;overflow-y:scroll;line-height:14px;border-radius:5px;z-index:3;opacity: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}
  53. .text4:hover{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;}
  54.  
  55. .title{position:absolute;z-index:5;left:20px;bottom:9px;font-size:64px;line-height:60px;font-family:'Orbitron';text-align:center;background: -webkit-linear-gradient(#7DC297, #093D1B);
  56. -webkit-background-clip: text;
  57. -webkit-text-fill-color: transparent;letter-spacing:2px;}
  58.  
  59. .title2{position:absolute;z-index:4;left:20px;bottom:9px;font-size:64px;line-height:60px;font-family:'Orbitron';text-align:center;text-shadow: 2px 0 0 #000001, -2px 0 0 #000001, 0 2px 0 #000001, 0 -2px 0 #000001, 1px 1px #000001, -1px -1px 0 #000001, 1px -1px 0 #000001, -1px 1px 0 #000001;letter-spacing:2px;}
  60.  
  61. .icon{border-radius:100%;border:2px solid #292434;width:80px;height:80px;}
  62.  
  63. .icon:hover{box-shadow:0px 0px 10px #78507D;}
  64.  
  65. .credit{bottom:0vw;left:96vw;width: 5vw;height: 6vw;opacity: 1;overflow: hidden;position: fixed;z-index:100;}
  66.  
  67.  
  68.  
  69.  
  70.  
  71. ---------PLACE IN BODY-------------
  72.  
  73. <div class="overlay"></div>
  74. <div id="holder">
  75. <div class="title">Catman</div>
  76. <div class="title2">Catman</div>
  77. <div class="mainpic"></div><div class="banner"></div><div class="box"></div><div class="box2"></div>
  78. <div class="box3"></div><div class="box4"></div>
  79.  
  80. <div class="text">
  81. <h1>title</h1>
  82.  
  83. this is normal text<bR>
  84. <i>italics</i> - <b>bold</b><br>
  85. <a href="" target="_blank">link</a><bR>
  86. </div>
  87.  
  88. <div class="text2">
  89. <h1>title</h1>
  90.  
  91. <h2>stat</h2> : use this to make your powers / abilities all fancy<br><Br>
  92.  
  93. this is normal text<bR>
  94. <i>italics</i> - <b>bold</b><br>
  95. <a href="" target="_blank">link</a><bR>
  96. </div>
  97.  
  98. <div class="text3">
  99. <h1>title</h1>
  100.  
  101. <a href="" target="_blank"><img src="https://i.imgur.com/DGZAe17.jpg" class="icon"></a>
  102.  
  103. <a href="" target="_blank"><img src="https://i.imgur.com/DGZAe17.jpg" class="icon"></a>
  104.  
  105. <a href="" target="_blank"><img src="https://i.imgur.com/DGZAe17.jpg" class="icon"></a>
  106.  
  107. <a href="" target="_blank"><img src="https://i.imgur.com/DGZAe17.jpg" class="icon"></a>
  108.  
  109. </div>
  110.  
  111. <div class="text4">
  112. <h1>title</h1>
  113. 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.
  114. </div>
  115.  
  116. </div>
  117.  
  118. <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