API tools faq
paste
southcodes

fly all in one page

southcodes
Sep 9th, 2019 (edited)
943
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 17.66 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.     - page #16 'fly' by skye southcodes.tumblr.com
  3.     - modify as you please but please do not touch the credit
  4.     - any errors? need help? have questions? let me know!
  5.     southcodes.tumblr.com/
  6.    
  7.     - inspired by https://dribbble.com/shots/4194278-Conceptual-Dashboard-UI-Team-Members-Screen
  8.    
  9.     - icon font by http://honeybee.suiomi.com
  10.     - fadein tabs by https://www.w3schools.com/howto/howto_js_tabs.asp
  11.     - normalize css by http://necolas.github.io/normalize.css/
  12.     - fonts by https://fonts.google.com
  13.  
  14.  -->
  15.  
  16. <!DOCTYPE html>
  17. <html>
  18. <head>
  19.     <title>{title}</title>
  20.  
  21.     <meta charset="UTF-8">
  22.     <meta name="viewport" content="width=device-width">
  23.  
  24.     <link rel="shortcut icon" href="{favicon}">
  25.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  26.     {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  27.  
  28.     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700|Merriweather:900i" rel="stylesheet">
  29.     <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet"> <link rel="stylesheet" href="https://solrainha.github.io/honeybee/honeybee.css" >
  30.  
  31. <style>
  32.    
  33. body, figure{margin: 0;padding: 0}
  34. html{font-size: 14px}
  35. body {font: 1rem 'Open Sans', sans-serif;color:#333;background: #fafafa}
  36. a {text-decoration: none;color:green;} /* links color */
  37. a:hover {color:green;} /* links color hover */
  38. b {font-weight: 600}
  39.  
  40. ::-webkit-scrollbar-thumb:vertical {
  41.     background-color:green;
  42.     height: 1px;
  43.     border: 0;
  44. }
  45.  
  46. ::-webkit-scrollbar {
  47.     background-color: transparent;
  48.     height:1px;
  49.     width:3px;
  50. }
  51. /*  nav  */
  52.  
  53. nav ul,nav li {list-style-type:none;margin:0;padding:0;}
  54.  
  55.  
  56. /*  header  */
  57.  
  58. header {
  59.     position: fixed;top:0;bottom:0;left: 0;
  60.     width:25rem;
  61.     background-image: url('IMAGE URL'); /* sidebar/topbar background image*/
  62.     border-right: 1px solid #eee
  63.  
  64. }
  65. header #bg {
  66.     position: fixed;top:0;bottom:0;left: 0;
  67.     width:25rem;
  68.     background:rgba(255,255,255,.6);
  69. }
  70.  
  71. #inside {
  72.     width:50%;
  73.     border:1px solid #eee;
  74.     margin:7rem auto 0;
  75.     padding:1.5rem 1rem;
  76.     background: white;
  77.     text-align: center;
  78. }
  79.  
  80. figure.himg {
  81.     width:7rem;
  82.     height:7rem;
  83.     margin:0 auto 0;}
  84. img.himg {
  85.     width: 100%;
  86.     border-radius: 100%
  87. }
  88.  
  89. h1 {
  90.     font: 900 2rem 'Merriweather', serif;
  91.     letter-spacing: .1rem
  92. }
  93.  
  94. #desc {font-size:.9rem;}
  95.  
  96. /*  navi  */
  97. #navi {margin-top: 2rem}
  98. #navi .btn {
  99.     background: #c1e3d7;    /* sidebar/topbar links background color */
  100.     border:0;
  101.     display: block;
  102.     text-align: right;
  103.     width: 100%;
  104.     margin: 1rem 0;
  105.     padding: .5rem;
  106.     text-transform: uppercase;
  107.     color: green;   /* sidebar/topbar links color */
  108.     font-weight: 700;
  109.     letter-spacing: .06rem;
  110.     font-size: 1.1rem;
  111.     cursor: pointer;}
  112. #navi a:last-of-type {margin-bottom: 0}
  113.  
  114.  
  115.  
  116. /*   MAIN   */
  117.  
  118. h2 {
  119.     font: 900 2rem 'Merriweather', serif;
  120.     margin:0 0 1rem 1rem;
  121. }
  122.  
  123. #links h3 {
  124.     font: 900 1.4rem 'Merriweather', serif;
  125.     margin:1.5rem 0;
  126. }
  127.  
  128. .tabcontent {
  129.     animation: fadeEffect 1s;
  130.     display: none;
  131.     background: white;
  132.     padding: 1rem;
  133.     width: 50rem;
  134.     max-width:95vw;
  135.     border:1px solid #c1e3d7;   /* tab border color */
  136.     margin: 7rem 0 3rem 30rem
  137. }
  138. @keyframes fadeEffect {
  139.   from {opacity: 0;}
  140.   to {opacity: 1;}
  141. }
  142.  
  143. /*  ABOUT TAB  */
  144.  
  145. #details {
  146.     background: #fafafa;
  147.     border:1px solid #eee;
  148.     max-width:calc(100% - 17rem);
  149.     padding:1rem;
  150.     box-sizing: border-box;
  151. }
  152.  
  153. #details .th  {
  154.     font-size:1.6rem;
  155.     color:#777;
  156.     margin-right: .5rem;
  157.     vertical-align: middle;}
  158.  
  159. #details p {margin:1.3rem 0;border-bottom:1px solid #ccc;padding-bottom: 1rem}
  160. #details p:first-of-type {margin-top:0;}
  161. #details p:last-of-type {margin-bottom:0;padding-bottom:0;border-bottom:0;}
  162.  
  163. figure.aimg {
  164.     float:right;
  165.     width: 15rem
  166. }
  167. img.aimg {
  168.     width: 100%
  169. }
  170. .about{line-height: 180%;margin-top: 2rem}
  171. .about:first-letter{background:#c1e3d7;padding:.3rem .5rem;font-size: 1.3rem;font-weight: 600;margin-right:.3rem;text-transform: uppercase;}
  172.  
  173.  
  174.  
  175.  
  176. /*  LINKS TAB */
  177.  
  178. /* links */
  179. #navlinks ul li{
  180.     transition-duration: .2s;
  181.     background: #cae6dc;
  182.     padding:.4rem .4rem .4rem .5rem;
  183.     display: inline-block;
  184.     border-left:4px solid #74ad99;  /* border left color links tab */
  185.     font-weight: 600;
  186.     margin-right:1rem;
  187.     font-size: 1.1rem;
  188.     text-transform:uppercase;
  189.     box-shadow: 1px 1px 2px #ddd;
  190.     letter-spacing:.04rem;}
  191. #navlinks ul li a {color:white;}
  192.  
  193. #navlinks ul li:hover{ background:white;}
  194. #navlinks ul li:hover a {color:#c1e3d7} /* links tab links color hover */
  195.  
  196. /* tags */
  197.  
  198. #navtags ul li{
  199.     display:inline-block;
  200.     border-bottom:1px dotted green;    /* border bottom tags color */
  201.     margin-right:1rem;
  202.     text-transform:uppercase;
  203.     font-size:.95rem;
  204. }
  205. #navtags ul li:last-of-type {margin-right:0;}
  206.  
  207. #navtags ul li a {
  208.     color:#7fb099;    /* tags color */
  209.     display:block;
  210.     padding:0 .3rem .04rem;}
  211.  
  212. #navtags ul li:hover {border:0}
  213. #navtags ul a:hover {
  214.     color:white;     /* tags color hover */
  215.     background:#cae6dc; /* tags background hover */
  216. }
  217.  
  218.  
  219.  
  220. /*  FRIENDS TAB  */
  221. #friends {padding-bottom:0;}
  222.  
  223. .friend {
  224.     background: #fafafa;
  225.     display: inline-block;
  226.     width: calc((100% - 5rem) / 4);
  227.     border:1px solid #c1e3d7;  /* friends border color */
  228.     padding: .7rem;
  229.     text-align:center;
  230.     vertical-align: top;box-sizing: border-box;
  231.     margin: 0 .5rem 1rem;
  232. }
  233.  
  234. figure.fimg {}
  235. img.fimg {width: 100%;border-radius: 100%}
  236.  
  237. .inside {
  238.     margin-top:.7rem;
  239.     background: #ceebe1;
  240.     padding:.6rem .4rem;}
  241.  
  242. .name {
  243.     font-weight: 600;
  244.     margin:0 0 .3rem 0;
  245. }
  246.  
  247. .url {
  248.     margin: 0;
  249.     font-size: .85rem;
  250.     word-break:break-all;
  251.  
  252. }
  253. .url a {color:green;}
  254.  
  255. .info {
  256.     padding:.2rem;
  257.     height: 4rem;
  258.     font-size: .9rem;
  259.     margin:.7rem 0 0 0;
  260.     overflow: auto;
  261. }
  262.  
  263.  
  264. /* FAQ TAB */
  265. #faq h2 {margin-bottom:1.5rem;}
  266. .ask {
  267.     margin-bottom:1.5rem;
  268. }
  269. .ask:last-of-type {
  270.     margin-bottom:0;
  271. }
  272. .th-question-o {
  273.     font-size:2rem;color: white;vertical-align:middle;margin-right:.7rem;
  274. }
  275.  
  276. .q {
  277.     background:#ceebe1;    /* background question color */
  278.     padding:.6rem;
  279.     margin:0;
  280.     font-weight:600;
  281. }
  282.  
  283. .a {
  284.     background:#fbfbfb; /* answer question color */
  285.     border:1px solid #ceebe1;
  286.     padding:.6rem;
  287.     margin:0;
  288.     font-size:.95rem;
  289.     line-height:170%;
  290. }
  291.  
  292. /* blogroll*/
  293.  
  294.  
  295. #blogroll .blog {display:inline-block; margin:0 .5rem 1rem;vertical-align:top;
  296. width:calc((100% - 5rem) / 4);
  297. background:#f7fff8; /* background blogroll color */
  298. border:1px solid #eee;box-sizing:border-box;height:163px;padding:1rem;overflow:auto;}
  299. .blog p{color:#333;}
  300. .brimg {border-radius:4px;width:4rem;margin:0;display:block;transition-duration:.2s;}
  301. .brname {margin:1rem 0 0;font-size:.8rem;display:block;font-weight:600;text-transform:uppercase;letter-spacing:.04rem;word-break:break-all;}
  302. .brtitle {margin:1rem 0 0;font-size:.85rem;}
  303. .blog:hover .brimg {box-shadow:#90b092 1px 1px 3px;}
  304.  
  305.  
  306. /* MEDIAS dont touch*/
  307.  
  308. @media only screen and (min-height:0px) and (max-height:767px) {
  309.         header {
  310.             position: absolute;top:0;bottom:auto;left: 0;right:0;
  311.             width:100%;height:21rem;
  312.             border-right: 0;border-bottom: 1px solid #eee;
  313.  
  314.         }
  315.         header #bg {
  316.             position: absolute;top:0;bottom:auto;left: 0;right:0;
  317.             width:100%;height:21rem;
  318.         }
  319.  
  320.         #inside {
  321.             width: 40rem;
  322.             max-width:85vw;
  323.             height:16rem;
  324.             margin:1rem auto 0;
  325.         }
  326.  
  327.         figure.himg {display: inline-block;
  328.             margin:0 1rem 0;
  329.             vertical-align: middle;}
  330.  
  331.         #subs {display: inline-block;
  332.             vertical-align: middle;}
  333.  
  334.         /*  navi  */
  335.         #navi {margin-top: 2rem}
  336.         #navi .btn {
  337.             border:0;
  338.             display: inline-block;
  339.             text-align: center;
  340.             width: auto;
  341.             margin: 0 1rem 1.5rem 0;
  342.             padding: .5rem;
  343.             text-transform: uppercase;
  344.             font-weight: 700;
  345.             letter-spacing: .06rem;
  346.             font-size: 1.1rem;
  347.             cursor: pointer;}
  348.         #navi .btn:last-of-type {margin-right:0;}
  349.        
  350.         .tabcontent {
  351.             margin: 23rem auto 3rem;
  352.         }
  353.  
  354. }
  355.  
  356.  
  357.  
  358. /*DONT TOUCH*/
  359. footer {z-index:9999;position:fixed;bottom:1.5rem;right:2rem;line-height:0%;padding:1rem .5rem;font-size:.8rem;background:white;font-family:'Open Sans', sans-serif;}
  360.  
  361. </style>
  362.  
  363.  
  364. </head>
  365. <body>
  366.  
  367. <header><div id="bg">
  368.  
  369.     <article id="inside">
  370.         <figure class="himg"><img class="himg" src="https://i.imgur.com/QFI85QG.png"/></figure>
  371.    
  372.     <div id="subs">
  373.         <h1>fly</h1>
  374.  
  375.         <p id="desc">little birds can remember...</p>
  376.     </div>
  377.     <article>
  378.  
  379. <div id="navi">
  380.     <a class="btn" href="/">home</a>
  381.     <a class="btn" onclick="openTab(event, 'inbox')">inbox</a>
  382.     <a class="btn" onclick="openTab(event, 'about')" id="defaultOpen">about</a>
  383.     <a class="btn" onclick="openTab(event, 'links')">links & tags</a>
  384.     <a class="btn" onclick="openTab(event, 'friends')">friends</a>
  385.     <a class="btn" onclick="openTab(event, 'faq')">FAQ</a>
  386.     <a class="btn" onclick="openTab(event, 'blogroll')">blogroll</a>
  387. </div>
  388.    
  389. </div></header>
  390.  
  391.  
  392. <main>
  393.  
  394. <!-- INBOX SECTION START -->
  395.  
  396. <div id="inbox" class="tabcontent">
  397.  
  398.   <h2>inbox</h2>
  399.  
  400.   <p>Please read my FAQ first!</p>
  401.  
  402.   <iframe frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/{name}.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe>
  403.  
  404. </div>
  405.  
  406. <!-- INBOX SECTION END -->
  407.  
  408.  
  409.  
  410.  
  411. <!-- LINKS SECTION START -->
  412.  
  413. <div id="links" class="tabcontent">
  414.   <h2>links</h2>
  415.  
  416.   <article class="links"><nav id="navlinks"><ul>
  417.      
  418.       <h3>social</h3>
  419.  
  420.       <li><a href="#">twitter</a></li>
  421.       <li><a href="#">instagram</a></li>
  422.       <li><a href="#">facebook</a></li>
  423.  
  424.       <h3>blogs</h3>
  425.  
  426.       <li><a href="#">side blog</a></li>
  427.       <li><a href="#">aes blog</a></li>
  428.  
  429.   </ul></nav></article>
  430.  
  431.   <h2 style="margin-top:2.5rem">tags</h2>
  432.  
  433.   <article class="tags"><nav id="navtags"><ul>
  434.  
  435.     <li><a href="#">fashion</a></li>
  436.     <li><a href="#">flowers</a></li>
  437.     <li><a href="#">crystals</a></li>
  438.     <li><a href="#">astrology</a></li>
  439.  
  440.   </ul></nav></article>
  441.  
  442. </div>
  443.  
  444. <!-- LINKS SECTION END -->
  445.  
  446.  
  447.  
  448.  
  449.  
  450. <!-- FRIENDS SECTION START -->
  451.  
  452. <div id="friends" class="tabcontent">
  453.  
  454.   <h2>friends</h2>
  455.  
  456.   <article class="friend">
  457.       <figure class="fimg"><img src="https://i.imgur.com/bGqixuT.png" class="fimg"></figure>
  458.  
  459.       <div class="inside">
  460.         <p class="name">Skye</p>
  461.         <p class="url"><a href="#">transgerard</a></p>
  462.       </div>
  463.      
  464.       <p class="info">your blood still runs on promises, one day you'll be okay</p>
  465.  </article>
  466.  
  467.  <article class="friend">
  468.      <figure class="fimg"><img src="https://i.imgur.com/vce674S.png" class="fimg"></figure>
  469.  
  470.      <div class="inside">
  471.        <p class="name">Skye</p>
  472.        <p class="url"><a href="#">transgerard</a></p>
  473.      </div>
  474.      
  475.      <p class="info">your blood still runs on promises, one day you'll be okay your blood still runs on promises, one day you'll be okay</p>
  476.  </article>
  477.  
  478.  <article class="friend">
  479.      <figure class="fimg"><img src="https://i.imgur.com/vhWVke3.png" class="fimg"></figure>
  480.  
  481.      <div class="inside">
  482.        <p class="name">Skye</p>
  483.        <p class="url"><a href="#">transgerard</a></p>
  484.      </div>
  485.      
  486.      <p class="info">your blood still runs on promises, one day you'll be okay your blood still runs on promises, one day you'll be okay</p>
  487.  </article>
  488.  
  489.  <article class="friend">
  490.      <figure class="fimg"><img src="https://i.imgur.com/hAQjasN.png" class="fimg"></figure>
  491.  
  492.      <div class="inside">
  493.        <p class="name">Skye</p>
  494.        <p class="url"><a href="#">transgerard</a></p>
  495.      </div>
  496.      
  497.      <p class="info">your blood still runs on promises, one day you'll be okay your blood still runs on promises, one day you'll be okay</p>
  498.  </article>
  499.  
  500.  <article class="friend">
  501.      <figure class="fimg"><img src="https://i.imgur.com/Ew9Mnfw.png" class="fimg"></figure>
  502.  
  503.      <div class="inside">
  504.        <p class="name">Skye</p>
  505.        <p class="url"><a href="#">transgerard</a></p>
  506.      </div>
  507.      
  508.      <p class="info">your blood still runs on promises, one day you'll be okay</p>
  509.   </article>
  510.  
  511. </div>
  512.  
  513. <!-- FRIENDS SECTION END -->
  514.  
  515.  
  516.  
  517.  
  518.  
  519. <!-- FAQ SECTION START -->
  520.  
  521. <div id="faq" class="tabcontent">
  522.     <h2>faq</h2>
  523.    
  524.     <div class="ask">
  525.     <p class="q"><span class="th th-question-o"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam gravida tortor vel urna congue finibus. Mauris quam massa, hendrerit sit amet congue id, elementum eu mi. Aenean non egestas metus?</p>
  526.    
  527.     <p class="a">Nulla tincidunt, lacus sit amet tincidunt interdum, dolor leo cursus nisi, non fermentum sem elit nec est. Donec ullamcorper risus quis egestas blandit. Curabitur convallis egestas urna, eget luctus lorem bibendum ut. Fusce imperdiet arcu tortor, ac mollis felis dictum eu.</p>
  528.     </div>    <div class="ask">
  529.     <p class="q"><span class="th th-question-o"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam gravida tortor vel urna congue finibus. Mauris quam massa, hendrerit sit amet congue id, elementum eu mi. Aenean non egestas metus?</p>
  530.    
  531.     <p class="a">Nulla tincidunt, lacus sit amet tincidunt interdum, dolor leo cursus nisi, non fermentum sem elit nec est. Donec ullamcorper risus quis egestas blandit. Curabitur convallis egestas urna, eget luctus lorem bibendum ut. Fusce imperdiet arcu tortor, ac mollis felis dictum eu.</p>
  532.     </div>    <div class="ask">
  533.     <p class="q"><span class="th th-question-o"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam gravida tortor vel urna congue finibus. Mauris quam massa, hendrerit sit amet congue id, elementum eu mi. Aenean non egestas metus?</p>
  534.    
  535.     <p class="a">Nulla tincidunt, lacus sit amet tincidunt interdum, dolor leo cursus nisi, non fermentum sem elit nec est. Donec ullamcorper risus quis egestas blandit. Curabitur convallis egestas urna, eget luctus lorem bibendum ut. Fusce imperdiet arcu tortor, ac mollis felis dictum eu.</p>
  536.     </div>    <div class="ask">
  537.     <p class="q"><span class="th th-question-o"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam gravida tortor vel urna congue finibus. Mauris quam massa, hendrerit sit amet congue id, elementum eu mi. Aenean non egestas metus?</p>
  538.    
  539.     <p class="a">Nulla tincidunt, lacus sit amet tincidunt interdum, dolor leo cursus nisi, non fermentum sem elit nec est. Donec ullamcorper risus quis egestas blandit. Curabitur convallis egestas urna, eget luctus lorem bibendum ut. Fusce imperdiet arcu tortor, ac mollis felis dictum eu.</p>
  540.     </div>
  541.    
  542.    
  543. </div>
  544.  
  545.  
  546. <!-- FAQ SECTION END -->
  547.  
  548.  
  549.  
  550. <!-- BLOGROLL START-->
  551.  
  552. <article id="blogroll" class="tabcontent">
  553.   <h2>blogroll</h2>
  554.  
  555.  
  556.     {block:Following}
  557.     {block:Followed}
  558.             <a href="{FollowedURL}" target="_blank"><div class="blog">
  559.                 <img class="brimg" src="{FollowedPortraitURL-96}"/>
  560.                 <p class="brname">{FollowedName}</p>
  561.                 <p class="brtitle">{FollowedTitle}</p>
  562.             </div></a>
  563.     {/block:Followed}
  564.     {/block:Following}
  565. </article>
  566.  
  567. <!-- BLOGROLL END-->
  568.  
  569.  
  570.  
  571.  
  572. <!-- ABOUT SECTION START -->
  573.  
  574.  
  575. <div id="about" class="tabcontent">
  576.   <h2>about</h2>
  577.  
  578.     <figure class="aimg"><img class="aimg" src="https://images.unsplash.com/photo-1506634064465-7dab4de896ed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" align="right"></figure>
  579.  
  580.   <div id="details">
  581.       <p><span class="th th-user"></span> Skye</p>
  582.       <p><span class="th th-calendar-1"></span> 21</p>
  583.       <p><span class="th th-location-4"></span> argentina</p>
  584.       <p><span class="th th-check-mark"></span> cats, food, internet</p>
  585.       <p><span class="th th-cross"></span> capitalism, wet socks</p>
  586.   </div>
  587.    
  588.     <article class="about">
  589.       <p>morem ipsum dolor sit amet, consectetur adipiscing elit. Donec est quam, egestas non semper ac, ultrices et ipsum. In id justo non ipsum eleifend viverra finibus sit amet ligula. In orci dolor, aliquam sed magna non, tincidunt auctor tortor. Quisque interdum massa sed est malesuada maximus a tincidunt ante.</p>
  590.  
  591.       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ligula dolor, dignissim ut elementum vel, consequat ac dui. Sed bibendum sapien quis volutpat mollis. Fusce eget libero aliquet, euismod quam et, sodales odio. Nulla tellus eros, facilisis non iaculis nec, sollicitudin euismod magna. Duis sed venenatis felis, at tempor tellus. Nunc lacinia, lacus eget mollis rutrum, sapien tortor molestie ante, sed malesuada leo mauris consequat elit.</p>
  592.     </article>
  593.  
  594. <div style="clear: both;"></div>
  595. </div>
  596.  
  597.  
  598. <!-- ABOUT SECTION END -->
  599.  
  600.  
  601.  
  602. </main>
  603.  
  604. <!--DONT TOUCH-->
  605. <footer><a href="https://southcodes.tumblr.com" target="_blank" title="southcodes">SC</a></footer>
  606.  
  607. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  608. <script>
  609. // $( document ).ready(function() {
  610. // });
  611. document.getElementById("defaultOpen").click();
  612.  
  613. function openTab(evt, cityName) {
  614.   // Declare all variables
  615.   var i, tabcontent, btn;
  616.  
  617.   // Get all elements with class="tabcontent" and hide them
  618.   tabcontent = document.getElementsByClassName("tabcontent");
  619.   for (i = 0; i < tabcontent.length; i++) {
  620.     tabcontent[i].style.display = "none";
  621.   }
  622.  
  623.   // Get all elements with class="btn" and remove the class "active"
  624.   btn = document.getElementsByClassName("btn");
  625.   for (i = 0; i < btn.length; i++) {
  626.     btn[i].className = btn[i].className.replace(" active", "");
  627.   }
  628.  
  629.   // Show the current tab, and add an "active" class to the button that opened the tab
  630.   document.getElementById(cityName).style.display = "block";
  631.   evt.currentTarget.className += " active";
  632. }
  633. </script>
  634. </body>
  635. </html>
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!