Advertisement
hanimjay

Cold

Oct 14th, 2017
237
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.23 KB | None | 0 0
  1. <! A TEMPLATE BY HANIE(ORPHEUS) !>
  2.  
  3. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  4.  
  5. <link href="https://fonts.googleapis.com/css?family=Mada|Roboto:900" rel="stylesheet">
  6.  
  7. <style>
  8.  
  9. #hanie-sig{
  10. position: relative;
  11. margin: 0 auto;
  12. overflow: hidden;
  13. width: 500px;
  14. height: 200px;
  15. border: 4px solid #fff;
  16. outline: 1px solid #bbb;
  17. }
  18.  
  19. #hanie-sig a{
  20. text-decoration: none;
  21. }
  22.  
  23. #hanie-sig .base{
  24. position: absolute;
  25. top: 0px;
  26. width: 500px;
  27. height: 200px;
  28. background: url(https://i.imgur.com/B8Ke4u9.png);
  29. }
  30.  
  31. #hanie-sig .slide{
  32. position: absolute;
  33. top: 0px;
  34. left: -215px;
  35. width: 215px;
  36. height: 200px;
  37. background: #222;
  38. opacity: 0.97;
  39. transition: 1.2s;
  40. }
  41. #hanie-sig:hover .slide{
  42. left: 0px;
  43. }
  44. #hanie-sig .slide2{
  45. position: absolute;
  46. top: 0px;
  47. right: -300px;
  48. width: 285px;
  49. height: 200px;
  50. background: #eee;
  51. opacity: 0.97;
  52. transition: 1.2s;
  53. }
  54. #hanie-sig:hover .slide2{
  55. right: 0px;
  56. }
  57.  
  58. #hanie-sig .title{
  59. position: absolute;
  60. top: 40px;
  61. left: 55px;
  62. width: 290px;
  63. height: 100px;
  64. padding: 2px;
  65. transition: 1s;
  66. }
  67.  
  68. #hanie-sig .navbar{
  69. position: absolute;
  70. top: 123px;
  71. left: -100px;
  72. padding-left: 30px;
  73. padding-top: 20px;
  74. width: 390px;
  75. height: 100px;
  76. transition: 1s;
  77. }
  78.  
  79. #hanie-sig .fa{
  80. color: #555;
  81. margin-right: 27px;
  82. font-size: 10px;
  83. transition: 0.5s;
  84. }
  85. #hanie-sig .fa:hover{
  86. color: #D23929;
  87. }
  88.  
  89. #hanie-sig .icon{
  90. position: absolute;
  91. top: 0px;
  92. left: 45px;
  93. width: 80px;
  94. height: 80px;
  95. outline: 0.5px solid #aaa;
  96. border: 3px solid #222;
  97. background: url(https://i.imgur.com/GuLDNag.gif);
  98. background-size: 80px;
  99. }
  100. #hanie-sig .bla{
  101. position: absolute;
  102. top: 105px;
  103. left: 33px;
  104. width: 110px;
  105. height: 50px;
  106. }
  107.  
  108. #hanie-sig one{
  109. font-family: 'Roboto', sans-serif;
  110. font-size: 8px;
  111. text-transform: uppercase;
  112. letter-spacing: 1px;
  113. font-weight: bold;
  114. background: #94C047;
  115. padding: 4px 11px;
  116. border-radius: 100px;
  117. border: 0.5px solid #aaa;
  118. color: #fff;
  119. }
  120.  
  121. #hanie-sig .two{
  122. font-family: 'Roboto', sans-serif;
  123. font-size: 8px;
  124. text-transform: uppercase;
  125. letter-spacing: 1px;
  126. font-weight: bold;
  127. background: #D23929;
  128. border-radius: 100px;
  129. border: 0.5px solid #aaa;
  130. color: #fff;
  131. width: 180px;
  132. text-align: center;
  133. line-height: 10px;
  134. padding: 4px;
  135. }
  136.  
  137. #hanie-sig .desc{
  138. position: absolute;
  139. top: 40px;
  140. left: 22px;
  141. width: 180px;
  142. height: 90px;
  143. }
  144.  
  145. #hanie-sig .tag{
  146. line-height: 5px;
  147. height: 5px;
  148. color: #555;
  149. font-family: Mada;
  150. font-size: 7px;
  151. font-weight: bold;
  152. letter-spacing: 1px;
  153. text-transform: uppercase;
  154. padding-left: 5px;
  155. padding-top: 2px;
  156. }
  157. #hanie-sig .blank{
  158. height: 5px;
  159. width: 100px;
  160. background: #ccc;
  161. border-top: 4.5px solid #eee;
  162. border-bottom: 4.5px solid #eee;
  163. border-right: 4.5px solid #eee;
  164. }
  165. #hanie-sig .color1{
  166. height: 5px;
  167. width: 800px;
  168. background: #222;
  169. border-top: 4.5px solid #eee;
  170. border-bottom: 4.5px solid #eee;
  171. border-left: 4.5px solid #eee;
  172. }
  173. #hanie-sig .color2{
  174. height: 5px;
  175. width: 200px;
  176. background: #222;
  177. border-top: 4.5px solid #eee;
  178. border-bottom: 4.5px solid #eee;
  179. border-left: 4.5px solid #eee;
  180. }
  181. #hanie-sig .color3{
  182. height: 5px;
  183. width: 300px;
  184. background: #222;
  185. border-top: 4.5px solid #eee;
  186. border-bottom: 4.5px solid #eee;
  187. border-left: 4.5px solid #eee;
  188. }
  189. #hanie-sig .color4{
  190. height:5px;
  191. width: 1000px;
  192. background: #222;
  193. border-top: 4.5px solid #eee;
  194. border-bottom: 4.5px solid #eee;
  195. border-left: 4.5px solid #eee;
  196. }
  197.  
  198. #hanie-sig .pad{
  199. height: 5px;
  200. width: 180px;
  201. background: #eee;
  202. }
  203.  
  204. </style>
  205.  
  206. <center>
  207. <div id='hanie-sig'>
  208.  
  209. <div class='base'>
  210.  
  211. <div class='slide'>
  212. <div class='title'>
  213.  
  214. <div class='icon'></div>
  215.  
  216. <div class='bla'>
  217. <one> Hanie. pscs6</one>
  218. </div>
  219.  
  220. </div>
  221. </div>
  222.  
  223. <div class='slide2'>
  224.  
  225. <div class='desc'>
  226. <table cellspacing='0'>
  227. <tr>
  228. <td class='two'>personal skills</td>
  229. </tr>
  230. </table>
  231.  
  232. <table>
  233. <tr>
  234. <td class='pad'></td>
  235. </tr>
  236. </table>
  237.  
  238. <table cellspacing='0'>
  239. <tr>
  240. <td class='tag'> photoshop</td>
  241. <td class='color1'></td>
  242. <td class='blank'></td>
  243. </tr>
  244. </table>
  245. <table cellspacing='0'>
  246. <tr>
  247. <td class='tag'> coding</td>
  248. <td class='color2'></td>
  249. <td class='blank'></td>
  250. </tr>
  251. </table>
  252. <table cellspacing='0'>
  253. <tr>
  254. <td class='tag'> photography</td>
  255. <td class='color3'></td>
  256. <td class='blank'></td>
  257. </tr>
  258. </table>
  259. <table cellspacing='0'>
  260. <tr>
  261. <td class='tag'> fangirling</td>
  262. <td class='color4'></td>
  263. <td class='blank'></td>
  264. </tr>
  265. </table>
  266. </div>
  267.  
  268. <div class='navbar'>
  269. <table>
  270. <tr>
  271. <td><a href="https://shadowplayers.jcink.net/index.php?showtopic=2029"<i class="fa fa-paper-plane" title='playground'></a></td>
  272. <td><a href="https://shadowplayers.jcink.net/index.php?showtopic=2034"<i class="fa fa-file-text" title='archive'></a></td>
  273. <td><a href="https://medievaal.deviantart.com/"<i class="fa fa-deviantart" title='deviantart'></a></td>
  274. <td><a href="https://shadowplayers.jcink.net/index.php?showtopic=1969"<i class="fa fa-trophy" title='hof'></a></td>
  275. <td><a href="https://shadowplayers.jcink.net/index.php?act=Msg&CODE=04&MID=95"<i class="fa fa-mail-forward" title='message'></a></td>
  276. </tr>
  277. </table>
  278. </div>
  279.  
  280. </div>
  281. </center>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement