"SST102 TMA"
Bootstrap 4.1.1 Snippet by jllow002

Post to Facebook Tweet this

<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 ----------> <html lang="en"> <style> * {box-sizing: border-box;} body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .topnav { overflow: hidden; } .topnav a { float: left; display: block; color: black; text-align: left; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav b { float: right; display: block; color: black; text-align: left; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } .topnav a.active { color: black; } .topnav input[type=text] { float: right; padding: 6px; margin-top: 8px; margin-right: 16px; border: none; font-size: 17px; } .topnav input[type=text] { border: 1px solid #ccc; } } ul.breadcrumb li { display: inline; font-size: 14px; } ul.breadcrumb li+li:before { padding: 8px; color: black; content: ">"; } ul.breadcrumb li a { color: #0275d8; text-decoration: none; } ul.breadcrumb li a:hover { color: #01447e; text-decoration: underline; } </style> <body> <div class="topnav"> <a class="active">Welcome xxx</a> <b class="active">Date & Time</b> <input type="text" placeholder="Search.."> </div> <ul class="breadcrumb"> <li><a href="#">Student Academic Profile</a></li> <li><a href="#">Completed Courses</a></li> </ul> <nav class="navbar navbar-expand-sm navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo03"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item dropdown dmenu"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Student Self Service </a> <div class="dropdown-menu sm-menu"> <a class="dropdown-item" href="#">Withdrawal from programme</a> <a class="dropdown-item" href="#">Apply for Deferment</a> <a class="dropdown-item" href="#">View and Update Particualrs</a> </div> </li> <li class="nav-item dropdown dmenu"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Student Academic Profile </a> <div class="dropdown-menu sm-menu"> <style> a.dropdown-item:hover, a.dropdown-item:active {color: red;} </style> <a class="dropdown-item" href="#">Courses Currently Pursuing</a> <a class="dropdown-item" href="#">Completed Courses</a> <a class="dropdown-item" href="#">Credit/Course Exemptions</a> <a class="dropdown-item" href="#">Credit Recognition by CU</a> <a class="dropdown-item" href="#">Credit Recognition by Course</a> <a class="dropdown-item" href="#">Dissertation Submission Info</a> <a class="dropdown-item" href="#">Course Replacement</a> <a class="dropdown-item" href="#">Other Courses Taken</a> </div> </li> <li class="nav-item dropdown dmenu"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> TimeTable </a> <div class="dropdown-menu sm-menu"> <a class="dropdown-item" href="#">Course Timetable </a> <a class="dropdown-item" href="#">Personalized Examination Timetable</a> </div> </li> <li class="nav-item dropdown dmenu"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> E-Course </a> <div class="dropdown-menu sm-menu"> <a class="dropdown-item" href="#">eCourse Registration</a> <a class="dropdown-item" href="#">eCourse offer and Confirmation</a> <a class="dropdown-item" href="#">eCourse Evaluation</a> </div> </li> <li class="nav-item dropdown dmenu"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Graduation Requirement </a> <div class="dropdown-menu sm-menu"> <a class="dropdown-item" href="#">CU Summary</a> <a class="dropdown-item" href="#">Graduation Requirement 1</a> <a class="dropdown-item" href="#">Graduation Requirement 2</a> <a class="dropdown-item" href="#">Graduation Requirement 3</a> </div> </li> <li class="nav-item dropdown dmenu"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> GPA </a> <div class="dropdown-menu sm-menu"> <a class="dropdown-item" href="#">Academic Progression Status</a> <a class="dropdown-item" href="#">Certificate Classification Reference</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Log out</a> </li> </ul> </div> </nav> <u><h1 style="text-align:center;">Completed Courses</h1></u> <h2 style="text-align:center;">Content</h2> </body> </html>

Related: See More

Black Dashboard

Questions / Comments: