API tools faq
paste
Advertisement
soxxx

helio

soxxx
Jan 31st, 2020
343
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.77 KB | None | 0 0
raw download clone embed print report
  1. [nobr]
  2. [class=content]
  3. position: relative;
  4. width: 300px;
  5. height: 400px;
  6. margin-right: auto;
  7. margin-left: auto;
  8. overflow: hidden;
  9. --bkgd-color: #FFE7AD;
  10. --text-color: #000;
  11. --accent-color: #00A68C;
  12. cursor: url('https://i.imgur.com/eyUJ9gM.png'), auto;
  13. [/class]
  14.  
  15. [class=homebkgd]
  16. box-sizing: border-box;
  17. position: absolute;
  18. width: 100%;
  19. height: 100%;
  20. background-color: var(--bkgd-color);
  21. [/class]
  22.  
  23. [class=intro]
  24. position: absolute;
  25. width: 100%;
  26. height: auto;
  27. color: var(--text-color);
  28. font-size: 10px;
  29. letter-spacing: 5px;
  30. text-transform: uppercase;
  31. text-align: center;
  32. top: 10%;
  33. [/class]
  34.  
  35. [class=name]
  36. position: absolute;
  37. width: 100%;
  38. height: auto;
  39. color: var(--text-color);
  40. font-size: 22px;
  41. letter-spacing: 5px;
  42. text-transform: uppercase;
  43. text-align: center;
  44. text-shadow: 2px 2px 0px var(--accent-color);
  45. top: 13%;
  46. [/class]
  47.  
  48. [class=role]
  49. position: absolute;
  50. width: 100%;
  51. height: auto;
  52. color: var(--text-color);
  53. font-size: 15px;
  54. letter-spacing: 5px;
  55. text-transform: uppercase;
  56. text-align: center;
  57. top: 20%;
  58. [/class]
  59.  
  60. [class=line]
  61. position: absolute;
  62. width: 80%;
  63. height: 1px;
  64. border-radius: 10px;
  65. background-color: var(--accent-color);
  66. top: 28%;
  67. left: 10%;
  68. [/class]
  69.  
  70. [class=icon]
  71. position: absolute;
  72. width: 5%;
  73. height: 15px;
  74. background: url(https://imgur.com/EHavE1R.png);
  75. background-size: 100%;
  76. top: 32%;
  77. left: 47.5%;
  78. transition-duration: 0.5s;
  79. animation:{post_id}throb 10s linear infinite;
  80. [/class]
  81.  
  82. [class=pic]
  83. position: absolute;
  84. width: 80%;
  85. height: 52%;
  86. background: url(https://i.pinimg.com/564x/f8/e5/e7/f8e5e7a7ae9e2d57ac4a2194477b3f7b.jpg);
  87. background-size: 100%;
  88. background-position: 0% 40%;
  89. top: 40%;
  90. left: 10%;
  91. border: 0.5px solid var(--accent-color);
  92. [/class]
  93.  
  94. [animation=throb]
  95. [keyframe=0]transform: scale(1.5);[/keyframe]
  96. [keyframe=10]transform: scale(0.95);[/keyframe]
  97. [keyframe=20]transform: scale(1.5);[/keyframe]
  98. [keyframe=30]transform: scale(0.95);[/keyframe]
  99. [keyframe=40]transform: scale(1.5);[/keyframe]
  100. [keyframe=50]transform: scale(0.95);[/keyframe]
  101. [keyframe=60]transform: scale(1.5);[/keyframe]
  102. [keyframe=70]transform: scale(0.95);[/keyframe]
  103. [keyframe=80]transform: scale(1.5);[/keyframe]
  104. [keyframe=90]transform: scale(0.95);[/keyframe]
  105. [keyframe=100]transform: scale(1.5);[/keyframe]
  106. [/animation]
  107.  
  108. [script class=button on=click]
  109. addClass slideup homebkgd
  110. [/script]
  111. [class=slideup]
  112. animation-name: {post_id}slup;
  113. animation-duration: 1.7s;
  114. animation-fill-mode: forwards;
  115. [/class]
  116. [animation=slup]
  117. [keyframe=0]transform: translateY(0%);[/keyframe]
  118. [keyframe=100]transform: translateY(-100%);visibility:hidden;[/keyframe]
  119. [/animation]
  120.  
  121. [class=bkgd]
  122. position: absolute;
  123. width: 100%;
  124. height: 100%;
  125. background-color: var(--bkgd-color);
  126. [/class]
  127.  
  128. [class=header]
  129. position: absolute;
  130. width: 80%;
  131. height: auto;
  132. color: var(--text-color);
  133. font-size: 22px;
  134. letter-spacing: 0px;
  135. text-transform: uppercase;
  136. text-align: left;
  137. top: 6%;
  138. left: 10%;
  139. [/class]
  140.  
  141. [class=tabcontainer]
  142. position: absolute;
  143. height: 20px;
  144. width: auto;
  145. top: 7.2%;
  146. left: 63%;
  147. [/class]
  148.  
  149. [class=tab]
  150. position: relative;
  151. color: var(--text-color);
  152. width: 20px;
  153. height: 10px;
  154. display: inline;
  155. font-size: 15px;
  156. padding: 0px 5px 0px 6px;
  157. transition-duration: 0.3s;
  158. [/class]
  159.  
  160. [class name=tab state=hover]
  161. color: var(--accent-color);
  162. transition-duration: 0.3s;
  163. [/class]
  164.  
  165. [class=textcontainer]
  166. position: absolute;
  167. overflow: hidden;
  168. top: 18%;
  169. left: 10%;
  170. width: 90%;
  171. height: 75%;
  172. [/class]
  173.  
  174. [class=text]
  175. position: relative;
  176. overflow: auto;
  177. width: 255px;
  178. height: 100%;
  179. font-size: 10px;
  180. line-height: 12px;
  181. color: var(--text-color);
  182. text-align: justify;
  183. text-transform: lowercase;
  184. padding-right: 50px;
  185. [/class]
  186.  
  187. [class=tag]
  188. position: relative;
  189. display: inline;
  190. width: auto;
  191. height: auto;
  192. color: var(--accent-color);
  193. text-transform: uppercase;
  194. margin-right: 5px;
  195. text-decoration: underline;
  196. font-weight: 700;
  197. [/class]
  198.  
  199. [class=credit]
  200. position: relative;
  201. overflow: hidden;
  202. width: 100%;
  203. height: 10px;
  204. text-align: center;
  205. font-style: normal;
  206. font-weight: normal;
  207. font-size: 8px;
  208. color: #dedede;
  209. opacity: 0.25;
  210. [/class]
  211.  
  212. [script class=tab on=click]
  213. hide tabsContent
  214. set currentTab (getText)
  215. if (eq ${currentTab} 1) (fadeIn 500 tabsContent1)
  216. if (eq ${currentTab} 2) (fadeIn 500 tabsContent2)
  217. if (eq ${currentTab} 3) (fadeIn 500 tabsContent3)
  218. if (eq ${currentTab} 4) (fadeIn 500 tabsContent4)
  219. [/script]
  220.  
  221. [div class=content]
  222. [div class=bkgd]
  223. [div class=line style="top: 5%;"][/div]
  224. [div class="header tabsContent tabsContent1"][font=Reem Kufi]basics[/font][/div]
  225. [div class="header tabsContent tabsContent2" style="display:none;"][font=Reem Kufi]persona[/font][/div]
  226. [div class="header tabsContent tabsContent3" style="display:none;"][font=Reem Kufi]backstory[/font][/div]
  227. [div class="header tabsContent tabsContent4" style="display:none;"][font=Reem Kufi]misc.[/font][/div]
  228. [div class=line style="top: 15%;"][/div]
  229. [div class=tabcontainer][font=Reem Kufi]
  230. [div class=tab]1[/div]
  231. [div class=tab]2[/div]
  232. [div class=tab]3[/div]
  233. [div class=tab]4[/div]
  234. [/font][/div]
  235. [div class="textcontainer tabsContent tabsContent1"][div class=text][font=Quicksand]
  236. [div class=tag][font=Reem Kufi]name:[/font][/div] choi san
  237. [br][/br][br][/br]
  238. [div class=tag][font=Reem Kufi]nickname:[/font][/div] sannie to his close friends, san to everyone else
  239. [br][/br][br][/br]
  240. [div class=tag][font=Reem Kufi]age:[/font][/div] 20
  241. [br][/br][br][/br]
  242. [div class=tag][font=Reem Kufi]gender:[/font][/div] male
  243. [br][/br][br][/br]
  244. [div class=tag][font=Reem Kufi]sexuality:[/font][/div] heterosexual
  245. [br][/br][br][/br]
  246. [div class=tag][font=Reem Kufi]role:[/font][/div] the messenger
  247. [br][/br][br][/br]
  248. [div class=tag][font=Reem Kufi]faceclaim:[/font][/div] jung wooyoung
  249. [br][/br][br][/br]
  250. [div class=tag][font=Reem Kufi]d.o.b:[/font][/div] 7-10-99
  251. [br][/br][br][/br]
  252. [div class=tag][font=Reem Kufi]height:[/font][/div] 5' 9"
  253. [br][/br][br][/br]
  254. [div class=tag][font=Reem Kufi]weight:[/font][/div] 160lbs
  255. [br][/br][br][/br]
  256. [div class=tag][font=Reem Kufi]hair color:[/font][/div] blonde
  257. [br][/br][br][/br]
  258. [div class=tag][font=Reem Kufi]eye color:[/font][/div] dark brown
  259. [br][/br][br][/br]
  260. [div class=tag][font=Reem Kufi]dist. marks:[/font][/div] sharp jaw line
  261. [br][/br][br][/br]
  262. [div class=tag][font=Reem Kufi]body mods:[/font][/div] several ear piercings
  263. [/font][/div][/div]
  264.  
  265. [div class="textcontainer tabsContent tabsContent2" style="display:none;"][div class=text][font=Quicksand]
  266. [div class=tag][font=Reem Kufi]vices:[/font][/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus luctus accumsan tortor posuere. Tristique et egestas quis ipsum suspendisse. Mattis rhoncus urna neque viverra. Imperdiet proin fermentum leo vel orci porta non. In arcu cursus euismod quis viverra nibh cras pulvinar. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Molestie nunc non blandit massa enim nec. Purus non enim praesent elementum. Mauris commodo quis imperdiet massa tincidunt nunc. Nunc aliquet bibendum enim facilisis gravida neque. Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Imperdiet massa tincidunt nunc pulvinar sapien. Ipsum a arcu cursus vitae.
  267. [br][/br][br][/br]
  268. [div class=tag][font=Reem Kufi]virtues:[/font][/div] A cras semper auctor neque vitae tempus. Nunc mi ipsum faucibus vitae aliquet. Tempus iaculis urna id volutpat lacus laoreet non. Turpis egestas integer eget aliquet. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. A iaculis at erat pellentesque adipiscing commodo. Duis at consectetur lorem donec massa sapien faucibus et molestie. Posuere morbi leo urna molestie at. Ridiculus mus mauris vitae ultricies leo. Porta nibh venenatis cras sed felis eget velit aliquet.
  269. [br][/br][br][/br]
  270. [div class=tag][font=Reem Kufi]strengths:[/font][/div] Purus faucibus ornare suspendisse sed nisi lacus sed. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Euismod in pellentesque massa placerat duis.
  271. [br][/br][br][/br]
  272. [div class=tag][font=Reem Kufi]weaknesses:[/font][/div] Id eu nisl nunc mi ipsum. Euismod elementum nisi quis eleifend quam adipiscing vitae. Nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Lacus laoreet non curabitur gravida arcu ac tortor. Convallis aenean et tortor at risus viverra.
  273. [br][/br][br][/br]
  274. [div class=tag][font=Reem Kufi]fears:[/font][/div] Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor. Sapien pellentesque habitant morbi tristique senectus et.
  275. [br][/br][br][/br]
  276. [div class=tag][font=Reem Kufi]ambitions:[/font][/div] Mauris vitae ultricies leo integer malesuada nunc vel. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum lectus. Malesuada fames ac turpis egestas sed. Sagittis eu volutpat odio facilisis mauris sit amet.
  277. [br][/br][br][/br]
  278. [div class=tag][font=Reem Kufi]likes:[/font][/div] Fringilla est ullamcorper eget nulla. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Molestie at elementum eu facilisis sed odio morbi. Arcu risus quis varius quam quisque id diam vel quam.
  279. [br][/br][br][/br]
  280. [div class=tag][font=Reem Kufi]dislikes:[/font][/div] Scelerisque felis imperdiet proin fermentum leo vel. Sit amet mauris commodo quis imperdiet massa tincidunt nunc. Integer feugiat scelerisque varius morbi enim nunc faucibus a. Morbi tristique senectus et netus et malesuada. Sagittis nisl rhoncus mattis rhoncus urna neque.
  281. [br][/br][br][/br]
  282. [div class=tag][font=Reem Kufi]habits/quirks:[/font][/div] Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Aenean pharetra magna ac placerat.
  283. [br][/br][br][/br]
  284. [div class=tag][font=Reem Kufi]ailments:[/font][/div] Sed augue lacus viverra vitae. Urna et pharetra pharetra massa massa ultricies. Senectus et netus et malesuada fames ac.
  285. [/font][/div][/div]
  286.  
  287. [div class="textcontainer tabsContent tabsContent3" style="display:none;"][div class=text][font=Quicksand]
  288. [div class=tag][font=Reem Kufi]family:[/font][/div] Turpis egestas integer eget aliquet. Amet luctus venenatis lectus magna.
  289. [br][/br][br][/br]
  290. [div class=tag][font=Reem Kufi]residence:[/font][/div] A cras semper auctor.
  291. [br][/br][br][/br]
  292. [div class=tag][font=Reem Kufi]education:[/font][/div] Purus faucibus ornare suspendisse.
  293. [br][/br][br][/br]
  294. [div class=tag][font=Reem Kufi]history:[/font][/div] Duis at consectetur lorem donec massa sapien faucibus et molestie. Posuere morbi leo urna molestie at. Ridiculus mus mauris vitae ultricies leo. Porta nibh venenatis cras sed felis eget velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus luctus accumsan tortor posuere. Tristique et egestas quis ipsum suspendisse. Mattis rhoncus urna neque viverra. Imperdiet proin fermentum leo vel orci porta non. In arcu cursus euismod quis viverra nibh cras pulvinar. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Molestie nunc non blandit massa enim nec. Purus non enim praesent elementum. Mauris commodo quis imperdiet massa tincidunt nunc. Nunc aliquet bibendum enim facilisis gravida neque. Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Imperdiet massa tincidunt nunc pulvinar sapien. Ipsum a arcu cursus vitae. Id eu nisl nunc mi ipsum. Euismod elementum nisi quis eleifend quam adipiscing vitae. Nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Lacus laoreet non curabitur gravida arcu ac tortor. Convallis aenean et tortor at risus viverra.
  295. [br][/br][br][/br]
  296. [div class=tag][font=Reem Kufi]relationships:[/font][/div]
  297. [LIST]
  298. [*]Vulputate: enim nulla aliquet porttitor
  299. [*]lacus: luctus accumsan tortor
  300. [*]Sapien: pellentesque habitant
  301. [*]morbi: tristique senectus et
  302. [/LIST]
  303. [/font][/div][/div]
  304.  
  305. [div class="textcontainer tabsContent tabsContent4" style="display:none;"][div class=text][font=Quicksand]
  306. [div class=tag][font=Reem Kufi]theme song:[/font][/div] [URL='https://www.youtube.com/watch?v=qdWvUyJ90bs']twilight by ateez[/URL]
  307. [br][/br][br][/br]
  308. [div class=tag][font=Reem Kufi]enneagram type:[/font][/div] 2
  309. [br][/br][br][/br]
  310. [div class=tag][font=Reem Kufi]mbti type:[/font][/div] enfj
  311. [br][/br][br][/br]
  312. [div class=tag][font=Reem Kufi]gallery:[/font][/div] ↓ [br][/br][br][/br]
  313. [IMG]https://i.pinimg.com/474x/0d/a9/d1/0da9d1240ca824db8389c845f72f02ca.jpg[/IMG]
  314. [IMG]https://i.pinimg.com/474x/a5/36/37/a53637404f2181b73607c45455a4a61b.jpg[/IMG]
  315. [IMG]https://i.pinimg.com/474x/36/23/6e/36236e42bcda27bfe7c2ed26b452009c.jpg[/IMG]
  316. [IMG]https://i.pinimg.com/474x/5b/25/32/5b2532a18d996240c4c7b4aa41509a19.jpg[/IMG]
  317. [IMG]https://i.pinimg.com/564x/6a/90/d4/6a90d4fa9b9bf00ec048e8a8ac73cb01.jpg[/IMG]
  318. [/font][/div][/div]
  319. [/div]
  320.  
  321. [div class=homebkgd]
  322. [div class=intro][font=Reem Kufi]introducing[/font][/div]
  323. [div class="name button"][font=Reem Kufi]heliophiliac[/font][/div]
  324. [div class=role][font=Reem Kufi]the messenger[/font][/div]
  325. [div class=line][/div]
  326. [div class="icon button"][/div]
  327. [div class="pic button"][/div]
  328. [/div]
  329. [/div][/nobr][div class=credit]code by [USER=2383][COLOR=#dedede]sox[/COLOR][/USER][/div]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!