API tools faq
paste
lexaofrp

THEME 54: CALAMITY!

lexaofrp
Jul 5th, 2019
780
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.69 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3.  
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  5. <script src="https://static.tumblr.com/pq6sadp/72Dnoxbpp/jquery.style-my-tooltips.js"></script>
  6. <script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:100,tip_fade_speed:400
  7. }
  8. );
  9. });
  10. })(jQuery);
  11. </script>
  12.  
  13.  
  14.  
  15. <head><title>{Title}</title>
  16. <link rel=“stylesheet” href=“https://cdn.linearicons.com/free/1.0.0/icon-font.min.css”>
  17.  
  18. <link rel="stylesheet" href="templates/clean/template.css" type="text/css"/>
  19. <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  20.  
  21. <link rel="shortcut icon" href="{Favicon}">
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  24.  
  25. <meta name="image:Background" content=""/>
  26. <meta name="image:Header" content=""/>
  27.  
  28. <meta name="color:Background" content="#ffffff"/>
  29. <meta name="color:PostBG" content="#ffffff"/>
  30. <meta name="color:Text" content="#000000"/>
  31. <meta name="color:Post Links" content="#000000"/>
  32. <meta name="color:Hover" content="#000000"/>
  33. <meta name="color:Links" content="#000000"/>
  34. <meta name="color:Linksbg" content="#000000"/>
  35. <meta name="color:Border" content="#000000"/>
  36. <meta name="color:Accent" content="#ffffff"/>
  37. <meta name="color:Blockquote" content="#000000"/>
  38. <meta name="color:descbg" content="#000000"/>
  39. <meta name="color:desctext" content="#eeeeee"/>
  40. <meta name="color:container" content="#ffffff"/>
  41.  
  42. <meta name="text:Title1" content="lorem ipsum"/>
  43. <meta name="text:Home URL" content="/"/>
  44. <meta name="text:Home" content="Home"/>
  45. <meta name="text:Ask URL" content="/"/>
  46. <meta name="text:Ask" content="Ask"/>
  47. <meta name="text:Link 1 URL" content="/"/>
  48. <meta name="text:Link 1" content="Link 1"/>
  49.  
  50.  
  51. <script src="https://use.fontawesome.com/255525e9a0.js"></script>
  52. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  53. <link href="https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap" rel="stylesheet">
  54. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:900i&display=swap" rel="stylesheet">
  55.  
  56. <style type="text/css">
  57. @font-face { font-family: 'rob'; src: url('https://dl.dropboxusercontent.com/s/hvj4b276x1ui8pv/Tokyo-Outline.otf'); }
  58.  
  59.  
  60. @font-face { font-family: 'reg'; src: url('https://dl.dropboxusercontent.com/s/984d70eox2udsg8/Tokyo-Regular.otf'); }
  61.  
  62. #s-m-t-tooltip {
  63.  
  64. max-width:100px;
  65. margin-left:10px;
  66. margin-top:10px;
  67. padding:3px;
  68. padding-bottom:2px;
  69. background: {color:postbg};
  70. border:1px solid {color:text};
  71. font-family: 'poppins';
  72. font-size:9px;
  73. letter-spacing:0px;
  74. border-radius:3px;
  75. text-transform:uppercase;
  76. color:{color:text};
  77. text-shadow: 1px 1px 0px rgba(255,255,255,.3);
  78. z-index:999999999999999999999999999999999999; }
  79.  
  80.  
  81.  
  82. blockquote {
  83. font-size:9px;
  84. font-family: 'poppins';
  85. margin-left:5px;
  86. margin-right:7px;
  87. border-left:4px solid{color:blockquote};
  88. text-align:left;
  89. padding:2px;
  90. padding-left:7px;
  91. font-weight:normal;
  92. color:{color:text};
  93. background-color:{color:postbg};
  94. }
  95.  
  96. blockquote a{
  97. color:{color:hover};
  98. }
  99.  
  100. blockquote blockquote, blockquote blockquote blockquote blockquote, blockquote blockquote blockquote blockquote blockquote blockquote, blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote, blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote, blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote{
  101. background-color:{color:postbg};
  102. color:{color:text};
  103. }
  104.  
  105. blockquote img {
  106. max-width:390px;
  107. }
  108.  
  109. blockquote blockquote img{
  110. max-width:350px;
  111. }
  112.  
  113. blockquote blockquote blockquote, blockquote blockquote blockquote blockquote blockquote, blockquote blockquote blockquote blockquote blockquote blockquote blockquote, blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote, blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote{
  114. font-size:8px;
  115. font-family: 'poppins';
  116. margin-left:5px;
  117. margin-right:5px;
  118. letter-spacing:0px;
  119. border-left:4px solid{color:blockquote};
  120. text-align:left;
  121. padding:5px;
  122. padding-left:5px;
  123. font-weight:normal;
  124. color:{color:text};
  125. background-color:{color:postbg};
  126. }
  127.  
  128. small, sub, sup{
  129. font-size:8px;
  130. }
  131.  
  132. code {
  133. font-size:9px;
  134. font-family: 'poppins';
  135. text-transform:none;
  136.  
  137. }
  138.  
  139. b, bold, strong{
  140. color:{color:post links};
  141. font-weight:bold;
  142. }
  143.  
  144. i{
  145. color:{color:hover};
  146. }
  147.  
  148. hr{
  149. border:none;
  150. border-top:dashed 1px {color:text};
  151. }
  152.  
  153. pre {
  154. font-family: 'poppins';
  155. text-align:center;
  156. font-size:10px;
  157. max-width:500px;
  158. padding:10px ;
  159. color:{color:text};
  160. background:{color:postbg};
  161. }
  162. h1{
  163. font-family: 'playfair display';
  164. font-size:35px;
  165. text-align:center;
  166. letter-spacing:5px;
  167. text-transform:uppercase;
  168. padding-bottom:3px;
  169. color:{color:blockquote};
  170. }
  171.  
  172. h1 sub, h1 bold, h1 italic, h2 small, h2 sub, h2 sup{
  173. font-size:20px;
  174. color:{color:blockquote};
  175. }
  176.  
  177. h2{
  178. text-shadow: 1px 1px 0px {color:hover};
  179. margin-top:-5px;
  180. color:{color:text};
  181. margin-bottom:5px;
  182. text-transform:uppercase;
  183.  
  184. font-family:'playfair display';
  185. font-size:20px;
  186. text-align:center;
  187. }
  188.  
  189. h3{
  190. color:{color:text};
  191. letter-spacing:2px;
  192. font-size:30px;
  193. text-transform:uppercase;
  194. font-weight:bold;
  195. text-align:right;
  196. }
  197.  
  198. h4{
  199. color:{color:text};
  200. letter-spacing:2px;
  201. font-size:10px;
  202. text-transform:uppercase;
  203. font-weight:bold;
  204. text-align:left;
  205. }
  206. /*GENERAL*/
  207.  
  208.  
  209. a {
  210. color:{color:Background};
  211. color:{color:post links};
  212. text-decoration:none;
  213. -webkit-transition:all 0.5s ease-in-out;
  214. -moz-transition:all 0.5s ease-in-out;
  215. -o-transition:all 0.5s ease-in-out;
  216. transition:all 0.5s ease-in-out;}
  217.  
  218. a:hover {
  219. color:{color:Hover};
  220. text-decoration:underline;
  221. -webkit-transition:all 0.5s ease-in-out;
  222. -moz-transition:all 0.5s ease-in-out;
  223. -o-transition:all 0.5s ease-in-out;
  224. transition:all 0.5s ease-in-out;}
  225.  
  226.  
  227. /*GENERAL*/
  228.  
  229. body {
  230. font-family:'poppins';
  231. font-size:9px;
  232. background-color:{color:background};
  233. background-image:url('{image:background}') ;
  234. }
  235.  
  236. a {
  237. color:{color:post links};
  238. text-decoration:none;
  239. -webkit-transition:all 0.5s ease-in-out;
  240. -moz-transition:all 0.5s ease-in-out;
  241. -o-transition:all 0.5s ease-in-out;
  242. transition:all 0.5s ease-in-out;}
  243.  
  244. a:hover {
  245. color:{color:Hover};
  246. text-decoration:underline;
  247. -webkit-transition:all 0.5s ease-in-out;
  248. -moz-transition:all 0.5s ease-in-out;
  249. -o-transition:all 0.5s ease-in-out;
  250. transition:all 0.5s ease-in-out;}
  251.  
  252.  
  253.  
  254. /*END GENERAL*/
  255.  
  256. /*Acco*/
  257.  
  258.  
  259. /*SIDEBAR*/
  260. .links {
  261. position:fixed;
  262. display:inline-block;
  263. top:50%;
  264. left:50%;
  265. margin-top:-270px;
  266. margin-left:323px;
  267. width:555px;
  268. height:208px;
  269. padding-bottom:2px;
  270. overflow:visible;
  271. line-height:0px;
  272. text-align:center;
  273. -webkit-transition:all 0.5s ease-in-out;
  274. -moz-transition:all 0.5s ease-in-out;
  275. -o-transition:all 0.5s ease-in-out;
  276. transition:all 0.5s ease-in-out
  277. }
  278. .links span{
  279. position:fixed;
  280. font-family:'rob';
  281. font-size:23px;
  282. width:50px;
  283. height:1px;
  284. text-align:center;
  285. font-style:italic;
  286. margin-left:-25px;
  287. margin-top:-10px;
  288. color:{color:text};
  289. -webkit-transition:all 0.7s ease-in-out;
  290. -moz-transition:all 0.7s ease-in-out;
  291. -o-transition:all 0.7s ease-in-out;
  292. transition:all 0.7s ease-in-out;
  293. }
  294.  
  295. .links a {
  296. display:block;
  297.  
  298. margin-left:-1px;
  299. margin-right:2px;
  300. margin-top:0px;
  301. margin-bottom:4px;
  302. width:20px;
  303. height:20px;
  304. padding:15px;
  305. padding-top:32px;
  306. padding-bottom:8px;
  307. font-family:'poppins';
  308. font-size:8px;
  309. text-decoration:none;
  310. text-transform:uppercase;
  311. color:{color:links};
  312. background:{color:linksbg};
  313. -webkit-transition:all 0.7s ease-in-out;
  314. -moz-transition:all 0.7s ease-in-out;
  315. -o-transition:all 0.7s ease-in-out;
  316. transition:all 0.7s ease-in-out;}
  317.  
  318. .links p{
  319. color:{color:links};
  320. -webkit-transition:all 0.7s ease-in-out;
  321. -moz-transition:all 0.7s ease-in-out;
  322. -o-transition:all 0.7s ease-in-out;
  323. transition:all 0.7s ease-in-out;
  324. }
  325.  
  326. .links a:hover span {
  327. text-decoration:none;
  328. color:{color:links};}
  329. }
  330. .links a:hover p{
  331. color:{color:hover};
  332. }
  333.  
  334. .links a:hover a{
  335. color:{color:hover};}
  336.  
  337. .title{
  338. position:fixed;
  339. width:450px;
  340. height:17px;
  341. padding-top:0px;
  342. margin-left:290px;
  343. margin-top:-23px;
  344. color:{color:text};
  345. text-align:right;
  346. text-transform:uppercase;
  347. font-style:italic;
  348. font-size:27px;
  349. font-family:'rob';
  350. letter-spacing:4px;
  351. text-shadow: 2px 2px 0px {color:post links};
  352. }
  353.  
  354. .container{
  355. position:fixed;
  356. left:50%;
  357. top:50%;
  358. margin-top:-70px;
  359. margin-left:-350px;
  360. height:360px;
  361. width:733px;
  362. background:{color:container};
  363. }
  364.  
  365. .description{
  366. position:absolute;
  367. margin-left:-5px;
  368. margin-top:0px;
  369. width:125px;
  370. overflow:auto;
  371. min-height:30px;
  372. line-height:15px;
  373. text-align:justify;
  374. padding-left:10px;
  375. padding-right:5px;
  376.  
  377. }
  378.  
  379. .header{
  380. height:170px;
  381. width:700px;
  382. position:fixed;
  383. left:50%;
  384. top:50%;
  385. margin-top:-280px;
  386. margin-left:-350px;
  387. }
  388.  
  389. .pict{
  390. position:absolute;
  391. width:500px;
  392. height:210px;
  393. z-index:-2;
  394. overflow:hidden;
  395. background-image:url('{image:header}');
  396. }
  397.  
  398. .right{
  399. position:fixed;
  400. margin-left:500px;
  401. margin-top:-0px;
  402. background:{color:descbg};
  403. color:{color:desctext};
  404. width:143px;
  405. height:170px;
  406. overflow:auto;border:20px solid {color:descbg};
  407. border-right:70px solid {color:descbg};
  408. z-index:99999999999999999999999999999;
  409. }
  410.  
  411.  
  412. .pagination {
  413. position:fixed;
  414. padding:5px;
  415. margin-left:-1px;
  416. margin-top:360px;
  417. width:140px;
  418. height:13px;
  419. padding-bottom:5px;
  420. font-weight:bold;
  421. z-index:99;
  422. text-align:center;
  423. background:{color:linksbg};
  424. border:1px solid {color:container};
  425. letter-spacing:5px;
  426. }
  427.  
  428. .pagination a{
  429. color:{color:links};
  430. }
  431.  
  432. .pagination a:hover{
  433. text-decoration:none;
  434. color:{color:hover};
  435. -webkit-transition:all 0.5s ease-in-out;
  436. -moz-transition:all 0.5s ease-in-out;
  437. -o-transition:all 0.5s ease-in-out;
  438. transition:all 0.5s ease-in-out;}
  439.  
  440. .current_page {
  441. display:inline-block;
  442. color:{color:hover};
  443. text-decoration:underline;
  444. padding:2px 3px;
  445. letter-spacing:5px;
  446. }
  447.  
  448. /*END SIDEBAR*/
  449.  
  450. /*POSTS*/
  451. #c{
  452. height:320px;
  453. width:440px;
  454. margin-top:20px;
  455. z-index:9999999999999999;
  456. position:absolute;
  457. margin-left:285px;
  458. overflow:auto;
  459. }
  460.  
  461. .posts {
  462. width:410px;
  463. font-size:8px;
  464. font-family: 'poppins';
  465. color:{color:text};
  466. font-weight:normal;
  467. }
  468.  
  469. .posts a{
  470. color:{color:post links};
  471. }
  472.  
  473. .entries {
  474. width:400px;
  475. padding:10px;
  476. font-weight:normal;
  477. color:{color:text};
  478. background-color:{color:postbg};
  479. margin-bottom:20px;
  480. margin-top:0px;
  481. padding-right:15px;
  482. padding-left:5px;
  483. margin-left:10px;
  484. font-family: 'poppins';
  485. border:1px solid {color:border};
  486. -webkit-transition-property: top, bottom;
  487. -webkit-transition-duration: 0.5s;
  488. -webkit-transition:all 0.5s ease-in-out;
  489. -moz-transition:all 0.5s ease-in-out;
  490. -o-transition:all 0.5s ease-in-out;
  491. transition:all 0.5s ease-in-out;
  492. }
  493.  
  494. .info {
  495. padding:5px;
  496. margin-left:-6px;
  497. margin-top:-11px;
  498. text-align:right;
  499. font-family: 'poppins';
  500. font-weight:bold;
  501. font-size:10px;
  502. width:410px;
  503. border:1px solid {color:border};
  504. line-height:15px;
  505. letter-spacing:2px;
  506. text-transform:uppercase;
  507. color:{color:post links};
  508. background-color:{color:postbg};
  509. margin-bottom:10px;
  510. text-shadow: 1px 1px 0px rgba(255,255,255,.2);
  511. -webkit-transition-property: top, bottom;
  512. -webkit-transition-duration: 0.5s;
  513. -webkit-transition:all 0.5s ease-in-out;
  514. -moz-transition:all 0.5s ease-in-out;
  515. -o-transition:all 0.5s ease-in-out;
  516. transition:all 0.5s ease-in-out;
  517. }
  518.  
  519. .info i{
  520. margin-top:4px;
  521. color:{color:postbg};
  522. position:absolute;
  523. }
  524.  
  525. .info i:hover{
  526. cursor:pointer;
  527. }
  528.  
  529. .info a {
  530. text-align:right;
  531. font-weight:bold;
  532. color:{color:post links};
  533. -webkit-transition-property: top, bottom;
  534. -webkit-transition-duration: 0.5s;
  535. -webkit-transition:all 0.5s ease-in-out;
  536. -moz-transition:all 0.5s ease-in-out;
  537. -o-transition:all 0.5s ease-in-out;
  538. transition:all 0.5s ease-in-out;}
  539.  
  540. .info a:hover {
  541. color:{color:hover};
  542. -webkit-transition-property: top, bottom;
  543. -webkit-transition-duration: 0.5s;
  544. -webkit-transition:all 0.5s ease-in-out;
  545. -moz-transition:all 0.5s ease-in-out;
  546. -o-transition:all 0.5s ease-in-out;
  547. transition:all 0.5s ease-in-out;}
  548.  
  549. .noties{
  550. margin-top:-10px;
  551. text-align:right;
  552. }
  553.  
  554. .tags{
  555. padding:5px;
  556. margin-bottom:-11px;
  557. margin-left:-6px;
  558. text-align:center;
  559. font-family: 'poppins';
  560. font-weight:bold;
  561. font-size:8px;
  562. width:410px;
  563. border:1px solid {color:border};
  564. line-height:15px;
  565. letter-spacing:2px;
  566. text-transform:uppercase;
  567. color:{color:post links};
  568. background-color:{color:postbg};
  569. text-shadow: 1px 1px 0px rgba(255,255,255,.2);
  570. -webkit-transition:all 0.5s ease-in-out;
  571. -moz-transition:all 0.5s ease-in-out;
  572. -o-transition:all 0.5s ease-in-out;
  573. transition:all 0.5s ease-in-out;
  574. }
  575.  
  576. .tags a {
  577. display:inline-block;
  578. margin-right:5px;
  579. margin-top:0px;
  580. color:{color:post links};
  581. -webkit-transition:all 0.5s ease-in-out;
  582. -moz-transition:all 0.5s ease-in-out;
  583. -o-transition:all 0.5s ease-in-out;
  584. transition:all 0.5s ease-in-out;
  585. }
  586.  
  587. .tags a:hover{
  588. color:{color:hover};
  589. }
  590.  
  591. .post_title {
  592. display:block;
  593. padding:2px;
  594. text-align:center;
  595. font-size:35px;
  596. font-family: 'playfair display';
  597. color:{color:links};
  598. }
  599.  
  600. .post_title a{
  601. color:{color:links};
  602. }
  603.  
  604. .text {
  605. display:block;
  606. padding:5px;
  607. text-align:justify;
  608. color:{color:Text};
  609. }
  610.  
  611. .photo{margin-left:5px;}
  612.  
  613. .photo img {
  614. display:block;
  615. max-width:400px;
  616. }
  617.  
  618.  
  619. .posts img{
  620. max-width:400px;
  621. -webkit-transition:all 0.7s ease-in-out;
  622. -moz-transition:all 0.7s ease-in-out;
  623. -o-transition:all 0.7s ease-in-out;
  624. transition:all 0.7s ease-in-out;
  625. }
  626.  
  627. .posts img:hover{
  628. -webkit-filter: grayscale(1);
  629. filter: grayscale(1);
  630. }
  631.  
  632. .quote {
  633. display:block;
  634. padding:10px;
  635. text-align:center;
  636. font-size:15px;
  637. font-family:'playfair display';
  638. color:{color:text};}
  639.  
  640. .source {
  641. display:block;
  642. padding:5px;
  643. text-align:center;
  644. font-size:9px;
  645. }
  646.  
  647. .chat li {
  648. display:block;
  649. padding:5px;
  650. color:{color:text};}
  651.  
  652. .audioimg img {
  653. width:100px;
  654. height:100px;
  655. color:{color:text};
  656. font-family: 'poppins';
  657. text-align:center;
  658. text-transform:uppercase;}
  659.  
  660. .audioinfo {
  661. color:{color:Text};}
  662.  
  663. #ask{
  664. font-family:'poppins';
  665. font-size:8px;
  666. width:370px;
  667. margin-left:5px;
  668. padding:10px;
  669. padding-bottom:-0px;
  670. text-transform:uppercase;
  671. font-weight:normal;
  672. color:{color:text};
  673. letter-spacing:1px;
  674. text-shadow: 1px 1px 0px rgba(255,255,255,.2);
  675. }
  676.  
  677. .question{
  678.  
  679. min-height:10px;
  680. width:305px;
  681. text-align:justify;
  682. color:{color:text};
  683. padding:5px;
  684. font-weight:bold;
  685. line-height:18px;
  686. font-family:'poppins';
  687. margin-left:50px;
  688. margin-top:-20px;
  689. }
  690.  
  691. .question b, .question a{
  692. background-color:{color:text};
  693. color:{color:postbg};
  694. padding:5px;
  695. font-size:10px;
  696. margin-left:-10px;
  697. }
  698.  
  699. .question img{
  700. -webkit-border-radius: 50px;
  701. -moz-border-radius: 50px;
  702. border-radius: 50px;
  703. padding:3px;
  704. margin-left:-55px;
  705. margin-top:12px;
  706. border:1px solid {color:border};
  707. box-shadow: 0px 0px 2px rgba(255,255,255,.5) ;
  708. -webkit-box-shadow:0px 0px 2px rgba(255,255,255,.5) ;
  709. -moz-box-shadow:0px 0px 2px rgba(255,255,255,.5) ;
  710. }
  711. .answer{
  712. margin-top:20px;
  713. text-transform:none;
  714. color:{color:text};
  715. }
  716. /*END POSTS*/
  717.  
  718. /*scrollbar*/
  719.  
  720. ::-webkit-scrollbar {
  721. height:0px;
  722. width:0px;
  723. background-color:{color:border};}
  724.  
  725. ::-webkit-scrollbar-thumb {
  726. height:auto;
  727. background-color:{color:accent};}
  728.  
  729.  
  730. .notes {
  731. font-family:'poppins';
  732. text-align:center;
  733. text-transform:uppercase;
  734. font-size:8px;
  735. width:410px;
  736. margin-left:-30px;
  737. margin-top:20px;
  738. color:{color:border};
  739. }
  740.  
  741. .notes li{
  742. list-style-type:none;
  743. padding:5px;
  744. }
  745.  
  746. .notes img {
  747. opacity:0;
  748. display:none;
  749. }
  750.  
  751. .notes a{
  752. color:{color:post links};
  753. }
  754.  
  755. #credit {
  756. position:fixed;
  757. font-family:'poppins';
  758. color:{color:Border};
  759. text-transform:uppercase;
  760. font-weight:bold;
  761. font-size:11px;
  762. width:10px;
  763. height:10px;
  764. right:5px;
  765. bottom:5px;
  766. padding:5px;
  767. opacity:1;
  768. letter-spacing:4px;
  769. }
  770.  
  771.  
  772.  
  773. /*tabs*/
  774. #tb{
  775. position:fixed;
  776. top:50%;
  777. left:50%;
  778. margin-left:-350px;
  779. margin-top:-149px;
  780. }
  781. .tabs {
  782. position:fixed;
  783. width:250px;
  784. height:20px;
  785. float: none;
  786. list-style: none;
  787. margin-top: 10px;
  788. margin-left:10px;
  789. }
  790. .tabs:after {
  791. content: '';
  792. display: table;
  793. clear: both;
  794. }
  795. .tabs input[type=radio] {
  796. display:none;
  797. }
  798. .tabs label {
  799. display: block;
  800. float: left;
  801. width: 11px;
  802. height:10px;
  803. font-size: 10px;
  804. padding:10px;
  805. padding-top:8px;
  806.  
  807. padding-bottom:12px;
  808. font-weight: normal;
  809. text-align: left;
  810. text-transform:uppercase;
  811. background:{color:linksbg};
  812. border-bottom:none;
  813. margin-right:3px;
  814. margin-left:-1px;
  815. z-index:9999999;
  816. -webkit-transition:all 0.5s ease-in-out;
  817. -moz-transition:all 0.5s ease-in-out;
  818. -o-transition:all 0.5s ease-in-out;
  819. transition:all 0.5s ease-in-out;
  820. }
  821.  
  822.  
  823. .tabs label a, .tabs label span {
  824. color: {color:links};
  825. text-align:center;
  826. margin-left:1px;
  827. }
  828. .tabs label i {
  829. padding: 5px;
  830. margin-right: 0;
  831. }
  832. .tabs label:hover {
  833. color: {color:postbg};
  834.  
  835. }
  836. .tab-content {
  837. display: none;
  838. width: 246px;
  839. float: left;
  840. padding: 15px;
  841. height:330px;
  842. background-color:{color:descbg};
  843. margin-left:-1px;
  844. margin-top:-1px;
  845. z-index:-999999;
  846.  
  847. }
  848.  
  849. .cv{
  850. position:fixed;
  851. border:2px solid {color:text};
  852. width:190px;
  853. margin-left:25px;
  854. margin-top:20px;
  855. height:285px;
  856. }
  857.  
  858. .admin{
  859. position:fixed;
  860. width:190px;
  861. height:120px;
  862. margin-left:0px;
  863. margin-top:15px;
  864. }
  865.  
  866. .admin p{
  867. width:162px;
  868. height:117px;
  869. margin-top:-120px;
  870. text-align:justify;
  871. overflow:scroll;
  872. margin-left:15px;
  873. }
  874. .cv h6{
  875. margin-left:170px;
  876. margin-top:-30px;
  877. position:fixed;
  878. font-size:45px;
  879. color:{color:text};
  880. font-family:'rob';
  881. text-shadow: 2px 2px 0px {color:post links};
  882. text-align:center;
  883. text-transform:uppercase;
  884. line-height:38px;
  885. font-style:italic;
  886. }
  887.  
  888. .cv p{
  889. color:{color:desctext};
  890. }
  891.  
  892. .cvv h6{
  893. margin-left:20px;
  894. margin-top:20px;
  895. position:fixed;
  896. font-size:33px;
  897. color:{color:text};
  898. font-family:'playfair display';
  899. text-shadow: 2px 2px 0px {color:post links};
  900. text-align:center;
  901. text-transform:uppercase;
  902. font-style:italic;
  903. }
  904.  
  905. .cvv h5{
  906. margin-left:20px;
  907. margin-top:20px;
  908. position:fixed;
  909. font-size:8px;
  910. color:{color:post links};
  911. font-family:'poppins';
  912. text-align:center;
  913. text-transform:uppercase;
  914. font-style:italic;
  915. }
  916.  
  917. .ques{
  918. position:fixed;
  919. margin-top:70px;
  920. margin-left:20px;
  921. width:210px;
  922. height:250px;
  923. overflow:auto;
  924. }
  925.  
  926. .cvv body {
  927. font-family: 'poppins';
  928. font-size: 20px;
  929. font-weight: normal;
  930. max-width: 450px;
  931. margin: 50px auto;
  932. display: flex;
  933. flex-direction: column;
  934. }
  935.  
  936. .cvv p {
  937. word-wrap: break-word;
  938. margin-bottom: 12px;
  939. line-height: 10px;
  940. position:relative;
  941. padding:10px 20px;
  942. border-radius:25px;
  943. color:{color:postbg};
  944.  
  945. &:before, &:after {
  946. content:"";
  947. position:absolute;
  948. bottom:-2px;
  949. height:20px;
  950. }
  951. }
  952.  
  953. .from-me {
  954. margin-left:60px;
  955. background:{color:post links};
  956. text-align:right;
  957.  
  958. &:before {
  959. right:-7px;
  960. border-right:20px solid {color:post links};
  961. border-bottom-left-radius: 16px 14px;
  962. transform:translate(0, -2px);
  963. }
  964.  
  965. &:after {
  966. right:-56px;
  967. width:26px;
  968. background:white;
  969. border-bottom-left-radius: 10px;
  970. transform:translate(-30px, -2px);
  971. }
  972. }
  973. .from-them {
  974. background:{color:hover};
  975. width:120px;
  976.  
  977. &:before {
  978. left:-7px;
  979. border-left:20px solid {color:hover};
  980. border-bottom-right-radius: 16px 14px;
  981. transform:translate(0, -2px);
  982. }
  983.  
  984. &:after {
  985. left:4px;
  986. width:26px;
  987. background:white;
  988. border-bottom-right-radius: 10px;
  989. transform:translate(-30px, -2px);
  990. }
  991. }
  992.  
  993. .cvvv h5{
  994. margin-left:10px;
  995. margin-top:0px;
  996. position:fixed;
  997. font-size:33px;
  998. color:{color:hover};
  999. font-family:'playfair display';
  1000. text-shadow: 2px 2px 0px {color:post links};
  1001. text-align:center;
  1002. text-transform:uppercase;
  1003. font-style:italic;
  1004. }
  1005.  
  1006. .themes{
  1007. position:fixed;
  1008. margin-top:65px;margin-left:10px;
  1009. width:220px;
  1010. padding:20px;
  1011. height:210px;
  1012. overflow-y:scroll;
  1013. }
  1014.  
  1015. .themes img{
  1016. width:70px;
  1017. height:70px;
  1018. border-radius:3px;
  1019. padding:10px;
  1020. margin-top:-30px;
  1021. margin-bottom:28px;
  1022. }
  1023.  
  1024. .themes a{
  1025. display:inline-block;
  1026. border-radius:3px;
  1027. }
  1028.  
  1029. /*animation*/
  1030.  
  1031. .tab-content * {
  1032. -webkit-animation: scale 0.7s ease-in-out;
  1033. -moz-animation: scale 0.7s ease-in-out;
  1034. animation: scale 0.7s ease-in-out;
  1035.  
  1036. }
  1037. @keyframes scale {
  1038. 0% {
  1039. transform: scale(0.9);
  1040. opacity: 0;
  1041. }
  1042. 50% {
  1043. transform: scale(1.01);
  1044. opacity: 0.5;
  1045. }
  1046. 100% {
  1047. transform: scale(1);
  1048. opacity: 1;
  1049. }
  1050. }
  1051.  
  1052. /*mechanics*/
  1053. .tabs [id^="tab"]:checked + label {
  1054. background: {color:descbg};
  1055. color: {color:linksbg};
  1056. }
  1057. #tab1:checked ~ #tab-content1,
  1058. #tab2:checked ~ #tab-content2,
  1059. #tab3:checked ~ #tab-content3 {
  1060. display: block;
  1061. }
  1062.  
  1063. /*responsive*/
  1064. @media (min-width: 768px) {
  1065. .tabs i {
  1066. padding: 5px;
  1067. margin-right: 10px;
  1068. }
  1069. .tabs label span {
  1070. display: inline-block;
  1071. }
  1072. .tabs {
  1073. max-width: 750px;
  1074. margin: 50px auto;
  1075. }
  1076. }
  1077.  
  1078.  
  1079. /*END SCROLLBAR*/
  1080.  
  1081. </style>
  1082. </head>
  1083. <body>
  1084.  
  1085. <!--SIDEBAR-->
  1086. <div class="header">
  1087. <div class="pict"></div>
  1088. <div class="right"><div class="description">{description}</div></div></div>
  1089. <div class="links"><a href="{text:Home URL}" title="refresh"><span>01.</span><br><p>home</p></a><a href="{text:Ask URL}" title="inquiries"><span>02.</span><br><p>ask</p></a><a href="{text:Link 1 URL}" title="navigate"><span>03.</span><br><p>{text:Link 1}</p></a>
  1090.  
  1091. </div>
  1092. <div class="container">
  1093.  
  1094. <div class="title">{text:title1}</div>
  1095. <div id="tb"><div class="tabs">
  1096. <!-- Radio button and lable for #tab-content1 -->
  1097. <input type="radio" name="tabs" id="tab1" checked >
  1098. <label for="tab1">
  1099. <a><span class="th th-chat-bubbles"></span></a>
  1100. </label>
  1101. <!-- Radio button and lable for #tab-content2 -->
  1102. <input type="radio" name="tabs" id="tab2">
  1103. <label for="tab2">
  1104. <a><span class="th th-moon-o"></span></a>
  1105. </label>
  1106. <!-- Radio button and lable for #tab-content3 -->
  1107. <input type="radio" name="tabs" id="tab3">
  1108. <label for="tab3">
  1109. <a><span class="th th-users-o"></span></a>
  1110. </label>
  1111. <!-- #tab-content3 --> <div id="tab-content1" class="tab-content">
  1112.  
  1113. <div class="cvv">
  1114. <h6>QUESTIONS</h6>
  1115. <h5>frequently asked</h5>
  1116. <div class="ques">
  1117. <p class="from-them">this is a question</p>
  1118. <p class="from-me">this is an answer</p>
  1119. <p class="from-them">you can add as many as you want</p>
  1120. <p class="from-me">it automatically scrolls</p>
  1121. <p class="from-them">edit in the html</p>
  1122. <p class="from-me">if you have questions just ask!</p></div>
  1123.  
  1124. </div>
  1125. </div> <!-- #tab-content1 -->
  1126. <div id="tab-content2" class="tab-content">
  1127. <div class="cv">
  1128. <!--this is where you put your admin info !-->
  1129. <div class="admin" style="overflow:auto; height:250px; text-align:justify;"><p style="margin-top:0px;"><img src="https://66.media.tumblr.com/20589eb3c99cc0fa6d3b06c551ca3bf7/31420c832a3a3f08-22/s540x810/b53177725f2f737e590250a4a31c28af3c0f3d24.png" style="float:left; width:50px; height:50px; padding:10px; padding-bottom:0px; ">"Lorem ipshum 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...enim ad minim </p>
  1130. <p style="margin-top:20px;"><img src="https://66.media.tumblr.com/20589eb3c99cc0fa6d3b06c551ca3bf7/31420c832a3a3f08-22/s540x810/b53177725f2f737e590250a4a31c28af3c0f3d24.png" style="float:left; width:50px; height:50px; padding:10px; padding-bottom:0px;">"Lorem ipsum dolor sjit 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...enim ad minim </p>
  1131. <p style="margin-top:20px;"><img src="https://66.media.tumblr.com/20589eb3c99cc0fa6d3b06c551ca3bf7/31420c832a3a3f08-22/s540x810/b53177725f2f737e590250a4a31c28af3c0f3d24.png" style="float:left; width:50px; height:50px; padding:10px; padding-bottom:0px;">"Lomrem 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...enim ad minim </p></div><h6>a<br>d<br>m<br>i<br>n<br>s</h6>
  1132. </div>
  1133. <p><!-- Tab content here --></p>
  1134. </div> <!-- #tab-content2 -->
  1135. <div id="tab-content3" class="tab-content">
  1136. <div class="cvvv">
  1137. <div class="themes">
  1138.  
  1139. <!--put your themes here -->
  1140.  
  1141.  
  1142. <a href="put your link here" title="musename"><img src="https://66.media.tumblr.com/34a3eedddd1c5f2f0c5ed3197e9c8ba6/31420c832a3a3f08-be/s540x810/50156eac7311155835f375ef6ca2777b7f6b62d8.png"/></a>
  1143. <a href="put your link here" title="musename"><img src="https://66.media.tumblr.com/34a3eedddd1c5f2f0c5ed3197e9c8ba6/31420c832a3a3f08-be/s540x810/50156eac7311155835f375ef6ca2777b7f6b62d8.png"/></a>
  1144. <a href="put your link here" title="musename"><img src="https://66.media.tumblr.com/34a3eedddd1c5f2f0c5ed3197e9c8ba6/31420c832a3a3f08-be/s540x810/50156eac7311155835f375ef6ca2777b7f6b62d8.png"/></a>
  1145. <a href="put your link here" title="musename"><img src="https://66.media.tumblr.com/34a3eedddd1c5f2f0c5ed3197e9c8ba6/31420c832a3a3f08-be/s540x810/50156eac7311155835f375ef6ca2777b7f6b62d8.png"/></a>
  1146. <a href="put your link here" title="musename"><img src="https://66.media.tumblr.com/34a3eedddd1c5f2f0c5ed3197e9c8ba6/31420c832a3a3f08-be/s540x810/50156eac7311155835f375ef6ca2777b7f6b62d8.png"/></a>
  1147. <a href="put your link here" title="musename"><img src="https://66.media.tumblr.com/34a3eedddd1c5f2f0c5ed3197e9c8ba6/31420c832a3a3f08-be/s540x810/50156eac7311155835f375ef6ca2777b7f6b62d8.png"/></a>
  1148. <a href="put your link here" title="musename"><img src="https://66.media.tumblr.com/34a3eedddd1c5f2f0c5ed3197e9c8ba6/31420c832a3a3f08-be/s540x810/50156eac7311155835f375ef6ca2777b7f6b62d8.png"/></a>
  1149. <a href="put your link here" title="musename"><img src="https://66.media.tumblr.com/34a3eedddd1c5f2f0c5ed3197e9c8ba6/31420c832a3a3f08-be/s540x810/50156eac7311155835f375ef6ca2777b7f6b62d8.png"/></a>
  1150. <a href="put your link here" title="musename"><img src="https://66.media.tumblr.com/34a3eedddd1c5f2f0c5ed3197e9c8ba6/31420c832a3a3f08-be/s540x810/50156eac7311155835f375ef6ca2777b7f6b62d8.png"/></a>
  1151. <a href="put your link here" title="musename"><img src="https://66.media.tumblr.com/34a3eedddd1c5f2f0c5ed3197e9c8ba6/31420c832a3a3f08-be/s540x810/50156eac7311155835f375ef6ca2777b7f6b62d8.png"/></a>
  1152. </div><h5>skeletons !</h5>
  1153. </div>
  1154.  
  1155. <p><!-- Tab content here --></p>
  1156. </div>
  1157. </div></div>
  1158. <div class="pagination">
  1159. {block:PreviousPage}<a href="{PreviousPage}" style="letter-spacing:0px;">BACK</a>{/block:PreviousPage}&nbsp;{block:JumpPagination length="5"}
  1160. {block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
  1161. {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}&nbsp;
  1162. {block:NextPage}<a href="{NextPage}" style="letter-spacing:0px;">NEXT</a>{/block:NextPage}{/block:Pagination}</div>
  1163.  
  1164.  
  1165.  
  1166.  
  1167.  
  1168. <div id="c">
  1169. <div class="posts">
  1170. {block:Posts}
  1171.  
  1172. <div class="entries">
  1173. <div class="info"><center>
  1174. <a href="{Permalink}">{NoteCount} notes</a>&nbsp;•&nbsp;<a href="{Permalink}">{TimeAgo}</a>&nbsp;•&nbsp;<a href="{ReblogURL}" target="_blank" class="details">reblog</a></a>
  1175. </center></div>
  1176. {block:Text}
  1177.  
  1178. {block:Title}<div class="post_title">{Title}</div>{/block:Title}
  1179. <div class="text">{Body}</div>
  1180.  
  1181. {/block:Text}
  1182.  
  1183. <!--END TEXT POSTS-->
  1184.  
  1185. <!--PHOTO POSTS-->
  1186.  
  1187. {block:Photo}
  1188.  
  1189. <div class="photo"><center><img src="{PhotoURL-400}"/></center></div>
  1190. <div class="text">{Caption}</div>
  1191.  
  1192. {/block:Photo}
  1193.  
  1194. <!--END PHOTO POSTS-->
  1195.  
  1196. <!--PHOTOSET POSTS-->
  1197.  
  1198. {block:Photoset}
  1199.  
  1200. <center><div class="photo">{Photoset-400}</div></center>
  1201. <div class="text">{Caption}</div>
  1202.  
  1203. {/block:Photoset}
  1204.  
  1205. <!--END PHOTOSET POSTS-->
  1206.  
  1207. <!--QUOTE POSTS-->
  1208.  
  1209. {block:Quote}
  1210.  
  1211. <div class="quote">❝{Quote}❞ </div>
  1212. <div class="source" style="text-align: left; font-weight:bold;">&mdash;{Source}</div>
  1213.  
  1214. {/block:Quote}
  1215.  
  1216. <!--END QUOTE POSTS-->
  1217.  
  1218. <!--LINK POSTS-->
  1219.  
  1220. {block:Link}
  1221.  
  1222. <div class="post_title"><a href="{URL}">{Name}</a></div>
  1223. {block:Description}<div class="text">{Description}</div>{/block:Description}
  1224.  
  1225. {/block:Link}
  1226.  
  1227. <!--END LINK POSTS-->
  1228.  
  1229. <!--CHAT POSTS-->
  1230.  
  1231. {block:Chat}
  1232.  
  1233. {block:Title}<div class="post_title">{Title}</div>{/block:Title}
  1234. <div class="chat">
  1235. <ul>
  1236. {block:Lines}<li class="{Alt}">{block:Label}<b>{Label}</b> {/block:Label}{Line}</li>{/block:Lines}
  1237. </ul>
  1238. </div>
  1239.  
  1240. {/block:Chat}
  1241.  
  1242. <!--END CHAT POSTS-->
  1243.  
  1244. <!--AUDIO POSTS-->
  1245.  
  1246. {block:Audio}
  1247.  
  1248. <table>
  1249. <tr>
  1250. <td>
  1251. {block:AlbumArt}<div class="audioimg"><img src="{AlbumArtURL}"/></div>{/block:AlbumArt}
  1252. </td>
  1253. <td>
  1254. <div class="audioplayer">{AudioPlayerWhite}</div>
  1255. <div class="audioinfo">{block:Artist}<b>Name</b>: {Artist}{/block:Artist}<br>
  1256. {block:Album}<b>Album</b>: {Album}{/block:Album}<br>
  1257. {block:TrackName}<b>Track</b>: {TrackName}{/block:TrackName}</div>
  1258. </td>
  1259. </tr>
  1260. </table>
  1261. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  1262.  
  1263. {/block:Audio}
  1264.  
  1265. <!--END AUDIO POSTS-->
  1266.  
  1267. <!--VIDEO POSTS-->
  1268.  
  1269. {block:Video}
  1270.  
  1271. <center><div class="photo">{VideoEmbed-400}</div></center>
  1272. <div class="text">{Caption}</div>
  1273.  
  1274. {/block:Video}
  1275.  
  1276. <!--END VIDEO POSTS-->
  1277.  
  1278. <!--ANSWER POSTS-->
  1279. {block:Answer}
  1280. <div id="ask">
  1281. <div class="question">
  1282. <img src="{AskerPortraitURL-40}"/><p style="margin-top:-25px;"><b>{Asker}:</b> {Question}</p></div>
  1283. <div class="answer">
  1284. {Answer}</div></div>
  1285. {/block:answer}
  1286. <!--END ANSWER POSTS-->
  1287. {block:HasTags}
  1288. <div class="tags"> {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}</div>
  1289. {/block:HasTags} {block:PostNotes}<div id="notes">{PostNotes}{/block:PostNotes}</div>
  1290.  
  1291. {/block:Posts}
  1292.  
  1293. </div>
  1294. {/block:PermalinkPage}
  1295. </div>
  1296.  
  1297. </div>
  1298. </div>
  1299. </div>
  1300. </div>
  1301. <div id="credit">
  1302. <a href="http://etcrnities.tumblr.com" title="etcrnities">©</a>
  1303. </div>
  1304. </div>
  1305. </div>
  1306. <!--END POSTS-->
  1307.  
  1308. </body>
Add Comment
Please, Sign In to add comment
Public Pastes
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!