API tools faq
paste
drunkblushed

milkshake by drunkblushed

drunkblushed
Jan 26th, 2020 (edited)
3,526
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 35.06 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ♡ MILKSHAKE BY DRUNKBLUSHED ♡
  4.  
  5. — do not combine with other themes.
  6. — do not take copy or take parts of this theme.
  7. — do not remove credits and redistribute as your own.
  8.  
  9.  
  10. -->
  11.  
  12. <html>
  13. <head>
  14.  
  15.  
  16.  
  17.  
  18. <meta name="color:background" content="#e7e7e7"/>
  19. <meta name="color:posts" content="#e7e7e7"/>
  20. <meta name="color:container" content="#f0f0f0"/>
  21. <meta name="color:borders" content="#ffffff"/>
  22. <meta name="color:accent" content="#93ad9d"/>
  23. <meta name="color:accent 2" content="#93ad9d"/>
  24. <meta name="color:bold" content="#93ad9d"/>
  25. <meta name="color:italic" content="#93ad9d"/>
  26. <meta name="color:text" content="#3c3c3c"/>
  27. <meta name="color:sidebar text" content="#3c3c3c"/>
  28. <meta name="color:link" content="#93ad9d"/>
  29. <meta name="color:permalink" content="#3c3c3c"/>
  30. <meta name="color:permalink bg" content="#93ad9d"/>
  31.  
  32. <meta name="image:background" content=""/>
  33. <meta name="image:sidebar" content="https://via.placeholder.com/250x240"/>
  34. <meta name="image:tab" content="https://via.placeholder.com/170x390"/>
  35.  
  36. <meta name="text:side desc" content="description here!"/>
  37. <meta name="text:title" content="MILKSHAKE"/>
  38. <meta name="text:tab subtitle" content="I LIKE IT LIKE A MILKSHAKE"/>
  39. <meta name="text:stats" content"name. age. tz. counter." />
  40. <meta name="text:side link title" content="extra" />
  41. <meta name="text:side link url" content="" />
  42. <meta name="text:tablink title1" content="link one" />
  43. <meta name="text:tablink url1" content="" />
  44. <meta name="text:tablink title2" content="link two" />
  45. <meta name="text:tablink url2" content="" />
  46. <meta name="text:tablink title3" content="link three" />
  47. <meta name="text:tablink url3" content="" />
  48. <meta name="text:tablink title4" content="link four" />
  49. <meta name="text:tablink url4" content="" />
  50. <meta name="text:tablink title5" content="link five" />
  51. <meta name="text:tablink url5" content="" />
  52. <meta name="text:tablink title6" content="link six" />
  53. <meta name="text:tablink url6" content="" />
  54. <meta name="text:tablink title7" content="link seven" />
  55. <meta name="text:tablink url7" content="" />
  56. <meta name="text:tablink title8" content="link eight" />
  57. <meta name="text:tablink url8" content="" />
  58.  
  59. <title>{title}</title>
  60.  
  61. <link href="https://fonts.googleapis.com/css?family=Roboto:400,900&display=swap" rel="stylesheet">
  62.  
  63. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  64.  
  65. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  66. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  67. <script>
  68. (function($){
  69. $(document).ready(function(){
  70. $("a[title]").style_my_tooltips({
  71. tip_follows_cursor:true,
  72. tip_delay_time:90,
  73. tip_fade_speed:600,
  74. attribute:"title"
  75. });
  76. });
  77. })(jQuery);
  78. </script>
  79.  
  80. <style type="text/css">
  81.  
  82. /*----------------- FONTS -----------------*/
  83.  
  84. @font-face { font-family:"tokyo"; src: url('https://dl.dropbox.com/s/jgq18n62iha87v6/Tokyo-Regular.ttf'); }
  85.  
  86. @font-face { font-family: "creo"; src: url('https://dl.dropboxusercontent.com/s/uk7fcayvza8gd9t/Creo-ExtraBold.ttf') ;}
  87.  
  88. @font-face { font-family: "HeyAugust"; src: url('https://dl.dropboxusercontent.com/s/0382ld3skkgq97c/Hey%20August.ttf') ;}
  89.  
  90.  
  91. /*----------------- TEXT STYLES -----------------*/
  92.  
  93. body{
  94. background-color: {color:background};
  95. font-family: "roboto";
  96. color:{color:text};
  97. letter-spacing:1px;
  98. background-image:url({image:background});
  99. }
  100.  
  101. a:link, a:active, a:visited{
  102. color: {color:Link};
  103. text-decoration:none;
  104. -webkit-transition: all 0.2s linear;
  105. -moz-transition: all 0.2s linear;
  106. transition: all 0.2s linear;
  107. text-transform:uppercase;
  108. }
  109.  
  110. a:hover {
  111. color:{color:Link Hover};
  112. -webkit-transition: all 0.2s linear;
  113. -moz-transition: all 0.2s linear;
  114. transition: all 0.2s linear;
  115. }
  116.  
  117. b,bold,strong{
  118. color:{color:bold};
  119. text-transform:uppercase;
  120. }
  121.  
  122. em,i,italic{
  123. color:{color:italic};
  124. }
  125.  
  126. big{
  127. font-size:12px;
  128. font-family: "roboto";
  129. }
  130.  
  131. small,sup, sub{
  132. font-size:9px;
  133. }
  134.  
  135. h1{font-family: "creo";
  136. letter-spacing:1.5px;
  137. padding:5px;
  138. text-align:center;
  139. font-size: 24px;
  140. text-transform:uppercase;
  141. line-height: 120%;
  142. color:{color:bold};}
  143.  
  144. h2{font-family: "creo";
  145. letter-spacing:1.5px;
  146. padding:5px;
  147. text-align:right;
  148. font-size: 22px;
  149. text-transform:uppercase;
  150. line-height: 120%;
  151. color:{color:italic};}
  152.  
  153. .posttitle{
  154. font-family: "creo";
  155. letter-spacing:1.5px;
  156. padding:5px;
  157. text-align:center;
  158. font-size: 30px;
  159. text-transform:uppercase;
  160. line-height: 120%;
  161. -webkit-text-stroke: 1px {color:bold};
  162. -webkit-text-fill-color: rgba(0, 0, 0, 0);
  163. }
  164.  
  165. blockquote{
  166. margin-left:0px;
  167. padding-left:15px;
  168. border-left: 1px solid {color:borders};
  169. width:95%;
  170. }
  171.  
  172.  
  173. .p { padding-top: 5px;}
  174. .ol, ul { margin-left: 30px; padding: 5px; }
  175. .ul { list-style-type: square; }
  176.  
  177. ::-webkit-scrollbar-thumb {
  178. display: none;
  179. }
  180.  
  181. ::-webkit-scrollbar {
  182. display: none;
  183. }
  184.  
  185. #s-m-t-tooltip {
  186. z-index: 999999999999999999;
  187. background: #fff;
  188. font-size: 8px;
  189. line-height: 13px;
  190. letter-spacing: 1.5px;
  191. text-transform: uppercase;
  192. color: {color:text};
  193. font-weight:900;
  194. background-color:{color:posts};
  195. border:1px solid {color:borders};
  196. max-width: 150px;
  197. word-wrap: break-word;
  198. padding: 2px 5px 2px 6px;
  199. display: block;
  200. margin: 24px 14px 7px 12px;
  201. -webkit-transition: all 0.2s linear;
  202. -moz-transition: all 0.2s linear;
  203. transition: all 0.2s linear;
  204. }
  205.  
  206. ::-moz-selection { background: {color:accent}; }
  207. ::selection { background: {color:accent}; }
  208.  
  209. /*----------------- CONTAINERS & POSTS -----------------*/
  210.  
  211. #entries{
  212. padding:30px;
  213. z-index:99;
  214. margin: auto;
  215. left:0px;
  216. top:0px;
  217. bottom:0px;
  218. right:0px;
  219. width:750px;
  220. position:absolute;
  221. height:500px;
  222. overflow-y:scroll;
  223. background-color:{color:container};
  224. overflow-x:hidden;
  225. border-radius:10px;
  226. }
  227.  
  228. #container{
  229. width:450px;
  230. height:500px;
  231. position:absolute;
  232. display:block;
  233. overflow-x:hidden;
  234. margin-left:0px;
  235. border-radius:10px;
  236. }
  237.  
  238. #post {
  239. font-size:9px;
  240. background-color:{color:posts};
  241. padding:25px;
  242. width:400px;
  243. z-index:99;
  244. margin-top:0px;
  245. margin-bottom:60px;
  246. margin-left:0px;
  247. line-height:160%;
  248. letter-spacing:1px;
  249. border-radius:10px;
  250. }
  251.  
  252. #post .tags {position:relative;
  253. text-align:left;
  254. color:{color:link};
  255. padding:8px;
  256. font-size:6.5px;
  257. letter-spacing:2px;
  258. font-family: "roboto";
  259. text-transform:uppercase;
  260. -webkit-transition: all 0.2s linear;
  261. -moz-transition: all 0.2s linear;
  262. transition: all 0.2s linear;
  263. margin-bottom:-20px;
  264. margin-top:5px;
  265. margin-left:-8px;
  266. }
  267.  
  268. #post .tags a{
  269. color:{color:link};
  270. }
  271.  
  272. #post img{
  273. max-width:400px;
  274. height:auto;
  275. }
  276.  
  277.  
  278. #post:hover .tags {position:relative;
  279. text-align:left;opacity:1;
  280. color:{color:link};
  281. padding:8px; width:auto;
  282. text-transform:uppercase;-webkit-transition: all 0.2s linear;
  283. -moz-transition: all 0.2s linear;
  284. transition: all 0.2s linear;}
  285. .tags a {color:{color:text};text-transform:uppercase;}
  286.  
  287. .tags a:hover {color:{color:link hover};text-transform:uppercase;}
  288.  
  289.  
  290. .info{
  291. background:{color:permalink bg};
  292. position:relative;
  293. padding:12px;
  294. margin-top:20px;
  295. margin-bottom:0px;
  296. text-transform:uppercase;
  297. letter-spacing:2px;
  298. color:{color:permalink};
  299. font-size:8.5px;
  300. line-height:100%;
  301. border-radius:5px;
  302. }
  303.  
  304. .info span{
  305. text-align:left;
  306. padding-left:-20px;
  307. text-transform:uppercase;
  308. margin-top:2px;
  309. padding-right:5px;
  310. }
  311.  
  312. .info rb{
  313. right:0%;
  314. position:absolute;
  315. padding-right:0px;
  316. margin-top:-1px;
  317. }
  318.  
  319. .info b{
  320. font-weight:900;
  321. color:{color:permalink};
  322. }
  323.  
  324. .info a{
  325. margin-left:0px;
  326. font-size:8.5px;
  327. color: {color:permalink};
  328. }
  329.  
  330.  
  331. /*----------------- CUSTOMIZATIONS -----------------*/
  332.  
  333.  
  334. #stats{
  335. font-family:"tokyo";
  336. font-size:10px;
  337. position:fixed;
  338. margin-top:475px;
  339. margin-left:0px;
  340. color:{color:text};
  341. padding:5px 5px 8px 5px;
  342. width:240px;
  343. text-align:center;
  344. word-spacing:0px;
  345. height:9px;
  346. z-index:9999999999999999999999999999999;
  347. overflow:hidden;
  348. }
  349.  
  350. #stats a{
  351. color:{color:text};
  352. }
  353.  
  354. @import "compass/css3";
  355.  
  356. .topwave{
  357. width: 600px;
  358. position: absolute;
  359. height: 600px;
  360. margin-top:-10px;
  361. }
  362.  
  363. .topwavefill{
  364. fill:{color:accent};
  365. }
  366.  
  367. #topwave{
  368. margin-left:180px;
  369. margin-top:-30px;
  370. width: 600px;
  371. height:600px;
  372. overflow: hidden;
  373. position:fixed;
  374. border-radius:0px 10px 0px 0px;
  375. }
  376.  
  377. .bottomwave{
  378. width: 600px;
  379. position: absolute;
  380. height: 600px;
  381. margin-left:-35px;
  382. }
  383.  
  384. .bottomwavefill{
  385. fill:{color:accent 2};
  386. margin-left:-5px;
  387. }
  388.  
  389. #bottomwave{
  390. margin-left:-30px;
  391. margin-top:-70px;
  392. width: 600px;
  393. height:600px;
  394. overflow: hidden;
  395. position:fixed;
  396. border-radius:0px 0px 0px 10px;
  397. }
  398.  
  399. .sideimage {position:fixed;z-index:9999; width:250px; height:240px;margin-left:0px; margin-top:0px; }
  400.  
  401. .sideimage img {width:250px; height:240px; position:fixed;}
  402.  
  403. #desc{
  404. width:210px; height:165px; padding:10px 20px 10px; font-size:8px; line-height:240%; text-transform:uppercase; text-align:justify; overflow:scroll;
  405. margin-top:285px; margin-left:0px; position:fixed; text-align-last:center;
  406. }
  407.  
  408. #maintitle{
  409. width:250px;
  410. height:250px;
  411. color:{color:sidebar text};
  412. position:fixed;
  413. font-family:"heyaugust";
  414. font-size:48px;
  415. text-align: justify;
  416. text-align-last: center;
  417. overflow:auto;
  418. margin-top:-5px;
  419. }
  420.  
  421.  
  422. /*----------------- NAVIGATION & PAGINATION -----------------*/
  423.  
  424. .tabs{
  425. width:235.5px;
  426. font-size:10px;
  427. z-index:999999999999999999999999999999;
  428. position:fixed;
  429. text-transform:uppercase;
  430. margin-left:0px;
  431. text-align:center;
  432. margin-top:240px;
  433. padding:7px 7px 12px;
  434. letter-spacing:2px;
  435. line-height:100%;
  436. background-color:{color:accent};
  437. font-family:"tokyo";
  438. border-radius:5px;
  439. }
  440.  
  441. .tabs a{
  442. color:{color:text};
  443. display:inline-block;
  444. margin:3px;
  445. }
  446.  
  447.  
  448. #pagination {
  449. font-family: "roboto";
  450. font-size:10px;
  451. font-weight:900;
  452. width:400px;
  453. color:{color:accent};
  454. margin-left:0px;
  455. text-align:center;
  456. }
  457.  
  458. #pagination a{
  459. display:inline-block;
  460. color:{color:link};
  461. padding:7px 10px 5px 10px;
  462. background-color:{color:posts};
  463. }
  464.  
  465. #pagination a:hover{
  466. color:{color:pagination Hover};}
  467.  
  468.  
  469.  
  470. /*----------------- ASK POSTS -----------------*/
  471.  
  472. .question {
  473. padding:15px;
  474. background-color:{color:container};
  475. color:{color:text};
  476. margin-top:40px;
  477. margin-left:0px;
  478. width:370px;
  479. margin-bottom:20px;
  480. border-radius:10px;
  481. }
  482.  
  483. .asker img {
  484. position:absolute;
  485. border-radius:50px;
  486. margin-left:-40px;
  487. margin-right:40px;
  488. margin-top:-10px;
  489. border:5px solid {color:bold};
  490. }
  491.  
  492. .asker {
  493. padding-top:6px;
  494. background-color:{color:posts};
  495. padding:5px;
  496. color:{color:bold};
  497. font-size:16px;
  498. letter-spacing:1.5px;
  499. margin-left:33%;
  500. margin-top:5px;
  501. display:inline;
  502. width:auto;
  503. position:absolute;
  504. margin-bottom:10px;
  505. text-transform:uppercase;
  506. font-family:"creo";
  507. }
  508.  
  509. .asker a{
  510. color:{color:bold};
  511. margin-top:-5px;
  512. }
  513.  
  514. /*----------------- CHAT POSTS -----------------*/
  515.  
  516. .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:{color:container};color:{color:text};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 {color:container};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:background};color:{color:text}}.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:background};border-bottom-left-radius:1em .5em}.me p,.answer,.asked span{padding:0;margin:0}.answer{overflow:hidden}
  517. .asked p {
  518. text-align: left;
  519. margin: 0 0px 10px 0px;
  520. padding: 0;
  521. color:{color:text};
  522. font-size: 12px;
  523. line-height: 0px;
  524. }
  525. .footerright .viasrc {
  526. float: left;
  527. }
  528. .asked a {
  529. margin:0;padding:0;
  530. }
  531. .user_4{background-color:{color:container};color{color:text}}.user_4::after{border-color:{color:container}}.user_6{background-color:{color:container};color{color:text}}.user_6::after{border-color:{color:container}}.user_5{background-color:{color:background};color:{color:text}}.user_5::after{border-color:{color:link}}.user_3{background-color:{color:container};color{color:text}}.user_3::after{border-color:{color:container}}.user_7{background-color:{color:container};color{color:text}}.user_7::after{border-color:{color:container}}.user_8{background-color:{color:container};color{color:text}}.user_8::after{border-color:{color:container}}.user_9{background-color:{color:container};color{color:text}}.user_9::after{border-color:{color:container}}
  532. .convo {
  533. overflow: hidden;
  534. list-style-type: none;
  535. padding: 0;
  536. margin: 0;
  537. }
  538.  
  539. /*----------------- PERMALINK PAGE -----------------*/
  540. ol.notes {
  541. width:400px;
  542. padding: 0px;
  543. margin: 0px 0px;
  544. list-style-type: none;
  545. margin-left:5px;
  546. margin-top:-10px;
  547. font-size:9px;}
  548.  
  549. ol.notes li.note {
  550. padding: 10px;
  551. }
  552.  
  553. ol.notes li.note img.avatar {
  554. vertical-align: -4px;
  555. margin-right: 10px;
  556. width: 16px;
  557. height: 16px;
  558. }
  559.  
  560. ol.notes li.note .answer_content {
  561. font-weight: normal;
  562. }
  563.  
  564. ol.notes li.note blockquote {
  565. border-color: {color:posts};
  566. padding: 4px 10px;
  567. margin: 10px 0px 0px 25px;
  568. }
  569.  
  570. ol.notes li.note blockquote a {
  571. text-decoration: none;}
  572.  
  573.  
  574. /*----------------- TABS STYLING -----------------*/
  575.  
  576. .tabcontent {
  577. margin: auto;
  578. left:300px;
  579. top:0px;
  580. bottom:0px;
  581. right:0px;
  582. position:absolute;
  583. width:450px;
  584. height:500px;
  585. padding:30px;
  586. color:{color:text};
  587. z-index:999;
  588. -webkit-animation: fadeEffect 0.8s;
  589. animation: fadeEffect 0.8s;
  590. border-radius:10px;
  591. }
  592.  
  593.  
  594. @-webkit-keyframes fadeEffect {
  595. from {opacity: 0.1;}
  596. to {opacity: .9;}
  597. }
  598.  
  599. @keyframes fadeEffect {
  600. from {opacity: 0.1;}
  601. to {opacity: .9;}
  602. }
  603.  
  604.  
  605.  
  606. .tabsclose {
  607. font-size:14px;
  608. padding:3px;
  609. color:{color:italic};
  610. margin-top:-10px;
  611. margin-right:-10px;
  612. position:fixed;
  613. z-index:9999999999999999999999999;
  614. }
  615.  
  616. .tabsclose:hover {
  617. cursor:pointer;
  618. }
  619.  
  620. #tabsub{
  621. margin-top:415px;
  622. color:{color:text};
  623. font-family:"heyaugust";
  624. text-align:left;
  625. text-align-last:right;
  626. padding:0px;
  627. font-size:50px;
  628. width:450px;
  629. height:110px;
  630. margin-left:0px;
  631. line-height:95%;
  632. position:fixed;
  633. text-transform:uppercase;
  634. overflow:hidden;
  635. }
  636.  
  637. #tabdesc{
  638. margin-top:5px;
  639. margin-left:0px;
  640. width:230px;
  641. height:230px;
  642. background-color:{color:posts};
  643. color:{color:text};
  644. padding:15px;
  645. position:fixed;
  646. font-size:9px;
  647. overflow-y:auto;
  648. text-align:justify;
  649. line-height:150%;
  650. border-radius:10px;
  651. }
  652.  
  653. #tabdesc b{
  654. background-color:{color:permalink bg};
  655. color:{color:permalink};
  656. padding:3px;
  657. margin-right:5px;
  658. line-height:220%;
  659. font-size:8px;
  660. }
  661.  
  662. #tabdesc a{
  663. background-color:{color:permalink bg};
  664. color:{color:permalink};
  665. padding:3px;
  666. margin-right:5px;
  667. line-height:220%;
  668. font-size:8px;
  669. }
  670.  
  671. #tabdesc span{
  672. font-size:15px;
  673. font-family:"creo";
  674. color:{color:bold};
  675. float:left;
  676. padding:10px 5px 0px 0px;
  677. }
  678.  
  679. #tabdesc p{
  680. margin-top:5px;
  681. margin-bottom:-5px;
  682. }
  683.  
  684.  
  685. #tablink{
  686. position:fixed;
  687. width:280px;
  688. height:100px;
  689. margin-left:0px;
  690. margin-top:285px;
  691. z-index:999999999999999999999999999;
  692. text-align:left;
  693. }
  694.  
  695. #tablink a{
  696. background-color:{color:link};
  697. color:{color:posts};
  698. width:50px;
  699. height:50px;
  700. padding:0px;
  701. display:inline-block;
  702. border-radius:50%;
  703. font-size:25px;
  704. margin:0px 5px 10px 5px;
  705. text-align:center;
  706. }
  707.  
  708. #tablink span{
  709. padding:5px;
  710. padding-top:11px;
  711. padding-right:5px;
  712. }
  713.  
  714. #tablink a:hover{
  715. border-radius:50%;
  716. background-color:{color:container};
  717. color:{color:text};
  718. }
  719.  
  720. #tab {
  721. margin-top:0px;
  722. position:absolute;
  723. margin-left:280px;
  724. margin-top:5px;
  725. }
  726.  
  727. #tab img{
  728. border-radius:10px;
  729. width:170px;
  730. height:390px;
  731. }
  732.  
  733. /*----------------- MUSE FILTERING -----------------*/
  734.  
  735. .filterDiv {
  736. float: left;
  737. background-color:{color:posts};
  738. color: {color:text};
  739. width: 200px;
  740. height:105px;
  741. text-align: center;
  742. margin: 0px 12px 12px 0px;
  743. display: none;
  744. border-radius:10px;
  745. padding:10px;
  746. }
  747.  
  748. .show {
  749. display: block;
  750. }
  751.  
  752. .container {
  753. margin-top: 20px;
  754. overflow: scroll;
  755. width:465px;
  756. height:450px;
  757. border-radius:10px;
  758. }
  759.  
  760. .btn {
  761. border: none;
  762. outline: none;
  763. padding:7px 7px 12px;
  764. background-color: {color:accent 2};
  765. color:{color:text};
  766. font-size:10px;
  767. font-family:"tokyo";
  768. cursor: pointer;
  769. border-radius:10px;
  770. letter-spacing:2px;
  771. }
  772.  
  773. .btn.active {
  774. background-color: {color:bold};
  775. }
  776.  
  777. /*----------------- MUSES CODES -----------------*/
  778.  
  779. .musetitle{
  780. font-size:40px;
  781. color:{color:bold};
  782. font-family:"primetime";
  783. text-align:center;
  784. margin-top:-30px;
  785. margin-bottom:22px;
  786. }
  787.  
  788. .musename{
  789. font-size:18px;
  790. font-family:"creo";
  791. color:{color:bold};
  792. position:relative;
  793. padding:0px;
  794. text-align:center;
  795. line-height:20%;
  796. width:110px;
  797. margin-left:85px;
  798. margin-top:10px;
  799. margin-bottom:5px;
  800. }
  801.  
  802.  
  803. .musedesc{
  804. width:110px;
  805. height:50px;
  806. overflow:none;
  807. font-size:8.5px;
  808. font-family:"roboto";
  809. text-align:justify;
  810. margin-left:85px;
  811. color:{color:text};
  812. margin-top:10px;
  813. position:relative;
  814. overflow:scroll;
  815. }
  816.  
  817.  
  818. .muselinks{
  819. width:200px;
  820. height:30px;
  821. margin-left:0px;
  822. margin-top:10px;
  823. display:block;
  824. text-align:Center;
  825. }
  826.  
  827. .muselinks a{
  828. color:{color: link};
  829. font-size:12px;
  830. padding-top:14px;
  831. padding:5px;
  832. opacity:0.9;
  833. }
  834.  
  835. .museimg img{
  836. width:75px;
  837. height:75px;
  838. float:left;
  839. display:inline;
  840. border-radius:50%;
  841. }
  842.  
  843.  
  844. /*----------------- CREDITS / DO NOT TOUCH! -----------------*/
  845. #credits{
  846. position:fixed;
  847. bottom:0px;
  848. right:10px;
  849. width:35px;
  850. height:35px;
  851. text-align:center;
  852. }
  853.  
  854. #credits a{
  855. font-weight:bold;
  856. font-family:"creo";
  857. font-size:24px;
  858. -webkit-text-fill-color: {color:bold};
  859. }
  860.  
  861. #credits a:hover{
  862. font-family:"creo";
  863. -webkit-text-stroke: 1px {color:bold};
  864. -webkit-text-fill-color: rgba(0, 0, 0, 0);
  865. }
  866.  
  867.  
  868. {CustomCSS}
  869. </style>
  870.  
  871. <link rel="shortcut icon" href="{Favicon}">
  872. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" /><meta name="viewport" content="width=820" />
  873.  
  874.  
  875. </head>
  876.  
  877. <body>
  878.  
  879.  
  880. <!----------------------NAVIGATION TAB---------------------->
  881. <div id="tabsDefault" class="tabcontent" style="overflow:auto;">
  882. <div id="container">
  883. {block:Posts}
  884.  
  885. <div id="post">
  886.  
  887. {block:text}
  888. {block:Title}
  889. <div class="posttitle">{Title}</div>
  890. {/block:Title}
  891. {Body}
  892. {/block:text}
  893.  
  894. {block:Link}
  895. <div class="posttitle">
  896. <a href="{URL}">{Name}</a>
  897. </div>
  898. {block:Description}{Description}{/block:Description}
  899. {/block:Link}
  900.  
  901. {block:Photo}
  902. <center>
  903. {LinkOpenTag}
  904. <a href="{permalink}">
  905. <img src="{PhotoURL-400}" alt="{PhotoAlt}"></a>
  906. {LinkCloseTag}
  907. </center>
  908. {block:Caption}{Caption}{/block:Caption}
  909. {block:ContentSource}
  910. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  911. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  912. {/block:SourceLogo}
  913. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  914. {/block:ContentSource}
  915. {block:ReblogParentURL}
  916. <!-- {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  917. {/block:ReblogParentURL}
  918. {/block:Photo}
  919.  
  920. {block:Photoset}
  921. <div style="z-index:99999999999999999999;">{Photoset}</div>
  922. {block:Caption}{Caption}{/block:Caption}
  923. {/block:Photoset}
  924.  
  925. {block:Quote}
  926. <h1>{Quote}</h1>
  927. {block:Source}
  928. <center>- {Source}</center>
  929. {/block:Source}
  930. {/block:Quote}
  931.  
  932. {block:Chat}
  933. {block:Title}
  934. <h1>{Title}</h1>{/block:Title}<br>
  935. <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label"><strong>{Label}</strong></span>{/block:Label}
  936. {Line}</li>{/block:Lines}</ul>
  937. {/block:Chat}
  938.  
  939. {block:Audio}
  940. {block:AlbumArt}
  941. <img src="{AlbumArtURL}" width="85px" align="left" style="margin-right:10px" />{/block:AlbumArt}
  942. <span class="audio">{AudioPlayerGrey}<br></span>
  943. {block:TrackName}<b>Title:</b> {TrackName}<br />{/block:TrackName}
  944. {block:Artist}<b>Artist:</b> {Artist}<br />{/block:Artist}
  945. {/block:ExternalAudio}<b>Played:</b> {PlayCount} times
  946. {block:Caption}{Caption}{/block:Caption}
  947. {/block:Audio}
  948.  
  949. {block:Video}
  950. {Video-400}
  951. {block:Caption}{Caption}{/block:Caption}
  952. {/block:Video}
  953.  
  954. {block:Answer}
  955. <div class="asker"><img src="{AskerPortraitURL-24}">{Asker}</div>
  956. <div class="question">{Question}</div>
  957. {Answer}{/block:Answer}
  958.  
  959.  
  960. {block:IndexPage}
  961. <div class="info">
  962. {block:Date}
  963. <span><a href="{Permalink}" title="{TimeAgo}">
  964. <b>{Month} {DayOfMonthWithZero}</b></a>
  965. {block:NoteCount}with
  966. <b><a href="{Permalink}">{NoteCountWithLabel}</b></a>{/block:NoteCount}</span>
  967. {/block:Date}
  968. <rb>
  969. <span>
  970.  
  971. {block:RebloggedFrom}
  972. <a href="{reblogparenturl}" title="via"><span class="th th-share-o"></span></a>{/block:RebloggedFrom}
  973.  
  974. {block:ContentSource}
  975. <a href="{SourceURL}" title="source"><span class="th th-push-pin-o"></span></a>{/block:ContentSource}
  976.  
  977. <a href="{ReblogURL}" title="reblog" target="_blank" class="reblog"><span class="th th-reload"></span></a></span></rb>
  978. </div>
  979.  
  980. <div class="tags">{block:HasTags}
  981. {block:Tags}<a href="{TagURL}">#<font style="text-transform:uppercase;">{Tag}</font>&nbsp;</a>
  982. {/block:Tags}
  983. {/block:HasTags}</div>
  984. {/block:IndexPage}
  985.  
  986.  
  987. {block:PermalinkPage}
  988. <div class="info">
  989. {block:Date}<span>
  990. <a href="{Permalink}">
  991. <b>{Month} {DayOfMonthWithZero}</b></a> with <b><a href="{Permalink}">{NoteCountWithLabel}</b></a></span>
  992. {/block:Date}
  993. <span>
  994. </span>
  995. </div>
  996.  
  997. <div class="tags">{block:HasTags}
  998. {block:Tags}<a href="{TagURL}">#<font style="text-transform:uppercase;">{Tag}</font>&nbsp;</a>
  999. {/block:Tags}
  1000. {/block:HasTags}</div>
  1001. {/block:PermalinkPage}
  1002.  
  1003.  
  1004. </div><!----POST END---->
  1005.  
  1006. {block:PostNotes}
  1007. {PostNotes}
  1008. {/block:PostNotes}
  1009. {/block:Posts}
  1010.  
  1011. {block:Pagination}
  1012. <div id="pagination">
  1013. <div style="margin-top:50px;margin-bottom:10px;">
  1014. {block:PreviousPage}<a href="{PreviousPage}" class="jump_page"><span class="th th-chevron-left"></span></a>{/block:PreviousPage}
  1015. {block:JumpPagination length="3"}
  1016. {block:CurrentPage}<a><span class="current_page">{PageNumber}</span></a>{/block:CurrentPage}
  1017. {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  1018. {block:NextPage}<a href="{NextPage}" class="jump_page"><span class="th th-chevron-right"></span></a>{/block:NextPage}
  1019. </div></div>
  1020. {/block:Pagination}</div>
  1021. </div>
  1022.  
  1023. <!----------------------NAVIGATION TAB---------------------->
  1024. <div id="tabsNavigate" class="tabcontent" style="display:none; overflow:hidden;">
  1025.  
  1026. <div id="tab"><img src="{image:tab}"></div>
  1027.  
  1028. <div id="tabsub">{text:tab subtitle}</div>
  1029.  
  1030. <div id="tabdesc">
  1031. <span>WHAT I DO</span>
  1032. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer metus ipsum, malesuada nec mollis et, malesuada non lacus. Donec quis libero vitae dui tincidunt venenatis efficitur vel eros. Pellentesque fermentum iaculis massa, vel convallis tellus sodales nec. Vivamus eget lacus justo. </p>
  1033.  
  1034. <br/><span>PLOT</span>
  1035. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer metus ipsum, malesuada nec mollis et, malesuada non lacus. Donec quis libero vitae dui tincidunt venenatis efficitur vel eros. Pellentesque fermentum iaculis massa, vel convallis tellus sodales nec. Vivamus eget lacus justo. </p>
  1036.  
  1037. <br/><span>MORE</span>
  1038. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer metus ipsum, malesuada nec mollis et, malesuada non lacus. Donec quis libero vitae dui tincidunt venenatis efficitur vel eros. Pellentesque fermentum iaculis massa, vel convallis tellus sodales nec. Vivamus eget lacus justo. </p>
  1039. </div>
  1040.  
  1041. <!--TAB LINKS-->
  1042. <div id="tablink">
  1043. <a href="{text:tablink url1}" title="{text:tablink title1}"><span class="th th-star-o"></span></a>
  1044. <a href="{text:tablink url2}" title="{text:tablink title2}"><span class="th th-confetti-o"></span></a>
  1045. <a href="{text:tablink url3}" title="{text:tablink title3}"><span class="th th-cloud-3-o"></span></a>
  1046. <a href="{text:tablink url4}" title="{text:tablink title4}"><span class="th th-folder-3-o"></span></a>
  1047. <a href="{text:tablink url5}" title="{text:tablink title5}"><span class="th th-paperclip"></span></a>
  1048. <a href="{text:tablink url6}" title="{text:tablink title6}"><span class="th th-diamond-o"></span></a>
  1049. <a href="{text:tablink url7}" title="{text:tablink title7}"><span class="th th-users-o"></span></a>
  1050. <a href="{text:tablink url8}" title="{text:tablink title8}"><span class="th th-list-o"></span></a>
  1051. </div>
  1052.  
  1053.  
  1054. </div><!--END NAVIGATION-->
  1055.  
  1056. <!----------------------MUSES TAB---------------------->
  1057. <div id="tabsMuses" class="tabcontent" style="display:none; overflow:hidden;">
  1058.  
  1059. <div id="myBtnContainer">
  1060. <button class="btn active" onclick="filterSelection('all')">ALL MUSES</button>
  1061. <button class="btn" onclick="filterSelection('homme')"> homme</button>
  1062. <button class="btn" onclick="filterSelection('femme')"> femme</button>
  1063. <button class="btn" onclick="filterSelection('nonbinary')"> non-binary</button>
  1064. <button class="btn" onclick="filterSelection('open')"> open</button>
  1065. <button class="btn" onclick="filterSelection('closed')"> closed</button>
  1066. </div>
  1067.  
  1068.  
  1069. <div class="container">
  1070.  
  1071. <!--MUSE-->
  1072. <div class="filterDiv homme open"><!--category-->
  1073.  
  1074. <div class="museimg">
  1075. <img src="https://via.placeholder.com/75x75"></img>
  1076. </div>
  1077.  
  1078. <div class="musename">red</div>
  1079.  
  1080. <div class="musedesc">muse details right here! it's okay, this overflows anyway, so type away! wow, look at all of this space for details!</div>
  1081.  
  1082. <div class="muselinks">
  1083. <a href="/"><span class="th th-heart-1" title="musings"></span></a>
  1084. <a href="/"><span class="th th-quote-down" title="interactions"></span></a>
  1085. <a href="/"><span class="th th-camera" title="visage"></span></a>
  1086. <a href="/"><span class="th th-pinterest" title="pinterest"></span></a>
  1087.  
  1088. </div>
  1089. </div><!--END MUSE-->
  1090.  
  1091.  
  1092.  
  1093.  
  1094. <!--MUSE-->
  1095. <div class="filterDiv femme closed"><!--category-->
  1096.  
  1097. <div class="museimg">
  1098. <img src="https://via.placeholder.com/75x75"></img>
  1099. </div>
  1100.  
  1101. <div class="musename">blue</div>
  1102.  
  1103. <div class="musedesc">muse details right here! it's okay, this overflows anyway, so type away! wow, look at all of this space for details!</div>
  1104.  
  1105. <div class="muselinks">
  1106. <a href="/"><span class="th th-heart-1" title="musings"></span></a>
  1107. <a href="/"><span class="th th-quote-down" title="interactions"></span></a>
  1108. <a href="/"><span class="th th-camera" title="visage"></span></a>
  1109. <a href="/"><span class="th th-pinterest" title="pinterest"></span></a>
  1110.  
  1111. </div>
  1112. </div><!--END MUSE-->
  1113.  
  1114.  
  1115.  
  1116. <!--MUSE-->
  1117. <div class="filterDiv nonbinary open"><!--category-->
  1118.  
  1119. <div class="museimg">
  1120. <img src="https://via.placeholder.com/75x75"></img>
  1121. </div>
  1122.  
  1123. <div class="musename">yellow</div>
  1124.  
  1125. <div class="musedesc">muse details right here! it's okay, this overflows anyway, so type away! wow, look at all of this space for details!</div>
  1126.  
  1127. <div class="muselinks">
  1128. <a href="/"><span class="th th-heart-1" title="musings"></span></a>
  1129. <a href="/"><span class="th th-quote-down" title="interactions"></span></a>
  1130. <a href="/"><span class="th th-camera" title="visage"></span></a>
  1131. <a href="/"><span class="th th-pinterest" title="pinterest"></span></a>
  1132.  
  1133. </div>
  1134. </div><!--END MUSE-->
  1135.  
  1136.  
  1137.  
  1138.  
  1139. <!--MUSE-->
  1140. <div class="filterDiv femme closed"><!--category-->
  1141.  
  1142. <div class="museimg">
  1143. <img src="https://via.placeholder.com/75x75"></img>
  1144. </div>
  1145.  
  1146. <div class="musename">green</div>
  1147.  
  1148. <div class="musedesc">muse details right here! it's okay, this overflows anyway, so type away! wow, look at all of this space for details!</div>
  1149.  
  1150. <div class="muselinks">
  1151. <a href="/"><span class="th th-heart-1" title="musings"></span></a>
  1152. <a href="/"><span class="th th-quote-down" title="interactions"></span></a>
  1153. <a href="/"><span class="th th-camera" title="visage"></span></a>
  1154. <a href="/"><span class="th th-pinterest" title="pinterest"></span></a>
  1155.  
  1156. </div>
  1157. </div><!--END MUSE-->
  1158.  
  1159.  
  1160.  
  1161. <!--MUSE-->
  1162. <div class="filterDiv homme open"><!--category-->
  1163.  
  1164. <div class="museimg">
  1165. <img src="https://via.placeholder.com/75x75"></img>
  1166. </div>
  1167.  
  1168. <div class="musename">violet</div>
  1169.  
  1170. <div class="musedesc">muse details right here! it's okay, this overflows anyway, so type away! wow, look at all of this space for details!</div>
  1171.  
  1172. <div class="muselinks">
  1173. <a href="/"><span class="th th-heart-1" title="musings"></span></a>
  1174. <a href="/"><span class="th th-quote-down" title="interactions"></span></a>
  1175. <a href="/"><span class="th th-camera" title="visage"></span></a>
  1176. <a href="/"><span class="th th-pinterest" title="pinterest"></span></a>
  1177.  
  1178. </div>
  1179. </div><!--END MUSE-->
  1180.  
  1181.  
  1182.  
  1183.  
  1184. <!--MUSE-->
  1185. <div class="filterDiv nonbinary closed"><!--category-->
  1186.  
  1187. <div class="museimg">
  1188. <img src="https://via.placeholder.com/75x75"></img>
  1189. </div>
  1190.  
  1191. <div class="musename">orange</div>
  1192.  
  1193. <div class="musedesc">muse details right here! it's okay, this overflows anyway, so type away! wow, look at all of this space for details!</div>
  1194.  
  1195. <div class="muselinks">
  1196. <a href="/"><span class="th th-heart-1" title="musings"></span></a>
  1197. <a href="/"><span class="th th-quote-down" title="interactions"></span></a>
  1198. <a href="/"><span class="th th-camera" title="visage"></span></a>
  1199. <a href="/"><span class="th th-pinterest" title="pinterest"></span></a>
  1200.  
  1201. </div>
  1202. </div><!--END MUSE-->
  1203.  
  1204.  
  1205.  
  1206. <!--MUSE-->
  1207. <div class="filterDiv homme open"><!--category-->
  1208.  
  1209. <div class="museimg">
  1210. <img src="https://via.placeholder.com/75x75"></img>
  1211. </div>
  1212.  
  1213. <div class="musename">black</div>
  1214.  
  1215. <div class="musedesc">muse details right here! it's okay, this overflows anyway, so type away! wow, look at all of this space for details!</div>
  1216.  
  1217. <div class="muselinks">
  1218. <a href="/"><span class="th th-heart-1" title="musings"></span></a>
  1219. <a href="/"><span class="th th-quote-down" title="interactions"></span></a>
  1220. <a href="/"><span class="th th-camera" title="visage"></span></a>
  1221. <a href="/"><span class="th th-pinterest" title="pinterest"></span></a>
  1222.  
  1223. </div>
  1224. </div><!--END MUSE-->
  1225.  
  1226.  
  1227.  
  1228.  
  1229. <!--MUSE-->
  1230. <div class="filterDiv femme closed"><!--category-->
  1231.  
  1232. <div class="museimg">
  1233. <img src="https://via.placeholder.com/75x75"></img>
  1234. </div>
  1235.  
  1236. <div class="musename">white</div>
  1237.  
  1238. <div class="musedesc">muse details right here! it's okay, this overflows anyway, so type away! wow, look at all of this space for details!</div>
  1239.  
  1240. <div class="muselinks">
  1241. <a href="/"><span class="th th-heart-1" title="musings"></span></a>
  1242. <a href="/"><span class="th th-quote-down" title="interactions"></span></a>
  1243. <a href="/"><span class="th th-camera" title="visage"></span></a>
  1244. <a href="/"><span class="th th-pinterest" title="pinterest"></span></a>
  1245.  
  1246. </div>
  1247. </div><!--END MUSE-->
  1248.  
  1249.  
  1250.  
  1251. <!--MUSE-->
  1252. <div class="filterDiv nonbinary open"><!--category-->
  1253.  
  1254. <div class="museimg">
  1255. <img src="https://via.placeholder.com/75x75"></img>
  1256. </div>
  1257.  
  1258. <div class="musename">teal</div>
  1259.  
  1260. <div class="musedesc">muse details right here! it's okay, this overflows anyway, so type away! wow, look at all of this space for details!</div>
  1261.  
  1262. <div class="muselinks">
  1263. <a href="/"><span class="th th-heart-1" title="musings"></span></a>
  1264. <a href="/"><span class="th th-quote-down" title="interactions"></span></a>
  1265. <a href="/"><span class="th th-camera" title="visage"></span></a>
  1266. <a href="/"><span class="th th-pinterest" title="pinterest"></span></a>
  1267.  
  1268. </div>
  1269. </div><!--END MUSE-->
  1270.  
  1271.  
  1272.  
  1273.  
  1274. <!--MUSE-->
  1275. <div class="filterDiv femme closed"><!--category-->
  1276.  
  1277. <div class="museimg">
  1278. <img src="https://via.placeholder.com/75x75"></img>
  1279. </div>
  1280.  
  1281. <div class="musename">purple</div>
  1282.  
  1283. <div class="musedesc">muse details right here! it's okay, this overflows anyway, so type away! wow, look at all of this space for details!</div>
  1284.  
  1285. <div class="muselinks">
  1286. <a href="/"><span class="th th-heart-1" title="musings"></span></a>
  1287. <a href="/"><span class="th th-quote-down" title="interactions"></span></a>
  1288. <a href="/"><span class="th th-camera" title="visage"></span></a>
  1289. <a href="/"><span class="th th-pinterest" title="pinterest"></span></a>
  1290.  
  1291. </div>
  1292. </div><!--END MUSE-->
  1293.  
  1294.  
  1295.  
  1296.  
  1297.  
  1298.  
  1299.  
  1300. </div></div><!--do not touch-->
  1301.  
  1302. <!----------------------CONTAINER---------------------->
  1303. <div id="entries">
  1304.  
  1305. <div class="tabs">
  1306. <a href="#" class="tablink tabsact" onclick="openCity(event, 'tabsDefault');">HOME</a>
  1307.  
  1308. <a href="/ask">ASK</a>
  1309.  
  1310. <a href="#" class="tablink tabsact" onclick="openCity(event, 'tabsNavigate');">EXPLORE</a>
  1311.  
  1312. <a href="#" class="tablink tabsact" onclick="openCity(event, 'tabsMuses');">MUSES</a>
  1313. </div>
  1314.  
  1315. <div id="topwave">
  1316. <svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 496.88 599.63" xml:space="preserve" class="topwave">
  1317. <path class="topwavefill" d="M246.6,0.5c3.4,11.3,6.8,22.7,10.2,34c8,26.6,16,53.2,24,79.8c6.2,20.6,12.6,41.6,24.8,59.3
  1318. c19,27.5,49.9,44.1,80.3,57.8c30.4,13.7,62.4,26.1,87.2,48.5c38,34.3,56.3,89.5,101.1,114.4c23.8,13.2,53.2,15.7,78.9,6.8
  1319. l0.5-401.6L246.6,0.5z" transform="translate(-103.12)"/>
  1320. </svg>
  1321. </div>
  1322.  
  1323. <div id="bottomwave">
  1324. <svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 496.88 599.63" xml:space="preserve" class="bottomwave">
  1325. <path class="bottomwavefill" d="M-5.6,404.6c14.8,17.8,31.5,34.5,51.8,45.7c12.7,6.9,26.4,11.5,40.4,15.3c57.5,15.7,117.6,18.5,177.1,21.2
  1326. s119.6,5.5,177.2,21c57.6,15.5,113.2,45,149.4,92.3L-6,600L-5.6,404.6z" transform="translate(-103.12)"/>
  1327. </svg>
  1328. </div>
  1329.  
  1330. <div id="maintitle">{text:title}</div>
  1331.  
  1332. <div class="sideimage"><img src="{image:sidebar}" draggable="false"></div>
  1333.  
  1334. <div id="desc">{text:side desc}</div>
  1335.  
  1336. <div id="stats">{text:stats}</div>
  1337.  
  1338.  
  1339. </div><!----ENTRIES END---->
  1340. </div>
  1341.  
  1342. <div id="credits">
  1343. <a href="https://drunkblushed.tumblr.com/" title="made by dana">DB.</a></div>
  1344.  
  1345. </body>
  1346.  
  1347. <script>
  1348. function openCity(evt, cityName) {
  1349. var i, tabcontent, tablinks;
  1350. tabcontent = document.getElementsByClassName("tabcontent");
  1351. for (i = 0; i < tabcontent.length; i++) {
  1352. tabcontent[i].style.display = "none";
  1353. }
  1354. tablinks = document.getElementsByClassName("tablinks");
  1355. for (i = 0; i < tablinks.length; i++) {
  1356. tablinks[i].className = tablinks[i].className.replace(" active", "");
  1357. }
  1358. document.getElementById(cityName).style.display = "block";
  1359. evt.currentTarget.className += " active";
  1360. }
  1361.  
  1362. // Get the element with id="defaultOpen" and click on it
  1363. document.getElementById("defaultOpen").click();
  1364. </script>
  1365.  
  1366. <script>
  1367. filterSelection("all")
  1368. function filterSelection(c) {
  1369. var x, i;
  1370. x = document.getElementsByClassName("filterDiv");
  1371. if (c == "all") c = "";
  1372. for (i = 0; i < x.length; i++) {
  1373. w3RemoveClass(x[i], "show");
  1374. if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  1375. }
  1376. }
  1377.  
  1378. function w3AddClass(element, name) {
  1379. var i, arr1, arr2;
  1380. arr1 = element.className.split(" ");
  1381. arr2 = name.split(" ");
  1382. for (i = 0; i < arr2.length; i++) {
  1383. if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  1384. }
  1385. }
  1386.  
  1387. function w3RemoveClass(element, name) {
  1388. var i, arr1, arr2;
  1389. arr1 = element.className.split(" ");
  1390. arr2 = name.split(" ");
  1391. for (i = 0; i < arr2.length; i++) {
  1392. while (arr1.indexOf(arr2[i]) > -1) {
  1393. arr1.splice(arr1.indexOf(arr2[i]), 1);
  1394. }
  1395. }
  1396. element.className = arr1.join(" ");
  1397. }
  1398.  
  1399. // Add active class to the current button (highlight it)
  1400. var btnContainer = document.getElementById("myBtnContainer");
  1401. var btns = btnContainer.getElementsByClassName("btn");
  1402. for (var i = 0; i < btns.length; i++) {
  1403. btns[i].addEventListener("click", function(){
  1404. var current = document.getElementsByClassName("active");
  1405. current[0].className = current[0].className.replace(" active", "");
  1406. this.className += " active";
  1407. });
  1408. }
  1409. </script>
  1410.  
  1411. </html>
Advertisement
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!