API tools faq
paste
Advertisement
diaphanous_

SEREIN // code

diaphanous_
Apr 9th, 2018
639
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.70 KB | None | 0 0
raw download clone embed print report
  1. [nobr]
  2. [div=height: 350px;
  3. width: 500px;
  4. background: #f1f1f1;
  5. border: 1px solid #d8d8d8;
  6. position: relative;
  7. top: 10px;
  8. margin: auto;
  9. cursor: url(https://i.imgur.com/fkP02Jr.png), auto]
  10.  
  11. [class=tcontain]height: 90px;
  12. width: 500px;
  13. background: #fff;
  14. border-bottom: 1px solid #d8d8d8;
  15. position: relative;
  16. left: 0px;
  17. top: 0px
  18. [/class]
  19.  
  20. [class=timagecontain]height: 70px;
  21. width: 70px;
  22. padding: 10px;
  23. border-right: 1px solid #d8d8d8;
  24. position: relative
  25. [/class]
  26.  
  27. [class=timage]height: 70px;
  28. width: 70px;
  29. background-image: url(https://www.barjewellery.com/wp-content/uploads/2017/10/TSUNAINA_LOOKBOOK_BAR_JEWELLERY_1.jpg);
  30. background-size: 280%;
  31. background-position: 20% 10%;
  32. filter: brightness(105%)
  33. [/class]
  34.  
  35. [class=timage2]height: 100%;
  36. width: 100%;
  37. background-image: url(https://www.barjewellery.com/wp-content/uploads/2017/10/TSUNAINA_LOOKBOOK_BAR_JEWELLERY_2.jpg);
  38. background-size: 285%;
  39. background-position: 20% 10%;
  40. filter: brightness(95%);
  41. opacity: 0;
  42. transition: opacity 1.7s
  43. [/class]
  44.  
  45. [class name=timage2 state=hover]opacity: 1
  46. [/class]
  47.  
  48. [class=miniwords]padding: 11px;
  49. width: 370px;
  50. font-family:'Open Sans', sans-serif;
  51. color: #7E8285;
  52. font-weight: 600;
  53. font-size: 16px;
  54. position: relative;
  55. top: -80px;
  56. left: 95px
  57. [/class]
  58.  
  59. [class=miniwords2]font-size: 11px;
  60. font-weight: 400;
  61. color: #acacac
  62. [/class]
  63.  
  64. [class=tabcontainer]height: 169px;
  65. width: 70px;
  66. background: #fff;
  67. text-align: center;
  68. padding: 80px 10px 10px 10px;
  69. border-right: 1px solid #d8d8d8;
  70. line-height: 23px;
  71. position: relative
  72. [/class]
  73.  
  74. [class=tabs]width: 100%;
  75. cursor: url(https://i.imgur.com/fkP02Jr.png), pointer;
  76. color: #7E8285;
  77. font-size: 13px;
  78. position: relative;
  79. line-height: 15px;
  80. transition: 0.5s
  81. [/class]
  82.  
  83. [class=slide]transform: translateY(-5px); transition: 0.7s
  84. [/class]
  85.  
  86. [script class=first on=click]
  87. hide tabsContent2
  88. hide tabsContent3
  89. hide tabsContent4
  90. removeClass slide tabs
  91. removeClass slide second
  92. removeClass slide third
  93. removeClass slide fourth
  94. addClass slide first
  95. fadeOut 600 tabsContent2
  96. fadeOut 600 tabsContent3
  97. fadeOut 600 tabsContent4
  98. fadeOut 600 tabsContent1
  99. fadeIn 800 tabsContent1[/script]
  100.  
  101. [script class=second on=click]
  102. hide tabsContent1
  103. hide tabsContent3
  104. hide tabsContent4
  105. removeClass slide tabs
  106. removeClass slide first
  107. removeClass slide third
  108. removeClass slide fourth
  109. addClass slide second
  110. fadeOut 600 tabsContent1
  111. fadeOut 600 tabsContent3
  112. fadeOut 600 tabsContent4
  113. fadeOut 600 tabsContent2
  114. fadeIn 800 tabsContent2[/script]
  115.  
  116. [script class=third on=click]
  117. hide tabsContent2
  118. hide tabsContent1
  119. hide tabsContent4
  120. removeClass slide tabs
  121. removeClass slide first
  122. removeClass slide second
  123. removeClass slide fourth
  124. addClass slide third
  125. fadeOut 600 tabsContent2
  126. fadeOut 600 tabsContent1
  127. fadeOut 600 tabsContent4
  128. fadeOut 600 tabsContent3
  129. fadeIn 800 tabsContent3[/script]
  130.  
  131. [script class=fourth on=click]
  132. hide tabsContent2
  133. hide tabsContent3
  134. hide tabsContent1
  135. removeClass slide tabs
  136. removeClass slide first
  137. removeClass slide second
  138. removeClass slide third
  139. addClass slide fourth
  140. fadeOut 600 tabsContent2
  141. fadeOut 600 tabsContent3
  142. fadeOut 600 tabsContent1
  143. fadeOut 600 tabsContent4
  144. fadeIn 800 tabsContent4[/script]
  145.  
  146. [script class=first on=mouseenter]
  147. addClass up hoverwordi
  148. [/script]
  149.  
  150. [script class=first on=mouseleave]
  151. removeClass up hoverwordi
  152. [/script]
  153.  
  154. [script class=second on=mouseenter]
  155. addClass up hoverwordii
  156. [/script]
  157.  
  158. [script class=second on=mouseleave]
  159. removeClass up hoverwordii
  160. [/script]
  161.  
  162. [script class=third on=mouseenter]
  163. addClass up hoverwordiii
  164. [/script]
  165.  
  166. [script class=third on=mouseleave]
  167. removeClass up hoverwordiii
  168. [/script]
  169.  
  170. [script class=fourth on=mouseenter]
  171. addClass up hoverwordiiii
  172. [/script]
  173.  
  174. [script class=fourth on=mouseleave]
  175. removeClass up hoverwordiiii
  176. [/script]
  177.  
  178. [class=hoverwordi]width:100%;font-size: 10px; opacity: 0;position: absolute; top: 20px; left: 0px; text-transform:uppercase; transition: 1.0s
  179. [/class]
  180.  
  181. [class=hoverwordii]width:100%;font-size: 10px; opacity: 0;position: absolute; top: 20px; left: 0px; text-transform:uppercase; transition: 1.0s
  182. [/class]
  183.  
  184. [class=hoverwordiii]width:100%;font-size: 10px; opacity: 0;position: absolute; top: 20px; left: 0px; text-transform:uppercase; transition: 1.0s
  185. [/class]
  186.  
  187. [class=hoverwordiiii]width:100%;font-size: 10px; opacity: 0;position: absolute; top: 20px; left: 0px; text-transform:uppercase; transition: 1.0s
  188. [/class]
  189.  
  190. [class=up]transform: translateY(0px); opacity: 1; transition: 1.0s
  191. [/class]
  192.  
  193. [class=div]height: 249px;
  194. width: 399px;
  195. padding: 5px;
  196. position: absolute;
  197. top: 91px;
  198. left: 91px
  199. [/class]
  200.  
  201. [class=overflow]height: 100%;
  202. width: 100%;
  203. padding-right: 25px;
  204. overflow: auto;
  205. cursor: url(https://i.imgur.com/fkP02Jr.png), auto
  206. [/class]
  207.  
  208. [class=post]height: 205px;
  209. width: 255px;
  210. border: 1px solid #d8d8d8;
  211. position: relative;
  212. left: -11px;
  213. top: 7px;
  214. transition: 1s
  215. [/class]
  216.  
  217. [class name=post state=hover]filter: saturate(130%) brightness(90%)
  218. [/class]
  219.  
  220. [class=posttitle]height: 20px;
  221. width: 235px;
  222. background: white;
  223. border-right: 1px solid #d8d8d8;
  224. border-top: 1px solid #d8d8d8;
  225. border-left: 1px solid #d8d8d8;
  226. padding: 1px 10px 7px 10px;
  227. font-family:'Open Sans', sans-serif;
  228. font-size: 10px;
  229. margin: auto;
  230. position: relative;
  231. top: 10px;
  232. left: 10px
  233. [/class]
  234.  
  235. [class=username]height: 13px;
  236. font-size: 10px;
  237. color: #7E8285;
  238. display: inline-block
  239. [/class]
  240.  
  241. [class name=username state=hover]border-bottom: 1px solid grey;
  242. cursor: pointer
  243. [/class]
  244.  
  245. [class=postimg]height: 17px;
  246. width: 17px;
  247. display: inline-block;
  248. background-image: url(https://data.whicdn.com/avatars/23108971/thumb.jpg?t=1518127259);
  249. background-size: 120%;
  250. background-position: 0% 0%;
  251. border-radius: 50%;
  252. position: relative;
  253. left: -3px;
  254. top: 4px
  255. [/class]
  256.  
  257. [class=date]display: inline-block;
  258. float: right;
  259. color: grey;
  260. position: relative;
  261. top: 5px
  262. [/class]
  263.  
  264. [class=bottom]height: 30px;
  265. width: 235px;
  266. background: white;
  267. border-right: 1px solid #d8d8d8;
  268. border-bottom: 1px solid #d8d8d8;
  269. border-left: 1px solid #d8d8d8;
  270. padding: 5px 10px 15px 10px;
  271. font-family:'Open Sans', sans-serif;
  272. position: relative;
  273. left: -11px;
  274. top: 7px
  275. [/class]
  276.  
  277. [class=quote]height: 15px;
  278. border-left: 4px solid #d8d8d8;
  279. padding: 0px 0px 0px 5px;
  280. position: relative;
  281. top: 5px
  282. [/class]
  283.  
  284. [class=uppersquare]height: 25px;
  285. width: 25px;
  286. border-top: 1px solid #b1b4b5;
  287. border-left: 1px solid #b1b4b5;
  288. position: relative;
  289. top: -40px;
  290. left: -10px
  291. [/class]
  292.  
  293. [class=lowersquare]height: 25px;
  294. width: 25px;
  295. border-bottom: 1px solid #b1b4b5;
  296. border-right: 1px solid #b1b4b5;
  297. position: relative;
  298. top: 279px;
  299. left: 248px
  300. [/class]
  301.  
  302. [class=image]height: 96.5%;
  303. width: 150px;
  304. background-image: url(https://www.barjewellery.com/wp-content/uploads/2017/10/TSUNAINA_LOOKBOOK_BAR_JEWELLERY_6.jpg);
  305. background-size: 440%;
  306. background-position: 25% 35%;
  307. border: 5px solid #d8d8d8;
  308. position: relative;
  309. left: 0px;
  310. top: 0px;
  311. transition: 1s
  312. [/class]
  313.  
  314. [class name=image state=hover]filter: saturate(120%) brightness(105%)
  315. [/class]
  316.  
  317. [class=smalldiv]height: 90.5%;
  318. width: 225px;
  319. padding: 5px;
  320. position: absolute;
  321. top: 5px;
  322. left: 170px
  323. [/class]
  324.  
  325. [class=wordscontainer]height: 25px;
  326. width: 100%;
  327. padding: 5px 0px 10px 0px;
  328. border-bottom: 1px solid white;
  329. font-weight: 400;
  330. font-size: 11px;
  331. line-height:17px;
  332. font-family:'Comfortaa', display;
  333. [/class]
  334.  
  335. [class=nameword]display: inline-block;
  336. font-size:12px;
  337. font-weight: 700;
  338. text-transform: uppercase
  339. [/class]
  340.  
  341. [class=text]height: 195px;
  342. width: 230px;
  343. padding: 5px;
  344. font-size: 11px;
  345. text-align: justify;
  346. overflow: hidden;
  347. position: absolute;
  348. top: 48px;
  349. left: 0px
  350. [/class]
  351.  
  352. [class=overfloow]height: 100%;
  353. width: 105%;
  354. padding-right: 40px;
  355. overflow: auto
  356. [/class]
  357.  
  358. [class=box]height:15px;padding:1px 5px 2px 5px;display:inline-block;color:black;background: #eaeaea;font-weight: 700
  359. [/class]
  360.  
  361. [div class=tcontain]
  362.  
  363. [div class=timagecontain]
  364. [div class=timage][div class=timage2][/div][/div][/div]
  365.  
  366. [div class=miniwords]line relating to the character [u]here[/u]
  367. [div class=miniwords2]and some extra stuff to put down here[/div][/div][/div]
  368.  
  369. [div class=tabcontainer][div class=tabs][div class="first" style="height:20px;font-size:18px;transition:1s"][fa]fa-camera-retro[/fa][div class=hoverwordi]posts[/div][/div][/div]
  370. [br][/br]
  371. [div class=tabs][div class="second" style="height:20px;font-size:18px;transition:1s"][fa]fa-user[/fa][div class=hoverwordii]requisite[/div][/div][/div]
  372. [br][/br]
  373. [div class=tabs][div class="third" style="height:20px;font-size:18px;transition:1s"][fa]fa-lightbulb[/fa][div class=hoverwordiii]persona[/div][/div][/div]
  374. [br][/br]
  375. [div class=tabs][div class="fourth" style="height:20px;font-size:18px;transition:1s"][fa]fa-child[/fa][div class=hoverwordiiii]biography[/div][/div][/div][/div]
  376.  
  377. [div class=content][div class="tabsContent tabsContent1"]
  378.  
  379. [div class=div style="overflow:hidden"][div class=overflow]
  380.  
  381. [div class=posttitle][div class=postimg][/div] [div class=username]usernxme[/div]
  382.  
  383. [div class=date]feb 18th[/div]
  384.  
  385. [div class=post style="background-image:url(https://azzahrahyaita.files.wordpress.com/2016/09/1860f5b5acef6ad428ee533f1c9f2954-planet-aesthetic-aesthetic-blood.jpg);background-size:110%"]
  386.  
  387. [div class=uppersquare][div class=lowersquare][/div][/div][/div]
  388.  
  389. [div class=bottom][div class=username]usernxme[/div]
  390. [div class=quote]the fallen rose ~ author, 1963[/div][/div][/div]
  391.  
  392. [br][/br]
  393.  
  394. [div class=posttitle style="top:280px"][div class=postimg][/div] [div class=username]usernxme[/div]
  395.  
  396. [div class=date]feb 18th[/div]
  397.  
  398. [div class=post style="background-image:url(https://azzahrahyaita.files.wordpress.com/2016/09/1860f5b5acef6ad428ee533f1c9f2954-planet-aesthetic-aesthetic-blood.jpg);background-size:110%"]
  399.  
  400. [div class=uppersquare][div class=lowersquare][/div][/div][/div]
  401.  
  402. [div class=bottom][div class=username]usernxme[/div]
  403. [div class=quote]the fallen rose ~ author, 1963[/div][/div][/div]
  404.  
  405. [br][/br]
  406.  
  407. [div class=posttitle style="top:555px"][div class=postimg][/div] [div class=username]usernxme[/div]
  408.  
  409. [div class=date]feb 18th[/div]
  410.  
  411. [div class=post style="background-image:url(https://azzahrahyaita.files.wordpress.com/2016/09/1860f5b5acef6ad428ee533f1c9f2954-planet-aesthetic-aesthetic-blood.jpg);background-size:110%"]
  412.  
  413. [div class=uppersquare][div class=lowersquare][/div][/div][/div]
  414.  
  415. [div class=bottom][div class=username]usernxme[/div]
  416. [div class=quote]the fallen rose ~ author, 1963[/div][/div][/div][/div]
  417.  
  418. [/div][/div]
  419.  
  420. [div class=content][div class="tabsContent tabsContent2" style="display: none"]
  421.  
  422. [div class=div]
  423.  
  424. [div class=image][/div]
  425.  
  426. [div class=smalldiv][div class=wordscontainer][div class=nameword][font=Comfortaa]character name[/font][/div]
  427. [br][/br]
  428. [font=Comfortaa]the requisite[/font][/div]
  429.  
  430. [div class=text][div class=overfloow]
  431.  
  432. [div class=box]bloop !![/div] output
  433. [br][/br][br][/br]
  434. [div class=box]bloop !![/div] output
  435. [br][/br][br][/br]
  436. [div class=box]bloop !![/div] output
  437. [br][/br][br][/br]
  438. [div class=box]bloop !![/div] output
  439. [br][/br][br][/br]
  440. [div class=box]bloop !![/div] output
  441. [br][/br][br][/br]
  442. [div class=box]bloop !![/div] output
  443. [br][/br][br][/br]
  444. [div class=box]bloop !![/div] output
  445. [br][/br][br][/br]
  446. [div class=box]bloop !![/div] output
  447. [br][/br][br][/br]
  448. [div class=box]bloop !![/div] output
  449. [br][/br][br][/br]
  450. [div class=box]bloop !![/div] output[/div][/div][/div][/div]
  451.  
  452. [/div][/div]
  453.  
  454. [div class=content][div class="tabsContent tabsContent3" style="display: none"]
  455.  
  456. [div class=div]
  457.  
  458. [div class=image style="background-image:url(https://prettyuglylittleliar.net/uploads/monthly_2018_01/firefox_2018-01-25_12-34-27.png.f738ae5909360216ad595b363efeed30.png);background-size:180%"][/div]
  459.  
  460. [div class=smalldiv][div class=wordscontainer][div class=nameword][font=Comfortaa]character name[/font][/div]
  461. [br][/br]
  462. [font=Comfortaa]the persona[/font][/div]
  463.  
  464. [div class=text][div class=overfloow]
  465.  
  466. [div class=box]personality !![/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Sed ne, dum huic obsequor, vobis molestus sim. Summus dolor plures dies manere non potest? Omnes enim iucundum motum, quo sensus hilaretur. Est, ut dicis, inquit; Duo Reges: constructio interrete. Haec quo modo conveniant, non sane intellego.Illis videtur, qui illud non dubitant bonum dicere; Unum est sine dolore esse, alterum cum voluptate. Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Illi enim inter se dissentiunt. Quo plebiscito decreta a senatu est consuli quaestio Cn. Quid enim?De ingenio eius in his disputationibus, non de moribus quaeritur. Quis non odit sordidos, vanos, leves, futtiles? Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Quae cum dixisset paulumque institisset, Quid est?[/div][/div][/div][/div]
  467.  
  468. [/div][/div]
  469.  
  470. [div class=content][div class="tabsContent tabsContent4" style="display: none"]
  471.  
  472. [div class=div]
  473.  
  474. [div class=image style="background-image:url(https://prettyuglylittleliar.net/uploads/monthly_2018_01/firefox_2018-01-25_12-34-46.png.7c852fcfb03da645ecad2cde79b67d8b.png);background-size:180%;background-position:100% 0%"][/div]
  475.  
  476. [div class=smalldiv][div class=wordscontainer][div class=nameword][font=Comfortaa]character name[/font][/div]
  477. [br][/br]
  478. [font=Comfortaa]the biography[/font][/div]
  479.  
  480. [div class=text][div class=overfloow]
  481.  
  482. [div class=box]history !![/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Sed ne, dum huic obsequor, vobis molestus sim. Summus dolor plures dies manere non potest? Omnes enim iucundum motum, quo sensus hilaretur. Est, ut dicis, inquit; Duo Reges: constructio interrete. Haec quo modo conveniant, non sane intellego.Illis videtur, qui illud non dubitant bonum dicere; Unum est sine dolore esse, alterum cum voluptate. Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Illi enim inter se dissentiunt. Quo plebiscito decreta a senatu est consuli quaestio Cn. Quid enim?De ingenio eius in his disputationibus, non de moribus quaeritur. Quis non odit sordidos, vanos, leves, futtiles? Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Quae cum dixisset paulumque institisset, Quid est?[/div][/div][/div][/div]
  483.  
  484. [/div][/div]
  485.  
  486. [/div][/div]
  487.  
  488. [class=credit]height: 25px;
  489. width:500px;
  490. margin: auto;
  491. position: relative;
  492. top: 10px;
  493. font-size: 9px;
  494. color: grey
  495. [/class]
  496.  
  497. [div class=credit]code by [url='https://www.rpnation.com/members/diaphanous.38711/']@diaphanous[/url][/div]
  498. [/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!