Advertisement
hanimjay

Dusk Till Dawn (Signature)

Dec 1st, 2017
116
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.77 KB | None | 0 0
  1. [dohtml]
  2. <! A TEMPLATE BY HANIE(ORPHEUS) !>
  3.  
  4. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  5.  
  6. <link href="https://fonts.googleapis.com/css?family=Lato|Montserrat:400,800,900" rel="stylesheet">
  7.  
  8. <style>
  9.  
  10. #dusktilldawn-sig{
  11. position: relative;
  12. margin: 0 auto;
  13. overflow: hidden;
  14. width: 500px;
  15. height: 200px;
  16. border: 4px solid #fff;
  17. outline: 1px solid #dc5e98;
  18. background: url(https://i.imgur.com/y8bpvDB.png);
  19. }
  20.  
  21. #dusktilldawn-sig ::-webkit-scrollbar {
  22. width: 3.5px;
  23. }
  24.  
  25. #dusktilldawn-sig ::-webkit-scrollbar-track {
  26. background: #e746a1;
  27. border: 1px solid #000;
  28. }
  29.  
  30. #dusktilldawn-sig ::-webkit-scrollbar-thumb {
  31. background: #fff;
  32. }
  33.  
  34. #dusktilldawn-sig a{
  35. text-decoration: none;
  36. color: #e746a1;
  37. font-weight: bold;
  38. }
  39.  
  40. #dusktilldawn-sig .base{
  41. width: 500px;
  42. height: 200px;
  43. background: #000;
  44. opacity: 0;
  45. transition: 0.7s;
  46. }
  47. #dusktilldawn-sig:hover .base{
  48. opacity: 0.9;
  49. }
  50. #dusktilldawn-sig:not(:hover) .base{
  51. opacity: 0;
  52. transition-duration: 0.5s;
  53. transition-delay: 0s;
  54. }
  55.  
  56. #dusktilldawn-sig .triangle{
  57. position: absolute;
  58. bottom: 0px;
  59. right: 0px;
  60. width: 195px;
  61. height: 200px;
  62. background: #2cbfbe;
  63. -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
  64. clip-path: polygon(100% 0, 0 100%, 100% 100%);
  65. opacity: 0;
  66. transition-duration: 1s;
  67. transition-delay: 1s;
  68. }
  69. #dusktilldawn-sig:hover .triangle{
  70. opacity: 0.9;
  71. }
  72. #dusktilldawn-sig:not(:hover) .triangle{
  73. opacity: 0;
  74. transition-duration: 0.5s;
  75. transition-delay: 0s;
  76. }
  77.  
  78. #dusktilldawn-sig .navbar{
  79. position: absolute;
  80. top: 98px;
  81. right: -28px;
  82. width: 200px;
  83. height: 40px;
  84. background: transparent;
  85. background-size: 30px;
  86. -webkit-transform: rotate(-49deg); /* Chrome, Safari, Opera */
  87. transform: rotate(-47deg);
  88. }
  89.  
  90. #dusktilldawn-sig .fa{
  91. font-size: 10px;
  92. text-align: center;
  93. color: #000;
  94. background: transparent;
  95. width: 10px;
  96. padding: 6px;
  97. transition: 0.5s;
  98. }
  99. #dusktilldawn-sig .fa:hover{
  100. color: #e746a1;
  101. }
  102.  
  103. #dusktilldawn-sig .container{
  104. position: absolute;
  105. top: 5px;
  106. left: -350px;
  107. width: 480px;
  108. height: 180px;
  109. opacity: 0.9;
  110. transition: 0.7s;
  111. transition-duration: 1s;
  112. transition-delay: 1s;
  113. }
  114. #dusktilldawn-sig:hover .container{
  115. left: 0px;
  116. }
  117. #dusktilldawn-sig:not(:hover) .container{
  118. opacity: 0;
  119. transition-duration: 0.5s;
  120. transition-delay: 0s;
  121. }
  122.  
  123. #dusktilldawn-sig .textbox{
  124. font-family: 'Montserrat', sans-serif;
  125. font-size: 8px;
  126. text-align: justify;
  127. padding-right: 7px;
  128. line-height: 11.5px;
  129. text-transform: lowercase;
  130. overflow: auto;
  131. position: absolute;
  132. top: 56px;
  133. left: 90px;
  134. width: 145px;
  135. height: 90px;
  136. opacity: 0.9;
  137. color: #fff;
  138. }
  139.  
  140. #dusktilldawn-sig n{
  141. font-family: 'Montserrat', sans-serif;
  142. font-weight: 800;
  143. font-size: 8px;
  144. letter-spacing: 1px;
  145. padding: 2px 3px;
  146. border-right: 2px solid #000;
  147. border-bottom: 0.5px solid #000;
  148. color: #fff;
  149. margin-right: 2px;
  150. text-transform: uppercase;
  151. }
  152.  
  153. #dusktilldawn-sig .avatar{
  154. position: absolute;
  155. top: 65px;
  156. left: 275.5px;
  157. width: 55px;
  158. height: 55px;
  159. background: url(https://i.imgur.com/1K6ItfZ.gif);
  160. background-size: 56px;
  161. border: 3px solid #000;
  162. outline: 1px solid #e746a1;
  163. -webkit-transform: rotate(45deg);
  164. transform: rotate(45deg);
  165. }
  166.  
  167. #dusktilldawn-sig .text-border{
  168. position: absolute;
  169. top: 30px;
  170. left: 65px;
  171. width: 241px;
  172. height: 130px;
  173. border: 0.5px solid #2cbfbe;
  174. }
  175.  
  176. #dusktilldawn-sig .title{
  177. position: absolute;
  178. top: 20px;
  179. left: 90px;
  180. font-family: 'Montserrat', sans-serif;
  181. font-weight: 900;
  182. text-transform: uppercase;
  183. letter-spacing: 1px;
  184. font-size: 11.5px;
  185. padding: 4px 15.5px;
  186. background: #000;
  187. color: #fff;
  188. border-right: 2px solid #e746a1;
  189. border-bottom: 2px solid #e746a1;
  190. border-left: 0.5px solid #e746a1;
  191. border-top: 0.5px solid #e746a1;
  192. opacity: 0.9;
  193. }
  194.  
  195. #dusktilldawn-sig i{
  196. font-size: 11px;
  197. font-weight: 400;
  198. }
  199.  
  200. </style>
  201.  
  202. <center>
  203. <div id='dusktilldawn-sig'>
  204.  
  205. <div class='base'></div>
  206.  
  207. <div class='container'>
  208. <div class='text-border'></div>
  209.  
  210. <div class='textbox'>
  211. Hello guys! the name's Hanie and i'm just a hobbyist graphic designer from Malaysia.
  212. A comp-sci major at uni ( and yes i do code A LOT! )
  213. I'm into <s>hot guys</s>, so many tv shows and movies also, dark and peculiar stuff,
  214. so that explains all my stuff around here. lol<br><br>
  215.  
  216. A big thanks to the ever talented <a href="https://shadowplayers.jcink.net/index.php?showuser=38">Soph</a> for my gorgeous sig <3
  217. </div>
  218.  
  219.  
  220.  
  221. <div class='avatar'></div>
  222.  
  223. <div class='title'>dusk till <i>dawn</i></div>
  224.  
  225. </div>
  226.  
  227. <div class='triangle'>
  228.  
  229. <div class='navbar'>
  230. <table>
  231. <tr>
  232. <td><n>navs</n></td>
  233. <td><a href="https://shadowplayers.jcink.net/index.php?showtopic=2029"<i class="fa fa-paper-plane" title='playground'></i></a></td>
  234. <td><a href="https://shadowplayers.jcink.net/index.php?showtopic=2034"<i class="fa fa-file-text" title='archive'></i></a><br></td>
  235. <td><a href="https://medievaal.deviantart.com/"<i class="fa fa-deviantart" title='deviantart'></i></a><br></td>
  236. <td><a href="https://shadowplayers.jcink.net/index.php?showtopic=1969"<i class="fa fa-trophy" title='hof'></i></a><br></td>
  237. <td><a href="https://shadowplayers.jcink.net/index.php?act=Msg&CODE=04&MID=95"<i class="fa fa-envelope" title='message'></i></td>
  238. </tr>
  239. </table>
  240. </div>
  241.  
  242. </div>
  243. </div>
  244. </center>
  245. [/dohtml]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement