API tools faq
paste
Advertisement
wonhae

code idk what number

wonhae
Jul 26th, 2018
175
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.63 KB | None | 0 0
raw download clone embed print report
  1. [nobr]
  2. [comment]// CODE BY @WONHAE //[/comment]
  3. [class=container]
  4. --bg-color: #000;
  5. --color-g-1: #FFD91C;
  6. --color-g-2: #FF597D;
  7. --icon: url('https://i.pinimg.com/736x/2c/4b/20/2c4b20c273ca25f3e4326e82e286549a.jpg');
  8. --name-title: #fff;
  9. --txt: #fff;
  10. --img1: url('https://i1.wp.com/www.kpopscene.com/wp-content/uploads/2017/06/solar-mamamoo-02.jpg?fit=720%2C720');
  11. --img2: url('https://i.pinimg.com/736x/4e/53/e7/4e53e78704b4a73cbdeebd89d26d31c2.jpg');
  12. --gimg1: url('https://78.media.tumblr.com/5fab528507e6a419675668a7275e50eb/tumblr_p5v2v0Gxvu1v0q2rco4_400.png');
  13. --gimg2: url('http://pa1.narvii.com/6746/0913e7961c6d0b0232579c5f106d8c5f31686434_00.gif');
  14. --gimg3: url('https://78.media.tumblr.com/2995f9ae47e692ff7bfd286b321127ad/tumblr_oiyk3kkCZk1vksaceo6_400.gif');
  15. --gimg4: url('http://cfile1.uf.tistory.com/original/99B033455ABA7C242AC125');
  16. --gimg5: url('https://0.soompi.io/wp-content/uploads/2018/04/19083212/solar.jpg');
  17. --gimg6: url('https://i.pinimg.com/originals/63/48/e7/6348e736198b7fa88976143cbbcc1306.gif');
  18. height: 400px;
  19. width: 550px;
  20. background-color: var(--bg-color);
  21. margin: auto;
  22. -webkit-filter: grayscale(100%);
  23. transition: 1s;
  24. overflow: hidden;
  25. [/class]
  26.  
  27. [class name=container state=hover]
  28. -webkit-filter: grayscale(0%);
  29. transition: 1s;
  30. cursor: url('https://78.media.tumblr.com/tumblr_m2wj9k9UPt1qfamg6.png'), auto !important;
  31. [/class]
  32.  
  33. [class=sidetitle]
  34. height: 50px;
  35. width: 400px;
  36. position: absolute;
  37. margin-left: 10px;
  38. margin-top: 400px;
  39. transform: rotate(-90deg);
  40. transform-origin: 0% 0%;
  41. [/class]
  42.  
  43. [class=title]
  44. text-align: center;
  45. font-family: 'Muli' , sans-serif;
  46. font-size: 40px;
  47. font-weight: bold;
  48. letter-spacing: 8px;
  49. text-transform: uppercase;
  50. background: -webkit-linear-gradient(0deg, var(--color-g-1), var(--color-g-2));
  51. -webkit-background-clip: text;
  52. -webkit-text-fill-color: transparent;
  53. transition: 1s;
  54. [/class]
  55.  
  56. [class=icon]
  57. height: 110px;
  58. width: 110px;
  59. border-radius: 50%;
  60. position: absolute;
  61. margin-left: 100px;
  62. margin-top: 40px;
  63. background-image: var(--icon);
  64. background-size: cover;
  65. background-position: center center;
  66. border: 3px solid var(--color-g-1);
  67. transition: 0.5s;
  68. [/class]
  69.  
  70. [class name=icon state=hover]
  71. border: 3px solid var(--color-g-2);
  72. transition: 0.5s;
  73. [/class]
  74.  
  75. [class=nametitle]
  76. height: 24px;
  77. background-color: transparent;
  78. position: absolute;
  79. margin-left: 120px;
  80. margin-top: 170px;
  81. border-bottom: 1px solid var(--color-g-1);
  82. [/class]
  83.  
  84. [class=nametxt]
  85. font-family: 'Ubuntu' , sans-serif;
  86. font-size: 14px;
  87. text-align: center;
  88. letter-spacing: 2px;
  89. font-weight: normal;
  90. text-transform: uppercase;
  91. color: var(--name-title);
  92. [/class]
  93.  
  94. [class=quote]
  95. width: 180px;
  96. position: absolute;
  97. margin-left: 67px;
  98. margin-top: 205px;
  99. background-color: transparent;
  100. [/class]
  101.  
  102. [class=quotetxt]
  103. font-family: 'Muli' , sans-serif;
  104. font-size: 11.5px;
  105. text-align: center;
  106. letter-spacing: 1.2px;
  107. font-weight: normal;
  108. color: var(--txt);
  109. transition: 0.8s;
  110. [/class]
  111.  
  112. [class name=quotetxt state=hover]
  113. color: var(--color-g-2);
  114. transition: 0.8s;
  115. [/class]
  116.  
  117. [class=linkbox1]
  118. height: 17px;
  119. width: 60px;
  120. background-color: transparent;
  121. position: absolute;
  122. margin-top: 270px;
  123. margin-left: 90px;
  124. border: 1px solid var(--color-g-1);
  125. z-index: 1;
  126. opacity: 0.9;
  127. [/class]
  128.  
  129. [class=linkbox1bg]
  130. height: 18px;
  131. width: 00px;
  132. background-color: var(--color-g-2);
  133. position: absolute;
  134. margin-top: 271px;
  135. margin-left: 91px;
  136. z-index: -1;
  137. transition: 0.7s;
  138. opacity: 0.8;
  139. [/class]
  140.  
  141. [class=linkbox2]
  142. height: 17px;
  143. width: 60px;
  144. background-color: transparent;
  145. position: absolute;
  146. margin-top: 270px;
  147. margin-left: 160px;
  148. border: 1px solid var(--color-g-1);
  149. z-index: 1;
  150. opacity: 0.9;
  151. [/class]
  152.  
  153. [class=linkbox2bg]
  154. height: 18px;
  155. width: 00px;
  156. background-color: var(--color-g-2);
  157. position: absolute;
  158. margin-top: 271px;
  159. margin-left: 161px;
  160. z-index: -1;
  161. transition: 0.7s;
  162. opacity: 0.8;
  163. [/class]
  164.  
  165. [class=linkbox3]
  166. height: 17px;
  167. width: 60px;
  168. background-color: transparent;
  169. position: absolute;
  170. margin-top: 297px;
  171. margin-left: 90px;
  172. border: 1px solid var(--color-g-1);
  173. z-index: 1;
  174. opacity: 0.9;
  175. [/class]
  176.  
  177. [class=linkbox3bg]
  178. height: 18px;
  179. width: 00px;
  180. background-color: var(--color-g-2);
  181. position: absolute;
  182. margin-top: 298px;
  183. margin-left: 91px;
  184. z-index: -1;
  185. transition: 0.7s;
  186. opacity: 0.8;
  187. [/class]
  188.  
  189. [class=linkbox4]
  190. height: 17px;
  191. width: 60px;
  192. background-color: transparent;
  193. position: absolute;
  194. margin-top: 297px;
  195. margin-left: 160px;
  196. border: 1px solid var(--color-g-1);
  197. z-index: 1;
  198. opacity: 0.9;
  199. [/class]
  200.  
  201. [class=linkbox4bg]
  202. height: 18px;
  203. width: 00px;
  204. background-color: var(--color-g-2);
  205. position: absolute;
  206. margin-top: 298px;
  207. margin-left: 161px;
  208. z-index: -1;
  209. transition: 0.7s;
  210. opacity: 0.8;
  211. [/class]
  212.  
  213. [class=linkanim]
  214. width: 61px;
  215. transition: 0.7s;
  216. [/class]
  217.  
  218. [class=linktxt]
  219. font-family: 'Muli' , sans-serif;
  220. font-size: 10px;
  221. text-align: center;
  222. letter-spacing: 1.2px;
  223. padding-top: -1px;
  224. font-weight: normal;
  225. color: var(--txt);
  226. [/class]
  227.  
  228. [class=heart]
  229. font-family: 'Muli' , sans-serif;
  230. font-size: 13px;
  231. text-align: center;
  232. letter-spacing: 1.2px;
  233. color: var(--color-g-2);
  234. text-decoration: none;
  235. position: absolute;
  236. margin-top: 350px;
  237. margin-left: 150px;
  238. opacity: 0.8;
  239. [/class]
  240.  
  241. [class=page1]
  242. height: 400px;
  243. width: 290px;
  244. background-color: transparent;
  245. position: absolute;
  246. margin-left: 260px;
  247. overflow-y: scroll;
  248. opacity: 0;
  249. transition: 0.4s;
  250. z-index: -10;
  251. [/class]
  252.  
  253. [class=page2]
  254. height: 400px;
  255. width: 290px;
  256. background-color: transparent;
  257. position: absolute;
  258. margin-left: 260px;
  259. overflow: hidden;
  260. opacity: 0;
  261. transition: 0.4s;
  262. z-index: -10;
  263. [/class]
  264.  
  265. [class=page3]
  266. height: 400px;
  267. width: 290px;
  268. background-color: transparent;
  269. position: absolute;
  270. margin-left: 260px;
  271. overflow: hidden;
  272. opacity: 0;
  273. transition: 0.4s;
  274. z-index: -10;
  275. [/class]
  276.  
  277. [class=page4]
  278. height: 400px;
  279. width: 290px;
  280. background-color: transparent;
  281. position: absolute;
  282. margin-left: 260px;
  283. overflow: hidden;
  284. opacity: 0;
  285. transition: 0.4s;
  286. z-index: -10;
  287. [/class]
  288.  
  289. [class=txt]
  290. font-family: 'Muli' , sans-serif;
  291. font-size: 11px;
  292. text-align: justify;
  293. letter-spacing: 1.1px;
  294. color: var(--txt);
  295. [/class]
  296.  
  297. [class=show]
  298. z-index: 1;
  299. opacity: 1;
  300. transition: 0.4s 0.2s;
  301. [/class]
  302.  
  303. [class=h1]
  304. height: 40px;
  305. width: 270px;
  306. border-bottom: 2px solid var(--color-g-2);
  307. position: absolute;
  308. margin-top: 10px;
  309. margin-left: 10px;
  310. [/class]
  311.  
  312. [class=h1txt]
  313. font-family: 'Muli' , sans-serif;
  314. font-size: 24px;
  315. color: var(--txt);
  316. opacity: 0.95;
  317. text-align: right;
  318. text-transform: uppercase;
  319. letter-spacing: 2px;
  320. [/class]
  321.  
  322. [class=outer]
  323. height: 400px;
  324. width: 290px;
  325. overflow-y: scroll;
  326. position: absolute;
  327. padding-right: 30px;
  328. background-color: transparent;
  329. z-index: 1;
  330. [/class]
  331.  
  332. [comment]// HOME IMAGE POSTS //[/comment]
  333.  
  334. [class=imgpost]
  335. height: 270px;
  336. width: 230px;
  337. margin-left: 25px;
  338. background-color: transparent;
  339. position: relative
  340. [/class]
  341.  
  342. [class=img1]
  343. border: 2px solid var(--color-g-1);
  344. background-image: var(--img1);
  345. background-size: cover;
  346. background-position: center center;
  347. transition: 0.5s;
  348. [/class]
  349.  
  350. [class name=img1 state=hover]
  351. border: 2px solid var(--color-g-2);
  352. transition: 0.5s;
  353. [/class]
  354.  
  355. [class=img2]
  356. border: 2px solid var(--color-g-1);
  357. background-image: var(--img2);
  358. background-size: cover;
  359. background-position: center center;
  360. transition: 0.5s;
  361. [/class]
  362.  
  363. [class name=img2 state=hover]
  364. border: 2px solid var(--color-g-2);
  365. transition: 0.5s;
  366. [/class]
  367.  
  368. [class=caption]
  369. width: 230px;
  370. border-bottom: 1px solid var(--color-g-2);
  371. position: relative;
  372. margin-top: 5px;
  373. margin-left: 25px;
  374. text-align: right;
  375. padding-bottom: 5px;
  376. font-family: 'Muli' , sans-serif;
  377. font-size: 10px;
  378. color: var(--txt);
  379. transition: 0.5s;
  380. [/class]
  381.  
  382. [class name=caption state=hover]
  383. color: var(--color-g-2);
  384. transition: 0.5s;
  385. [/class]
  386.  
  387. [class=blankspace]
  388. margin-bottom: 40px;
  389. [/class]
  390.  
  391. [class=textbox]
  392. width: 270px;
  393. background-color: transparent;
  394. margin-top: 10px;
  395. margin-left: 10px;
  396. position: relative;
  397. opacity: 0.9;
  398. z-index: 1;
  399. [/class]
  400.  
  401. [class=h2]
  402. display: inline;
  403. font-size: 13px;
  404. line-height: 25px;
  405. border-bottom: solid 1px var(--color-g-2);
  406. [/class]
  407.  
  408. [class=listtxt]
  409. margin-top: 5px;
  410. margin-left: 5px;
  411. font-size: 11px;
  412. [/class]
  413.  
  414. [class=bulletpoint]
  415. display: inline;
  416. color: var(--color-g-1);
  417. font-size: 12px;
  418. [/class]
  419.  
  420. [class=h3]
  421. display: inline;
  422. line-height: 18px;
  423. padding-bottom: 2px;
  424. text-transform: uppercase;
  425. color: var(--color-g-1);
  426. [/class]
  427.  
  428. [class=txtouter]
  429. height: 340px;
  430. width: 270px;
  431. margin-top: 55px;
  432. overflow-y: scroll;
  433. position: absolute;
  434. padding-right: 40px;
  435. background-color: transparent;
  436. z-index: 1;
  437. [/class]
  438.  
  439.  
  440. [comment] // GALLERY IMAGES // [/comment]
  441.  
  442. [class=galleryimg]
  443. height: 110px;
  444. width: 110px;
  445. background-color: transparent;
  446. margin-left: 18px;
  447. margin-top: 25px;
  448. -webkit-filter: grayscale(10%);
  449. [/class]
  450.  
  451. [class=gimg1]
  452. border: 2px solid var(--color-g-1);
  453. background-image: var(--gimg1);
  454. background-size: cover;
  455. background-position: center center;
  456. transition: 0.5s;
  457. [/class]
  458.  
  459. [class name=gimg1 state=hover]
  460. border: 2px solid var(--color-g-2);
  461. transition: 0.5s;
  462. [/class]
  463.  
  464. [class=gimg2]
  465. border: 2px solid var(--color-g-1);
  466. background-image: var(--gimg2);
  467. background-size: cover;
  468. background-position: center center;
  469. transition: 0.5s;
  470. [/class]
  471.  
  472. [class name=gimg2 state=hover]
  473. border: 2px solid var(--color-g-2);
  474. transition: 0.5s;
  475. [/class]
  476.  
  477. [class=gimg3]
  478. border: 2px solid var(--color-g-1);
  479. background-image: var(--gimg3);
  480. background-size: cover;
  481. background-position: center center;
  482. transition: 0.5s;
  483. [/class]
  484.  
  485. [class name=gimg3 state=hover]
  486. border: 2px solid var(--color-g-2);
  487. transition: 0.5s;
  488. [/class]
  489.  
  490. [class=gimg4]
  491. border: 2px solid var(--color-g-1);
  492. background-image: var(--gimg4);
  493. background-size: cover;
  494. background-position: center center;
  495. transition: 0.5s;
  496. [/class]
  497.  
  498. [class name=gimg4 state=hover]
  499. border: 2px solid var(--color-g-2);
  500. transition: 0.5s;
  501. [/class]
  502.  
  503. [class=gimg5]
  504. border: 2px solid var(--color-g-1);
  505. background-image: var(--gimg5);
  506. background-size: cover;
  507. background-position: center center;
  508. transition: 0.5s;
  509. [/class]
  510.  
  511. [class name=gimg5 state=hover]
  512. border: 2px solid var(--color-g-2);
  513. transition: 0.5s;
  514. [/class]
  515.  
  516. [class=gimg6]
  517. border: 2px solid var(--color-g-1);
  518. background-image: var(--gimg6);
  519. background-size: cover;
  520. background-position: center center;
  521. transition: 0.5s;
  522. [/class]
  523.  
  524. [class name=gimg6 state=hover]
  525. border: 2px solid var(--color-g-2);
  526. transition: 0.5s;
  527. [/class]
  528.  
  529. [comment]scripts[/comment]
  530. [script class=linkbox1 on=mouseenter]
  531. addClass linkanim linkbox1bg
  532. [/script]
  533.  
  534. [script class=linkbox1 on=mouseleave]
  535. removeClass linkanim linkbox1bg
  536. [/script]
  537.  
  538. [script class=linkbox2 on=mouseenter]
  539. addClass linkanim linkbox2bg
  540. [/script]
  541.  
  542. [script class=linkbox2 on=mouseleave]
  543. removeClass linkanim linkbox2bg
  544. [/script]
  545.  
  546. [script class=linkbox3 on=mouseenter]
  547. addClass linkanim linkbox3bg
  548. [/script]
  549.  
  550. [script class=linkbox3 on=mouseleave]
  551. removeClass linkanim linkbox3bg
  552. [/script]
  553.  
  554. [script class=linkbox4 on=mouseenter]
  555. addClass linkanim linkbox4bg
  556. [/script]
  557.  
  558. [script class=linkbox4 on=mouseleave]
  559. removeClass linkanim linkbox4bg
  560. [/script]
  561.  
  562. [script class=page1 on=init]
  563. addClass show
  564. [/script]
  565.  
  566. [script class=linkbox1 on=click]
  567. addClass show page1
  568. removeClass show page2
  569. removeClass show page3
  570. removeClass show page4
  571. [/script]
  572.  
  573. [script class=linkbox2 on=click]
  574. addClass show page2
  575. removeClass show page1
  576. removeClass show page3
  577. removeClass show page4
  578. [/script]
  579.  
  580. [script class=linkbox3 on=click]
  581. addClass show page3
  582. removeClass show page1
  583. removeClass show page2
  584. removeClass show page4
  585. [/script]
  586.  
  587. [script class=linkbox4 on=click]
  588. addClass show page4
  589. removeClass show page1
  590. removeClass show page2
  591. removeClass show page3
  592. [/script]
  593.  
  594. [div style="display: none;"][font=Muli].[/font][font=Ubuntu].[/font][/div]
  595. [div class=container]
  596. [div class="sidetitle title"]mamammoo[/div]
  597. [div class=icon][/div]
  598. [div class="nametitle nametxt"]egoistic[/div]
  599. [div class="quote quotetxt"]j'ai beaucoup de mal de coeur,[/div]
  600. [div class="linkbox1 linktxt"]home[/div][div class=linkbox1bg][/div]
  601. [div class="linkbox2 linktxt"]persona[/div][div class=linkbox2bg][/div]
  602. [div class="linkbox3 linktxt"]history[/div][div class=linkbox3bg][/div]
  603. [div class="linkbox4 linktxt"]gallery[/div][div class=linkbox4bg][/div]
  604. [div class=heart][url=https://www.rpnation.com/threads/codes-wonhae.392301/][div style="display: inline; color: var(--color-g-2);"][fa]fa-heart[/fa][/div][/url][/div]
  605.  
  606. [div class="page1 txt"]
  607. [div class=outer]
  608. [div class="imgpost img1" style="margin-top: 40px;"][/div]
  609. [div class=caption]tu sais, la vie est pleine[br][/br]de hauts et de bas[/div]
  610. [div class="imgpost img2" style="margin-top: 130px;"][/div]
  611. [div class=caption]mais sans les bas,[br][/br]les hauts ne veulent rien diree[/div]
  612. [div class=blankspace][/div]
  613. [/div]
  614. [/div]
  615.  
  616. [div class="page2 txt"]
  617. [div class="h1 h1txt"]persona[/div]
  618. [div class=txtouter]
  619. [div class="textbox txt" style="margin-top: 0px;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id felis non nunc pellentesque convallis. Vivamus tincidunt sapien eu dui feugiat, et scelerisque leo finibus. Vivamus eu tortor ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id felis non nunc pellentesque convallis. Vivamus tincidunt sapien eu dui feugiat, et scelerisque leo finibus. Vivamus eu tortor ligula.[/div]
  620. [div class="textbox txt"][row][column=span4][div class=h2]likes[/div][div class=listtxt][div class=bulletpoint]›[/div] like 1
  621. [br][/br][div class=bulletpoint]›[/div] like 2
  622. [br][/br][div class=bulletpoint]›[/div] like 3 [/div][/column][column=span4][div class=h2]dislikes[/div][div class=listtxt][div class=bulletpoint]›[/div] dislike 1
  623. [br][/br][div class=bulletpoint]›[/div] dislike 2
  624. [br][/br][div class=bulletpoint]›[/div] dislike 3 [/div][/column][/row][/div]
  625. [div class=textbox][div class=h2]relationships[/div]
  626. [br][/br][div class=h3]character name[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id felis non nunc pellentesque convallis. Vivamus tincidunt sapien eu dui feugiat, et scelerisque leo finibus. Vivamus eu tortor ligula.
  627. [br][/br][br][/br][div class=h3]character name[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id felis non nunc pellentesque convallis. Vivamus tincidunt sapien eu dui feugiat, et scelerisque leo finibus. Vivamus eu tortor ligula.
  628. [br][/br][br][/br][div class=h3]character name[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id felis non nunc pellentesque convallis. Vivamus tincidunt sapien eu dui feugiat, et scelerisque leo finibus. Vivamus eu tortor ligula.
  629. [br][/br][br][/br][/div]
  630. [/div]
  631. [/div]
  632.  
  633. [div class="page3 txt"]
  634. [div class="h1 h1txt"]history[/div]
  635. [div class=txtouter]
  636. [div class="textbox txt" style="margin-top: 0px;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id felis non nunc pellentesque convallis. Vivamus tincidunt sapien eu dui feugiat, et scelerisque leo finibus. Vivamus eu tortor ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id felis non nunc pellentesque convallis. Vivamus tincidunt sapien eu dui feugiat, et scelerisque leo finibus. Vivamus eu tortor ligula.
  637. [br][/br][br][/br]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id felis non nunc pellentesque convallis. Vivamus tincidunt sapien eu dui feugiat, et scelerisque leo finibus. Vivamus eu tortor ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id felis non nunc pellentesque convallis. Vivamus tincidunt sapien eu dui feugiat, et scelerisque leo finibus. Vivamus eu tortor ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id felis non nunc pellentesque convallis. Vivamus tincidunt sapien eu dui feugiat, et scelerisque leo finibus. Vivamus eu tortor ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id felis non nunc pellentesque convallis. Vivamus tincidunt sapien eu dui feugiat, et scelerisque leo finibus. Vivamus eu tortor ligula.[/div]
  638. [/div]
  639. [/div]
  640.  
  641. [div class="page4 txt"]
  642. [div class="h1 h1txt"]gallery[/div]
  643. [div class=txtouter]
  644. [row][column=span4][div class="galleryimg gimg1"][/div]
  645. [div class="galleryimg gimg3"][/div]
  646. [div class="galleryimg gimg5"][/div][/column][column=span4][div class="galleryimg gimg2"][/div]
  647. [div class="galleryimg gimg4"][/div]
  648. [div class="galleryimg gimg6"][/div][/column][/row]
  649. [br][/br][br][/br]
  650. [/div]
  651. [/div]
  652. [/div]
  653. [/nobr]
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!