<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MOHALI ROUTE 29</title>
    <link rel="stylesheet" href="routecss.css">
</head>
<body>
    <header>
        
        <a href="index.html"><img src="logo.jpg" alt="logo" height="100%" width="20%" ></a> 
     
     
     <a href="index.html"><h1>Chitkara U Travels</h1></a>
     <span id="image">
        <a href="https://www.chitkara.edu.in/" target="_blank"><img src="cu logo.jpg" alt="" height="125px" width="100%" ></a>
     </span>
     
    </header>

    <!--Horizontal navigation bar-->
    <nav id="horizontal">
        <a href="index.html">Home </a> &nbsp;&nbsp;
        <a href="#about">About </a> &nbsp;&nbsp;
        <a href="#notifications">Notfications</a> &nbsp;&nbsp;
        <a href="#">Covid Precautions</a> &nbsp;&nbsp;
        <a href="#contact">Contact </a> &nbsp;&nbsp;                   
    </nav>

    
    <!--Vertical navigation bar-->
    <nav id="vertical">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()" style="font-size: 30px;">&times;</a><br>
        <a href="index.html">Home </a>
        <a href="#about">About </a>
        <a href="#chandigarh">Routes</a>
        <a href="#notifications">Notfications</a>
        <a href="#">Covid Precautions</a>
        <a href="#contact">Contact </a><br> 
    </nav>


    <div style="background-color: black;">
        <span id="span" style="font-size: 20px; cursor: pointer; background-color: black; color: wheat;" onclick="openNav()">&#9776;</span>
    </div>


<!--Script-->
     <script>
        /*opens vertical navigation bar*/
        function openNav(){
            document.getElementById("vertical").style.width="250px";
        }
        /*closes vertical navigation bar*/
        function closeNav(){
            document.getElementById("vertical").style.width="0px";
        }
  
        /*changes horizontal navigation bar to vertical navigation bar at 480px & vice versa*/
        function navBar(x){
            if(x.matches){
                document.getElementById("span").innerHTML="&#9776;"
                document.getElementById("horizontal").innerHTML=""
            }else{
                document.getElementById("span").innerHTML=" ";
                document.getElementById("horizontal").innerHTML='<a href="index.html">Home </a> &nbsp;&nbsp;';
                document.getElementById("horizontal").innerHTML+='<a href="#about">About </a>&nbsp;&nbsp;';
                document.getElementById("horizontal").innerHTML+='<a href="#notifications">Notfications</a> &nbsp;&nbsp;';
                document.getElementById("horizontal").innerHTML+='<a href="#">Covid Precautions</a>&nbsp;&nbsp;';
                document.getElementById("horizontal").innerHTML+='<a href="#contact">Contact </a> ';

            }
        }

        var x = window.matchMedia("(max-width: 480px)");
        navBar(x)
        x.addListener(navBar)
    </script>
<a href="Mohali.html"><h2>MOHALI</h2></a>
    <h4>Route No: 29</h4>
    <h3>Driver Name: Gurpreet Singh
    </h3>
    <h3>Driver's Mobile No: 98151-42052
    </h3>
    <h3>Bus No: PB65AV 4583
    </h3>
    <main style="display: inline-block;">
        <time style="display: inline-block;">
            7:55 AM
            <br><br><br>
            7:57 AM
            <br><br><br>
            7:58 AM
            <br><br><br>
            7:59 AM
            <br><br><br>
            8:01 AM
            <br><br><br>
            8:03 AM
            <br><br><br>
            8:05 AM
            <br><br><br>
            8:45 AM
        </time>
        <div style="display: inline-block;">
            <div class="stop" > </div>
            <div class="c1"></div>
            <div class="stop"></div>
            <div class="c1"></div>
            <div class="stop"></div>
            <div class="c1"></div>
            <div class="stop"></div>
            <div class="c1"></div>
            <div class="stop"></div>
            <div class="c1"></div>
            <div class="stop"></div>
            <div class="stop"></div>
            <div class="c1"></div>
            <div class="stop"></div>
            <div class="c1"></div>
            
            
        </div>

        <stops style="display: inline-block;">
            Phase VI
            <br><br><br>
            Phase 01
            <br><br><br>
            Franco Hotel
            <br><br><br>
            Diplast Chowk
            <br><br><br>
            Madanpura Chowk
            <br><br><br>
            Phase 3/5 Lights
            <br><br><br>
            PCL Lights
            <br><br><br>
            Chitkara University

        </stops>
    </main>
    <map style="display: inline-block; ">
        <iframe src="https://www.google.com/maps/d/embed?mid=1Vv9mGNeHnf4up1aZv4W6I_xAZ8TnIRWY&ehbc=2E312F" width="640" height="480"></iframe>
    </map>

    
</body>
</html>