API tools faq
paste
Advertisement
Guest User

skylight

a guest
Mar 2nd, 2020
61
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.77 KB | None | 0 0
raw download clone embed print report diff
  1. [nobr]
  2.  
  3. [div class="aboutcontainer"]
  4. [div class="abouttext"]
  5. [url="https://pastebin.com/aeeXTTS8"][div class="abouttitle"][font="Lobster"]sideshow[/font][/div][/url]
  6. [div class="abouttagscont"]
  7. [div class="abouttags"]app template[/div]
  8. [div class="abouttags"]mobile friendly[/div]
  9. [div class="abouttags"]nobr[/div]
  10. [/div]
  11. [/div]
  12.  
  13. [/div]
  14.  
  15.  
  16. [class name="aboutcontainer"]width:30%;padding:50px;min-width:200px;margin:auto;overflow:hidden;[/class][class name="abouttext"]padding:50px;background:#7C1B24;color:#fff!important;font-weight:bold;font-size:30px;border-radius:5px;transition:0.5s;margin-top:0%;width:calc(100% -50px);[/class][class name="abouttagscont"]min-width:200px;display:flex;flex-wrap:wrap;margin-top:-10px[/class][class name="abouttags"]color:#7C1B24;background:#fff;letter-spacing:1px;text-transform:uppercase;font-weight:100;font-size:10px;margin:2.5px;padding:5px;width:fit-content[/class][class name="abouttitle"]color:#fff!important;[/class]
  17.  
  18. [/nobr]
  19. [nobr][comment]--------------------------------------------------- template code by koschei, please do not claim for your own! ---------------------------------------------------[/comment]
  20.  
  21. [comment]--------------------------------------------------- accent classes ---------------------------------------------------[/comment]
  22.  
  23. [class name="majorContainer" minWidth="500px"]
  24. width:500px;
  25. background:#fff;
  26. margin:auto;
  27. border:1px solid #f1f1f1;
  28. padding:50px;
  29. --accent:#555
  30. [/class]
  31.  
  32. [class name="majorContainer" maxWidth="499px"]
  33. width:250px;
  34. background:#fff;
  35. margin:auto;
  36. border:1px solid #f1f1f1;
  37. padding:50px;
  38. --accent:#555
  39. [/class]
  40.  
  41. [class name="colorChange"]
  42. --accent:#9D0F0D
  43. [/class]
  44.  
  45. [comment]--------------------------------------------------- begin code ---------------------------------------------------[/comment]
  46.  
  47. [div class="majorContainer"]
  48. [div class="titleText"][B]买怟还珠[/B]
  49.  
  50. [div class="quoteContainer"]
  51. [div style="font-size:10px"]i believe in love but love won't believe in me[/div]
  52. [/div]
  53.  
  54. [/div]
  55.  
  56.  
  57. [div style="padding:10px;border:1px solid #f1f1f1"]
  58.  
  59. [div class="imageHover"]
  60.  
  61. [div class="goBack"]go[color=transparent]i[/color]back[/div]
  62.  
  63. [div class="flexright"]
  64. [div class="infobox"]
  65. [div class="pageContainers"]
  66.  
  67. [div class="tabContainers"]
  68. [div class="tabStyle taba"]basics[/div]
  69. [div class="tabStyle tabb"]character[/div]
  70. [div class="tabStyle tabc"]extra[/div]
  71. [div class="goBackMobile"]go[color=transparent]i[/color]back[/div]
  72. [/div]
  73.  
  74.  
  75. [div class="containerPages pageOne"]
  76.  
  77. [div class="basicInfo"]
  78. [div class="basicInfoLabel"]name[/div]
  79. [div class="basicInfoText"]william shakespeare[/div]
  80. [/div]
  81.  
  82. [div class="basicInfo"]
  83. [div class="basicInfoLabel"]n.name[/div]
  84. [div class="basicInfoText"]bill[/div]
  85. [/div]
  86.  
  87. [div class="basicInfo"]
  88. [div class="basicInfoLabel"]age[/div]
  89. [div class="basicInfoText"]centuries[/div]
  90. [/div]
  91.  
  92. [div class="basicInfo"]
  93. [div class="basicInfoLabel"]gender[/div]
  94. [div class="basicInfoText"]male [/div]
  95. [/div]
  96.  
  97. [div class="basicInfo"]
  98. [div class="basicInfoLabel"]sexuality[/div]
  99. [div class="basicInfoText"]dunno[/div]
  100. [/div]
  101.  
  102. [div class="basicInfo"]
  103. [div class="basicInfoLabel"]class[/div]
  104. [div class="basicInfoText"]varies[/div]
  105. [/div]
  106.  
  107. [div class="basicInfo"]
  108. [div class="basicInfoLabel"]spare[/div]
  109. [div class="basicInfoText"]other info[/div]
  110. [/div]
  111. [comment]------------------------------------------------------------------ you can add text between this comment and the next div if you rly felt like it ------------------------------------------------------------------[/comment]
  112.  
  113.  
  114. [/div]
  115.  
  116.  
  117.  
  118. [div class="containerPages pageTwo"]
  119.  
  120. [div class="personContainer"]
  121.  
  122. [div style="padding:5px"]
  123. [div class="basicInfoLabel"]likes[/div]
  124. [/div]
  125.  
  126. [div class="personFlex"]
  127. [div class="personWrap"]
  128.  
  129. [div class="likeDislike"]#likes[/div]
  130. [div class="likeDislike"]here[/div]
  131. [div class="likeDislike"]#at[/div]
  132. [div class="likeDislike"]#least[/div]
  133. [div class="likeDislike"]#five[/div]
  134. [/div]
  135. [/div]
  136.  
  137.  
  138. [/div]
  139.  
  140. [div class="personContainer"]
  141.  
  142. [div style="padding:5px"]
  143. [div class="basicInfoLabel"]dislikes[/div]
  144. [/div]
  145.  
  146. [div class="personFlex"]
  147. [div class="personWrap"]
  148.  
  149. [div class="likeDislike"]#dislikes[/div]
  150. [div class="likeDislike"]here[/div]
  151. [div class="likeDislike"]#at[/div]
  152. [div class="likeDislike"]#least[/div]
  153. [div class="likeDislike"]#five[/div]
  154. [/div]
  155. [/div]
  156.  
  157. [/div]
  158.  
  159. [div class="personContainer"]
  160. [div class="traitLeftContainer"]
  161. [div class="traitName"]outgoing[/div]
  162. [div class="traitMeterOut"]
  163.  
  164. [div class="traitMeter" style="width:95%;"][/div]
  165. [/div]
  166.  
  167. [div class="traitName"]enthusiastic[/div]
  168. [div class="traitMeterOut"]
  169. [div class="traitMeter" style="width:50%;"][/div]
  170. [/div]
  171.  
  172. [div class="traitName"]dedicated[/div]
  173. [div class="traitMeterOut"]
  174. [div class="traitMeter" style="width:45%;"][/div]
  175. [/div]
  176.  
  177. [div class="traitName"]truthful[/div]
  178. [div class="traitMeterOut"]
  179. [div class="traitMeter" style="width:95%;"][/div]
  180. [/div]
  181.  
  182. [div class="traitName"]observant[/div]
  183. [div class="traitMeterOut"]
  184. [div class="traitMeter" style="width:5%;"][/div]
  185. [/div]
  186.  
  187. [div class="traitName"]protective[/div]
  188. [div class="traitMeterOut"]
  189. [div class="traitMeter" style="width:35%;"][/div]
  190. [/div]
  191. [/div]
  192.  
  193. [div class="traitLeftContainer"]
  194.  
  195. [div class="traitName"]forgetful[/div]
  196. [div class="traitMeterOut"]
  197. [div class="traitMeter" style="width:35%;"][/div]
  198. [/div]
  199.  
  200. [div class="traitName"]brash[/div]
  201. [div class="traitMeterOut"]
  202. [div class="traitMeter" style="width:85%;"][/div]
  203. [/div]
  204.  
  205. [div class="traitName"]incautious[/div]
  206. [div class="traitMeterOut"]
  207. [div class="traitMeter" style="width:45%;"][/div]
  208. [/div]
  209.  
  210. [div class="traitName"]manipulative[/div]
  211. [div class="traitMeterOut"]
  212. [div class="traitMeter" style="width:65%;"][/div]
  213. [/div]
  214.  
  215. [div class="traitName"]vindictive[/div]
  216. [div class="traitMeterOut"]
  217. [div class="traitMeter" style="width:58%;"][/div]
  218. [/div]
  219.  
  220. [div class="traitName"]impatient[/div]
  221. [div class="traitMeterOut"]
  222. [div class="traitMeter" style="width:75%;"][/div]
  223. [/div]
  224. [/div]
  225.  
  226. [/div]
  227.  
  228. [comment]------------------------------------------------------------------ you can add text between this comment and the next div if you rly felt like it ------------------------------------------------------------------[/comment]
  229.  
  230. [/div]
  231.  
  232. [div class="containerPages pageThree"]
  233. [div class="imgContainers"]
  234. [div class="imgBox"]
  235. [img]https://images2.imgbox.com/33/25/4KGy2SuU_o.jpg[/img]
  236. [/div]
  237. [div class="imgBox"]
  238. [img]https://images2.imgbox.com/8d/60/P0lUnEP7_o.jpg[/img]
  239. [/div]
  240. [div class="imgBox"]
  241. [img]https://images2.imgbox.com/80/f4/GXvJUkTt_o.jpg[/img]
  242. [/div]
  243. [div class="imgBox"]
  244. [img]https://images2.imgbox.com/8f/20/GiHS6BBT_o.png[/img]
  245. [/div]
  246. [/div]
  247.  
  248. [div class="oocBox"]
  249. @ooc name
  250. [/div]
  251.  
  252. [div class="oocInfo"]pronouns, gmt +etc, discord[/div]
  253. [/div]
  254. [/div]
  255. [/div]
  256. [/div]
  257. [/div]
  258. [/div]
  259. [/div]
  260.  
  261. [div style="max-width:500px;margin:auto;width:100%;font-size:8px;text-transform:uppercase;opacity:0.6;text-align:right"]cheers, [url=https://www.rpnation.com/members/lambikins.60401/][color=#D91918]koschei[/color][/url][/div]
  262.  
  263.  
  264.  
  265. [comment]--------------------------------------------------- begin classes ---------------------------------------------------[/comment]
  266.  
  267. [class name="titleText" minWidth="500px"]
  268. font-size:5em;
  269. color:var(--accent);
  270. transition:1s;
  271. [/class]
  272.  
  273. [class name="titleText" maxWidth="499px"]
  274. font-size:4em;
  275. color:var(--accent);
  276. transition:1s;
  277. [/class]
  278.  
  279. [class name="quoteContainer" minWidth="500px"]
  280. margin-top:-0.9em;
  281. margin-left:3em;
  282. background:#fff;
  283. color:#555;
  284. text-transform:uppercase;
  285. position:absolute;
  286. z-index:1;
  287. letter-spacing:0.5px;
  288. padding:5px;
  289. [/class]
  290.  
  291. [class name="quoteContainer" maxWidth="499px"]
  292. margin-top:-0.9em;
  293. background:#fff;
  294. color:#555;
  295. text-transform:uppercase;
  296. position:absolute;
  297. z-index:1;
  298. padding:5px;
  299. [/class]
  300.  
  301.  
  302. [comment]--------------------------------------------------- large image classes ---------------------------------------------------[/comment]
  303.  
  304. [class name="imageHover" minWidth="500px"]
  305. width:100%;
  306. height:300px;
  307. background:url(https://images2.imgbox.com/13/f6/zWjpZqlS_o.jpg);
  308. background-position:center;
  309. background-size:150%;
  310. transition:0.5s ease all;
  311. filter:grayscale(100%);
  312. overflow:hidden;
  313. display:flex;
  314. transition-duration:1s;
  315. cursor:crosshair;
  316. [/class]
  317.  
  318. [class name="imageHover" maxWidth="499px"]
  319. width:100%;
  320. height:300px;
  321. background:url(https://images2.imgbox.com/13/f6/zWjpZqlS_o.jpg);
  322. background-position:center;
  323. background-size:cover;
  324. transition:0.5s ease all;
  325. filter:grayscale(100%);
  326. overflow:hidden;
  327. display:flex;
  328. transition-duration:1s;
  329. cursor:crosshair;
  330. [/class]
  331.  
  332.  
  333. [class name="goBack" minWidth="500px"]
  334. margin-left:calc(50% - 50px);
  335. color:#fff;
  336. text-transform:uppercase;
  337. font-size:10px;
  338. margin-top:285px;
  339. font-weight:bold;
  340. transition:1s;
  341. opacity:0;
  342. [/class]
  343.  
  344. [class name="goBack" maxWidth="499px"]
  345. display:none
  346. [/class]
  347.  
  348. [class name="goBackMobile" minWidth="500px"]
  349. display:none
  350. [/class]
  351.  
  352. [class name="goBackMobile" maxWidth="499px"]
  353. color:#555;
  354. text-transform:uppercase;
  355. font-size:10px;
  356. font-weight:bold;
  357. transition:1s;
  358. opacity:1;
  359. padding:5px;
  360. cursor:pointer;
  361. [/class]
  362.  
  363.  
  364. [comment]--------------------------------------------------- text area classes ---------------------------------------------------[/comment]
  365.  
  366. [class name="flexright" minWidth="500px"]
  367. width:250px;
  368. height:100%;
  369. transition-duration:1s;
  370. margin-left:calc(50% + 10px);
  371. [/class]
  372.  
  373. [class name="flexright" maxWidth="499px"]
  374. width:250px;
  375. height:100%;
  376. transition-duration:1s;
  377. margin-left:100%;
  378. [/class]
  379.  
  380.  
  381. [class="infobox"]
  382. width:250px;
  383. height:100%;
  384. background:#fff;
  385. overflow:hidden;
  386. cursor:auto;
  387. [/class]
  388.  
  389. [comment]--------------------------------------------------- tabbed pages classes ---------------------------------------------------[/comment]
  390.  
  391. [comment]---------------------- note: pagecontainer is major container, containerpages is page style ----------------------[/comment]
  392.  
  393. [class name="pageContainers"]
  394. width:calc(100% - 25px);
  395. padding:0px 0px 0px 10px;
  396. height:100%;
  397. overflow:hidden;
  398. [/class]
  399.  
  400. [class name="containerPages"]
  401. font-size:11px;
  402. text-align:justify;
  403. color:#555;
  404. height:265px;
  405. overflow:auto;
  406. width:220px;
  407. padding-right:17px;
  408. padding-left:3px;
  409. [/class]
  410.  
  411. [class name="tabContainers"]
  412. display:flex;
  413. margin-bottom:7px;
  414. height:22px;
  415. [/class]
  416.  
  417. [class name="tabStyle"]
  418. font-size:10px;
  419. text-transform:uppercase;
  420. color:#555;
  421. font-weight:bold;
  422. padding:5px;
  423. transition:0.1s;
  424. cursor:pointer;
  425. [/class]
  426.  
  427. [comment]--------------------------------------------------- info label classes ---------------------------------------------------[/comment]
  428.  
  429.  
  430. [class name="basicInfo"]
  431. padding:6px;
  432. border:1px solid #f1f1f1;
  433. display:flex;
  434. justify-content:space-between;
  435. margin-bottom:5px;
  436. [/class]
  437.  
  438. [class name="basicInfoLabel"]
  439. font-size:9.5px;
  440. text-transform:uppercase;
  441. color:#fff;
  442. font-weight:bold;
  443. padding:2px 5px 2px 5px;
  444. background:var(--accent);
  445. [/class]
  446.  
  447. [class name="basicInfoText"]
  448. font-size:11px;
  449. color:#555;
  450. [/class]
  451.  
  452. [comment]---------------------------------------------- character personality classes ----------------------------------------------l[/comment]
  453.  
  454.  
  455. [class name="personContainer"]
  456. display:flex;
  457. width:100%;
  458. font-size:9.5px;
  459. margin-top:5px;
  460. [/class]
  461.  
  462. [class name="personFlex"]
  463. width:100px;
  464. flex-grow:1;
  465. padding:5px;
  466. [/class]
  467.  
  468. [class name="personWrap"]
  469. display:flex;
  470. flex-wrap:wrap;
  471. width:100%;
  472. [/class]
  473.  
  474. [class name="traitLeftContainer"]
  475. width:calc(50% - 15px);
  476. margin:5px;
  477. [/class]
  478.  
  479. [class name="traitName"]
  480. text-transform:uppercase;
  481. font-weight:bold;
  482. margin-bottom:-5px;
  483. color:#000;
  484. [/class]
  485.  
  486. [class name="traitMeterOut"]
  487. border:1px solid var(--accent);
  488. width:100%;
  489. height:5px;
  490. border-radius:5px;
  491. padding:1px;
  492. margin-bottom:5px;
  493. [/class]
  494.  
  495. [class name="traitMeter"]
  496. background:var(--accent);
  497. height:5px;
  498. [/class]
  499.  
  500. [class name="likeDislike"]
  501. background-color:#eeeeee;
  502. color:#555;
  503. text-transform:uppercase;
  504. width:fit-content;
  505. padding:2px 5px 2px 5px;
  506. border-radius:5px;
  507. margin:1px;
  508. [/class]
  509.  
  510. [comment]---------------------------------------------- extra classes ----------------------------------------------[/comment]
  511.  
  512. [class name="imgContainers"]
  513. display:flex;
  514. width:223px;
  515. flex-wrap:wrap;
  516. pointer-events:none;
  517. justify-content:space-between;
  518. [/class]
  519.  
  520. [class name="imgBox"]
  521. border:5px solid #fff;
  522. box-shadow:1px 1px #ddd;
  523. width:100px;
  524. height:100px;
  525. filter:saturate(200%);
  526. [/class]
  527.  
  528. [class name="oocBox"]
  529. width:100%;
  530. padding-right:10px;
  531. border-top:3px solid var(--accent);
  532. margin-top:3px;
  533. text-align:right;
  534. text-transform:uppercase;
  535. color:#555;
  536. font-size:15px;
  537. font-weight:bold;
  538. [/class]
  539.  
  540. [class name="oocInfo"]
  541. width:100%;
  542. text-align:right;
  543. [/class]
  544.  
  545.  
  546.  
  547. [comment]---------------------------------------------- selection classes ----------------------------------------------[/comment]
  548.  
  549. [class name="animate" minWidth="500px"]
  550. animation-name:{post_id}imageAnimate;
  551. animation-duration: 2s;
  552. animation-fill-mode: forwards;
  553. [/class]
  554.  
  555. [class name="animate" maxWidth="499px"]
  556. animation-name:{post_id}mobileAnimate;
  557. animation-duration: 2s;
  558. animation-fill-mode: forwards;
  559. [/class]
  560.  
  561. [class name="backAnimate" minWidth="500px"]
  562. animation-name:{post_id}postAnimate;
  563. animation-duration: 2s;
  564. animation-fill-mode: forwards;
  565. [/class]
  566.  
  567. [class name="backAnimate" maxWidth="499px"]
  568. animation-name:{post_id}postMobile;
  569. animation-duration: 2s;
  570. animation-fill-mode: forwards;
  571. [/class]
  572.  
  573. [class name="movers" minWidth="500px"]
  574. margin-left:calc(0% + 5px);
  575. transition-delay:1s;
  576. [/class]
  577.  
  578. [class name="movers" maxWidth="499px"]
  579. margin-left:calc(0% - 10px);
  580. transition-delay:1s;
  581. [/class]
  582.  
  583. [class name="opacityChange"]
  584. opacity:1;
  585. transition-delay:2s;
  586. cursor: pointer;
  587. [/class]
  588.  
  589.  
  590. [comment]---------------------------------------------- image scripts ----------------------------------------------[/comment]
  591.  
  592. [script class="imageHover" on="mouseenter"]
  593. addClass animate imageHover
  594. removeClass backAnimate imageHover
  595. addClass movers flexright
  596. addClass opacityChange goBack
  597. addClass colorChange majorContainer
  598. [/script]
  599.  
  600. [script class="goBack" on="click"]
  601. removeClass animate imageHover
  602. addClass backAnimate imageHover
  603. removeClass movers flexright
  604. removeClass opacityChange goBack
  605. removeClass colorChange majorContainer
  606. [/script]
  607.  
  608. [script class="goBackMobile" on="click"]
  609. removeClass animate imageHover
  610. addClass backAnimate imageHover
  611. removeClass movers flexright
  612. removeClass opacityChange goBack
  613. removeClass colorChange majorContainer
  614. [/script]
  615.  
  616. [comment]---------------------------------------------- tab page scripts ----------------------------------------------[/comment]
  617.  
  618. [script class="containerPages"]
  619. hide containerPages
  620. show pageOne
  621. removeClass tabSelect tabStyle
  622. addClass tabSelect taba
  623. [/script]
  624.  
  625. [class name="tabSelect"]
  626. border-bottom:2px solid var(--accent);
  627. margin-left:0px;
  628. [/class]
  629.  
  630. [script class="taba" on="click"]
  631. hide containerPages
  632. show pageOne
  633. removeClass tabSelect tabStyle
  634. addClass tabSelect taba
  635. [/script]
  636.  
  637. [script class="tabb" on="click"]
  638. hide containerPages
  639. show pageTwo
  640. removeClass tabSelect tabStyle
  641. addClass tabSelect tabb
  642. [/script]
  643.  
  644. [script class="tabc" on="click"]
  645. hide containerPages
  646. show pageThree
  647. removeClass tabSelect tabStyle
  648. addClass tabSelect tabc
  649. [/script]
  650.  
  651. [comment]---------------------------------------------- animations ----------------------------------------------[/comment]
  652.  
  653. [animation=imageAnimate]
  654. [keyframe=50]
  655. background-size:130%;filter:grayscale(0%);background-position:center;
  656. [/keyframe]
  657.  
  658. [keyframe=100]
  659. background-size:130%;filter:grayscale(0%);background-position:center right;
  660. [/keyframe]
  661.  
  662. [/animation]
  663.  
  664. [animation=postAnimate]
  665. [keyframe=0]
  666. background-size:130%;filter:grayscale(0%);background-position:center right;
  667. [/keyframe]
  668.  
  669. [keyframe=50]
  670. background-size:130%;filter:grayscale(0%);background-position:center;
  671. [/keyframe]
  672.  
  673. [keyframe=100]
  674. background-size:150%;filter:grayscale(100%);background-position:center;
  675. [/keyframe]
  676. [/animation]
  677.  
  678. [animation=mobileAnimate]
  679. [keyframe=50]
  680. filter:grayscale(0%);background-position:center;
  681. [/keyframe]
  682.  
  683. [keyframe=100]
  684. filter:grayscale(0%);background-position:center right;
  685. [/keyframe]
  686.  
  687. [/animation]
  688.  
  689. [animation=postMobile]
  690. [keyframe=0]
  691. filter:grayscale(0%);background-position:center right;
  692. [/keyframe]
  693.  
  694. [keyframe=50]
  695. filter:grayscale(0%);background-position:center;
  696. [/keyframe]
  697.  
  698. [keyframe=100]
  699. filter:grayscale(100%);background-position:center;
  700. [/keyframe]
  701. [/animation]
  702.  
  703.  
  704. [/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!