API tools faq
paste
Advertisement
springdoy

theme 02: what is love?

springdoy
Sep 8th, 2019
2,178
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.74 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!--
  3.  
  4. 1. PLEASE DON'T REMOVE THE CREDIT.
  5. 2. feel free to edit all the fonts and colors but don't claim as yours.
  6. 3. don't take parts of the code.
  7. 4. don't use it as a base.
  8.  
  9. made by: springdoy.
  10.  
  11. if you have any question i'll be happy to help you!
  12.  
  13. -->
  14.  
  15.  
  16. <html>
  17. <title>{Title}</title>
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20. {block:Description}
  21. <meta name="description" content="{MetaDescription}" />
  22. {/block:Description}
  23. <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900&display=swap" rel="stylesheet">
  24. <link href="https://fonts.googleapis.com/css?family=Mali:400,400i,700,700i&display=swap" rel="stylesheet">
  25. <script src="https://kit.fontawesome.com/860e19f8d2.js"></script>
  26. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  27. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  28.  
  29.  
  30. <meta name="color:bg" content="#e2e2e2"/>
  31. <meta name="color:txt" content="#575757"/>
  32. <meta name="color:links" content="#c3c3c3"/>
  33. <meta name="color:accent" content="#7d93b0"/>
  34. <meta name="color:posts" content="#f5f5f5"/>
  35. <meta name="color:border" content="#d7d7d7"/>
  36. <meta name="color:accent2" content="#b07b68"/>
  37. <meta name="color:container" content="#b07b68"/>
  38. <meta name="color:wrapper" content="#b07b68"/>
  39.  
  40. <meta name="image:background" content=""/>
  41. <meta name="image:side one" content="http://placehold.it/80x50"/>
  42. <meta name="image:side two" content="http://placehold.it/80x50"/>
  43. <meta name="image:side three" content="http://placehold.it/80x50"/>
  44. <meta name="image:side four" content="http://placehold.it/80x50"/>
  45. <meta name="image:nav big" content="https://placehold.it/150x170"/>
  46. <meta name="image:nav small" content="http://placehold.it/110x110"/>
  47.  
  48. <meta name="text:title" content="what is love?"/>
  49. <meta name="text:bio" content="i like candy"/>
  50. <meta name="text:paper text" content="My heart keeps beating as if it's my own story Makes my heart pound and swell with hope"/>
  51. <meta name="text:url one" content="/"/>
  52. <meta name="text:link one" content="link"/>
  53. <meta name="text:url two" content="/"/>
  54. <meta name="text:link two" content="link"/>
  55. <meta name="text:url three" content="/"/>
  56. <meta name="text:link three" content="link"/>
  57. <meta name="text:url four" content="/"/>
  58. <meta name="text:link four" content="link"/>
  59. <meta name="text:url five" content="/"/>
  60. <meta name="text:link five" content="link"/>
  61. <meta name="text:url six" content="/"/>
  62. <meta name="text:link six" content="link"/>
  63. <meta name="text:url seven" content="/"/>
  64. <meta name="text:link seven" content="link"/>
  65. <meta name="text:url eight" content="/"/>
  66. <meta name="text:link eight" content="link"/>
  67. </head>
  68.  
  69.  
  70. <style type="text/css">
  71.  
  72.  
  73.  
  74.  
  75. /* BASIC THINGS */
  76. .iframe-controls--desktop {
  77. position:fixed;
  78. top:0px;
  79. right:0px;
  80. z-index:214748364789123456789;
  81. -webkit-transform:scale(0.6,0.6);
  82. -webkit-transform-origin: 100% 0%;
  83. -ms-transform-origin:100% 0%;
  84. -ms-transform:scale(0.6,0.6);
  85. transform:scale(0.6,0.6);
  86. transform-origin:100% 0%;
  87. }
  88.  
  89. body {
  90. background: url({image:background});
  91. background-color: {color:bg};
  92. background-repeat: repeat;
  93. background-attachment: fixed;
  94. background-position: center;
  95. font-family: calibri;
  96. font-size: 11px;
  97. color: {color:txt};
  98. letter-spacing: 0.4px;
  99. text-transform: lowercase;
  100. }
  101.  
  102. b, bold, strong {
  103. color: {color:accent};
  104. font-weight: bold;
  105. }
  106.  
  107. i, italic {
  108. color: {color:links};
  109. }
  110.  
  111. small {
  112. font-size: 9px;
  113. }
  114.  
  115. big {
  116. font-size: 12px;
  117. font-weight: bold;
  118. color: {color:accent2};
  119. }
  120.  
  121. a {
  122. text-decoration:none;
  123. color:{color:links};
  124. font-weight: bold;
  125. letter-spacing: 1px;
  126. }
  127.  
  128. a:hover {
  129. color:{color:accent2};
  130. }
  131.  
  132. blockquote {
  133. padding:2px 20px;
  134. margin:3px 0 3px 8px;
  135. border-left: 1px solid {color:border};
  136. }
  137.  
  138. h2 {
  139. font-size: 18px;
  140. font-family: montserrat, sans-serif;
  141. color: {color:accent2};
  142. text-transform: uppercase;
  143. font-weight: 800;
  144. }
  145.  
  146. h1 {
  147. font-size: 14px;
  148. font-family: montserrat, sans-serif;
  149. color: {color:links};
  150. text-transform: uppercase;
  151. font-weight: 800;
  152. }
  153. .container {
  154. background: {color:wrapper};
  155. width: 390px;
  156. height: 460px;
  157. padding-bottom: 20px;
  158. z-index: 99999;
  159. position: absolute;
  160. margin-left: 515px;
  161. margin-top: 110px;
  162. overflow: scroll;
  163. overflow-x: hidden;
  164. }
  165.  
  166.  
  167. .posts {
  168. width: 300px!important;
  169. height:auto;
  170. background-color: {color:posts};
  171. padding: 30px;
  172. z-index: 9;
  173. opacity: 9999;
  174. margin-left: 15px;
  175. overflow: hidden;
  176.  
  177. }
  178.  
  179. img {
  180. max-width:100%;
  181. height:auto;
  182. }
  183.  
  184. .video {
  185. max-width:300px!important;
  186. max-height: 150px!important;
  187.  
  188. }
  189.  
  190. .video iframe {
  191. max-width:300px!important;
  192. max-height: 150px!important;
  193.  
  194. }
  195.  
  196. ::-webkit-scrollbar {
  197. display:none;
  198. }
  199.  
  200.  
  201.  
  202. .bgim {
  203. width: 710px;
  204. height: 450px;
  205. background: linear-gradient({color:accent}, {color:links});
  206. position: fixed;
  207. top: 50%;
  208. overflow: hidden;
  209. left: 50%;
  210. margin-top: -225px;
  211. margin-left: -330px;
  212. z-index: 1!important;
  213. }
  214.  
  215.  
  216.  
  217. /* audio */
  218.  
  219. .playbutton {
  220. margin-top:10px;
  221. margin-left:9px;
  222. z-index:9;
  223. width:33px;
  224. height:40px;
  225. overflow:hidden;
  226. color: black;
  227. opacity: 0.1;
  228.  
  229. }
  230.  
  231. .playbutton-img {
  232. position:relative;
  233. margin-top:0px;
  234. margin-left:0px;
  235. z-index:9;
  236. width:48px;
  237. border: 1px solid {color:border};
  238. background: {color:accent2};
  239. height:48px;
  240. overflow:hidden;
  241. color: black;
  242.  
  243.  
  244. }
  245.  
  246. .trackinfo {
  247. margin-bottom:10px;
  248. border: 1px solid {color:border};
  249. top:-4px;
  250. border-left: none;
  251. margin-left:50px;
  252. height:48px;
  253. margin-top:-50px;
  254. }
  255.  
  256. .trackname {
  257. padding-top:13px;
  258. text-align:center;
  259. font-size:10px;
  260. text-transform:uppercase;
  261. font-weight: bold;
  262. color: {color:accent};
  263. font-family: montserrat;
  264. letter-spacing:2px;
  265.  
  266. }
  267.  
  268. .artist {
  269. text-align:center;
  270. font-size:8px;
  271. text-transform:uppercase;
  272. letter-spacing:4px;
  273. color: {color:txt};
  274. }
  275.  
  276. .chat ul {
  277. list-style: none;
  278. margin: 0;
  279. padding: 0;
  280. }
  281.  
  282. .chat li {
  283. margin-bottom: 5px!important;
  284. padding: 2% 5%;
  285. width: 90%;
  286. text-transform: uppercase;
  287. font-size: 8px;
  288. letter-spacing: 1px;
  289. margin: auto;
  290. border: 1px solid {color:border};
  291. border-radius: 20px;
  292. }
  293.  
  294. .chat .odd {
  295. text-align:left;
  296. }
  297.  
  298. .chat .odd b, bold, strong {
  299. color: {color:accent};
  300. }
  301.  
  302. .chat .even {
  303. text-align: right;
  304. }
  305.  
  306. .pagination {
  307. width: 34px;
  308. margin-top:580px;
  309. position: absolute;
  310. margin-left:320px;
  311. padding: 0px 12px;
  312. z-index: 999999;
  313. height: 20px;
  314. text-align:center;
  315. color: {color:accent}!important;
  316. }
  317.  
  318.  
  319.  
  320. .pagination a {
  321. font-size: 20px;
  322. font-weight: 600;
  323. letter-spacing: 2px;
  324. text-transform: uppercase;
  325. font-family: montserrat, sans-serif;
  326. color: {color:accent}!important;
  327. }
  328.  
  329. .tags {
  330. width: 300px;
  331. border-top: none;
  332. padding: 8px 30px;
  333. margin-left: 15px;
  334. text-align:center;
  335. }
  336.  
  337. .tags a {
  338. font-size: 8px;
  339. text-transform: uppercase;
  340. color:{color: border};
  341. letter-spacing: 2px;
  342. }
  343.  
  344. .tags a:hover {
  345. color {color:accent2};
  346. }
  347.  
  348.  
  349. .permalink {
  350. font-family: 'Saira Extra Condensed', sans-serif;
  351. margin-left: 0px;
  352. text-transform: uppercase;
  353. display:inline-block;
  354. }
  355.  
  356. .permin {
  357. background: {color:posts};
  358. border-bottom:none;
  359. border-bottom: 1px solid {color:border};
  360. width: 300px;
  361. padding: 8px 30px 10px 30px;
  362. margin-top: 15px;
  363. margin-left: 15px;
  364. }
  365. .permalink a {
  366. color: {color:links};
  367. text-transform: uppercase;
  368. font-size: 8px;
  369. letter-spacing: 1.5px;
  370. }
  371.  
  372. .notes a {
  373. color: {color:links};
  374. text-transform: uppercase;
  375. font-size: 8px;
  376. letter-spacing: 1.5px;
  377. }
  378.  
  379. .notes {
  380. font-family: 'Saira Extra Condensed', sans-serif;
  381. display: inline-block;
  382. margin-top: 0px;
  383. }
  384.  
  385. .asker {
  386. font-size:8px;
  387. letter-spacing: 2px;
  388. text-transform: uppercase;
  389. text-align:center;
  390. font-family: 'Saira Extra Condensed', sans-serif;
  391. }
  392.  
  393. .asker-box {
  394. background: {color:posts};
  395. padding: 3px 10px;
  396. font-size:10px;
  397. text-align:center;
  398. }
  399.  
  400.  
  401. .question {
  402. width: 260px;
  403. height: auto;
  404. text-align: justify;
  405. margin-left: 1px;
  406. padding: 10px 20px;
  407. border-radius: 15px;
  408. background-color: {color:accent};
  409. display: inline-block;
  410. }
  411.  
  412. .notes2 {
  413.  
  414. font-size: 7px;
  415. font-weight:normal;
  416. letter-spacing: 1px;
  417. margin: 10px;
  418. padding: 5px;
  419. display:inline-block;
  420. }
  421.  
  422. .notes2 img {
  423. border-radius: 50%;
  424. margin-right: 5px;
  425. }
  426.  
  427. .label{
  428. font-weight: bold;
  429. color: {color:accent};
  430. }
  431.  
  432. .quot {
  433. font-family: 'Sail', cursive;
  434. font-size: 22px;
  435. line-height: 110%;
  436. text-align: justify;
  437. text-transform: lowercase;
  438. margin-bottom: 15px;
  439.  
  440. }
  441.  
  442. .ptit {
  443. color: {color:accent};
  444. font-family: montserrat, sans-serif;
  445. font-size: 24px;
  446. margin-bottom: 15px;
  447. font-weight: 900;
  448. line-height: 110%;
  449. text-align: center;
  450. text-transform: uppercase;
  451.  
  452. }
  453.  
  454. .more-btn-wrap{
  455. position: relative;
  456. padding: 20px 0;
  457. width: 100%;
  458. }
  459.  
  460. .more-btn-wrap a:link{
  461. -webkit-transition: all 0.2s ease;
  462. -moz-transition: all 0.2s ease;
  463. -o-transition: all 0.2s ease;
  464. transition: all 0.2s ease;
  465. position: relative;
  466. left: calc(50% - 50px);
  467. padding: 4px 20px;
  468. font-weight: bold;
  469. background: {color:container};
  470. border-radius: 10px;
  471. color: {color:accent};
  472.  
  473. }
  474.  
  475. .cred {
  476. width: 30px;
  477. height: 30px;
  478. border: 1px solid {color:border};
  479. background: {color:posts};
  480. border-radius: 50%;
  481. text-align: center;
  482. font-size: 12px;
  483. color: {color:accent};
  484. bottom: 10px;
  485. overflow: hidden;
  486. left: 10px;
  487. position: absolute;
  488. }
  489.  
  490.  
  491. .but {
  492. font-size: 10px;
  493. font-family: montserrat;
  494. font-weight: bold;
  495. float: right;
  496. margin-top: 5px;
  497. margin-right: 10px;
  498. color: {color:accent};
  499. z-index: 999999;
  500. }
  501.  
  502.  
  503. ul {
  504. list-style: none;
  505. margin-left: 0;
  506. padding-left: 0;
  507. }
  508.  
  509. li {
  510. padding-left: 20px;
  511. text-indent: -1em;
  512. }
  513.  
  514. ul li:before {
  515. font-family: 'FontAwesome';
  516. content: '★';
  517. margin: 0px 10px;
  518. color: {color:accent2};
  519. }
  520.  
  521. .galaxy {
  522. width: 1000px;
  523. height: 700px;
  524. overflow: hidden;
  525. position: fixed;
  526. top: 50%;
  527. left: 50%;
  528. margin-left: -500px;
  529. margin-top: -350px;
  530. }
  531.  
  532. .wrapper {
  533. width: 90px;
  534. height: 50px;
  535. position: absolute;
  536. left: 50%;
  537. top: 50%;
  538. transform: translate(-50%, -50%);
  539. border-radius: 5px;
  540. overflow: hidden;
  541. }
  542.  
  543. .wave {
  544. width: 1250px;
  545. height: 735px;
  546. position: absolute;
  547. top: -25%;
  548. left: 50%;
  549. margin-left: -500px;
  550. margin-top: -310px;
  551. border-radius: 45%;
  552. background: {color:container};
  553. }
  554.  
  555.  
  556. ::selection {
  557. background: {color:accent};
  558. }
  559.  
  560. .tooltip{
  561. display: inline;
  562. position: relative;
  563. }
  564.  
  565. #s-m-t-tooltip {
  566. width: auto;
  567. padding:2px 10px;
  568. border-radius: 5px;
  569. margin:20px 7px -2px 20px;
  570. background-color:{color:bg};
  571. font-size:8px;
  572. letter-spacing:1;
  573. text-transform:uppercase;
  574. color:{color:txt};
  575. z-index:999999999999999999999999999999999999;
  576. }
  577.  
  578. /* tabs */
  579.  
  580. .tab {
  581. overflow: hidden;
  582. }
  583.  
  584. .tab button {
  585. background:transparent;
  586. border: none;
  587. outline: none;
  588. cursor: pointer;
  589. color: {color:links};
  590. letter-spacing: 0px;
  591. transition: 0.3s;
  592. display: inline-block;
  593. }
  594.  
  595. .tab button:hover {
  596. color: {color:accent};
  597. }
  598.  
  599.  
  600. .tabcontent {
  601. display: none;
  602. z-index: 999;
  603. background: {color:wrapper};
  604. width: 390px;
  605. height: 480px;
  606. position: absolute;
  607. z-index: 9999999999;
  608. margin-left: 515px;
  609. margin-top: 110px;
  610. overflow: hidden;
  611. -webkit-animation: fadeEffect 1s;
  612. animation: fadeEffect 1s;
  613. }
  614.  
  615. @-webkit-keyframes fadeEffect {
  616. from {opacity: 0;}
  617. to {opacity: 1;}
  618. }
  619.  
  620. @keyframes fadeEffect {
  621. from {opacity: 0;}
  622. to {opacity: 1;}
  623. }
  624.  
  625. .tablinks {
  626. color:{color:links};
  627. text-transform: uppercase;
  628. letter-spacing: 1px;
  629. font-size: 18px;
  630. display: inline-block;
  631. width: auto;
  632. height; auto;
  633. padding: 0px!important;
  634. }
  635.  
  636. .tablinks:hover {
  637. color:{color:border}
  638. transition: 0.5s;
  639. }
  640.  
  641. .yoongi {
  642. width: 200px;
  643. height: 290px;
  644. background-color: {color:accent2};
  645. background-image: linear-gradient(90deg, transparent 35px, {color:accent} 35px, {color:accent} 37px, transparent 37px), linear-gradient(#fff 1px, transparent .1em);
  646. background-size: 100% 1.2em;
  647. position: absolute;
  648. margin-left: 70px;
  649. margin-top: 70px;
  650. transform: rotate(2deg);
  651. }
  652.  
  653. .hobi {
  654. width: 15px;
  655. height: 15px;
  656. background: {color:container};
  657. border-radius: 50%;
  658. position: absolute;
  659. margin-left: 10px;
  660. margin-top: 40px;
  661. }
  662.  
  663. .jin {
  664. width: 15px;
  665. height: 3px;
  666. background: {color:container};
  667. position: absolute;
  668. margin-top: 46px;
  669. }
  670.  
  671. .jungkook {
  672. width: 15px;
  673. height: 15px;
  674. background: {color:container};
  675. border-radius: 50%;
  676. position: absolute;
  677. margin-left: 10px;
  678. margin-top: 80px;
  679. }
  680.  
  681. .namjoon {
  682. width: 15px;
  683. height: 3px;
  684. background: {color:container};
  685. position: absolute;
  686. margin-top: 86px;
  687. }
  688.  
  689. .taehyung {
  690. width: 15px;
  691. height: 15px;
  692. background: {color:container};
  693. border-radius: 50%;
  694. position: absolute;
  695. margin-left: 10px;
  696. margin-top: 120px;
  697. }
  698.  
  699. .jimin {
  700. width: 15px;
  701. height: 3px;
  702. background: {color:container};
  703. position: absolute;
  704. margin-top: 126px;
  705. margin-left: -2px;
  706. }
  707.  
  708. .doyoung {
  709. width: 15px;
  710. height: 15px;
  711. background: {color:container};
  712. border-radius: 50%;
  713. position: absolute;
  714. margin-left: 10px;
  715. margin-top: 160px;
  716. }
  717.  
  718. .ten {
  719. width: 15px;
  720. height: 3px;
  721. background: {color:container};
  722. position: absolute;
  723. margin-top: 166px;
  724. margin-left: -2px;
  725. }
  726.  
  727. .kun {
  728. width: 15px;
  729. height: 15px;
  730. background: {color:container};
  731. border-radius: 50%;
  732. position: absolute;
  733. margin-left: 10px;
  734. margin-top: 200px;
  735. }
  736.  
  737. .jaehyun {
  738. width: 15px;
  739. height: 3px;
  740. background: {color:links};
  741. position: absolute;
  742. margin-top: 206px;
  743. margin-left: -2px;
  744. }
  745.  
  746. .chenle {
  747. width: 15px;
  748. height: 15px;
  749. background: {color:links};
  750. border-radius: 50%;
  751. position: absolute;
  752. margin-left: 10px;
  753. margin-top: 240px;
  754. }
  755.  
  756. .hendery {
  757. width: 15px;
  758. height: 3px;
  759. background: {color:links};
  760. position: absolute;
  761. margin-top: 246px;
  762. margin-left: -2px;
  763. }
  764.  
  765. .lucas {
  766. width: 120px;
  767. height: 200px;
  768. position: absolute;
  769. margin-left: 42px;
  770. margin-top: 40px;
  771. font-family: 'Mali', cursive;
  772. font-size: 14px;
  773. font-weight: 700;
  774. overflow: scroll;
  775. color: {color:accent};
  776. }
  777.  
  778. .doyeon {
  779. width: 90px;
  780. height: 270px;
  781. background:white;
  782. position: absolute;
  783. margin-left: 200px;
  784. margin-top: 70px;
  785. transform: rotate(-7deg);
  786. box-shadow: -3px 3px 4px rgba(0,0,0,0.1);
  787. }
  788.  
  789. .miyeon {
  790. width: 80px;
  791. height: 50px;
  792. background: url({image:side one});
  793. position: absolute;
  794. margin-top: 5px;
  795. margin-left: 5px;
  796. }
  797.  
  798. .yuqi {
  799. width: 80px;
  800. height: 50px;
  801. background: url({image:side two});
  802. position: absolute;
  803. margin-top: 60px;
  804. margin-left: 5px;
  805. }
  806.  
  807. .soojin {
  808. width: 80px;
  809. height: 50px;
  810. background: url({image:side three});
  811. position: absolute;
  812. margin-top: 115px;
  813. margin-left: 5px;
  814. }
  815.  
  816. .shuhua {
  817. width: 80px;
  818. height: 50px;
  819. background: url({image:side four});
  820. position: absolute;
  821. margin-top: 170px;
  822. margin-left: 5px;
  823. }
  824.  
  825. .yeeun {
  826. width: 80px;
  827. height: 40px;
  828. position: absolute;
  829. margin-top: 225px;
  830. margin-left: 5px;
  831. text-align: center;
  832. }
  833.  
  834. .yujin {
  835. width: 70px;
  836. height: 15px;
  837. background: {color:accent};
  838. position: absolute;
  839. opacity: 0.8;
  840. margin-top: 75px;
  841. margin-left: 230px;
  842. transform: rotate(45deg);
  843. box-shadow: -3px 3px 4px rgba(0,0,0,0.1);
  844. }
  845.  
  846. .eunbin {
  847. width: 150px;
  848. height: 110px;
  849. background: {color:links};
  850. position: absolute;
  851. margin-left: 50px;
  852. margin-top: 245px;
  853. transform: rotate(-13deg);
  854. box-shadow: -3px 3px 4px rgba(0,0,0,0.1);
  855. }
  856.  
  857. .elkie {
  858. width: 20px;
  859. height: 20px;
  860. background: {color:accent2};
  861. position: absolute;
  862. border-radius: 50%;
  863. margin: 8px 63px;
  864. box-shadow: -3px 3px 4px rgba(0,0,0,0.1);
  865. }
  866.  
  867. .sorn {
  868. width: 10px;
  869. height: 10px;
  870. background: {color:accent2};
  871. position: absolute;
  872. border-radius: 50%;
  873. margin: 5px;
  874. box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
  875. }
  876.  
  877. .seungyeon {
  878. width: 110px;
  879. height: 52px;
  880. position: absolute;
  881. margin: 38px 20px;
  882. text-align: justify;
  883. }
  884.  
  885. .seunghee {
  886. width: 300px;
  887. height: 50px;
  888. font-family: montserrat;
  889. font-weight: 900;
  890. font-size: 40px;
  891. color: container;
  892. position: absolute;
  893. margin-top: 355px;
  894. margin-left: 20px;
  895. text-transform: uppercase;
  896. line-height: 100%;
  897. color: {color:container};
  898. }
  899.  
  900. .jinsoul {
  901. position: absolute;
  902. font-size: 20px;
  903. margin-top: 80px;
  904. margin-left: 30px;
  905. color: {color:links};
  906. }
  907.  
  908. .choerry {
  909. position: absolute;
  910. font-size: 20px;
  911. margin-top: 180px;
  912. margin-left: 40px;
  913. color: {color:links};
  914. }
  915.  
  916. .heejin {
  917. position: absolute;
  918. font-size: 20px;
  919. margin-top: 130px;
  920. margin-left: 300px;
  921. color: {color:links};
  922. }
  923.  
  924. .gowon {
  925. position: absolute;
  926. font-size: 20px;
  927. margin-top: 250px;
  928. margin-left: 310px;
  929. }
  930.  
  931. .tzuyu {
  932. width: 170px;
  933. height: 190px;
  934. background: {color:links};
  935. position: absolute;
  936. transform: rotate(-13deg);
  937. margin-top: 80px;
  938. margin-left: 40px;
  939. box-shadow: -3px 3px 4px rgba(0,0,0,0.1);
  940. }
  941.  
  942. .sana {
  943. width: 120px;
  944. height: 161px;
  945. background: white;
  946. box-shadow: -3px 3px 4px rgba(0,0,0,0.1);
  947. margin-left: 130px;
  948. margin-top: 40px;
  949. transform: rotate(-3deg);
  950. position: absolute;
  951. }
  952.  
  953. .dahyun {
  954. width: 110px;
  955. height: 110px;
  956. position: absolute;
  957. margin-top: 5px;
  958. margin-left: 5px;
  959. background:url({image:nav small});
  960. }
  961.  
  962. .nayeon {
  963. width: 160px;
  964. height: 215px;
  965. background: white;
  966. box-shadow: -3px 3px 4px rgba(0,0,0,0.1);
  967. margin-left: 200px;
  968. margin-top: 50px;
  969. transform: rotate(3deg);
  970. position: absolute;
  971. }
  972.  
  973. .momo {
  974. width: 150px;
  975. height: 150px;
  976. position: absolute;
  977. margin-top: 5px;
  978. margin-left: 5px;
  979. background: {color:accent};
  980. }
  981.  
  982. .mina {
  983. width: 150px;
  984. height: 170px;
  985. position: absolute;
  986. margin-top: -15px;
  987. margin-left: 5px;
  988. background: url({image:nav big});
  989. }
  990.  
  991. .chaeyoung {
  992. width: 50px;
  993. height: 15px;
  994. background: {color:container};
  995. opacity: 0.8;
  996. position: absolute;
  997. margin-left: 160px;
  998. margin-top: 32px;
  999. transform: rotate(-10deg);
  1000. }
  1001.  
  1002. .yeji {
  1003. width: 160px;
  1004. height: 130px;
  1005. position: absolute;
  1006. margin-left: 30px;
  1007. margin-top: 320px;
  1008. overflow: scroll;
  1009. }
  1010.  
  1011. .ryujin {
  1012. width: auto;
  1013. height: auto;
  1014. background: {color:accent};
  1015. display:inline-block;
  1016. margin-bottom: 5px;
  1017. }
  1018.  
  1019. .lia {
  1020. font-family: montserrat;
  1021. font-weight: 700;
  1022. color: {color:container};
  1023. letter-spacing: 0.5px;
  1024. text-transform: uppercase;
  1025. padding: 2px 5px;
  1026. font-size: 8px;
  1027. }
  1028.  
  1029. .yuna {
  1030. width: 170px;
  1031. height: 130px;
  1032. position: absolute;
  1033. margin-left: 200px;
  1034. margin-top: 320px;
  1035. overflow: scroll;
  1036. text-align: justify;
  1037. }
  1038.  
  1039. .olivia {
  1040. width: 100px;
  1041. height: 150px;
  1042. position: absolute;
  1043. margin: 10px;
  1044. }
  1045.  
  1046. .olivia a {
  1047. display: inline-block;
  1048. color: {color:txt};
  1049. border-bottom: 2px solid {color:accent};
  1050.  
  1051. }
  1052.  
  1053. .olivia a:hover {
  1054. color: {color:txt};
  1055. border-bottom: 2px solid {color:container};
  1056. transition: 0.3s;
  1057. }
  1058.  
  1059.  
  1060. .vivi {
  1061. font-family: montserrat;
  1062. font-weight: 900;
  1063. color:{color:accent2};
  1064. display: inline-block;
  1065. margin-right: 5px;
  1066. margin-bottom: 3px;
  1067. }
  1068. </style>
  1069.  
  1070. <body>
  1071. <script>
  1072.  
  1073. (function($){
  1074.  
  1075. $(document).ready(function(){
  1076.  
  1077. $("a[title]").style_my_tooltips({
  1078.  
  1079. tip_follows_cursor:true,
  1080.  
  1081. tip_delay_time:90,
  1082.  
  1083. tip_fade_speed:600,
  1084.  
  1085. attribute:"title"
  1086.  
  1087. });
  1088.  
  1089. });
  1090.  
  1091. })(jQuery);
  1092.  
  1093. /* */
  1094.  
  1095. $(document).ready(function() {
  1096.  
  1097. var $audio = $('iframe.tumblr_audio_player');
  1098. $audio.load(function() {
  1099. $(this).contents().find('head').append('<style type="text/css">' +
  1100. '.audio-player { background: transparent!important; color: {color:accent} !important; }' +
  1101. '.audio-player .audio-info .track-artist { color: #fff !important; }' +
  1102. '</style>');
  1103. });
  1104. });
  1105.  
  1106.  
  1107. function opentabs(evt, tabstabs) {
  1108.  
  1109. var i, tabcontent, tablinks;
  1110.  
  1111.  
  1112. tabcontent = document.getElementsByClassName("tabcontent");
  1113. for (i = 0; i < tabcontent.length; i++) {
  1114. tabcontent[i].style.display = "none";
  1115. }
  1116.  
  1117.  
  1118. tablinks = document.getElementsByClassName("tablinks");
  1119. for (i = 0; i < tablinks.length; i++) {
  1120. tablinks[i].className = tablinks[i].className.replace(" active", "");
  1121. }
  1122.  
  1123.  
  1124. document.getElementById(tabstabs).style.display = "block";
  1125. evt.currentTarget.className += " active";
  1126. }
  1127.  
  1128. function openCity(evt, cityName) {
  1129.  
  1130. var i, tabcontent, tablinks;
  1131.  
  1132.  
  1133. tabcontent = document.getElementsByClassName("tabcontent");
  1134. for (i = 0; i < tabcontent.length; i++) {
  1135. tabcontent[i].style.display = "none";
  1136. }
  1137.  
  1138.  
  1139. tablinks = document.getElementsByClassName("tablinks");
  1140. for (i = 0; i < tablinks.length; i++) {
  1141. tablinks[i].className = tablinks[i].className.replace(" active", "");
  1142. }
  1143.  
  1144.  
  1145. document.getElementById(cityName).style.display = "block";
  1146. evt.currentTarget.className += " active";
  1147. }
  1148. </script>
  1149.  
  1150. <a href="https://springdoy.tumblr.com/"><div class="cred"><div class="th th-heart-1" style="margin-top: 10px;" title="theme by springdoy"></div></div></a>
  1151.  
  1152. <div class="galaxy">
  1153.  
  1154.  
  1155. <div class="bgim">
  1156.  
  1157. <div class="wave"></div>
  1158.  
  1159. <div class="yoongi">
  1160. <div class="hobi"></div>
  1161. <div class="jin"></div>
  1162. <div class="jungkook"></div>
  1163. <div class="namjoon"></div>
  1164. <div class="taehyung"></div>
  1165. <div class="jimin"></div>
  1166. <div class="doyoung"></div>
  1167. <div class="ten"></div>
  1168. <div class="kun"></div>
  1169. <div class=""></div>
  1170. <div class="chenle"></div>
  1171. <div class="hendery"></div>
  1172. <div class="lucas">{text:paper text}</div>
  1173. </div>
  1174.  
  1175. <div class="doyeon">
  1176. <div class="miyeon"></div>
  1177. <div class="yuqi"></div>
  1178. <div class="soojin"></div>
  1179. <div class="shuhua"></div>
  1180. <div class="yeeun">
  1181. <span class="th th-pancakes" style="font-size: 14px; color: {color:accent};margin-top: 3px;"></span>
  1182. <div style="width: 80px; text-align: center; font-family: 'Mali', cursive; font-size: 12px; font-weight: 700; position: absolute; transform: rotate(-8deg); color: {color:accent2};">xoxo</div>
  1183. </div>
  1184. </div>
  1185.  
  1186. <div class="yujin"></div>
  1187.  
  1188. <div class="eunbin">
  1189.  
  1190. <div class="elkie"><div class="sorn"></div></div>
  1191.  
  1192. <div class="seungyeon">{text:bio}</div>
  1193. </div>
  1194.  
  1195. <div class="seunghee">{text:title}</div>
  1196.  
  1197. <div class="jinsoul">
  1198. <a href="/"><span class="th th-candy-o"></span></a>
  1199. </div>
  1200.  
  1201. <div class="choerry">
  1202. <a href="/archive"><span class="th th-heart-1-o"></span></a>
  1203. </div>
  1204.  
  1205. <div class="heejin">
  1206. <a href="/ask"><span class="th th-bubble-heart-o"></span></a>
  1207. </div>
  1208.  
  1209.  
  1210. <div class="gowon">
  1211. <div class="tablinks" onclick="openCity(event, 'nav')"><span class="th th-lollipop-o"></span></div>
  1212. </div>
  1213.  
  1214.  
  1215. </div>
  1216.  
  1217. <div class="pagination">{block:Pagination}
  1218. {block:PreviousPage}<a href="{PreviousPage}"><div class="fas fa-chevron-left"></div></a>{/block:PreviousPage} {block:NextPage}<a href="{NextPage}"><div class="fas fa-chevron-right"></div></a>
  1219. {/block:NextPage}
  1220. {/block:Pagination}</div>
  1221.  
  1222. <!--------- the navigation tab starts here; pls pay attention to the notes to know how to add ur muse's info ! ----->
  1223.  
  1224. <div id="nav" class="tabcontent"><span onclick="this.parentElement.style.display='none'"><span class="but">x</span></span><br>
  1225.  
  1226. <div class="tzuyu">
  1227. <div class="olivia">
  1228. <div class="ryujin"><div class="lia">to do list:</div></div>
  1229. <br><br>
  1230.  
  1231. <div class="vivi">01.</div> <a href="{text:url one}">{text:link one}</a>
  1232. <br>
  1233. <div class="vivi">02.</div> <a href="{text:url two}">{text:link two}</a>
  1234. <br>
  1235. <div class="vivi">03.</div> <a href="{text:url three}">{text:link three}</a>
  1236. <br>
  1237. <div class="vivi">04.</div> <a href="{text:url four}">{text:link four}</a>
  1238. <br>
  1239. <div class="vivi">05.</div> <a href="{text:url five}">{text:link five}</a>
  1240. <br>
  1241. <div class="vivi">06.</div> <a href="{text:url six}">{text:link six}</a>
  1242. <br>
  1243. <div class="vivi">07.</div> <a href="{text:url seven}">{text:link seven}</a>
  1244. <br>
  1245. <div class="vivi">08.</div> <a href="{text:url eight}">{text:link eight}</a>
  1246. <br>
  1247. </div></div>
  1248.  
  1249. <div class="sana">
  1250. <div class="dahyun"></div>
  1251. </div>
  1252.  
  1253. <div class="nayeon">
  1254.  
  1255. <div class="momo"></div>
  1256. <div class="mina"></div>
  1257. </div>
  1258.  
  1259. <div class="chaeyoung"></div>
  1260.  
  1261.  
  1262. <div class="yeji">
  1263. <div class="ryujin"><div class="lia">ooh:</div></div> oooh
  1264. <br>
  1265. <div class="ryujin"><div class="lia">hey:</div></div> what's up
  1266. <br>
  1267. <div class="ryujin"><div class="lia">hello:</div></div> hi
  1268. <br>
  1269. <div class="ryujin"><div class="lia">i:</div></div> yup
  1270. <br>
  1271. <div class="ryujin"><div class="lia">love:</div></div> nice
  1272. <br>
  1273. <div class="ryujin"><div class="lia">u:</div></div> hmm
  1274. <br>
  1275. <div class="ryujin"><div class="lia">hihi:</div></div> hehe
  1276. <br>
  1277. </div>
  1278.  
  1279. <div class="yuna">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  1280. </div>
  1281.  
  1282.  
  1283.  
  1284.  
  1285. <div class="container">
  1286. {block:Posts}
  1287. <div class="permin"><div class="permalink"><a href="{Permalink}"><div style="font-weight: 800; color:{color:accent2}; display: inline-block;">{Month}</div> {DayOfMonthWithZero}</a></div> <div style="font-size: 7px; display: inline-block; color: {color:accent}; margin: 0px 10px;"><span class="th th-star"></span></div> <div class="notes"><a href="{Permalink}"><div style="font-weight: 800; color:{color:accent2}; display: inline-block;">{block:NoteCount}{NoteCount}{/block:NoteCount}</div> NOTES</a> <a href="{ReblogURL}"><span class="fas fa-retweet" style="margin-left: 5px; font-size: 7px;"></span></a></div> <div style="width: 50px; font-size: 7px; float: right; margin-top: 4px; text-align: right; margin-right: -15px;"><i class="fas fa-circle" style="margin-right: 5px; color: {color:accent};"></i> <i class="fas fa-circle" style="margin-right: 5px; color: {color:accent2};"></i> <i class="fas fa-circle" style="color: {color:links};"></i></div>
  1288. </div>
  1289. <div class="posts">
  1290. {block:Text}{block:Title}<div class="ptit">{Title}</div>{/block:Title}{Body}
  1291. {/block:Text}
  1292.  
  1293. {block:More}
  1294. <div class="more-btn-wrap">
  1295. <a href="{Permalink}" class="more-btn">
  1296. read more
  1297. </a>
  1298. </div>
  1299. {/block:More}
  1300.  
  1301. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  1302.  
  1303. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}
  1304.  
  1305. {block:Photoset}{Photoset}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  1306.  
  1307. {block:Quote}<div class="quot"><i class="fas fa-quote-left" style="color: {color:accent}; font-size: 15px;"></i> {Quote}</div> {/block:Quote}
  1308.  
  1309. {block:Link}<a href="{URL}" class="link" {Target}>{Name}</a>{block:Description}{Description}{/block:Description}{/block:Link}
  1310.  
  1311.  
  1312. {block:Chat}
  1313. <div class="chat">
  1314. <ul>
  1315. {block:Lines}<li class="{Alt}">{block:Label} <span class="label">{Label}</span> {/block:Label}{Line}</li>{/block:Lines}
  1316. </ul>
  1317. </div>
  1318. {/block:Chat}
  1319.  
  1320. {block:Video}<div class="video">{Video-500}</div>{block:Caption}{Caption}{/block:Caption}{/block:Video}
  1321.  
  1322. {block:Audio}
  1323. {block:AudioPlayer}<div class="playbutton-img"><div class="playbutton">{AudioPlayer}</div></div>
  1324. <div class="trackinfo">
  1325. <div class="trackname">
  1326. {block:TrackName}{TrackName}{/block:TrackName}
  1327. </div>
  1328. <div class="artist">
  1329. {block:Artist}{Artist}{/block:Artist}
  1330. </div>
  1331. </div>
  1332. {block:Caption}{Caption}{/block:Caption}
  1333. {/block:AudioPlayer}
  1334. {/block:Audio}
  1335.  
  1336.  
  1337. {block:Answer}
  1338. <div style="width:auto;">
  1339. <div class="question">{Question}</div></div>
  1340. <div class="asker-box"><div class="asker">{Asker} asked:</div></div>
  1341. {Answer}
  1342. {/block:Answer}
  1343. {block:PostNotes}<div class="notes2">{PostNotes-16}</div>{/block:PostNotes}
  1344. </div>
  1345. {block:HasTags}<div class="tags">{block:Tags}<i class="fas fa-tag" style="margin-right: 5px; margin-left: 9px; font-size: 6px; color: {color:accent};"></i><a href="{TagUrl}">{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  1346.  
  1347.  
  1348. {/block:Posts}
  1349.  
  1350.  
  1351. </div>
  1352.  
  1353. </div>
  1354. </body>
  1355. </html>
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!