login.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head><title>Ead 2016</title>

        <!--Link CSS-->
        <link rel="stylesheet" type="text/css" href="stylesheet/style.css">
        <link rel="stylesheet" type="text/css" href="stylesheet/style-forms.css">

    <body>
        <div id="wrapper">
            <div id="header">
                <!--start Image Slider-->
                <center>
                    <img class="mySlides" src="img/my_product.png"/>
                    <img class="mySlides" src="img/my_product_1.png"/>
                </center>
                <!--end-->
            </div>
            <!--start Form Login-->

            <div class="login" style="height: 70%">
                <div class="form-style-5" style="margin: 5px auto;">
                    <form action="Login" method="POST">
                        <fieldset>
                            <legend align="center">Sign In First</legend>
                            <input type="text" name="username" placeholder="Username" required>
                            <input type="password" name="password" placeholder="Password" required>
                        </fieldset>
                        <input type="submit" value="Sign In" />
                    </form>
                </div>
            </div>

            <!--end-->

            <!--start footer-->
            <div id="footer">
                <h4>Copyright &copy; 2016 EAD</h4>
            </div>
            <!--end-->

        </div>
        <!--JS Image Slider-->
        <script>
            var myIndex = 0;
            carousel();

            function carousel() {
                var i;
                var x = document.getElementsByClassName("mySlides");
                for (i = 0; i < x.length; i++) {
                    x[i].style.display = "none";
                }
                myIndex++;
                if (myIndex > x.length) {
                    myIndex = 1
                }
                x[myIndex - 1].style.display = "block";
                setTimeout(carousel, 5000); // Change image every 5 seconds
            }
        </script>
        <!--end-->
    </body>
</html>