API tools faq
paste
Advertisement
wonhae

code #3

wonhae
May 4th, 2018
165
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.28 KB | None | 0 0
raw download clone embed print report
  1. [nobr]
  2. [font=Josefin Slab][div=display: none;].[/div][/font]
  3. [font=Cardo][div=display: none;].[/div][/font]
  4.  
  5. [class=container]
  6. height: 310px;
  7. width: 360px;
  8. margin: auto;
  9. background-color: white;
  10. overflow: hidden;
  11. [/class]
  12.  
  13. [class=box1]
  14. height: 250px;
  15. width: 200px;
  16. background-color: white;
  17. margin-left: 140px;
  18. margin-top: 40px;
  19. position: absolute;
  20. border: 1px solid lightgray;
  21. overflow: hidden;
  22. [/class]
  23.  
  24. [class=image]
  25. height: 140px;
  26. width: 160px;
  27. margin-top: 55px;
  28. margin-left: 20px;
  29. position: absolute;
  30. opacity: 0;
  31. transition: 1s;
  32. z-index: 1;
  33. background-image: url('https://i.imgur.com/d1FOXfT.jpg');
  34. background-size: cover;
  35. background-position: center center;
  36. background-repeat: no-repeat;
  37. [/class]
  38.  
  39. [class name=image state=hover]
  40. cursor: default;
  41. [/class]
  42.  
  43. [class=personality]
  44. width: 80px;
  45. height: 20px;
  46. font-size: 10px;
  47. font-family: 'Arial', sans-serif;
  48. font-weight: bold;
  49. color: black;
  50. opacity: 0;
  51. position: absolute;
  52. background-color: transparent;
  53. margin-top: 168px;
  54. margin-left: 5px;
  55. transform: translateY(-10px);
  56. transition: 1s;
  57. z-index: 0;
  58. pointer-events: none;
  59. letter-spacing: 0.5px;
  60. [/class]
  61.  
  62. [class=history]
  63. width: 80px;
  64. height: 20px;
  65. font-size: 10px;
  66. font-family: 'Arial', sans-serif;
  67. font-weight: bold;
  68. color: black;
  69. opacity: 0;
  70. position: absolute;
  71. background-color: transparent;
  72. margin-top: 168px;
  73. margin-left: 40px;
  74. transform: translateY(-10px);
  75. transition: 1s;
  76. z-index: 0;
  77. pointer-events: none;
  78. letter-spacing: 0.5px;
  79. [/class]
  80.  
  81. [class=extra]
  82. width: 80px;
  83. height: 20px;
  84. font-size: 10px;
  85. font-family: 'Arial', sans-serif;
  86. font-weight: bold;
  87. color: black;
  88. opacity: 0;
  89. position: absolute;
  90. background-color: transparent;
  91. margin-top: 168px;
  92. margin-left: 65px;
  93. transform: translateY(-10px);
  94. transition: 1s;
  95. z-index: 0;
  96. pointer-events: none;
  97. letter-spacing: 0.5px;
  98. [/class]
  99.  
  100. [class=gallery]
  101. width: 80px;
  102. height: 20px;
  103. font-size: 10px;
  104. font-family: 'Arial', sans-serif;
  105. font-weight: bold;
  106. color: black;
  107. opacity: 0;
  108. position: absolute;
  109. background-color: transparent;
  110. margin-top: 168px;
  111. margin-left: 85px;
  112. transform: translateY(-10px);
  113. transition: 1s;
  114. z-index: 0;
  115. pointer-events: none;
  116. letter-spacing: 0.5px;
  117. [/class]
  118.  
  119. [class=slide]
  120. transform: translateX(0);
  121. opacity: 0.2;
  122. transition: opacity 0.5s , transform 1s;
  123. [/class]
  124.  
  125.  
  126. [class=image1]
  127. height: 140px;
  128. width: 160px;
  129. margin-top: 55px;
  130. margin-left: 20px;
  131. opacity: 0.8;
  132. transition: 1s;
  133. background-image: url('https://i.imgur.com/2749PJ9.gif');
  134. background-size: cover;
  135. background-position: center center;
  136. background-repeat: no-repeat;
  137. margin-bottom: 47px;
  138. [/class]
  139.  
  140. [class name=image1 state=hover]
  141. cursor: default;
  142. [/class]
  143.  
  144. [class=image2]
  145. height: 140px;
  146. width: 160px;
  147. margin-top: 55px;
  148. margin-left: 20px;
  149. opacity: 0.8;
  150. transition: 1s;
  151. background-image: url('https://i.imgur.com/ApT6AO0.gif');
  152. background-size: cover;
  153. background-position: center center;
  154. background-repeat: no-repeat;
  155. margin-bottom: 47px;
  156. [/class]
  157.  
  158. [class name=image2 state=hover]
  159. cursor: default;
  160. [/class]
  161.  
  162. [class=image3]
  163. height: 140px;
  164. width: 160px;
  165. margin-top: 55px;
  166. margin-left: 20px;
  167. opacity: 0.8;
  168. transition: 1s;
  169. background-image: url('https://i.imgur.com/ZJQfkvf.gif');
  170. background-size: cover;
  171. background-position: center center;
  172. background-repeat: no-repeat;
  173. margin-bottom: 47px;
  174. [/class]
  175.  
  176. [class name=image3 state=hover]
  177. cursor: default;
  178. [/class]
  179.  
  180. [class=showimg]
  181. opacity: 0.8;
  182. transition: 1s;
  183. [/class]
  184.  
  185. [class=name]
  186. font-size: 18px;
  187. font-family: 'Arial', sans-serif;
  188. font-style: italic;
  189. font-weight: bold;
  190. margin-left: 20px;
  191. margin-top: 120px;
  192. color: black;
  193. position: absolute;
  194. opacity: 0.3;
  195. transition: 1s;
  196. [/class]
  197.  
  198. [class name=name state=hover]
  199. cursor: default;
  200. [/class]
  201.  
  202. [class=tabcontainer]
  203. height: 20px;
  204. width: 80px;
  205. position: absolute;
  206. margin-top: 140px;
  207. margin-left: 25px;
  208. background-color: transparent;
  209. padding: 5px;
  210. [/class]
  211.  
  212. [class=tab1]
  213. font-size: 14px;
  214. font-family: 'Cardo', serif;
  215. color: black;
  216. font-weight: lighter;
  217. position: absolute;
  218. margin-left: 0px;
  219. margin-top: 0px;
  220. opacity: 0.3;
  221. transition: 1s;
  222. [/class]
  223.  
  224. [class name=tab1 state=hover]
  225. opacity: 0.8;
  226. transition: opacity 1s;
  227. cursor: default;
  228. [/class]
  229.  
  230. [class=tab2]
  231. font-size: 14px;
  232. font-family: 'Cardo', serif;
  233. color: black;
  234. font-weight: lighter;
  235. position: absolute;
  236. margin-left: 20px;
  237. margin-top: 0px;
  238. opacity: 0.3;
  239. transition: 1s;
  240. [/class]
  241.  
  242. [class name=tab2 state=hover]
  243. opacity: 0.8;
  244. transition: opacity 1s;
  245. cursor: default;
  246. [/class]
  247.  
  248. [class=tab3]
  249. font-size: 14px;
  250. font-family: 'Cardo', serif;
  251. color: black;
  252. font-weight: lighter;
  253. position: absolute;
  254. margin-left: 40px;
  255. margin-top: 0px;
  256. opacity: 0.3;
  257. transition: 1s;
  258. [/class]
  259.  
  260. [class name=tab3 state=hover]
  261. opacity: 0.8;
  262. transition: opacity 1s;
  263. cursor: default;
  264. [/class]
  265.  
  266. [class=tab4]
  267. font-size: 14px;
  268. font-family: 'Cardo', serif;
  269. color: black;
  270. font-weight: lighter;
  271. position: absolute;
  272. margin-left: 65px;
  273. margin-top: 0px;
  274. opacity: 0.3;
  275. transition: 1s;
  276. [/class]
  277.  
  278. [class name=tab4 state=hover]
  279. opacity: 0.8;
  280. transition: opacity 1s;
  281. cursor: default;
  282. [/class]
  283.  
  284. [class=content1]
  285. height: 250px;
  286. width: 200px;
  287. background-color: transparent;
  288. overflow-y: scroll;
  289. padding-right: 20px;
  290. position: absolute;
  291. opacity: 0;
  292. transition: 1s;
  293. [/class]
  294.  
  295. [class=content2]
  296. height: 250px;
  297. width: 200px;
  298. background-color: transparent;
  299. overflow-y: scroll;
  300. padding-right: 20px;
  301. position: absolute;
  302. opacity: 0;
  303. transition: 1s;
  304. [/class]
  305.  
  306. [class=content3]
  307. height: 250px;
  308. width: 200px;
  309. background-color: transparent;
  310. overflow-y: scroll;
  311. padding-right: 20px;
  312. position: absolute;
  313. opacity: 0;
  314. transition: 1s;
  315. [/class]
  316.  
  317. [class=content4]
  318. height: 250px;
  319. width: 200px;
  320. background-color: transparent;
  321. overflow-y: scroll;
  322. padding-right: 20px;
  323. position: absolute;
  324. opacity: 0;
  325. transition: 1s;
  326. [/class]
  327.  
  328. [class=para]
  329. font-size: 11px;
  330. text-align: justify;
  331. color: black;
  332. padding: 5px;
  333. opacity: 0.7;
  334. [/class]
  335.  
  336. [class name=para state=hover]
  337. cursor: default;
  338. [/class]
  339.  
  340. [class=show]
  341. opacity: 1;
  342. transition: 1s;
  343. z-index: 1;
  344. [/class]
  345.  
  346. [class=g1]
  347. height: 140px;
  348. width: 160px;
  349. margin-top: 55px;
  350. margin-left: 20px;
  351. opacity: 0.8;
  352. transition: 1s;
  353. background-image: url('https://i.imgur.com/tLzMOCM.gif');
  354. background-size: cover;
  355. background-position: center center;
  356. background-repeat: no-repeat;
  357. margin-bottom: 75px;
  358. [/class]
  359.  
  360. [class name=g1 state=hover]
  361. cursor: default;
  362. [/class]
  363.  
  364. [class=g2]
  365. height: 140px;
  366. width: 160px;
  367. margin-top: 55px;
  368. margin-left: 20px;
  369. opacity: 0.8;
  370. transition: 1s;
  371. background-image: url('https://i.imgur.com/1l9VsPP.gif');
  372. background-size: cover;
  373. background-position: center center;
  374. background-repeat: no-repeat;
  375. margin-bottom: 75px;
  376. [/class]
  377.  
  378. [class name=g2 state=hover]
  379. cursor: default;
  380. [/class]
  381.  
  382. [class=g3]
  383. height: 140px;
  384. width: 160px;
  385. margin-top: 55px;
  386. margin-left: 20px;
  387. opacity: 0.8;
  388. transition: 1s;
  389. background-image: url('https://i.imgur.com/4pojK4A.gif');
  390. background-size: cover;
  391. background-position: center center;
  392. background-repeat: no-repeat;
  393. margin-bottom: 55px;
  394. [/class]
  395.  
  396. [class name=g3 state=hover]
  397. cursor: default;
  398. [/class]
  399.  
  400. [class=credit]
  401. font-size: 10px;
  402. color: rgba(0,0,0,0.3);
  403. font-family: 'Arial', sans-serif;
  404. font-style: italic;
  405. position: absolute;
  406. margin-top: 295px;
  407. margin-left: 200px;
  408. [/class]
  409.  
  410. [script class=image on=init]
  411. addClass showimg image
  412. removeClass show content1
  413. removeClass show content2
  414. removeClass show content3
  415. removeClass show content4
  416. [/script]
  417.  
  418. [script class=name on=click]
  419. addClass showimg image
  420. removeClass show content1
  421. removeClass show content2
  422. removeClass show content3
  423. removeClass show content4
  424. [/script]
  425.  
  426. [script class=tab1 on=click]
  427. addClass show content1
  428. removeClass show content2
  429. removeClass show content3
  430. removeClass show content4
  431. removeClass showimg image
  432. [/script]
  433.  
  434. [script class=tab2 on=click]
  435. addClass show content2
  436. removeClass show content1
  437. removeClass show content3
  438. removeClass show content4
  439. removeClass showimg image
  440. [/script]
  441.  
  442. [script class=tab3 on=click]
  443. addClass show content3
  444. removeClass show content1
  445. removeClass show content2
  446. removeClass show content4
  447. removeClass showimg image
  448. [/script]
  449.  
  450. [script class=tab4 on=click]
  451. addClass show content4
  452. removeClass show content1
  453. removeClass show content2
  454. removeClass show content3
  455. removeClass showimg image
  456. [/script]
  457.  
  458. [script class=tab1 on=mouseenter]
  459. addClass slide personality
  460. [/script]
  461.  
  462. [script class=tab1 on=mouseleave]
  463. removeClass slide personality
  464. [/script]
  465.  
  466. [script class=tab2 on=mouseenter]
  467. addClass slide history
  468. [/script]
  469.  
  470. [script class=tab2 on=mouseleave]
  471. removeClass slide history
  472. [/script]
  473.  
  474. [script class=tab3 on=mouseenter]
  475. addClass slide extra
  476. [/script]
  477.  
  478. [script class=tab3 on=mouseleave]
  479. removeClass slide extra
  480. [/script]
  481.  
  482. [script class=tab4 on=mouseenter]
  483. addClass slide gallery
  484. [/script]
  485.  
  486. [script class=tab4 on=mouseleave]
  487. removeClass slide gallery
  488. [/script]
  489.  
  490. [div class=container]
  491. [div class=box1]
  492.  
  493. [div class=image][/div]
  494.  
  495. [div class=content1]
  496. [div class=image1][/div]
  497. [div class=para]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a enim odio. Pellentesque viverra sapien eget libero gravida, nec consequat justo pharetra. Ut vel orci ipsum. Pellentesque ornare, massa vitae consectetur vulputate, ipsum urna interdum tortor, nec convallis lectus lectus eu sapien. Etiam id congue lectus. Phasellus a rhoncus nulla. Suspendisse mollis dolor in tellus ultrices vehicula. Nullam non ipsum at tortor interdum ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed pulvinar nulla dui, ut iaculis ex efficitur sed. Donec malesuada elementum dolor nec maximus. Pellentesque scelerisque ac sapien ut rutrum. Aliquam ullamcorper, odio lacinia varius accumsan, leo ligula dictum urna, ac accumsan lacus arcu in enim. In hac habitasse platea dictumst.
  498.  
  499. Aenean porta massa sit amet placerat fringilla. Sed quis libero dictum, congue nibh in, bibendum purus. Nunc pulvinar ultrices congue. Nam mauris nisi, sagittis et felis sed, efficitur mattis tortor. Nam risus lacus, sodales ac sem sit amet, lobortis fermentum tortor. Nulla id tellus vitae erat rutrum mollis. Praesent aliquet risus vitae tincidunt scelerisque. Vivamus vitae ligula aliquam ligula pharetra ultricies vitae vitae lorem. Pellentesque aliquam magna nec lectus lacinia luctus. Suspendisse id molestie velit, et tincidunt lorem. Duis varius est nibh, a efficitur ante bibendum nec. Nulla auctor a ex id pharetra. Integer nec leo tincidunt, egestas dui tempus, elementum elit. Curabitur convallis, velit a rutrum iaculis, libero nibh blandit odio, vitae dapibus mauris orci nec lacus.
  500. [/div]
  501. [/div]
  502.  
  503.  
  504. [div class=content2]
  505. [div class=image2][/div]
  506. [div class=para]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a enim odio. Pellentesque viverra sapien eget libero gravida, nec consequat justo pharetra. Ut vel orci ipsum. Pellentesque ornare, massa vitae consectetur vulputate, ipsum urna interdum tortor, nec convallis lectus lectus eu sapien. Etiam id congue lectus. Phasellus a rhoncus nulla. Suspendisse mollis dolor in tellus ultrices vehicula. Nullam non ipsum at tortor interdum ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed pulvinar nulla dui, ut iaculis ex efficitur sed. Donec malesuada elementum dolor nec maximus. Pellentesque scelerisque ac sapien ut rutrum. Aliquam ullamcorper, odio lacinia varius accumsan, leo ligula dictum urna, ac accumsan lacus arcu in enim. In hac habitasse platea dictumst.
  507.  
  508. Aenean porta massa sit amet placerat fringilla. Sed quis libero dictum, congue nibh in, bibendum purus. Nunc pulvinar ultrices congue. Nam mauris nisi, sagittis et felis sed, efficitur mattis tortor. Nam risus lacus, sodales ac sem sit amet, lobortis fermentum tortor. Nulla id tellus vitae erat rutrum mollis. Praesent aliquet risus vitae tincidunt scelerisque. Vivamus vitae ligula aliquam ligula pharetra ultricies vitae vitae lorem. Pellentesque aliquam magna nec lectus lacinia luctus. Suspendisse id molestie velit, et tincidunt lorem. Duis varius est nibh, a efficitur ante bibendum nec. Nulla auctor a ex id pharetra. Integer nec leo tincidunt, egestas dui tempus, elementum elit. Curabitur convallis, velit a rutrum iaculis, libero nibh blandit odio, vitae dapibus mauris orci nec lacus.
  509. [/div]
  510. [/div]
  511.  
  512. [div class=content3]
  513. [div class=image3][/div]
  514. [div class=para]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a enim odio. Pellentesque viverra sapien eget libero gravida, nec consequat justo pharetra. Ut vel orci ipsum. Pellentesque ornare, massa vitae consectetur vulputate, ipsum urna interdum tortor, nec convallis lectus lectus eu sapien. Etiam id congue lectus. Phasellus a rhoncus nulla. Suspendisse mollis dolor in tellus ultrices vehicula. Nullam non ipsum at tortor interdum ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed pulvinar nulla dui, ut iaculis ex efficitur sed. Donec malesuada elementum dolor nec maximus. Pellentesque scelerisque ac sapien ut rutrum. Aliquam ullamcorper, odio lacinia varius accumsan, leo ligula dictum urna, ac accumsan lacus arcu in enim. In hac habitasse platea dictumst.
  515.  
  516. Aenean porta massa sit amet placerat fringilla. Sed quis libero dictum, congue nibh in, bibendum purus. Nunc pulvinar ultrices congue. Nam mauris nisi, sagittis et felis sed, efficitur mattis tortor. Nam risus lacus, sodales ac sem sit amet, lobortis fermentum tortor. Nulla id tellus vitae erat rutrum mollis. Praesent aliquet risus vitae tincidunt scelerisque. Vivamus vitae ligula aliquam ligula pharetra ultricies vitae vitae lorem. Pellentesque aliquam magna nec lectus lacinia luctus. Suspendisse id molestie velit, et tincidunt lorem. Duis varius est nibh, a efficitur ante bibendum nec. Nulla auctor a ex id pharetra. Integer nec leo tincidunt, egestas dui tempus, elementum elit. Curabitur convallis, velit a rutrum iaculis, libero nibh blandit odio, vitae dapibus mauris orci nec lacus.
  517. [/div]
  518. [/div]
  519.  
  520. [div class=content4]
  521. [div class=g1][/div]
  522. [div class=g2][/div]
  523. [div class=g3][/div]
  524. [/div]
  525. [/div]
  526.  
  527. [url=https://www.rpnation.com/threads/codes-wonhae.392301/][div class=credit]code by wonhae[/div][/url]
  528. [div class=name]park eunjae[/div]
  529. [div class=tabcontainer]
  530.  
  531. [div class=tab1]i.[/div]
  532.  
  533. [div class=tab2]ii.[/div]
  534.  
  535. [div class=tab3]iii.[/div]
  536.  
  537. [div class=tab4]vi.[/div]
  538. [/div]
  539. [div class=personality]personality[/div]
  540. [div class=history]history[/div]
  541. [div class=extra]extra[/div]
  542. [div class=gallery]gallery[/div]
  543. [/div]
  544.  
  545. [/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!