Advertisement
hanimjay

Kellie (sig code)

Jun 28th, 2018
74
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.54 KB | None | 0 0
  1. <link href="https://fonts.googleapis.com/css?family=Open+Sans|Press+Start+2P" rel="stylesheet">
  2. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  3.  
  4. <style>
  5. #kelliesigcode{
  6. width: 500px;
  7. height: 200px;
  8. margin: 0px auto;
  9. position: relative;
  10. border: 4px solid #fff;
  11. outline: 1px solid #bbb;
  12. overflow: hidden;
  13. }
  14.  
  15. #kelliesigcode ::-webkit-scrollbar {
  16. width: 3.5px;
  17. }
  18.  
  19. #kelliesigcode ::-webkit-scrollbar-track {
  20. background: #bbb;
  21. border: 1px solid #fff;
  22. }
  23.  
  24. #kelliesigcode ::-webkit-scrollbar-thumb {
  25. background: #e0d088;
  26. }
  27.  
  28. #kelliesigcode .leftsig{
  29. width: 250px;
  30. height: 200px;
  31. position: absolute;
  32. top: 0px;
  33. left: 0px;
  34. background: url(https://i.imgur.com/ro9Hsya.png);
  35. background-position: left;
  36. transition: 0.5s ease-in 0.5s;
  37. -webkit-transition: 0.5s ease-in 0.5s;
  38. }
  39. #kelliesigcode:hover .leftsig{
  40. top: -200px;
  41. transition: 0.5s ease-in 0s;
  42. -webkit-transition: 0.5s ease-in 0s;
  43. }
  44.  
  45. #kelliesigcode .rightsig{
  46. width: 250px;
  47. height: 200px;
  48. position: absolute;
  49. bottom: 0px;
  50. right: 0px;
  51. background: url(https://i.imgur.com/ro9Hsya.png);
  52. background-position: right;
  53. transition: 0.5s ease-in 0.5s;
  54. -webkit-transition: 0.5s ease-in 0.5s;
  55. }
  56. #kelliesigcode:hover .rightsig{
  57. bottom: -200px;
  58. transition: 0.5s ease-in 0s;
  59. -webkit-transition: 0.5s ease-in 0s;
  60. }
  61.  
  62. #kelliesigcode .base{
  63. width: 500px;
  64. height: 200px;
  65. position: absolute;
  66. top: 0px;
  67. left: 0px;
  68. background: #ddd;
  69. overflow: hidden;
  70. }
  71.  
  72. #kelliesigcode .left{
  73. width: 220px;
  74. height: 200px;
  75. position: absolute;
  76. top: 0px;
  77. left: -220px;
  78. background: #f3e8b2;
  79. overflow: hidden;
  80. border: 1px solid #fff;
  81. border-radius: 0px 50px 0px 0px;
  82. z-index: 2;
  83. transition: 0.5s ease-in 0s;
  84. -webkit-transition: 0.5s ease-in 0s;
  85. opacity: 0;
  86. }
  87. #kelliesigcode:hover .left{
  88. left: 0px;
  89. transition: 0.5s ease-in 0.7s;
  90. -webkit-transition: 0.5s ease-in 0.7s;
  91. opacity: 1;
  92. }
  93.  
  94. #kelliesigcode .right{
  95. width: 280px;
  96. height: 200px;
  97. position: absolute;
  98. top: 0px;
  99. right: -280px;
  100. background: transparent;
  101. overflow: hidden;
  102. z-index: 1;
  103. transition: 0.5s ease-in 0s;
  104. -webkit-transition: 0.5s ease-in 0s;
  105. opacity: 0;
  106. }
  107. #kelliesigcode:hover .right{
  108. right: 0px;
  109. transition: 0.5s ease-in 0.7s;
  110. -webkit-transition: 0.5s ease-in 0.7s;
  111. opacity: 1;
  112. }
  113.  
  114. #kelliesigcode .bottomright{
  115. width: 280px;
  116. height: 70px;
  117. position: absolute;
  118. bottom: 0px;
  119. right: 0px;
  120. background: #d70d33;
  121. overflow: hidden;
  122. border-top: 1px solid #fff;
  123. }
  124.  
  125. #kelliesigcode .title{
  126. width: 135px;
  127. height: 15px;
  128. position: absolute;
  129. top: 24px;
  130. left: 40px;
  131. background: #fff;
  132. text-align: center;
  133. line-height: 11.5px;
  134. letter-spacing: 1px;
  135. font-family: 'Press Start 2P', cursive;
  136. padding: 8px 0px 3px 0px;
  137. font-size: 9px;
  138. text-transform: uppercase;
  139. color: #333;
  140. border-bottom: 0.5px solid #d70d33;
  141. border-left: 0.5px solid #d70d33;
  142. border-radius: 0px 20px 0px 0px;
  143. font-style: italic;
  144. }
  145.  
  146. #kelliesigcode .title .sf{
  147. font-size: 10px;
  148. color: #d70d33;
  149. margin-left: 5px;
  150. }
  151.  
  152. #kelliesigcode .icon{
  153. width: 115px;
  154. height: 115px;
  155. position: absolute;
  156. bottom: 22px;
  157. left: 52px;
  158. background-size: 120px;
  159. border-radius: 100px;
  160. }
  161.  
  162. #kelliesigcode .icon img{
  163. width: 115px;
  164. height: 115px;
  165. border-radius: 100px;
  166. }
  167.  
  168. #kelliesigcode .iconborder{
  169. width: 100px;
  170. height: 100px;
  171. border: 0.5px solid #fff;
  172. position: absolute;
  173. top: 7.5px;
  174. left: 7.5px;
  175. border-radius: 100px;
  176. }
  177.  
  178. #kelliesigcode .textbase{
  179. width: 215px;
  180. height: 70px;
  181. position: absolute;
  182. top: 30px;
  183. right: 30px;
  184. background: #fff;
  185. overflow: hidden;
  186. border: 0.5px solid #dac66d;
  187. outline: 7px solid #fff;
  188. transition: 0.5s ease-in 0s;
  189. -webkit-transition: 0.5s ease-in 0s;
  190. opacity: 0;
  191. }
  192. #kelliesigcode:hover .textbase{
  193. opacity: 1;
  194. transition: 0.3s ease-in 1.4s;
  195. -webkit-transition: 0.3s ease-in 1.4s;
  196. }
  197.  
  198. #kelliesigcode .textbox{
  199. width: 185px;
  200. height: 50px;
  201. position: absolute;
  202. top: 13px;
  203. right: 10px;
  204. background: #fff;
  205. overflow: auto;
  206. outline: 7px solid #fff;
  207. text-align: justify;
  208. line-height: 11.5px;
  209. letter-spacing: 0px;
  210. font-family: 'Open Sans', sans-serif;
  211. font-size: 8.5px;
  212. color: #000;
  213. padding-right: 7px;
  214. }
  215. #kelliesigcode .textbox i{
  216. text-transform: uppercase;
  217. font-size: 10.5px;
  218. font-family: 'Courier';
  219. border-right: 0.5px solid #d70d33;
  220. padding: 4px;
  221. padding-right: 9px;
  222. float: left;
  223. margin-right: 10px;
  224. color: #d70d33;
  225. letter-spacing: 1px;
  226. font-weight: bold
  227. }
  228. #kelliesigcode .textbox c{
  229. color: #000;
  230. }
  231.  
  232. #kelliesigcode .lyrics{
  233. width: 220px;
  234. position: absolute;
  235. top: 20px;
  236. right: 25px;
  237. background: transparent;
  238. border-bottom: 0.5px solid #e7dba1;
  239. text-align: right;
  240. line-height: 11.5px;
  241. letter-spacing: 0px;
  242. font-family: 'Courier', sans-serif;
  243. font-size: 9px;
  244. color: #fff;
  245. padding-right: 7px;
  246. padding-bottom: 5px;
  247. }
  248.  
  249. #kelliesigcode .lyrics .sf{
  250. font-size: 20px;
  251. float: right;
  252. margin-left: 10px;
  253. border-left: 0.5px solid #e7dba1;
  254. padding-left: 9px;
  255. padding-bottom: 2px;
  256. color: #e7dba1;
  257. }
  258.  
  259. </style>
  260.  
  261. <center>
  262. <div id='kelliesigcode'>
  263.  
  264. <div class='base'>
  265. <div class='left'>
  266. <div class='title'><b>Kellie</b><span class="sf sf-heart"></span></div>
  267.  
  268. <div class='icon'>
  269. <img src="http://via.placeholder.com/115x115">
  270. <a href="https://shadowplayers.jcink.net/index.php?showuser=95" title="hanie ©">
  271. <div class='iconborder'></div></a>
  272. </div>
  273. </div>
  274.  
  275. <div class='right'>
  276. <div class='textbase'>
  277. <div class='textbox'>
  278. <i><c>may</c> 03</i>
  279. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus sit amet diam eu dictum. In eget mollis metus.<p>
  280. <hr><p>
  281.  
  282. <i><c>june</c> 17</i>
  283. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus sit amet diam eu dictum. In eget mollis metus.<p>
  284. </div>
  285. </div>
  286.  
  287. <div class='bottomright'>
  288. <div class='lyrics'>
  289. <span class="sf sf-pyramids"></span>
  290. "short lyric goes here. make sure it doesn't exceed two lines"</div>
  291. </div>
  292. </div>
  293. </div>
  294.  
  295. <div class='leftsig'></div>
  296. <div class='rightsig'></div>
  297.  
  298. </div>
  299. </center>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement