<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <header> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <div class="container"> <a href="index.php" class="navbar-brand"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a href="index.php" class="nav-link">Home</a> </li> <li class="nav-item"> <a href="aboutforum.php" class="nav-link">About Forum</a> </li> <li class="nav-item"> <a href="tc.php" class="nav-link">Terms & Condition</a> </li> </ul> </div> </div> </nav> <div id="intro" class="view hm-black-strong"> <div class="caption text-center"> <h1>WELCOME TO KWARA STATE POLYTECHNIC STUDENTS' FORUM</h1> <h3>Already Gotten Matric No.:</h3> <a href="signin.php" class="btn btn-outline-white">Sign In<i class="fas fa-sign-in-alt ml-2"></i></a> </div> </div> </header>

@import url('https://fonts.googleapis.com/css?family=Lato:400,700'); html, body, header, #intro { height: 100%; } #intro { background: url("https://studentservices.okstate.edu/sites/default/files/weatpromopic.png")no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .navbar { text-transform: uppercase; font-weight: 700; font-size: .9rem; letter-spacing: .1rem; background: rgba(0, 0, 0, 0.6)!important; } .navbar-brand img { height: 3rem; } .navbar-nav li { padding-right: .5rem; } .navbar-dark .navbar-nav .nav-link { color: white; padding-top: .8rem; } .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link:hover { color: 1ebba3; } .caption { width: 100%; max-width: 100%; position: absolute; top: 18%; z-index: 1; color: white; text-transform: uppercase; } .caption h1 { font-size: 3rem; font-weight: 700; letter-spacing: .3rem; text-shadow: .1rem .1rem .8rem black; padding-bottom: 1rem; } .caption h3 { font-weight: 700; font-size: 2rem; letter-spacing: .1rem; text-shadow: .1rem .1rem .8rem black; padding-bottom: 1rem; } .btn-outline-white { border-radius: 1rem; letter-spacing: .1rem; text-shadow: .1rem .1rem .8rem black; font-size: .9rem; font-weight: 700; }