{% extends "layout.html" %}
{% block content %}
<br><br>
<div class="container">
    <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"
                aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1"
                aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2"
                aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active" data-bs-interval="3000">
                <img src="static\uploads\content1.png" class="d-block w-100" alt="content1">
            </div>
            <div class="carousel-item" data-bs-interval="3000">
                <img src="static\uploads\content2.png" class="d-block w-100" alt="content2">
            </div>
            <div class="carousel-item" data-bs-interval="3000">
                <img src="static\uploads\content3.png" class="d-block w-100" alt="content3">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</div>
<br><br><br><br><br>
<div class="container">
    <div class="container-fluid">
        <br>
        <div class="row">
            <div class="col-md-7">
                <div class="jumbotron">
                    <h2>About Us</h2>
                    <br>
                    <p
                        style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif">
                        Aptitude KNSS provides facility to conduct online examination worldwide. It saves time as it
                        allows number of students to
                        give the exam at a time and displays the results as the test gets over, so no need to wait for
                        the result. It is
                        automatically generated by the server. Administrator has a privilege to create, modify and
                        delete the test papers and its
                        particular questions. User can register, login and give the test with his specific id, and can
                        see the results as well.
                    </p>
                    <p
                        style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif">
                        The main aim of our project is create a bridge between offline and online exams. We are trying
                        to do the project at best
                        level to satisfy all the end users. Reduces paper work due to online examination. It also
                        reduces workload and other work
                        relating to examination process. Online examination give result at same time so its time saving
                        process.
                    </p>
                </div>
            </div>
            <div class="col-md-5">
                <img src="static/uploads/about_content.png" class="img-fluid px-5 pb-5" alt="Content1" align="right">
            </div>
        </div>
    </div>
</div>
<br><br><br><br>
<div class="container">
    <div class="container-fluid">
        <h2>Meet the Developers</h2>
        <br>
        <div class="row">
            <div class="card-group">
                <div class="card border-secondary">
                    <img src="static/uploads/profile_sreekesh1.png" class="card-img-top" alt="...">
                    <div class="overlay">Sreekesh Iyer</div>
                </div>
                <div class="card border-secondary">
                    <img src="static/uploads/profile_ninad.jpg" class="card-img-top" alt="...">
                    <div class="overlay">Ninad Rao</div>
                </div>
                <div class="card border-secondary">
                    <img src="static/uploads/profile_vkrishna3.jpg" class="card-img-top" alt="...">
                    <div class="overlay">V Krishnasubramaniam</div>
                </div>
                <div class="card border-secondary">
                    <img src="static/uploads/profile_shalaka.jpeg" class="card-img-top" alt="...">
                    <div class="overlay">Shalaka Waghamale</div>
                </div>
            </div>
        </div>
        <br><br>
    </div>
</div>
<br>
<footer class="bg-dark text-center text-white">
    <br><br>
    <div class="container p-4">
        <section class="mb-4">
            <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-facebook-f"></i></a>
            <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-twitter"></i></a>
            <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-google"></i></a>
            <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-instagram"></i></a>
            <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-linkedin-in"></i></a>
            <a class="btn btn-outline-light btn-floating m-1" href="https://github.com/VKrishna2090/KNSS-Aptitude" role="button"><i class="fab fa-github"></i></a>
        </section>
        <br><br>
        <section class="mb-4">
            <p>
                Our priority with the design has been to make the process of creating and taking an exam convenient for either end of 
                the user spectrum, from a teacher or from the student's perspective.  It can observe that the information required can 
                be obtained with ease and accuracy in the computerized system. 
            </p>
        </section>
    </div>
    <br><br>
    <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
        <br>
        © 2021 Copyright:
        <a class="text-white" href="{{url_for('home')}}">KNSSAptitude.com</a>
        <br>
        <br>
        <br>
    </div>
    
</footer>
<button onclick="topFunction()" id="myBtn" title="Go to top" class="btn btn-outline-primary"><svg
        xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-90deg-up"
        viewBox="0 0 16 16" style="font-size: 5rem">
        <path fill-rule="evenodd"
            d="M4.854 1.146a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L4 2.707V12.5A2.5 2.5 0 0 0 6.5 15h8a.5.5 0 0 0 0-1h-8A1.5 1.5 0 0 1 5 12.5V2.707l3.146 3.147a.5.5 0 1 0 .708-.708l-4-4z" />
    </svg></button>
<style>
    #myBtn {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 30px;
        z-index: 99;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 15px;
        border-radius: 4px;
    }

    .overlay {
        position: absolute;
        bottom: 0;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.5);
        /* Black see-through */
        color: #f1f1f1;
        width: 100%;
        transition: .5s ease;
        opacity: 0;
        color: white;
        font-size: 20px;
        padding: 20px;
        text-align: center;
    }

    .card-group:hover .overlay {
        opacity: 1;
    }
</style>
<script>
    //Get the button
    var mybutton = document.getElementById("myBtn");

    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function () { scrollFunction() };

    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            mybutton.style.display = "block";
        } else {
            mybutton.style.display = "none";
        }
    }

    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
</script>
{% endblock %}