index.html

<!DOCTYPE html>
<html>

        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Info Tech</title>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Aldrich">
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC">
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700">
            <link rel="stylesheet" href="assets/css/Data-Table.css">
            <link rel="stylesheet" href="assets/css/Data-Table2.css">
            <link rel="stylesheet" href="assets/css/Header-Blue.css">
            <link rel="stylesheet" href="assets/css/Highlight-Clean.css">
            <link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css">
            <link rel="stylesheet" href="assets/css/Navigation-Clean.css">
            <link rel="stylesheet" href="assets/css/styles.css">
            <link rel="stylesheet" href="css/bootstrap4-neon-glow.css">
            <link rel="stylesheet" href="css/animation.css">

        </head>
    <body>  
        <div class="b-dark" >
        <div style="background-color: #00000088;">    
            <header>
            <nav class="navbar  navbar-dark navbar-expand-sm">
                <div class="container">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
                        <span class="ion-navicon-round" style="font-size: 40px;"></span>
                    </button>
                    <a class="navbar-brand mr-auto ml-3 mt-1" href="#">
                        <h1> INFO TEC<span class="vim-caret">H</span></h1>
                    </a>
                    <div class="collapse navbar-collapse" id="Navbar">
                        <ul class="navbar-nav mr-auto" >
                                <li class="nav-item active ml-5"><a class="nav-link" href="#"> Home</a></li>
                                <li class="nav-item ml-5"><a class="nav-link" href="./login.html"> Student Details</a></li>
                                <li class="nav-item ml-5"><a class="nav-link" href="#event">Events</a></li>
                                <li class="nav-item ml-5"><a class="nav-link" href="./login.html">Login</a></li>
                    
                        </ul>
                    </div>
                </div>
            </nav>
            <div class="container hero">
                <div class="row">
                    <div class="col-lg-6 col-xl-5 offset-lg-3 offset-xl-3 justify-content-center align-self-center align-self-sm-center align-self-md-center align-self-lg-center align-self-xl-center">
                        <h1> IT Deptartment <span class="vim-caret">VJCET</span></h1>
                        <p style="color:white"><br>The department of Information Technology was commenced in the year 2001 . It offers undergraduate program with an annual intake of 60 students. The IT department in VJCET stands stupendous for being one among the only two NBA accredited
                            IT programs in Kerala. This branch deals with study, devise, development, execution, support and running of computer-based information systems.<br><br>
                        </p>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <a class="btn btn-outline-light btn-block action-button" role="button" href="./login.html"
                                        style="color:white;" ><span class="vim-caret">STUDENT DETAILS</span></a>
                                    </div>
                                    <div class="col-sm-6">
                                         
                                        <a class="btn btn-outline-light btn-block action-button" role="button" href="#event"
                                        style="color:white;" ><span class="vim-caret">EVENTS</span></a>
                                    </div>
                                </div>
                              
                          
                    </div>
                </div>
            </div>
            <div class="container p-5" id="event">
                <div class="p-3 row justify-content-center">
                    <h4 class="wordCarousel border-bottom   ">    
                        <span> Categories </span>  
                        <div> 
                <!--        Use classes 2,3, or 4 to match the number of words --> 
                            <ul class="flip4">
                                <li>Workshop</li>
                                <li>Webinars</li>
                                <li>Online class</li> 
                                <li>And more</li> 
                            </ul>
                        </div>  
                    </h4>
                    
                </div>
                <div class="row justify-content-center">
                    <div class="card " style=" color: black; width:400px ">
                        <img class="card-img-top" src="assets/img/event1.jpg" alt="Card image">
                        <div class="card-body">
                        <h4 class="card-title">WEBINAR</h4>
                        <p class="card-text">FUTURE OF TECHNOLOGY AFTER COVID-19</p>
                        <a href="./events.html" class="btn btn-primary stretched-link">Join Now</a>
                        </div>
                    </div>  
                </div>
            </div>
        <footer class="page-footer font-small" style="color: white;">
            <div class="footer-copyright text-center py-3">© 2020 Copyright:
              <a href="#" style="color: cornsilk;"> Beyond</a>
            </div>       
          </footer>
        </div>
    </div> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
    </body>
</html>    