Advertisement
hanimjay

All For Us sig

Oct 23rd, 2019
129
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.85 KB | None | 0 0
  1. <link href="https://fonts.googleapis.com/css?family=Orbitron:800|Space+Mono:400" rel="stylesheet">
  2. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  3.  
  4. <style>
  5. #allforus-sig{
  6. position: relative;
  7. margin: 10px auto;
  8. width: 400px;
  9. height: 200px;
  10. background: transparent;
  11. border: 0px solid #000000;
  12. border-radius: 20px;
  13. overflow: hidden;
  14. }
  15.  
  16. #allforus-sig ::-webkit-scrollbar {
  17. background: transparent;
  18. width: 8px;
  19. }
  20.  
  21. #allforus-sig ::-webkit-scrollbar-track {
  22. background: #dddddd;
  23. border: 0px solid #fff;
  24. border-radius: 100px;
  25. }
  26.  
  27. #allforus-sig ::-webkit-scrollbar-thumb {
  28. background: #FE4C00;
  29. border: 0px solid #fff;
  30. border-radius: 100px;
  31. }
  32.  
  33. #allforus-sig .title{
  34. position: absolute;
  35. background: #ffffff;
  36. width: 270px;
  37. height: 140px;
  38. padding-top: 40px;
  39. padding-left: 40px;
  40. font-family: 'Orbitron', sans-serif;
  41. font-weight: 800;
  42. font-size: 38px;
  43. line-height: 38px;
  44. text-align: left;
  45. text-transform: uppercase;
  46. color: #ffffff;
  47. text-stroke: 1.3px #000000;
  48. -webkit-text-stroke: 1.3px #000000;
  49. }
  50.  
  51. #allforus-sig .icon{
  52. position: absolute;
  53. top: -1px;
  54. right: -1px;
  55. width: 140px;
  56. height: 140px;
  57. background: url(https://i.imgur.com/GiDMjxU.png);
  58. background-size: 140px;
  59. border: 0px solid #000000;
  60. }
  61.  
  62. #allforus-sig .footer{
  63. position: absolute;
  64. width: 400px;
  65. height: 61px;
  66. left: 0px;
  67. bottom: 0px;
  68. background: #000000;
  69. }
  70.  
  71. #allforus-sig input {
  72. display: none;
  73. }
  74.  
  75. #allforus-sig label .th{
  76. position: absolute;
  77. right: 40px;
  78. bottom: 18px;
  79. background: transparent;
  80. color: #ffffff;
  81. transition: 0.5s;
  82. cursor: pointer;
  83. z-index: 1;
  84. font-size: 9px;
  85. margin-top: 8px;
  86. margin-left: 1px;
  87. background: #FE4C00;
  88. padding: 8px;
  89. border-radius: 100px;
  90. }
  91.  
  92. #allforus-sig input:checked+label .th{
  93. transform: rotate(180deg);
  94. transition: 0.5s;
  95. cursor: pointer;
  96. }
  97.  
  98. #allforus-sig .details{
  99. position: absolute;
  100. width: 310px;
  101. height: 48px;
  102. right: 85px;
  103. bottom: 0px;
  104. background: transparent;
  105. color: #ffffff;
  106. font-family: 'Space Mono', monospace;
  107. font-weight: 400;
  108. font-size: 9px;
  109. line-height: 35px;
  110. text-align: right;
  111. letter-spacing: 0.12em;
  112. text-transform: uppercase;
  113. opacity: 1;
  114. transition: 0.6s;
  115. }
  116.  
  117. #allforus-sig input:checked+label ~ .details {
  118. right: 55px;
  119. opacity: 0;
  120. transition: 0.6s;
  121. }
  122.  
  123. #allforus-sig .links {
  124. position: absolute;
  125. width: 310px;
  126. height: 48px;
  127. right: 55px;
  128. bottom: 0px;
  129. color: #ffffff;
  130. font-family: 'Space Mono', monospace;
  131. font-weight: 400;
  132. font-size: 9px;
  133. line-height: 35px;
  134. text-align: right;
  135. letter-spacing: 0.12em;
  136. text-transform: uppercase;
  137. opacity: 0;
  138. transition: 0.6s;
  139. }
  140.  
  141. #allforus-sig .links a{
  142. text-decoration: none;
  143. color: #ffffff;
  144. }
  145.  
  146. #allforus-sig .links a:hover{
  147. text-decoration: none;
  148. color: #ffffff;
  149. border-bottom: 1px dotted #FE4C00;
  150. font-style: italic;
  151. }
  152.  
  153. #allforus-sig input:checked+label ~ .links {
  154. right: 85px;
  155. opacity: 1;
  156. }
  157.  
  158. #allforus-sig .text-bg{
  159. position: absolute;
  160. background: #ffffff;
  161. width: 260px;
  162. height: 140px;
  163. top: 0px;
  164. left: -265px;
  165. transition: 0.6s;
  166. }
  167.  
  168. #allforus-sig input:checked+label ~ .text-bg {
  169. left: 0px;
  170. transition: 0.6s;
  171. }
  172.  
  173. #allforus-sig .textbox{
  174. position: absolute;
  175. background: #ffffff;
  176. width: 168px;
  177. height: 80px;
  178. top: 28px;
  179. left: 40px;
  180. overflow: auto;
  181. font-family: 'Space Mono', monospace;
  182. font-weight: 400;
  183. font-size: 9px;
  184. line-height: 17px;
  185. text-align: justify;
  186. letter-spacing: 0.03em;
  187. color: #000000;
  188. overflow: auto;
  189. padding-right: 15px;
  190. }
  191.  
  192. #allforus-sig .textbox b{
  193. color: #FE4C00;
  194. text-transform: uppercase;
  195. }
  196.  
  197. </style>
  198.  
  199. <center>
  200. <div id="allforus-sig">
  201.  
  202. <input type="checkbox" id="toggle-label">
  203. <label for="toggle-label"><span class="th th-next-track"></span></label>
  204.  
  205. <div class="title">All<br> For Us</div>
  206.  
  207. <div class="text-bg">
  208. <div class="textbox">
  209. Hi guys! You can call me Hanie or Nim.
  210. I'm a hobbyist graphic designer and coder from Malaysia.
  211. I always have a thing for dark and peculiar stuff.
  212. <p>
  213. <b>Likes</b>: Harry Potter, anything Tim Burton and Wes Anderson,
  214. AHS, SKAM, 5SOS, P!ATD, Dacre Montgomery, Barbie Ferreira etc.
  215. </div>
  216. </div>
  217.  
  218. <div class="icon"></div>
  219.  
  220. <div class="footer"></div>
  221. <div class="details">Hanie . Comp-sci graduate . GMT+8</div>
  222. <div class="links">
  223. <a href="http://atfjcink.jcink.net/index.php?showtopic=3635">tester</a> .
  224. <a href="http://atfjcink.jcink.net/index.php?showtopic=3642">records</a> .
  225. <a href="https://www.deviantart.com/orpheusz">deviantart</a> .
  226. <a href="https://weheartit.com/hanimjay">we<span class="th th-heart-1"></span>it</a>
  227. </div>
  228. </center>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement