API tools faq
paste
SHADYACE

aurum

SHADYACE
Aug 29th, 2019
247
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.21 KB | None | 0 0
raw download clone embed print report
  1. [nobr]
  2. [class=variables]
  3. cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important;
  4. --color: #eeb475;
  5. [/class]
  6.  
  7. [class=codeContainer]
  8. width: 400px;
  9. height: 410px;
  10. margin: auto;
  11. display: flex;
  12. flex-direction: column;
  13. justify-content: space-between;
  14. overflow: hidden;
  15. [/class]
  16.  
  17. [class name=codeContainer maxWidth=450px]
  18. width: 350px;
  19. [/class]
  20.  
  21. [class=top]
  22. width: 400px;
  23. height: 95px;
  24. display: flex;
  25. justify-content: space-between;
  26. align-items: flex-end;
  27. flex-wrap: wrap;
  28. [/class]
  29.  
  30. [class name=top maxWidth=450px]
  31. width: 350px;
  32. [/class]
  33.  
  34. [class=name]
  35. color: transparent;
  36. font-size: 70px;
  37. -webkit-text-stroke-width: 2px;
  38. -webkit-text-stroke-color: var(--color);
  39. letter-spacing: -2px;
  40. height: 60px;
  41. line-height: 0.9;
  42. transition: 0.5s;
  43. [/class]
  44.  
  45. [class name=name maxWidth=450px]
  46. font-size: 65px;
  47. line-height: 1;
  48. width: 210px;
  49. overflow: hidden;
  50. [/class]
  51.  
  52. [class name=name state=hover]
  53. cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important;
  54. color: var(--color);
  55. [/class]
  56.  
  57. [class name=tab state=hover]
  58. cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important;
  59. [/class]
  60.  
  61. [class=tabsContainer]
  62. width: 160px;
  63. height: 40px;
  64. display: flex;
  65. justify-content: space-between;
  66. align-items: flex-end;
  67. [/class]
  68.  
  69. [class name=tabsContainer maxWidth=450px]
  70. width: 140px;
  71. [/class]
  72.  
  73. [class=tab]
  74. height: 20px;
  75. width: 20px;
  76. border: 2px solid var(--color);
  77. border-radius: 50%;
  78. transition: 0.5s;
  79. display: flex;
  80. justify-content: center;
  81. align-items: center;
  82. [/class]
  83.  
  84. [class=tabInner]
  85. height: 10px;
  86. width: 10px;
  87. border: 2px solid var(--color);
  88. border-radius: 50%;
  89. transition: 0.5s;
  90. opacity: 0;
  91. [/class]
  92.  
  93. [class=selected]
  94. background-color: var(--color);
  95. opacity: 1;
  96. [/class]
  97.  
  98. [class=container]
  99. height: 300px;
  100. width: 390px;
  101. position: relative;
  102. margin: auto;
  103. [/class]
  104.  
  105. [class name=container maxWidth=450px]
  106. width: 350px;
  107. [/class]
  108.  
  109. [class=content]
  110. height: 300px;
  111. width: 400px;
  112. overflow: hidden;
  113. opacity: 0;
  114. position: absolute;
  115. transition: 0.5s;
  116. font-size: 12px;
  117. [/class]
  118.  
  119. [class name=content maxWidth=450px]
  120. width: 350px;
  121. [/class]
  122.  
  123. [class=show]
  124. z-index: 1;
  125. opacity: 1;
  126. [/class]
  127.  
  128. [class=imgHome]
  129. background-image: url('https://pmcwwd.files.wordpress.com/2018/06/olivia-holt43147.jpeg?w=930&h=1024');
  130. background-size: cover;
  131. height: 150px;
  132. width: 150px;
  133. [/class]
  134.  
  135. [class=textHome]
  136. font-size: 20px;
  137. text-transform: uppercase;
  138. text-align: center;
  139. width: 200px;
  140. [/class]
  141.  
  142. [class=title]
  143. font-weight: 900;
  144. text-transform: uppercase;
  145. text-align: right;
  146. font-size: 16px;
  147. [/class]
  148.  
  149. [class=block]
  150. width: auto;
  151. padding: 0px 2px 0px 2px;
  152. font-size: 10px;
  153. display: inline-block;
  154. background-color: var(--color);
  155. text-transform: uppercase;
  156. color: white;
  157. [/class]
  158.  
  159. [class=imgSmallContainer]
  160. width: 100%;
  161. height: 90px;
  162. display: flex;
  163. justify-content: space-evenly;
  164. margin: 10px 10px;
  165. [/class]
  166.  
  167. [class=imgSmall]
  168. width: 90px;
  169. height: 90px;
  170. background-size: cover;
  171. background-position: 80% 50%;
  172. filter: saturate(100%);
  173. [/class]
  174.  
  175. [class=scroll]
  176. overflow-y: scroll;
  177. padding-right: 40px;
  178. width: 100%;
  179. height: 100%;
  180. [/class]
  181.  
  182. [class=indent]
  183. display: inline-block;
  184. width: 20px;
  185. height: 1px;
  186. [/class]
  187.  
  188. [script class=tab01 on=mouseenter]
  189. addClass show tabInner01
  190. [/script]
  191.  
  192. [script class=tab01 on=mouseleave]
  193. removeClass show tabInner01
  194. [/script]
  195.  
  196. [script class=tab02 on=mouseenter]
  197. addClass show tabInner02
  198. [/script]
  199.  
  200. [script class=tab02 on=mouseleave]
  201. removeClass show tabInner02
  202. [/script]
  203.  
  204. [script class=tab03 on=mouseenter]
  205. addClass show tabInner03
  206. [/script]
  207.  
  208. [script class=tab03 on=mouseleave]
  209. removeClass show tabInner03
  210. [/script]
  211.  
  212. [script class=tab04 on=mouseenter]
  213. addClass show tabInner04
  214. [/script]
  215.  
  216. [script class=tab04 on=mouseleave]
  217. removeClass show tabInner04
  218. [/script]
  219.  
  220. [script class=tab05 on=mouseenter]
  221. addClass show tabInner05
  222. [/script]
  223.  
  224. [script class=tab05 on=mouseleave]
  225. removeClass show tabInner05
  226. [/script]
  227.  
  228. [script class=name on=click]
  229. removeClass selected tabInner01
  230. removeClass selected tabInner02
  231. removeClass selected tabInner03
  232. removeClass selected tabInner04
  233. removeClass selected tabInner05
  234.  
  235. addClass show contentHome
  236. removeClass show content01
  237. removeClass show content02
  238. removeClass show content03
  239. removeClass show content04
  240. removeClass show content05
  241. [/script]
  242.  
  243. [script class=tab01 on=click]
  244. addClass selected tabInner01
  245. removeClass selected tabInner02
  246. removeClass selected tabInner03
  247. removeClass selected tabInner04
  248. removeClass selected tabInner05
  249.  
  250. addClass show content01
  251. removeClass show contentHome
  252. removeClass show content02
  253. removeClass show content03
  254. removeClass show content04
  255. removeClass show content05
  256. [/script]
  257.  
  258. [script class=tab02 on=click]
  259. addClass selected tabInner02
  260. removeClass selected tabInner01
  261. removeClass selected tabInner03
  262. removeClass selected tabInner04
  263. removeClass selected tabInner05
  264.  
  265. addClass show content02
  266. removeClass show contentHome
  267. removeClass show content01
  268. removeClass show content03
  269. removeClass show content04
  270. removeClass show content05
  271. [/script]
  272.  
  273. [script class=tab03 on=click]
  274. addClass selected tabInner03
  275. removeClass selected tabInner01
  276. removeClass selected tabInner02
  277. removeClass selected tabInner04
  278. removeClass selected tabInner05
  279.  
  280. addClass show content03
  281. removeClass show contentHome
  282. removeClass show content01
  283. removeClass show content02
  284. removeClass show content04
  285. removeClass show content05
  286. [/script]
  287.  
  288. [script class=tab04 on=click]
  289. addClass selected tabInner04
  290. removeClass selected tabInner01
  291. removeClass selected tabInner02
  292. removeClass selected tabInner03
  293. removeClass selected tabInner05
  294.  
  295. addClass show content04
  296. removeClass show contentHome
  297. removeClass show content01
  298. removeClass show content02
  299. removeClass show content03
  300. removeClass show content05
  301. [/script]
  302.  
  303. [script class=tab05 on=click]
  304. addClass selected tabInner05
  305. removeClass selected tabInner01
  306. removeClass selected tabInner02
  307. removeClass selected tabInner03
  308. removeClass selected tabInner04
  309.  
  310. addClass show content05
  311. removeClass show contentHome
  312. removeClass show content01
  313. removeClass show content02
  314. removeClass show content03
  315. removeClass show content04
  316. [/script]
  317.  
  318. [div class=variables]
  319. [div class=codeContainer]
  320. [div class=top]
  321. [div class=name][font=abril fatface]aurum[/font][div class=tabBar][/div][/div]
  322.  
  323. [div class=tabsContainer]
  324. [div class="tab tab01"][div class="tabInner tabInner01"][/div][/div]
  325. [div class="tab tab02"][div class="tabInner tabInner02"][/div][/div]
  326. [div class="tab tab03"][div class="tabInner tabInner03"][/div][/div]
  327. [div class="tab tab04"][div class="tabInner tabInner04"][/div][/div]
  328. [div class="tab tab05"][div class="tabInner tabInner05"][/div][/div]
  329. [/div]
  330. [/div]
  331.  
  332. [div class=container]
  333. [div class="content contentHome show" style="display: flex; align-items: center; justify-content: space-between;"]
  334. [div class=imgHome][/div]
  335. [div class=textHome]
  336. [font=work sans]essence of the sun[/font]
  337. [/div]
  338. [/div]
  339. [div class="content content01"]
  340. [div class=scroll]
  341. [div class=title][font=abril fatface]REQUISITE[/font][/div]
  342. [div class=imgSmallContainer]
  343. [div class=imgSmall style="background-image: url('https://i.ibb.co/DMx6RWP/206-32.gif');"][/div]
  344. [div class=imgSmall style="background-image: url('https://i.ibb.co/xjTJjk4/206-39.gif');"][/div]
  345. [div class=imgSmall style="background-image: url('https://i.ibb.co/NSwCn3F/206-36.gif');"][/div]
  346. [/div]
  347. [div class=block]name[/div] name here.
  348. [br][/br]
  349. [div class=block]age[/div] output.
  350. [br][/br]
  351. [div class=block]input[/div] output.
  352. [br][/br]
  353. [div class=block]input[/div] output.
  354. [br][/br]
  355. [div class=block]input[/div] output.
  356. [br][/br]
  357. [div class=block]input[/div] output.
  358. [br][/br]
  359. [div class=block]input[/div] output.
  360.  
  361. [/div]
  362. [/div]
  363.  
  364. [div class="content content02"]
  365. [div class=scroll]
  366. [div class=title][font=abril fatface]APPEARANCE[/font][/div]
  367. [div class=imgSmallContainer]
  368. [div class=imgSmall style="background-image: url('https://i.ibb.co/gy8SsyW/206-13.gif');"][/div]
  369. [div class=imgSmall style="background-image: url('https://i.ibb.co/Wcn9JDh/206-14.gif');"][/div]
  370. [div class=imgSmall style="background-image: url('https://i.ibb.co/K9xczCj/206-12.gif');"][/div]
  371. [/div]
  372. [div class=block]height[/div] output.
  373. [br][/br]
  374. [div class=block]hair[/div] output.
  375. [br][/br]
  376. [div class=block]eyes[/div] output.
  377. [br][/br]
  378. [/div]
  379. [/div]
  380.  
  381. [div class="content content03"]
  382. [div class=scroll]
  383. [div class=title][font=abril fatface]PERSONA[/font][/div]
  384. [div class=imgSmallContainer]
  385. [div class=imgSmall style="background-image: url('https://i.ibb.co/mSYW9y4/206-51.gif'); background-position: 30% 50%;"][/div]
  386. [div class=imgSmall style="background-image: url('https://i.ibb.co/vmdHN1v/206-52.gif'); background-position: 30% 50%;"][/div]
  387. [div class=imgSmall style="background-image: url('https://i.ibb.co/bRp1SCx/206-53.gif'); background-position: 30% 50%;"][/div]
  388. [/div]
  389. [div class=block]personality[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac ligula maximus, rutrum dui sit amet, volutpat felis. Suspendisse vel rhoncus leo, at placerat leo. In porttitor bibendum massa non bibendum. Aenean vitae maximus dui. Proin sollicitudin, erat ac volutpat rutrum, augue justo luctus quam, luctus mattis lorem velit eget purus. Donec varius fringilla massa, vitae cursus turpis finibus sit amet. Donec et vehicula enim.
  390. [br][/br][br][/br]
  391. Donec sit amet dictum dui. Cras id tristique nibh. Morbi sit amet massa risus. Etiam faucibus lorem a metus molestie, sed suscipit est rutrum. Duis sit amet sem eget dolor finibus pulvinar. Nulla nibh ligula, accumsan eu nunc a, venenatis ornare quam. Mauris eu eros id augue maximus porta at ut tortor. Nullam elit mi, gravida at velit vitae, viverra rutrum nisl. Nullam odio nunc, aliquet sit amet eros mollis, dictum tempus mi. Aenean eget metus tellus.
  392. [br][/br]
  393. [div class=block]likes[/div] output.
  394. [br][/br]
  395. [div class=block]dislikes[/div] output.
  396. [br][/br]
  397. [div class=block]fears[/div] output.
  398. [br][/br]
  399. [div class=block]quirks[/div] output.
  400. [br][/br]
  401. [/div]
  402. [/div]
  403.  
  404. [div class="content content04"]
  405. [div class=scroll]
  406. [div class=title][font=abril fatface]INFORMATION[/font][/div]
  407. [div class=imgSmallContainer]
  408. [div class=imgSmall style="background-image: url('https://i.ibb.co/6R1rHs0/206-179.gif');"][/div]
  409. [div class=imgSmall style="background-image: url('https://i.ibb.co/LzwVTXm/206-178.gif');"][/div]
  410. [div class=imgSmall style="background-image: url('https://i.ibb.co/ZG3PCzZ/206-180.gif');"][/div]
  411. [/div]
  412. [div class=block]input[/div] output.
  413. [br][/br]
  414. [div class=block]list of something[/div] [br][/br]
  415. [div class=indent][/div][b]→ list item #1 ;[/b] description... this could make a list of powers, skills, inventory etc. do whatever you want.
  416. [br][/br]
  417. [div class=indent][/div][b]→ list item #2 ;[/b] description
  418. [br][/br]
  419. [br][/br]
  420. [div class=block]input[/div] output.
  421. [br][/br][br][/br][br][/br]
  422. [/div]
  423. [/div]
  424.  
  425. [div class="content content05"]
  426. [div class=scroll]
  427. [div class=title][font=abril fatface]BACKGROUND[/font][/div]
  428. [div class=imgSmallContainer]
  429. [div class=imgSmall style="background-image: url('https://i.ibb.co/StXDZXG/206-42.gif'); background-position: 50% 50%;"][/div]
  430. [div class=imgSmall style="background-image: url('https://i.ibb.co/NtB7p1C/206-43.gif'); background-position: 50% 50%;"][/div]
  431. [div class=imgSmall style="background-image: url('https://i.ibb.co/xJrr8jw/206-44.gif'); background-position: 50% 50%;"][/div]
  432. [/div]
  433. [div class=block]family[/div][br][/br]
  434. [div class=indent][/div]→ did someone say more lists?
  435. [br][/br]
  436. [div class=indent][/div]→ i think yes
  437. [br][/br]
  438. [div class=indent][/div]→ mhm
  439. [br][/br]
  440. [div class=block]background[/div] Suspendisse vel ligula justo. Phasellus porta euismod tincidunt. Morbi elementum sem sed elit pellentesque, in commodo ante interdum. In volutpat malesuada dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer molestie neque ac felis pretium, vitae volutpat neque fermentum. Nullam hendrerit sem nisi, eu consectetur metus dictum vel.
  441. [br][/br][br][/br]
  442. Maecenas egestas mattis neque, quis rhoncus nisi maximus eu. Donec fermentum ante nibh, a lobortis tortor luctus eu. Nam gravida sollicitudin consectetur. Praesent et metus porttitor, hendrerit felis a, eleifend sapien. Sed eget accumsan tellus, a condimentum orci. In ultricies ex ac semper tempus. Praesent porttitor eros cursus, ultricies lectus in, fermentum sapien. Praesent et viverra dui, id iaculis lacus.
  443. [br][/br][br][/br]
  444. Donec ornare, nisl at pellentesque luctus, mi massa ullamcorper felis, in tristique urna leo sit amet eros. Mauris fermentum turpis nec commodo sagittis. Curabitur euismod pharetra lorem, quis vulputate lacus aliquet eget. Fusce sit amet sodales diam. Phasellus congue iaculis tempus. Aliquam auctor quam ex, quis mollis massa rutrum ut. Aliquam non arcu in nisl porta rhoncus.
  445. [/div]
  446. [/div]
  447. [/div]
  448. [/div]
  449. [/div]
  450. [div=font-size: 9px; text-align: center; opacity: 0.7;]coded by [user=26242]shady[/user].[/div]
  451. [/nobr]
Add Comment
Please, Sign In to add comment
Public Pastes
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!