Untitled

<html>
    <head>
        <title>BHU MCA Portal</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="material.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script type="text/javascript" language="javascript">
       var slideIndex = 1;
        function plusSlides(n) {
            showSlides(slideIndex += n);
        }

        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            if (n > slides.length) {slideIndex = 1}
            if (n < 1) {slideIndex = slides.length}
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex-1].style.display = "block";
            dots[slideIndex-1].className += " active";
        }

        $(document).ready(function() { /// Wait till page is loaded

        $('#main').load('home.php #main', function() {
            showSlides(slideIndex);
        });

        var elements = document.getElementsByTagName('a');
            for(var i = 0, len = elements.length; i < len; i++) {
            elements[i].onclick = function () {
                $('#main').load(this.id+'.php #main', function() {
            showSlides(slideIndex);
            });
                var current = document.getElementsByClassName("active");
                current[0].className = current[0].className.replace("active", "");
                this.className += "active";
                }
            }

        }); //// End of Wait till page is loaded
        </script>
    </head>
    <div>
        <center><img src="img/logo_main.png" height="20%" width="30%"></center>
    </div>
    <ul>
        <li><a href="#" id="home" class="active">Home</a></li>
        <li><a href="#" id="portal">Attendance Portal</a></li>
        <li><a href="#" id="about" onclick="openLink(event, 'Right')">About</a></li>
        <li><a href="#" id="contact">Contact Us</a></li>
    </ul>

        <div style="display:flex;">
        <div id="main" style="flex-grow:1;"></div>
        <div style="line-height: 25px; font-style: italic;">
            <img src="img/mmm.jpg" style="display: inline-block;" >
            <p>"Religion of students is acquisition of knowledge"</p>
            <p align="right">~ Mahamana Pt Madan Mohan Malaviya</p>
        </div>
    </div>

</html>