API tools faq
paste
Advertisement
soxxx

hero

soxxx
Feb 17th, 2020
293
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.38 KB | None | 0 0
raw download clone embed print report
  1. [nobr]
  2. [class=bkgd]
  3. --bkgd-color: #000a24;
  4. --text-color: #fff;
  5. --accent-color1: #00acb5;
  6. --accent-color2: #9c0216;
  7. position: relative;
  8. margin-right: auto;
  9. margin-left: auto;
  10. width: 600px;
  11. height: 400px;
  12. background: var(--bkgd-color);
  13. overflow: hidden;
  14. border-radius: 10px;
  15. [/class]
  16.  
  17. [class=slidebkgd]
  18. position: relative;
  19. width: 100%;
  20. height: 100%;
  21. background: var(--bkgd-color);
  22. [/class]
  23.  
  24. [class=texture]
  25. position: absolute;
  26. background: url(https://www.onlygfx.com/wp-content/uploads/2019/02/7-noise-texture-overlays-5.png);
  27. width: 100%;
  28. height:100%;
  29. background-size: 100%;
  30. [/class]
  31.  
  32. [class=name]
  33. position: absolute;
  34. width: 100%;
  35. height: auto;
  36. top: 62%;
  37. font-size: 60px;
  38. color: var(--text-color);
  39. text-transform: uppercase;
  40. font-weight: 700;
  41. line-height: 65px;
  42. text-align: left;
  43. letter-spacing: 3px;
  44. padding-left: 20px;
  45. transition-duration: 0.3s;
  46. [/class]
  47.  
  48. [class name=name state=hover]
  49. color: var(--accent-color1);
  50. [/class]
  51.  
  52. [class=line]
  53. position: absolute;
  54. height: 2px;
  55. background-color: var(--accent-color2);
  56. border-radius: 10px;
  57. [/class]
  58.  
  59. [class=role]
  60. position: absolute;
  61. width: 79%;
  62. height: auto;
  63. top: 51%;
  64. font-size: 20px;
  65. color: var(--accent-color1);
  66. text-transform: uppercase;
  67. font-weight: 400;
  68. font-style: italic;
  69. line-height: 32px;
  70. text-align: right;
  71. letter-spacing: 0px;
  72. padding-right: 0px;
  73. transition-duration: 0.3s;
  74. [/class]
  75.  
  76. [class=circlepic]
  77. position: absolute;
  78. border-radius: 100px;
  79. border: 2px solid var(--accent-color2);
  80. [/class]
  81.  
  82. [class=homecircle]
  83. width: 100px;
  84. height: 100px;
  85. top: 45%;
  86. left: 80%;
  87. background: url(https://i.pinimg.com/474x/fe/90/f0/fe90f08bdbd1758dad6cfbf99ce8ed8f.jpg);
  88. background-size: 100%;
  89. [/class]
  90.  
  91. [class=linecircle]
  92. width: 110px;
  93. height: 110px;
  94. top: 5%;
  95. [/class]
  96.  
  97. [class=linecircle1]
  98. left: 4%;
  99. background: url(https://i.pinimg.com/474x/a0/e5/94/a0e59498c2cab474a02632e87ec966ce.jpg);
  100. background-size: 100%;
  101. [/class]
  102.  
  103. [class=linecircle2]
  104. left: 28%;
  105. background: url(https://i.pinimg.com/474x/6d/b0/d6/6db0d69493fb7470b0ced8f324636ee2.jpg);
  106. background-size: 100%;
  107. [/class]
  108.  
  109. [class=linecircle3]
  110. left: 52%;
  111. background: url(https://i.pinimg.com/474x/ab/9f/24/ab9f2458ce55cb4d993d6192affe26dc.jpg);
  112. background-size: 100%;
  113. [/class]
  114.  
  115. [class=linecircle4]
  116. left: 76%;
  117. background: url(https://i.pinimg.com/474x/43/b5/fa/43b5fafd994be4efb821dfc312581eac.jpg);
  118. background-size: 100%;
  119. [/class]
  120.  
  121. [class=linehover]
  122. position: relative;
  123. border-radius: 100px;
  124. width: 110px;
  125. height: 110px;
  126. top: 0px;
  127. background: var(--accent-color2);
  128. text-align: center;
  129. color: var(--text-color);
  130. font-size: 12px;
  131. line-height: 110px;
  132. text-transform: uppercase;
  133. [/class]
  134.  
  135. [class=header]
  136. position: absolute;
  137. width: 500px;
  138. height: auto;
  139. left: -215px;
  140. top: 32%;
  141. font-size: 25px;
  142. color: var(--accent-color1);
  143. text-transform: uppercase;
  144. font-weight: 700;
  145. font-style: italic;
  146. line-height: 32px;
  147. text-align: left;
  148. letter-spacing: 2px;
  149. padding-left: 30px;
  150. transform: rotate(-90deg);
  151. [/class]
  152.  
  153. [class=textcontainer]
  154. position: absolute;
  155. width: 550px;
  156. height: 220px;
  157. top: 40%;
  158. left: 18%;
  159. overflow: hidden;
  160. [/class]
  161.  
  162. [class=text]
  163. position: relative;
  164. width: 470px;
  165. height: 220px;
  166. padding-right: 50px;
  167. overflow: auto;
  168. font-size: 10px;
  169. line-height: 12px;
  170. text-align: justify;
  171. white-space: pre-wrap;
  172. color: var(--text-color);
  173. [/class]
  174.  
  175. [class=tag]
  176. position: relative;
  177. display: inline;
  178. width: auto;
  179. height: auto;
  180. color: var(--accent-color1);
  181. text-transform: uppercase;
  182. margin-right: 5px;
  183. text-decoration: underline;
  184. font-weight: 700;
  185. letter-spacing: 1px;
  186. [/class]
  187.  
  188. [class=credit]
  189. position: relative;
  190. overflow: hidden;
  191. width: 100%;
  192. height: 10px;
  193. text-align: center;
  194. font-style: normal;
  195. font-weight: normal;
  196. font-size: 8px;
  197. color: #dedede;
  198. opacity: 0.25;
  199. [/class]
  200.  
  201. [script class=button on=click]
  202. addClass slideup slidebkgd
  203. [/script]
  204. [class=slideup]
  205. animation-name: {post_id}slup;
  206. animation-duration: 1.7s;
  207. animation-fill-mode: forwards;
  208. [/class]
  209. [animation=slup]
  210. [keyframe=0]transform: translateY(0%);[/keyframe]
  211. [keyframe=100]transform: translateY(-100%);visibility:hidden;[/keyframe]
  212. [/animation]
  213.  
  214. [class=hidden]
  215. display:none;
  216. [/class]
  217.  
  218. [script class=linecircle1 on=mouseenter]
  219. fadeIn 0200 linehover1
  220. [/script]
  221.  
  222. [script class=linecircle1 on=mouseleave]
  223. fadeOut 0200 linehover1
  224. [/script]
  225.  
  226. [script class=linecircle2 on=mouseenter]
  227. fadeIn 0200 linehover2
  228. [/script]
  229.  
  230. [script class=linecircle2 on=mouseleave]
  231. fadeOut 0200 linehover2
  232. [/script]
  233.  
  234. [script class=linecircle3 on=mouseenter]
  235. fadeIn 0200 linehover3
  236. [/script]
  237.  
  238. [script class=linecircle3 on=mouseleave]
  239. fadeOut 0200 linehover3
  240. [/script]
  241.  
  242. [script class=linecircle4 on=mouseenter]
  243. fadeIn 0200 linehover4
  244. [/script]
  245.  
  246. [script class=linecircle4 on=mouseleave]
  247. fadeOut 0200 linehover4
  248. [/script]
  249.  
  250. [script class=tab on=click]
  251. hide tabsContent
  252. set currentTab (getText)
  253. if (eq ${currentTab} basics) (fadeIn 400 tabsContent1)
  254. if (eq ${currentTab} persona) (fadeIn 400 tabsContent2)
  255. if (eq ${currentTab} background) (fadeIn 400 tabsContent3)
  256. if (eq ${currentTab} misc.) (fadeIn 400 tabsContent4)
  257. [/script]
  258.  
  259.  
  260. [div class=bkgd]
  261. [div class=texture][/div]
  262. [div class=line style="width: 100%;top: 18%;"][/div]
  263. [div class=line style="width: 100%;top: 22%;"][/div]
  264. [div class=line style="width: 2px; height: 100%; left: 72px; color: var(--text-color);"][/div]
  265. [div class=line style="width: 2px; height: 100%; left: 87px; color: var(--text-color);"][/div]
  266.  
  267.  
  268. [div class="circlepic linecircle linecircle1 tab"][div class="linehover linehover1 hidden"][font=Viga]basics[/font][/div][/div]
  269. [div class="circlepic linecircle linecircle2 tab"][div class="linehover linehover2 hidden"][font=Viga]persona[/font][/div][/div]
  270. [div class="circlepic linecircle linecircle3 tab"][div class="linehover linehover3 hidden"][font=Viga]background[/font][/div][/div]
  271. [div class="circlepic linecircle linecircle4 tab"][div class="linehover linehover4 hidden"][font=Viga]misc.[/font][/div][/div]
  272.  
  273.  
  274. [div class="header tabsContent tabsContent1"][font=Viga]basics.[/font][/div]
  275. [div class="header tabsContent tabsContent2 hidden"][font=Viga]persona.[/font][/div]
  276. [div class="header tabsContent tabsContent3 hidden"][font=Viga]background.[/font][/div]
  277. [div class="header tabsContent tabsContent4 hidden"][font=Viga]misc.[/font][/div]
  278.  
  279.  
  280. [div class="textcontainer tabsContent tabsContent1"][div class=text][font=Quicksand][div class=tag][font=Viga]name:[/font][/div]Hero
  281.  
  282. [div class=tag][font=Viga]nickname:[/font][/div]Just Hero. Call her anything else and you'll have bigger problems than a damn nickname on your hands.
  283.  
  284. [div class=tag][font=Viga]age:[/font][/div]27
  285.  
  286. [div class=tag][font=Viga]gender:[/font][/div]Female
  287.  
  288. [div class=tag][font=Viga]sexuality:[/font][/div]Heterosexual
  289.  
  290. [div class=tag][font=Viga]role:[/font][/div]The Hero: not a superhero, but rather a hero who gives people the power to save themselves.
  291.  
  292. [div class=tag][font=Viga]faceclaim:[/font][/div]Sunmi
  293.  
  294. [div class=tag][font=Viga]hair color:[/font][/div]Black
  295.  
  296. [div class=tag][font=Viga]eye color:[/font][/div]Black
  297.  
  298. [div class=tag][font=Viga]height/weight:[/font][/div]5' 8"
  299.  
  300. [div class=tag][font=Viga]distinguishing features:[/font][/div]A mole on her cheek underneath her left eye
  301.  
  302. [div class=tag][font=Viga]body mods:[/font][/div]Hero has several ear piercings, all of which she has hoops in at all times.
  303.  
  304. [div class=tag][font=Viga]ailments:[/font][/div]While she refuses to show it, Hero suffers from the beginnings of rheumatoid arthritis and cannot run for long. She is also not the most mentally mature.
  305. [/font][/div][/div]
  306.  
  307.  
  308. [div class="textcontainer tabsContent tabsContent2 hidden"][div class=text][font=Quicksand][div class=tag][font=Viga]vices:[/font][/div]Mi sit amet mauris commodo quis imperdiet massa. Tincidunt vitae semper quis lectus nulla. Vestibulum lorem sed risus ultricies. Aliquam vestibulum morbi blandit cursus risus.
  309.  
  310. [div class=tag][font=Viga]virtues:[/font][/div]Amet consectetur adipiscing elit duis tristique sollicitudin. Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Sed blandit libero volutpat sed cras ornare arcu dui vivamus. Enim diam vulputate ut pharetra. Ac orci phasellus egestas tellus rutrum. Suspendisse ultrices gravida dictum fusce ut.
  311.  
  312. [div class=tag][font=Viga]strengths:[/font][/div]Neque sodales ut etiam sit amet nisl purus in mollis. Quam quisque id diam vel quam elementum pulvinar. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Vel eros donec ac odio tempor orci. Viverra accumsan in nisl nisi scelerisque eu. Mauris nunc congue nisi vitae.
  313.  
  314. [div class=tag][font=Viga]weaknesses:[/font][/div]Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Ut tortor pretium viverra suspendisse potenti nullam. Amet nisl purus in mollis. Risus viverra adipiscing at in tellus integer feugiat scelerisque varius. Diam volutpat commodo sed egestas egestas fringilla.
  315.  
  316. [div class=tag][font=Viga]likes:[/font][/div]In aliquam sem fringilla ut. Tincidunt lobortis feugiat vivamus at augue eget arcu. Est lorem ipsum dolor sit amet consectetur adipiscing. Ut etiam sit amet nisl purus in. Facilisis sed odio morbi quis commodo.
  317.  
  318. [div class=tag][font=Viga]dislikes:[/font][/div]Mauris ultrices eros in cursus turpis massa tincidunt. Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod. Lectus arcu bibendum at varius vel pharetra. Elementum eu facilisis sed odio morbi quis.
  319.  
  320. [div class=tag][font=Viga]fears:[/font][/div]Condimentum id venenatis a condimentum vitae sapien pellentesque. A diam sollicitudin tempor id. Non quam lacus suspendisse faucibus interdum posuere lorem. Eu consequat ac felis donec et odio pellentesque diam. Id cursus metus aliquam eleifend mi in nulla posuere. Sit amet nisl suscipit adipiscing.
  321. [/font][/div][/div]
  322.  
  323.  
  324. [div class="textcontainer tabsContent tabsContent3 hidden"][div class=text][font=Quicksand][div class=tag][font=Viga]family:[/font][/div]Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas.
  325.  
  326. [div class=tag][font=Viga]residence:[/font][/div]Sed blandit libero volutpat sed cras ornare arcu dui vivamus. Enim diam vulputate ut pharetra.
  327.  
  328. [div class=tag][font=Viga]education:[/font][/div]Ac orci phasellus egestas tellus rutrum. Suspendisse ultrices gravida dictum fusce ut.
  329.  
  330. [div class=tag][font=Viga]history:[/font][/div]Neque sodales ut etiam sit amet nisl purus in mollis. Quam quisque id diam vel quam elementum pulvinar. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Vel eros donec ac odio tempor orci. Viverra accumsan in nisl nisi scelerisque eu. Mauris nunc congue nisi vitae. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Ut tortor pretium viverra suspendisse potenti nullam. Amet nisl purus in mollis. Risus viverra adipiscing at in tellus integer feugiat scelerisque varius. Diam volutpat commodo sed egestas egestas fringilla.
  331.  
  332. In aliquam sem fringilla ut. Tincidunt lobortis feugiat vivamus at augue eget arcu. Est lorem ipsum dolor sit amet consectetur adipiscing. Ut etiam sit amet nisl purus in. Facilisis sed odio morbi quis commodo. Mauris ultrices eros in cursus turpis massa tincidunt. Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod. Lectus arcu bibendum at varius vel pharetra. Elementum eu facilisis sed odio morbi quis. Condimentum id venenatis a condimentum vitae sapien pellentesque. A diam sollicitudin tempor.
  333.  
  334. Nunc congue nisi vitae suscipit tellus mauris. Quis commodo odio aenean sed adipiscing. Auctor augue mauris augue neque gravida in fermentum et. Mus mauris vitae ultricies leo integer malesuada nunc vel risus. Amet est placerat in egestas erat imperdiet sed. Lorem ipsum dolor sit amet consectetur.
  335. [/font][/div][/div]
  336.  
  337.  
  338. [div class="textcontainer tabsContent tabsContent4 hidden"][div class=text][font=Quicksand][div class=tag][font=Viga]theme song:[/font][/div]Heroine by Sunmi
  339.  
  340. [div class=tag][font=Viga]mbti type:[/font][/div]ENTP
  341.  
  342. [div class=tag][font=Viga]enneagram type:[/font][/div]9
  343.  
  344. [div class=tag][font=Viga]other:[/font][/div]
  345.  
  346. [div class=tag][font=Viga]relationships:[/font][/div][LIST][*]In aliquam sem fringilla ut. Tincidunt lobortis feugiat vivamus at augue eget arcu. Est lorem ipsum dolor sit amet consectetur adipiscing. Ut etiam sit amet nisl purus in. Facilisis sed odio morbi quis commodo.
  347. [*]Mauris ultrices eros in cursus turpis massa tincidunt. Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod. Lectus arcu bibendum at varius vel pharetra. Elementum eu facilisis sed odio morbi quis. Condimentum id venenatis a condimentum vitae sapien pellentesque. A diam sollicitudin tempor.
  348. [*]Nunc congue nisi vitae suscipit tellus mauris. Quis commodo odio aenean sed adipiscing. Auctor augue mauris augue neque gravida in fermentum et. Mus mauris vitae ultricies leo integer malesuada nunc vel risus. Amet est placerat in egestas erat imperdiet sed. Lorem ipsum dolor sit amet consectetur.
  349. [*]Turpis egestas integer eget aliquet nibh praesent tristique. Dictum sit amet justo donec enim diam vulputate ut pharetra. Suscipit tellus mauris a diam maecenas sed enim ut sem. Etiam tempor orci eu lobortis elementum nibh. Pharetra et ultrices neque ornare aenean euismod elementum nisi. Sed tempus urna et pharetra pharetra.
  350. [*]At elementum eu facilisis sed. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Dictum at tempor commodo ullamcorper a. Dui vivamus arcu felis bibendum ut tristique et egestas quis. Purus gravida quis blandit turpis cursus. Senectus et netus et malesuada fames ac. Purus sit amet volutpat consequat mauris nunc congue.
  351. [*]Non quam lacus suspendisse faucibus interdum posuere lorem. Eu consequat ac felis donec et odio pellentesque diam. Id cursus metus aliquam eleifend mi in nulla posuere. Sit amet nisl suscipit adipiscing.
  352. [*]Ut etiam sit amet nisl purus. Viverra adipiscing at in tellus integer feugiat. Mattis vulputate enim nulla aliquet porttitor lacus. Ut pharetra sit amet aliquam. Libero id faucibus nisl tincidunt eget nullam non.
  353. [*]Massa id neque aliquam vestibulum morbi blandit. In vitae turpis massa sed elementum tempus egestas sed sed. Luctus accumsan tortor posuere ac ut consequat. Mattis aliquam faucibus purus in massa tempor nec feugiat.
  354. [/LIST][/font][/div][/div]
  355.  
  356.  
  357. [div class=slidebkgd]
  358. [div class=texture][/div]
  359. [div class=line style="width: 94%;top: 58%;left: 3%;"][/div]
  360. [div class="name button"][font=Viga]it's[br][/br]your choice.[/font][/div]
  361. [div class=role][font=Viga]the hero.[/font][/div]
  362. [div class="circlepic homecircle"][/div]
  363. [/div]
  364. [/div]
  365. [/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!