<!DOCTYPE html>
    <html lang="en">
        <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>SeatStock</title>
        <link rel="stylesheet" href="style.css">
        <script src="static/script.js"></script>
        


    </head>

    <body>
<!--************************   HEADER  *********************-->
         <logo><a href="index.html">SeatStock</a></logo>
         <signinButton><a href="login">Sign In</a></signinButton>
         <faqButton><a href="static/FAQ.html">How it Works</a></faqButton>
         <tixButton><a href="tickets.html">Your Tickets</a></tixButton>
 
 
 
 
 
 <!--**************************  BODY  ***********************-->

          <div class="tab">
            <button class="tablinks" onclick="openCity(event, 'Tickets')">Tickets</button>
            <button class="tablinks" onclick="openCity(event, 'Active-Bids')">Active Bids</button>
            <button class="tablinks" onclick="openCity(event, 'Active-Asks')">Active Asks</button>
            <button class="tablinks" onclick="openCity(event, 'History')">History</button>
          </div>

         <div id="Tickets" class="tabcontent">
             <h3>London</h3>
             <p>London is the capital city of England.</p>
         </div>

         <div id="Active-Bids" class="tabcontent">
            <h3>Paris</h3>
            <p>Paris is the capital of France.</p> 
         </div>

         <div id="Active-Asks" class="tabcontent">
             <h3>Tokyo</h3>
             <p>Tokyo is the capital of Japan.</p>
         </div>
         <div id="History" class="tabcontent">
            <h3>Tokyo</h3>
            <p>Tokyo is the capital of Japan.</p>
        </div>
          




        <!--************************  SCRIPT  ****************-->
        <script>
            function openCity(evt, cityName) {
              var i, tabcontent, tablinks;
              tabcontent = document.getElementsByClassName("tabcontent");
              for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
              }
              tablinks = document.getElementsByClassName("tablinks");
              for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
              }
              document.getElementById(cityName).style.display = "block";
              evt.currentTarget.className += " active";
            }
        </script>

















    </body>






















</html>