Advertisement
dcylily

* 𝐭𝐡𝐞𝐦𝐞 𝐭𝐰𝐨: floral & fading ♡ dcylily

Apr 26th, 2020 (edited)
2,465
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.66 KB | None | 0 0
  1. <html>
  2.  
  3. <!-- theme by dcylily
  4. please do not use as a base code, lift bits of code,
  5. or claim as your own. -->
  6.  
  7.  
  8.  
  9. <meta name="color:background" content="">
  10. <meta name="color:container" content="">
  11. <meta name="color:container 2" content="">
  12. <meta name="color:posts bg" content="">
  13. <meta name="color:sidebar" content="">
  14.  
  15. <meta name="color:text" content="">
  16. <meta name="color:accent 1" content="">
  17. <meta name="color:accent 2" content="">
  18.  
  19. <meta name="text:desc" content="">
  20. <meta name="text:sb title" content="">
  21. <meta name="text:side text" content="">
  22. <meta name="text:dashed or solid" content="">
  23.  
  24. <meta name="text:extra link" content="">
  25.  
  26. <meta name="text:tab link 1" content="">
  27. <meta name="text:tab link 2" content="">
  28. <meta name="text:tab link 3" content="">
  29.  
  30. <meta name="text:tab link 4" content="">
  31. <meta name="text:tab link 5" content="">
  32. <meta name="text:tab link 6" content="">
  33.  
  34. <meta name="text:tab link 7" content="">
  35. <meta name="text:tab link 8" content="">
  36. <meta name="text:tab link 9" content="">
  37.  
  38. <meta name="image:sidebar" content="">
  39. <meta name="image:bigger tab" content="">
  40.  
  41.  
  42. <!-- HOSTED FONTS (view hobioks.tumblr.com/fonts 4 more) -->
  43. <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,700&display=swap" rel="stylesheet">
  44. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  45. <link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">
  46. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  47.  
  48. <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,700&display=swap" rel="stylesheet">
  49.  
  50. <head>
  51. <title>{Title}</title>
  52. <link rel="shortcut icon" href="{Favicon}">
  53. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  54. {block:Description}
  55. <meta name="description" content="{MetaDescription}" />
  56. {/block:Description}
  57.  
  58. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  59. <script>
  60. $(document).ready(function(){
  61. $('.click,.fade').click(function() {
  62. $('#pop').fadeToggle();
  63. });
  64. });
  65. </script>
  66.  
  67. <script>
  68. function openPop(evt, PopName) {
  69. var i, tabcontent, tablinks;
  70. tabcontent = document.getElementsByClassName("tabcontent");
  71. for (i = 0; i < tabcontent.length; i++) {
  72. tabcontent[i].style.display = "none";
  73. }
  74. tablinks = document.getElementsByClassName("tablinks");
  75. for (i = 0; i < tablinks.length; i++) {
  76. tablinks[i].className = tablinks[i].className.replace(" active", "");
  77. }
  78. document.getElementById(PopName).style.display = "block";
  79. evt.currentTarget.className += " active";
  80. }
  81. </script>
  82.  
  83. </head>
  84.  
  85. <style type="text/css">
  86.  
  87. /* Hide scrollbar for Chrome, Safari and Opera */
  88. #postcontainer::-webkit-scrollbar {
  89. display: none;
  90. }
  91. .description::-webkit-scrollbar {
  92. display: none;
  93. }
  94.  
  95. /* more hosted fonts */
  96.  
  97. @font-face { font-family:"rotters"; src:url('https://dl.dropbox.com/s/n5eagm9wp1ylbaf/Rotters.otf'); }
  98. @font-face{ font-family:"moon"; src: url('https://dl.dropboxusercontent.com/s/ubael2mwud27z8o/moon_get-Heavy.ttf’)'); }
  99.  
  100. body {
  101. color:{color:text};
  102. background-color:{color:background};
  103.  
  104. font-family:work sans;
  105. font-size: 11px;
  106. line-height:140%;
  107. }
  108.  
  109. small {
  110. font-family:work sans;
  111. font-size: 11px;
  112. line-height:160%;
  113. }
  114.  
  115. sup, sub {
  116. font-family:work sans;
  117. font-size: 11px;
  118. line-height:160%;
  119. }
  120.  
  121. a, href {
  122. text-decoration:none;
  123. color:{color:accent 2};
  124. -webkit-transition: all 0.7s ease;
  125. -moz-transition: all 0.7s ease;
  126. -o-transition: all 0.7s ease;
  127. }
  128.  
  129. more {
  130. text-align:center;
  131. }
  132.  
  133. a:hover {
  134. color:{color:container 2};
  135. }
  136.  
  137. b, strong {
  138. color:{color:accent 1};
  139. }
  140.  
  141. i, em {
  142. color:{color:accent 1};
  143.  
  144. }
  145.  
  146. blockquote {
  147. border-left:1px solid {color:text};
  148. margin-left:0px; padding-left:10px;
  149. width:95%;
  150. text-align:justify;
  151. }
  152.  
  153. blockquote img {
  154. max-width:100%;
  155. height:auto;
  156. }
  157.  
  158. img {
  159. max-width: 100%;
  160. }
  161.  
  162. xo {
  163. font-size:22px; letter-spacing:0.8px;
  164. line-height:30px;
  165. text-align:right;
  166. padding:0px;
  167. text-transform:uppercase;
  168.  
  169. font-family:moon;
  170. }
  171. xo i, b {
  172. font-style:normal;
  173. }
  174.  
  175. xx {
  176. font-size:22px; letter-spacing:0.8px;
  177. line-height:50px;
  178. text-align:right;
  179. padding:0px;
  180.  
  181. font-family:moon;
  182. }
  183.  
  184. xx i, b {
  185. font-style:normal;
  186. }
  187.  
  188. h1 {
  189. font-family:rotters;
  190. font-size:40px;
  191. text-align:center;
  192. }
  193.  
  194. h2 {
  195. font-family:moon;
  196. text-align:right;
  197. color:{color:accent 1};
  198. }
  199.  
  200. h3 {
  201. font-family:moon;
  202. text-align:left;
  203. color:{color:accent 2};
  204. }
  205.  
  206. #container {
  207. background-color:{color:container};
  208.  
  209. border-radius:8px;
  210. position:absolute; margin:auto;
  211. top:0px; bottom:0px; left:0px; right:0px;
  212. width:850px; height:600px;
  213. overflow:none;
  214. z-index:1;
  215. }
  216.  
  217. #pagination {
  218. position:static;
  219. margin-top:30px;
  220. text-align:center;
  221. }
  222.  
  223. .pagibutton{
  224. position:relative;
  225. display:inline-block;
  226. background:transparent;
  227. padding:10px; margin-top:-10px;
  228. border-radius:15px;
  229.  
  230. font-size:20px;
  231. font-family:moon;
  232. -webkit-text-stroke: 1px {color:text};
  233. color:transparent;
  234. }
  235.  
  236. /* 'SHAPE 1' IS THE LARGER SIDEBAR CONTAINER */
  237.  
  238. #shape1 {
  239. background-color:{color:container 2};
  240. width:310px; height:600px;
  241.  
  242. border-radius:8px 0px 0px 8px;
  243. position:absolute; margin:auto;
  244. top:0px; bottom:0px; left:0px; right:560px;
  245. z-index:1;
  246. }
  247.  
  248. .sbimagecon {
  249. background-color:{color:container 2};
  250. width:210px; height:280px;
  251.  
  252. position:absolute; margin:auto;
  253. top:0px; bottom:210px; left:50px; right:560px;
  254. z-index:3;
  255.  
  256. border-radius:5px;
  257. border:1px {text:dashed or solid} {color:text};
  258. }
  259.  
  260. .tape1 {
  261. width:12px; height:60px; background-color:{color:accent 2};
  262. position:absolute; margin:auto; top:30px; left:-6px;
  263. }
  264.  
  265. .tape2 {
  266. width:12px; height:60px; background-color:{color:accent 2};
  267. position:absolute; margin:auto; top:180px; left:-6px;
  268. }
  269.  
  270. .tape3 {
  271. width:12px; height:80px; background-color:{color:accent 2};
  272. position:absolute; margin:auto; top:80px; left:204px;
  273. }
  274.  
  275. .sbimage {
  276. background-color:transparent;
  277. width:180px; height:250px;
  278. margin-top:15px; margin-left:15px;
  279. }
  280.  
  281. .sbimage img {
  282. width:180px; height:250px;
  283. transition: 1s ease;
  284. border-radius:5px;
  285. }
  286.  
  287. .sbimage img:hover {
  288. -webkit-transform: scale(0.9);
  289. -ms-transform: scale(0.9);
  290. transform: scale(0.9);
  291. transition: 1s ease;
  292. }
  293.  
  294. .title1 {
  295. font-family:'moon'; font-size:19px;
  296. letter-spacing:0.8px;
  297. text-align:right; line-height:120%;
  298. color:{color:text};
  299. text-transform:uppercase; font-weight:bold;
  300.  
  301. -ms-transform: rotate(270deg); /* IE 9 */
  302. transform: rotate(270deg);
  303.  
  304. z-index:3; width:205px; height:66px;
  305. position:absolute; margin:auto;
  306. top:420px; left:-10px;
  307. overflow:hidden;
  308.  
  309. transition: 0.5s ease;
  310. }
  311.  
  312. .title1:hover {
  313. -ms-transform: rotate(275deg); /* IE 9 */
  314. transform: rotate(275deg); /* Standard syntax */
  315. }
  316.  
  317. .title1 b {
  318. -webkit-text-stroke: 1px {color:text};
  319. color:transparent;
  320. }
  321.  
  322. /* 'SHAPE 2' IS THE BODY OF THE SIDEBAR INFO */
  323.  
  324. #shape2 {
  325. background-color:{color:accent 1};
  326. width:210px; height:280px;
  327.  
  328. border-radius:5px;
  329. position:absolute; margin:auto;
  330. top:225px; bottom:0px; left:140px; right:560px;
  331. z-index:3;
  332. }
  333.  
  334. .title2 {
  335. font-family:moon; font-size:18px;
  336. text-align:justify; line-height:100%;
  337. color:{color:container};
  338. text-transform:uppercase; font-weight:bold;
  339.  
  340. margin-top:35px; margin-bottom:5px;
  341. margin-left:30px;
  342. height:35px; width:150px; overflow:hidden;
  343. padding-top:2px;
  344. }
  345.  
  346. .title2 b {
  347. -webkit-text-stroke: 1px {color:text};
  348. color:transparent;
  349. }
  350.  
  351. .title2 div {
  352. font-family:'moon'; font-size:14px;
  353. letter-spacing:0.8px;
  354. text-align:justify; line-height:120%;
  355. color:{color:container};
  356. text-transform:uppercase; font-weight:bold;
  357. width:150px;
  358.  
  359. transition-timing-function: ease-in-out;
  360. transition-duration: 0.5s;
  361. }
  362.  
  363. .title2 div:after {
  364. content: "<br>______________";
  365. line-height: 0;
  366. visibility: hidden;
  367. }
  368.  
  369. .title2 div:hover {
  370. -ms-transform: scaleY(0.9) scaleX(0.9); /* IE 9 */
  371. transform: scaleY(0.9) scaleX(0.9); /* Standard syntax */
  372. }
  373.  
  374. .description {
  375. margin-top:8px; margin-left:30px;
  376. width:150px; height:120px; overflow:auto;
  377.  
  378. font-size:10.5px; text-align:justify; text-align-last:center;
  379. color:{color:container};
  380. }
  381.  
  382. .description b, i {
  383. color:{color:text};
  384. }
  385.  
  386. /* 'NAVI' IS THE CONTAINER FOR THE NAVIGATION */
  387.  
  388. #navi {
  389. width:175px;
  390. text-align:center;
  391. margin-left:21px; margin-top:15px;
  392. }
  393.  
  394. /* 'LINKS' IS THE BLOCK OF THE ICONS */
  395.  
  396. .links li {
  397. list-style-type:none; display:inline-block;
  398.  
  399. width:30px;
  400. margin-bottom:10px; margin-right:8px;
  401. padding-top:9px; padding-bottom:6px;
  402. padding-left:0.5px;
  403.  
  404. border-radius:4px;
  405. text-align:center;
  406. background-color:{color:container 2};
  407.  
  408. transition-timing-function: ease-in-out;
  409. transition-duration: 0.5s;
  410. }
  411.  
  412. .links a {
  413. font-size:12px; color:{color:container};
  414. }
  415.  
  416. .links li:hover {
  417. -ms-transform: scaleY(0.9) scaleX(0.9); /* IE 9 */
  418. transform: scaleY(0.9) scaleX(0.9); /* Standard syntax */
  419. }
  420.  
  421.  
  422. #postcontainer {
  423. background-color:transparent;
  424.  
  425. position:absolute; margin:auto;
  426. top:50px; left:360px;
  427.  
  428. width:400px; height:490px;
  429. padding:0px 20px 10px 40px;
  430. overflow-y:scroll; overflow-x:none;
  431. z-index:1;
  432. }
  433.  
  434. .posts {
  435. width:360px;
  436. background-color:{color:posts bg};
  437. padding:20px;
  438. margin-bottom:30px;
  439. float:right;
  440. border-radius:5px;
  441. }
  442.  
  443. .posts img {
  444. padding-bottom:5px; max-width:360px;
  445. }
  446.  
  447. iframe { max-width:360px; }
  448.  
  449. .permalinks {
  450. background-color:{color:background};
  451. padding:5px 6px 7px 6px;
  452. height:12px;
  453. margin-top:5px;
  454. border-radius:3px;
  455. }
  456.  
  457. .permalinks a {
  458. text-decoration:none;
  459. font-size: 9px;
  460. color:{color:accent 2};
  461. }
  462.  
  463. .permalinks a:hover {
  464. color:{color:text};
  465. font-weight:bold;
  466. }
  467.  
  468. ol.notes {
  469. padding: 0px;
  470. margin: 20px 0px;
  471. list-style-type: none;
  472. border-bottom: solid 1px #ccc;
  473. font-size:10px;
  474. }
  475.  
  476. ol.notes li.note img.avatar {
  477. vertical-align: -4px;
  478. margin-right: 10px;
  479. width: 0px;
  480. height: 0px;
  481. }
  482.  
  483. .date {
  484. float:left;
  485. text-transform:uppercase;
  486. color:{color:accent 1};
  487. margin-top:-1px;
  488. }
  489.  
  490. .date a {
  491. color:{color:accent 1};
  492. }
  493.  
  494. .th-link {
  495. font-size:8px;
  496. }
  497.  
  498. .reblogs {
  499. float:right;
  500. }
  501.  
  502.  
  503. .tags {
  504. text-align:left;
  505. padding-top:5px;
  506. text-transform:normal;
  507. font-size:9px;
  508. }
  509.  
  510. .tags a {
  511. color:{color:accent 1};
  512. }
  513.  
  514. .tags a:hover {
  515. color:{color:accent 2};
  516. }
  517.  
  518. #pagination {
  519. position:absolute;
  520. margin-top:10px;
  521. text-align:center;
  522. display:inline-block;
  523. }
  524.  
  525. .next { margin-left:180px; position:fixed; }
  526.  
  527. .prev { margin-left:8px; position:fixed; display:inline-block; }
  528.  
  529. #pagination a {
  530. color:{color:sidebar};
  531. font-size:20px;
  532. -webkit-transition: all 0.7s ease;
  533. -moz-transition: all 0.7s ease;
  534. -o-transition: all 0.7s ease;
  535. }
  536.  
  537. #pagination a:hover {
  538. color:{color:posts bg};
  539. }
  540.  
  541. .asker {
  542. font-size:10px;
  543. font-style: italic;
  544. text-align:right;
  545. text-transform:lowercase;
  546. color:{color:accent 1};
  547. }
  548.  
  549. .asker a { color:{color:accent 1}; }
  550.  
  551. .question {
  552. font-style:normal;
  553. padding-left:50px;
  554. padding-right:50px;
  555. background-color:{color:container};
  556. height:auto;
  557. padding:10px;
  558. }
  559.  
  560. .quote {
  561. font-size:14px;
  562. letter-spacing:0.5px;
  563. border-bottom:1px solid #eee;
  564. margin-bottom:5px;
  565. padding-bottom:3px;
  566.  
  567. text-align:right;
  568. line-height:15px;
  569. }
  570.  
  571. .quotesource {
  572. font-size:10px;
  573. letter-spacing:1px;
  574. text-align:center;
  575. margin-bottom:5px;
  576. }
  577.  
  578. /* IMESSAGE CHAT POST */
  579. .answer span,.convo li{margin:0 0 5px;border-radius:1em;padding:.5em 10px;max-width:75%;clear:both;position:relative}.answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{float:left;background:#e5e5ea;color:#000;left:3px}.me::after,.user_1::after,.user_3::after,.user_5::after,.user_7::after,.user_9::after,.user_11::after{content:"";position:absolute;left:-.5em;bottom:0;width:.5em;height:1em;border-right:.5em solid #e5e5ea;border-bottom-right-radius:1em .5em}.answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{right:3px;float:right;background-color:{color:container 2};color:#000}.them::after,.user_2::after,.user_4::after,.user_6::after,.user_8::after,.user_10::after,.user_12::after{content:"";position:absolute;right:-.5em;bottom:0;width:.5em;height:1em;border-left:.5em solid {color:container 2};border-bottom-left-radius:1em .5em}.me p,.answer,.asked span{padding:0;margin:0}.answer{overflow:hidden}
  580. .asked p {
  581. text-align: left;
  582. margin: 0 0px 10px 0px;
  583. padding: 0;
  584. color: #666666;
  585. font-family: 'Inconsolata', Inconsolata;
  586. font-size: 12px;
  587. line-height: 0px;
  588. }
  589. .footerright .viasrc {
  590. float: left;
  591. }
  592. .asked a {
  593. margin:0;padding:0;
  594. }
  595. .user_4{background-color:#55caff;color:#fff}.user_4::after{border-color:#55caff}.user_6{background-color:#60f246;color:#fff}.user_6::after{border-color:#60f246}.user_5{background-color:#9ff3fc;color:#000}.user_5::after{border-color:#9ff3fc}.user_3{background-color:#25c413;color:#fff}.user_3::after{border-color:#25c413}.user_7{background-color:#9b9b9b;color:#fff}.user_7::after{border-color:#9b9b9b}.user_8{background-color:#0d9321;color:#fff}.user_8::after{border-color:#0d9321}.user_9{background-color:#606060;color:#fff}.user_9::after{border-color:#606060}
  596. .convo {
  597. overflow: hidden;
  598. list-style-type: none;
  599. padding: 0;
  600. margin: 0;
  601. }
  602.  
  603. /* cred */
  604. .cred {
  605. position:absolute;
  606. bottom:10px;
  607. right:10px;
  608. font-size:20px;
  609. color:{color:accent 1};
  610. }
  611.  
  612. .cred a {
  613. color:{color:accent 1};
  614. }
  615.  
  616. /* read more - thank u @ themesbytommy */
  617.  
  618. .more-btn-wrap{
  619. position: relative;
  620. padding: 20px 0;
  621. width: 100%;
  622. }
  623.  
  624. .more-btn-wrap a {
  625. color:{color:sidebar};
  626. }
  627.  
  628. .more-btn-wrap a:link{
  629. -webkit-transition: all 0.5s ease;
  630. -moz-transition: all 0.5s ease;
  631. -o-transition: all 0.5s ease;
  632. transition: all 0.5s ease;
  633. position: relative;
  634. left: calc(50% - 15%);
  635. padding: 7px 14px;
  636. border: 1px solid {color:accent 1};
  637. border-radius:5px;
  638. background: {color:accent 1};
  639. color:{color:sidebar};
  640. }
  641. .more-btn-wrap a:hover{
  642. background:{color:container 2};
  643. border: 1px solid {color:container 2};
  644. color: white;
  645. border-radius:20px;
  646. }
  647.  
  648.  
  649.  
  650. .tab {
  651. position:absolute; margin:auto;
  652. top:50px; left:360px;
  653.  
  654. width:400px; height:490px;
  655. padding:0px 20px 10px 40px;
  656. overflow-y:scroll; overflow-x:none;
  657. z-index:1;
  658. background-color:black;
  659. }
  660.  
  661. /* Change background color of buttons on hover */
  662. .tab button:hover {
  663. background-color: #ddd;
  664. }
  665.  
  666. /* Create an active/current tablink class */
  667. .tab button.active {
  668. background-color: #ccc;
  669. }
  670.  
  671. /* Style the tab content */
  672. .tabcontent {
  673. position:absolute; margin:auto;
  674. top:50px; left:370px;
  675.  
  676. width:380px; height:490px;
  677. padding:0px 20px 10px 40px;
  678. overflow-y:none; overflow-x:none;
  679. z-index:9;
  680. background-color:{color:container};
  681. display: none;
  682. }
  683.  
  684. #tabimagecon {
  685. background-color:transparent;
  686. width:210px; height:280px;
  687.  
  688. position:absolute; margin:auto;
  689. top:10px; bottom:0px; left:210px; right:0px;
  690. z-index:3;
  691.  
  692. border-radius:5px;
  693. border:1px {text:dashed or solid} {color:text};
  694. }
  695.  
  696. .tape4 {
  697. width:12px; height:80px; background-color:{color:accent 2};
  698. position:absolute; margin:auto; top:30px; left:-6px;
  699. }
  700.  
  701. .tape5 {
  702. width:12px; height:60px; background-color:{color:accent 2};
  703. position:absolute; margin:auto; top:180px; right:-6px;
  704. }
  705.  
  706. #tabimage {
  707. background-color:transparent;
  708. width:180px; height:250px;
  709. margin-top:15px; margin-left:15px;
  710. }
  711.  
  712. #tabimage img {
  713. width:180px; height:250px;
  714. transition: 1s ease;
  715. border-radius:5px;
  716. }
  717.  
  718. #tabimage img:hover {
  719. -webkit-transform: scale(0.9);
  720. -ms-transform: scale(0.9);
  721. transform: scale(0.9);
  722. transition: 1s ease;
  723. }
  724.  
  725. #tabtitle {
  726. font-family:'moon'; font-size:28px;
  727. letter-spacing:1px;
  728. text-align:right; line-height:115%;
  729. color:{color:text};
  730. text-transform:uppercase; font-weight:bold;
  731.  
  732. position:absolute;
  733. bottom:80px; left:9px;
  734.  
  735. transition: 0.5s ease;
  736. }
  737.  
  738. #tabtitle:hover {
  739. -ms-transform: rotate(10deg); /* IE 9 */
  740. transform: rotate(10deg); /* Standard syntax */
  741. }
  742.  
  743. #tabtitle b {
  744. -webkit-text-stroke: 1px {color:text};
  745. color:transparent;
  746. }
  747.  
  748. .close { float:right; position:absolute; top:0px; right:0px; font-size:11px; z-index:99; }
  749. .close:hover { cursor:pointer; }
  750.  
  751.  
  752. #tabnavi {
  753. width:200px; z-index:999990;
  754. text-align:center;
  755. position:absolute;
  756. top:80px; left:3px;
  757. }
  758.  
  759. .tablinks li {
  760. list-style-type:none; display:inline-block;
  761.  
  762. width:53px; z-index:999990;
  763. margin-bottom:10px; margin-right:8px;
  764. padding-top:17px; padding-bottom:16px;
  765. padding-left:0.5px;
  766.  
  767. border-radius:4px;
  768. border:1px solid {color:container};
  769. text-align:center;
  770. background-color:{color:posts bg};
  771.  
  772. transition-timing-function: ease-in-out;
  773. transition-duration: 0.5s;
  774. }
  775.  
  776. .tablinks a {
  777. font-size:20px; color:{color:accent 1};
  778. }
  779.  
  780. .tablinks li:hover {
  781. -ms-transform: scaleY(0.9) scaleX(0.9); /* IE 9 */
  782. transform: scaleY(0.9) scaleX(0.9); /* Standard syntax */
  783. }
  784.  
  785.  
  786.  
  787. </style>
  788.  
  789. <body>
  790. <div id="container">
  791. <div id="shape1">
  792.  
  793. <div class="sbimagecon">
  794. <div class="tape1"></div>
  795. <div class="tape2"></div>
  796. <div class="tape3"></div>
  797. <div class="sbimage"><img src="{image:sidebar}"/></div>
  798. </div>
  799.  
  800.  
  801. <div id="shape2">
  802.  
  803. <div class="title2"><div>{text:sb title}</div></div>
  804. <div class="description">{text:desc}</div>
  805.  
  806. <div id="navi">
  807. <div class="links">
  808. <li><a href="/"><span class="th th-home"></span></a></li>
  809. <li><a href="/ask"><span class="th th-microphone"></span></a></li>
  810. <li><a href="#" onclick="openPop(event, 'tabby')"><span class="th th-alarm-clock-1-o"></span></a></li>
  811. <li><a href="/"><span class="th th-bell"></span></a></li>
  812. </div>
  813. </div>
  814.  
  815. </div>
  816. <div class="title1">{text:side text}</div>
  817.  
  818. </div>
  819.  
  820. <div id="tabby" class="tabcontent">
  821.  
  822. <span class="close" onclick="this.parentElement.style.display='none'">x</span>
  823.  
  824. <div id="tabnavi">
  825. <div class="tablinks">
  826. <li><a href="{text:tab link 1}"><span class="th th-envelope"></span></a></li>
  827. <li><a href="{text:tab link 2}"><span class="th th-bell"></span></a></li>
  828. <li><a href="{text:tab link 3}"><span class="th th-folder-3"></span></a></li>
  829.  
  830. <li><a href="{text:tab link 4}"><span class="th th-old-telephone"></span></a></li>
  831. <li><a href="{text:tab link 5}"><span class="th th-quote-up"></span></a></li>
  832. <li><a href="{text:tab link 6}"><span class="th th-settings"></span></a></li>
  833.  
  834. <li><a href="{text:tab link 7}"><span class="th th-push-pin"></span></a></li>
  835. <li><a href="{text:tab link 8}"><span class="th th-cloud-3"></span></a></li>
  836. <li><a href="{text:tab link 9}"><span class="th th-box-2"></span></a></li>
  837. </div>
  838. </div>
  839.  
  840.  
  841. <svg width="600" height="600" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg" style="position:absolute; left:-100px; top:-60px;">
  842. <g transform="translate(300,300)"><path d="M74.6,-86.8C96.1,-32.6,112.4,-1.6,115.3,42.6C118.2,86.9,107.7,144.3,77.6,157.5C47.4,170.6,-2.3,139.3,-53,113.6C-103.6,87.8,-155.1,67.5,-177.2,24.9C-199.3,-17.6,-191.9,-82.4,-157.5,-139.6C-123,-196.8,-61.5,-246.4,-17.5,-232.5C26.6,-218.5,53.2,-141.1,74.6,-86.8Z" fill="{color:accent 1}" /></g>
  843. </svg>
  844.  
  845. <svg width="350" height="350" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg" style="position:absolute; right:0px; top:200px;">
  846. <g transform="translate(300,300)">
  847. <path d="M135.8,-88.5C184.1,-47.8,236.8,9.1,225.8,49.3C214.9,89.4,140.2,112.7,72.8,141.4C5.5,170,-54.5,203.9,-107.5,190.9C-160.5,177.8,-206.5,117.7,-204.9,64.1C-203.3,10.6,-154,-36.5,-111.9,-75.8C-69.8,-115,-34.9,-146.5,4.4,-150C43.8,-153.6,87.6,-129.2,135.8,-88.5Z" fill="{color:accent 2}" />
  848. </g>
  849. </svg>
  850.  
  851. <div id="tabimagecon">
  852. <div class="tape4"></div>
  853. <div class="tape5"></div>
  854. <div id="tabimage"><img src="{image:bigger tab}"/></div>
  855. </div>
  856.  
  857. <div id="tabtitle">navigate<br><b>NAVIGATE</b><br>navigate<br><b>NAVIGATE</b></div>
  858.  
  859. </div>
  860.  
  861. <div id="postcontainer">
  862.  
  863. {block:Posts}
  864.  
  865. <div class="posts">
  866.  
  867. {block:Text}<xo>{block:Title}<i>●</i>●<b>●</b> {Title}{/block:Title}</xo>{Body}{/block:Text}
  868.  
  869. {block:More}
  870. <div class="more-btn-wrap">
  871. <a href="{Permalink}" class="more-btn">
  872. continue reading
  873. </a>
  874. </div>
  875. {/block:More}
  876.  
  877. {block:Photo}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  878.  
  879. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}
  880.  
  881. {block:Photoset}{Photoset-400}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  882.  
  883. {block:Quote}<div class="quote">{Quote}</div>{block:Source}<div class="quotesource">{Source}</div>{/block:Source}{/block:Quote}
  884.  
  885. {block:Link}<a href="{URL}" class="link" {Target}>{Name}</a>{block:Description}{Description}{/block:Description}{/block:Link}
  886.  
  887. {block:Chat}
  888. {block:Title}
  889. <xx><i>●</i>●<b>●</b> {Title}</xx>{/block:Title}<br>
  890. <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label"><strong>{Label}</strong></span>{/block:Label}
  891. {Line}</li>{/block:Lines}</ul>
  892. {/block:Chat}
  893.  
  894. {block:Video}{Video-400}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  895.  
  896. {block:Audio}
  897. {block:AudioPlayer}
  898. <center>{AudioPlayerWhite}</center>
  899. {/block:AudioPlayer}
  900. {block:Caption}{Caption}{/block:Caption}
  901. {/block:Audio}
  902.  
  903. {block:Answer}
  904. <div class="question">
  905. {Question}
  906. <div class="asker">─ {Asker}</div>
  907. </div>
  908. {Answer}
  909. {/block:Answer}
  910.  
  911. <div class="permalinks">
  912. <div class="date">
  913. <b><a href="{Permalink}">{DayOfMonth} {ShortMonth}</a></b>
  914. <a href="{Permalink}">
  915. {block:NoteCount}
  916. &nbsp;<span class="th th-link"></span> &nbsp;{NoteCount}
  917. {/block:NoteCount}
  918. </a>
  919. </div>
  920. <div class="reblogs">{block:RebloggedFrom}
  921. <a href="{ReblogParentURL}">
  922. <span class="lnr lnr-pushpin"></span></a>&nbsp;
  923. <a href="{ReblogRootURL}">
  924. <span class="lnr lnr-location"></span></a>&nbsp;
  925. {/block:RebloggedFrom}
  926. <a href="{ReblogURL}"><span class="lnr lnr-redo"></span></a>
  927. </div><p>
  928. </div>
  929. <div class="tags">{block:HasTags}{block:Tags}<span class="lnr lnr-tag"></span>&nbsp;<a href="{TagUrl}"> {Tag}</a> &nbsp;{/block:Tags}{/block:HasTags}</div>
  930.  
  931. {block:PostNotes}
  932. {PostNotes}
  933. {/block:PostNotes}
  934.  
  935. </div>
  936.  
  937. {/block:Posts}
  938.  
  939. <!--PAGINATION-->
  940. {block:Pagination}
  941. <div align="center" class="pagination">
  942. {block:PreviousPage}
  943. <a href="{PreviousPage}">
  944. <div class="pagibutton">backward</div></a>
  945. {/block:PreviousPage}
  946. {block:NextPage}
  947. <a href="{NextPage}">
  948. <div class="pagibutton">forward</div></a>
  949. {/block:NextPage}
  950. </div>
  951. {/block:Pagination}
  952.  
  953. </div>
  954.  
  955. {block:ContentSource}
  956. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  957. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  958. {/block:SourceLogo}
  959. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  960. {/block:ContentSource}
  961. </div>
  962.  
  963. <div class="cred"><a href="https://dcylily.tumblr.com/"><span class="th th-flower-1-o"></span></a></div>
  964.  
  965. </body>
  966.  
  967. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement