API tools faq
paste
drunkblushed

physical by drunkblushed

drunkblushed
Feb 8th, 2020 (edited)
3,570
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.12 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ♡ PHYSICAL 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. <title>{title}</title>
  17.  
  18. <link href="https://fonts.googleapis.com/css?family=Roboto:400,900&display=swap" rel="stylesheet">
  19.  
  20. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  21.  
  22. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  23. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  24. <script>
  25. (function($){
  26. $(document).ready(function(){
  27. $("a[title]").style_my_tooltips({
  28. tip_follows_cursor:true,
  29. tip_delay_time:90,
  30. tip_fade_speed:600,
  31. attribute:"title"
  32. });
  33. });
  34. })(jQuery);
  35. </script>
  36.  
  37. <style type="text/css">
  38.  
  39. /*----------------- FONTS -----------------*/
  40.  
  41. @font-face { font-family:"tokyo"; src: url('https://dl.dropbox.com/s/jgq18n62iha87v6/Tokyo-Regular.ttf'); }
  42.  
  43. @font-face { font-family: "creo"; src: url('https://dl.dropboxusercontent.com/s/uk7fcayvza8gd9t/Creo-ExtraBold.ttf') ;}
  44.  
  45. @font-face { font-family: "HeyAugust"; src: url('https://dl.dropboxusercontent.com/s/0382ld3skkgq97c/Hey%20August.ttf') ;}
  46.  
  47.  
  48.  
  49. /*----------------- TEXT STYLES -----------------*/
  50.  
  51. body{
  52. background-color: #f0eceb;
  53. font-family: "roboto";
  54. color:#4c4c4c;
  55. letter-spacing:1px;
  56. }
  57.  
  58. a:link, a:active, a:visited{
  59. color: #dca289;
  60. text-decoration:none;
  61. -webkit-transition: all 0.2s linear;
  62. -moz-transition: all 0.2s linear;
  63. transition: all 0.2s linear;
  64. text-transform:uppercase;
  65. }
  66.  
  67. a:hover {
  68. color:;
  69. -webkit-transition: all 0.2s linear;
  70. -moz-transition: all 0.2s linear;
  71. transition: all 0.2s linear;
  72. }
  73.  
  74. b,bold,strong{
  75. color:#eab4a2;
  76. text-transform:uppercase;
  77. }
  78.  
  79. em,i,italic{
  80. color:#f3dcb0;
  81. }
  82.  
  83. big{
  84. font-size:12px;
  85. font-family: "roboto";
  86. }
  87.  
  88. small,sup, sub{
  89. font-size:9px;
  90. }
  91.  
  92.  
  93.  
  94. .p { padding-top: 5px;}
  95. .ol, ul { margin-left: 30px; padding: 5px; }
  96. .ul { list-style-type: square; }
  97.  
  98. ::-webkit-scrollbar-thumb {
  99. display: none;
  100. }
  101.  
  102. ::-webkit-scrollbar {
  103. display: none;
  104. }
  105.  
  106. #s-m-t-tooltip {
  107. z-index: 999999999999999999;
  108. background: #fff;
  109. font-size: 8px;
  110. line-height: 13px;
  111. letter-spacing: 1.5px;
  112. text-transform: uppercase;
  113. color: #4c4c4c;
  114. font-weight:900;
  115. background-color:#f8f8f8;
  116. max-width: 150px;
  117. word-wrap: break-word;
  118. padding: 2px 5px 2px 6px;
  119. display: block;
  120. margin: 24px 14px 7px 12px;
  121. -webkit-transition: all 0.2s linear;
  122. -moz-transition: all 0.2s linear;
  123. transition: all 0.2s linear;
  124. }
  125.  
  126. ::-moz-selection { background: #f1ddd2; }
  127. ::selection { background: #f1ddd2; }
  128.  
  129. /*----------------- CONTAINERS & POSTS -----------------*/
  130.  
  131. #entries{
  132. padding:35px;
  133. z-index:99;
  134. margin: auto;
  135. left:0px;
  136. top:0px;
  137. bottom:0px;
  138. right:0px;
  139. width:750px;
  140. position:absolute;
  141. height:500px;
  142. overflow-y:scroll;
  143. background-color:#f4f4f4;
  144. overflow-x:hidden;
  145. border-radius:10px;
  146. }
  147.  
  148.  
  149. /*----------------- CUSTOMIZATIONS -----------------*/
  150.  
  151. @import "compass/css3";
  152.  
  153. .topwave{
  154. width: 700px;
  155. position: absolute;
  156. height: 700px;
  157. margin-top:-10px;
  158. }
  159.  
  160. .topwavefill{
  161. fill:#f1ddd2;
  162. }
  163.  
  164. #topwave{
  165. margin-left:85px;
  166. margin-top:-35px;
  167. width: 700px;
  168. height:700px;
  169. overflow: hidden;
  170. position:fixed;
  171. border-radius:0px 10px 0px 0px;
  172. }
  173.  
  174. .bottomwave{
  175. width: 650px;
  176. position: absolute;
  177. height: 650px;
  178. margin-left:-35px;
  179. margin-top:5px;
  180. }
  181.  
  182. .bottomwavefill{
  183. fill:#f3dec9;
  184. margin-left:-5px;
  185. }
  186.  
  187. #bottomwave{
  188. margin-left:-35px;
  189. margin-top:-115px;
  190. width: 650px;
  191. height:650px;
  192. overflow: hidden;
  193. position:fixed;
  194. border-radius:0px 0px 0px 10px;
  195. }
  196.  
  197. .sideimage {position:fixed;z-index:-9; width:200px; height:480px;margin-left:-35px; margin-top:-35px; }
  198.  
  199. .sideimage img {width:200px; height:480px; position:fixed; border-radius:10px 80px 0px 0px;}
  200.  
  201. #desc{
  202. width:210px; height:165px; padding:10px 20px 10px; font-size:8px; line-height:240%; text-transform:uppercase; text-align:justify; overflow:scroll;
  203. margin-top:285px; margin-left:0px; position:fixed; text-align-last:center;
  204. }
  205.  
  206. #maintitle{
  207. width:210px;
  208. height:80px;
  209. color:#dca289;
  210. position:fixed;
  211. font-family:"heyaugust";
  212. font-size:50px;
  213. text-align: center;
  214. padding:5px;
  215. overflow:auto;
  216. margin-top:430px;
  217. margin-left:-20px;
  218. z-index:99;
  219. }
  220.  
  221.  
  222. #sidelinks{
  223. width:200px;
  224. height:50px;
  225. padding:5px;
  226. margin-top:490px;
  227. margin-left:-20px;
  228. z-index:99;
  229. position:fixed;
  230. text-align:center;
  231. }
  232.  
  233. #sidelinks a{
  234. color:#4c4c4c;
  235. letter-spacing:2px;
  236. font-size:8.5px;
  237. }
  238. /*----------------- NAVIGATION & PAGINATION -----------------*/
  239.  
  240. .tabs{
  241. width:235.5px;
  242. font-size:10px;
  243. z-index:999999999999999999999999999999;
  244. position:fixed;
  245. text-transform:uppercase;
  246. margin-left:0px;
  247. text-align:center;
  248. margin-top:240px;
  249. padding:7px 7px 12px;
  250. letter-spacing:2px;
  251. line-height:100%;
  252. background-color:#f1ddd2;
  253. font-family:"tokyo";
  254. border-radius:5px;
  255. }
  256.  
  257. .tabs a{
  258. color:#4c4c4c;
  259. display:inline-block;
  260. margin:3px;
  261. }
  262.  
  263.  
  264. /*----------------- TABS STYLING -----------------*/
  265.  
  266. .tabcontent {
  267. margin: auto;
  268. left:210px;
  269. top:0px;
  270. bottom:0px;
  271. right:0px;
  272. position:absolute;
  273. width:560px;
  274. height:520px;
  275. padding:20px;
  276. color:#4c4c4c;
  277. z-index:999;
  278. -webkit-animation: fadeEffect 0.8s;
  279. animation: fadeEffect 0.8s;
  280. border-radius:10px;
  281. }
  282.  
  283. /*----------------- MUSE FILTERING -----------------*/
  284.  
  285. .filterDiv {
  286. float: left;
  287. background-color:#f8f8f8;
  288. color: #4c4c4c;
  289. width: 240px;
  290. height:120px;
  291. text-align: center;
  292. margin: 0px 10px 10px 0px;
  293. display: none;
  294. border-radius:10px;
  295. padding:15px;
  296. }
  297.  
  298. .show {
  299. display: block;
  300. }
  301.  
  302. .container {
  303. margin-top: 15px;
  304. margin-left:10px;
  305. overflow: scroll;
  306. width:560px;
  307. height:470px;
  308. border-radius:10px;
  309. }
  310.  
  311. .btn {
  312. border: none;
  313. outline: none;
  314. padding:7px 7px 12px;
  315. color:#4c4c4c;
  316. font-size:10px;
  317. font-family:"tokyo";
  318. cursor: pointer;
  319. border-radius:10px;
  320. letter-spacing:2px;
  321. }
  322.  
  323. .btn.active {
  324. background-color: #eab4a2;
  325. }
  326.  
  327. /*----------------- MUSES CODES -----------------*/
  328.  
  329. .musetitle{
  330. font-size:40px;
  331. color:#eab4a2;
  332. font-family:"primetime";
  333. text-align:center;
  334. margin-top:-30px;
  335. margin-bottom:22px;
  336. }
  337.  
  338. .musename{
  339. font-size:18px;
  340. font-family:"creo";
  341. color:#eab4a2;
  342. position:relative;
  343. padding:0px;
  344. text-align:center;
  345. line-height:20%;
  346. width:135px;
  347. height:10px;
  348. margin-left:105px;
  349. margin-top:5px;
  350. margin-bottom:5px;
  351. display:block;
  352. }
  353.  
  354.  
  355. .musedesc{
  356. width:135px;
  357. height:100px;
  358. font-size:8.5px;
  359. font-family:"roboto";
  360. text-align:justify;
  361. margin-left:105px;
  362. color:#4c4c4c;
  363. margin-top:0px;
  364. overflow:scroll;
  365. line-height:200%;
  366. }
  367.  
  368. .musedesc b{
  369. background-color:#f3dcb0;
  370. color:#4c4c4c;
  371. padding:3px;
  372. border-radius:2px;
  373. font-size:8px;
  374. letter-spacing:1px;
  375. }
  376.  
  377.  
  378. .muselinks{
  379. width:90px;
  380. height:30px;
  381. margin-left:0px;
  382. margin-top:-20px;
  383. text-align:Center;
  384. position:relative;
  385. display:block;
  386. }
  387.  
  388. .muselinks a{
  389. color:;
  390. font-size:14px;
  391. padding-top:14px;
  392. padding:5px;
  393. }
  394.  
  395. .museimg img{
  396. width:90px;
  397. height:90px;
  398. float:left;
  399. display:inline;
  400. border-radius:50%;
  401. }
  402.  
  403.  
  404. /*----------------- CREDITS / DO NOT TOUCH! -----------------*/
  405. #credits{
  406. position:fixed;
  407. bottom:0px;
  408. right:10px;
  409. width:35px;
  410. height:35px;
  411. text-align:center;
  412. }
  413.  
  414. #credits a{
  415. font-weight:bold;
  416. font-family:"creo";
  417. font-size:24px;
  418. -webkit-text-fill-color: #eab4a2;
  419. }
  420.  
  421. #credits a:hover{
  422. font-family:"creo";
  423. -webkit-text-stroke: 1px #eab4a2;
  424. -webkit-text-fill-color: rgba(0, 0, 0, 0);
  425. }
  426.  
  427.  
  428.  
  429. </style>
  430.  
  431.  
  432. <link rel="shortcut icon" href="{Favicon}">
  433.  
  434. </head>
  435.  
  436. <body>
  437.  
  438. <div id="tabsMuses" class="tabcontent" style="overflow:hidden;">
  439.  
  440. <div id="myBtnContainer" style="text-align:right;">
  441. <button class="btn active" onclick="filterSelection('all')">ALL</button>
  442. <button class="btn" onclick="filterSelection('homme')"> homme</button>
  443. <button class="btn" onclick="filterSelection('femme')"> femme</button>
  444. <button class="btn" onclick="filterSelection('nb')"> non-binary</button>
  445. <button class="btn" onclick="filterSelection('open')"> open</button>
  446. <button class="btn" onclick="filterSelection('closed')"> closed</button>
  447. </div>
  448.  
  449. <div class="container">
  450.  
  451.  
  452. <!--MUSE-->
  453. <div class="filterDiv homme open"><!--category-->
  454.  
  455. <div class="museimg">
  456. <img src="https://via.placeholder.com/90x90"></img>
  457. </div>
  458.  
  459. <div class="musename">red</div>
  460.  
  461. <div class="musedesc">muse details can go right here! it's okay, this overflows anyway, so type away! wow, look at all of this space for details! you can put stats or even a whole ass bio if you feel like it! isn't that cool?</div>
  462.  
  463. <div class="muselinks">
  464. <a href="/"><span class="th th-heart-1" title="musings"></span></a>
  465. <a href="/"><span class="th th-quote-down" title="interactions"></span></a>
  466. <a href="/"><span class="th th-pinterest" title="pinterest"></span></a>
  467. </div>
  468. </div><!--END MUSE-->
  469.  
  470.  
  471.  
  472.  
  473. <!--MUSE-->
  474. <div class="filterDiv femme closed"><!--category-->
  475.  
  476. <div class="museimg">
  477. <img src="https://via.placeholder.com/90x90"></img>
  478. </div>
  479.  
  480. <div class="musename">blue</div>
  481.  
  482. <div class="musedesc">
  483. <b>name</b> name goes here <br/>
  484. <b>age</b> xx years old </br/>
  485. muse details can go right here! it's okay, this overflows anyway, so type away! wow, look at all of this space for details! you can put stats or even a whole ass bio if you feel like it! isn't that cool?</div>
  486.  
  487. <div class="muselinks">
  488. <a href="/"><span class="th th-heart-1" title="musings"></span></a>
  489. <a href="/"><span class="th th-quote-down" title="interactions"></span></a>
  490. <a href="/"><span class="th th-pinterest" title="pinterest"></span></a>
  491. </div>
  492. </div><!--END MUSE-->
  493.  
  494.  
  495.  
  496. <!--MUSE-->
  497. <div class="filterDiv nonbinary open"><!--category-->
  498.  
  499. <div class="museimg">
  500. <img src="https://via.placeholder.com/90x90"></img>
  501. </div>
  502.  
  503. <div class="musename">yellow</div>
  504.  
  505. <div class="musedesc">
  506. <b>name</b> name goes here <br/>
  507. <b>age</b> xx years old </br/>
  508. muse details can go right here! it's okay, this overflows anyway, so type away! wow, look at all of this space for details! you can put stats or even a whole ass bio if you feel like it! isn't that cool?</div>
  509.  
  510. <div class="muselinks">
  511. <a href="/"><span class="th th-heart-1" title="musings"></span></a>
  512. <a href="/"><span class="th th-quote-down" title="interactions"></span></a>
  513. <a href="/"><span class="th th-pinterest" title="pinterest"></span></a>
  514. </div>
  515. </div><!--END MUSE-->
  516.  
  517.  
  518.  
  519.  
  520. <!--MUSE-->
  521. <div class="filterDiv femme closed"><!--category-->
  522.  
  523. <div class="museimg">
  524. <img src="https://via.placeholder.com/90x90"></img>
  525. </div>
  526.  
  527. <div class="musename">green</div>
  528.  
  529. <div class="musedesc">
  530. muse details can go right here! it's okay, this overflows anyway, so type away! wow, look at all of this space for details! you can put stats or even a whole ass bio if you feel like it! isn't that cool?</div>
  531.  
  532. <div class="muselinks">
  533. <a href="/"><span class="th th-heart-1" title="musings"></span></a>
  534. <a href="/"><span class="th th-quote-down" title="interactions"></span></a>
  535. <a href="/"><span class="th th-pinterest" title="pinterest"></span></a>
  536. </div>
  537. </div><!--END MUSE-->
  538.  
  539.  
  540.  
  541. <!--MUSE-->
  542. <div class="filterDiv homme open"><!--category-->
  543.  
  544. <div class="museimg">
  545. <img src="https://via.placeholder.com/90x90"></img>
  546. </div>
  547.  
  548. <div class="musename">violet</div>
  549.  
  550. <div class="musedesc">muse details can go right here! it's okay, this overflows anyway, so type away! wow, look at all of this space for details! you can put stats or even a whole ass bio if you feel like it! isn't that cool?</div>
  551.  
  552. <div class="muselinks">
  553. <a href="/"><span class="th th-heart-1" title="musings"></span></a>
  554. <a href="/"><span class="th th-quote-down" title="interactions"></span></a>
  555. <a href="/"><span class="th th-pinterest" title="pinterest"></span></a>
  556. </div>
  557. </div><!--END MUSE-->
  558.  
  559.  
  560.  
  561.  
  562. <!--MUSE-->
  563. <div class="filterDiv nonbinary closed"><!--category-->
  564.  
  565. <div class="museimg">
  566. <img src="https://via.placeholder.com/90x90"></img>
  567. </div>
  568.  
  569. <div class="musename">orange</div>
  570.  
  571. <div class="musedesc">
  572. <b>name</b> name goes here <br/>
  573. <b>age</b> xx years old </br/>
  574. muse details can go right here! it's okay, this overflows anyway, so type away! wow, look at all of this space for details! you can put stats or even a whole ass bio if you feel like it! isn't that cool?</div>
  575.  
  576. <div class="muselinks">
  577. <a href="/"><span class="th th-heart-1" title="musings"></span></a>
  578. <a href="/"><span class="th th-quote-down" title="interactions"></span></a>
  579. <a href="/"><span class="th th-pinterest" title="pinterest"></span></a>
  580. </div>
  581. </div><!--END MUSE-->
  582.  
  583.  
  584.  
  585. <!--MUSE-->
  586. <div class="filterDiv homme open"><!--category-->
  587.  
  588. <div class="museimg">
  589. <img src="https://via.placeholder.com/90x90"></img>
  590. </div>
  591.  
  592. <div class="musename">black</div>
  593.  
  594. <div class="musedesc">
  595. <b>name</b> name goes here <br/>
  596. <b>age</b> xx years old </br/>
  597. muse details can go right here! it's okay, this overflows anyway, so type away! wow, look at all of this space for details! you can put stats or even a whole ass bio if you feel like it! isn't that cool?</div>
  598.  
  599. <div class="muselinks">
  600. <a href="/"><span class="th th-heart-1" title="musings"></span></a>
  601. <a href="/"><span class="th th-quote-down" title="interactions"></span></a>
  602. <a href="/"><span class="th th-pinterest" title="pinterest"></span></a>
  603. </div>
  604. </div><!--END MUSE-->
  605.  
  606.  
  607.  
  608.  
  609. <!--MUSE-->
  610. <div class="filterDiv femme closed"><!--category-->
  611.  
  612. <div class="museimg">
  613. <img src="https://via.placeholder.com/90x90"></img>
  614. </div>
  615.  
  616. <div class="musename">white</div>
  617.  
  618. <div class="musedesc">muse details can go right here! it's okay, this overflows anyway, so type away! wow, look at all of this space for details! you can put stats or even a whole ass bio if you feel like it! isn't that cool?</div>
  619.  
  620. <div class="muselinks">
  621. <a href="/"><span class="th th-heart-1" title="musings"></span></a>
  622. <a href="/"><span class="th th-quote-down" title="interactions"></span></a>
  623. <a href="/"><span class="th th-pinterest" title="pinterest"></span></a>
  624. </div>
  625. </div><!--END MUSE-->
  626.  
  627.  
  628.  
  629. <!--MUSE-->
  630. <div class="filterDiv nonbinary open"><!--category-->
  631.  
  632. <div class="museimg">
  633. <img src="https://via.placeholder.com/90x90"></img>
  634. </div>
  635.  
  636. <div class="musename">teal</div>
  637.  
  638. <div class="musedesc">muse details can go right here! it's okay, this overflows anyway, so type away! wow, look at all of this space for details! you can put stats or even a whole ass bio if you feel like it! isn't that cool?</div>
  639.  
  640. <div class="muselinks">
  641. <a href="/"><span class="th th-heart-1" title="musings"></span></a>
  642. <a href="/"><span class="th th-quote-down" title="interactions"></span></a>
  643. <a href="/"><span class="th th-pinterest" title="pinterest"></span></a>
  644. </div>
  645. </div><!--END MUSE-->
  646.  
  647.  
  648.  
  649.  
  650. <!--MUSE-->
  651. <div class="filterDiv femme closed"><!--category-->
  652.  
  653. <div class="museimg">
  654. <img src="https://via.placeholder.com/90x90"></img>
  655. </div>
  656.  
  657. <div class="musename">purple</div>
  658.  
  659. <div class="musedesc">
  660. <b>name</b> name goes here <br/>
  661. <b>age</b> xx years old </br/>
  662. muse details can go right here! it's okay, this overflows anyway, so type away! wow, look at all of this space for details! you can put stats or even a whole ass bio if you feel like it! isn't that cool?</div>
  663.  
  664. <div class="muselinks">
  665. <a href="/"><span class="th th-heart-1" title="musings"></span></a>
  666. <a href="/"><span class="th th-quote-down" title="interactions"></span></a>
  667.  
  668.  
  669. </div>
  670. </div><!--END MUSE-->
  671. </div></div><!--do not touch-->
  672.  
  673. <!----------------------CONTAINER---------------------->
  674. <div id="entries">
  675.  
  676.  
  677.  
  678. <!--do not touch-->
  679. <div id="topwave">
  680. <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">
  681. <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
  682. 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
  683. l0.5-401.6L246.6,0.5z" transform="translate(-103.12)"/>
  684. </svg>
  685. </div>
  686.  
  687. <div id="bottomwave">
  688. <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">
  689. <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
  690. 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)"/>
  691. </svg>
  692. </div>
  693. <!--do not touch-->
  694.  
  695.  
  696. <div id="maintitle">PHYSICAL</div>
  697.  
  698. <div id="sidelinks">
  699. <a href="/"><span class="th th-chevron-left"></span> GO BACK HOME</a>
  700. </div>
  701.  
  702. <div class="sideimage"><img src="https://66.media.tumblr.com/bedd495135c3f43fb9029a545b21581f/f433a51aaca12c66-79/s400x600/50cc839c77b1d5b0828b51db3bae6fb0a589f6d5.png" draggable="false"></div>
  703.  
  704.  
  705. </div><!----ENTRIES END---->
  706. </div>
  707.  
  708. <div id="credits">
  709. <a href="https://drunkblushed.tumblr.com/" title="made by dana">DB.</a></div>
  710. </body>
  711.  
  712.  
  713. <script>
  714. filterSelection("all")
  715. function filterSelection(c) {
  716. var x, i;
  717. x = document.getElementsByClassName("filterDiv");
  718. if (c == "all") c = "";
  719. for (i = 0; i < x.length; i++) {
  720. w3RemoveClass(x[i], "show");
  721. if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  722. }
  723. }
  724.  
  725. function w3AddClass(element, name) {
  726. var i, arr1, arr2;
  727. arr1 = element.className.split(" ");
  728. arr2 = name.split(" ");
  729. for (i = 0; i < arr2.length; i++) {
  730. if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  731. }
  732. }
  733.  
  734. function w3RemoveClass(element, name) {
  735. var i, arr1, arr2;
  736. arr1 = element.className.split(" ");
  737. arr2 = name.split(" ");
  738. for (i = 0; i < arr2.length; i++) {
  739. while (arr1.indexOf(arr2[i]) > -1) {
  740. arr1.splice(arr1.indexOf(arr2[i]), 1);
  741. }
  742. }
  743. element.className = arr1.join(" ");
  744. }
  745.  
  746. // Add active class to the current button (highlight it)
  747. var btnContainer = document.getElementById("myBtnContainer");
  748. var btns = btnContainer.getElementsByClassName("btn");
  749. for (var i = 0; i < btns.length; i++) {
  750. btns[i].addEventListener("click", function(){
  751. var current = document.getElementsByClassName("active");
  752. current[0].className = current[0].className.replace(" active", "");
  753. this.className += " active";
  754. });
  755. }
  756. </script>
  757.  
  758. </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!