<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 ----------> <section class="news-tab"> <div class="container"> <div class="row"> <div class="col-12 col-lg-4 col-md-4 mb-1"> <ul class="nav nav-pills" role="tablist"> <li class="nav-item"> <a class="nav-link text-center active" data-toggle="pill" href="#home">Tender</a> </li> <li class="nav-item"> <a class="nav-link text-center" data-toggle="pill" href="#menu">Recruitment</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div id="home" class="container tab-pane active"> <div class="holder"> <marquee scrollamount="2" direction="up" onmouseover="this.stop();" onmouseout="this.start();" height="340"> <ul id="ticker"> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> </ul> </marquee> </div> </div> <div id="menu" class="container tab-pane fade"> <div class="holder"> <marquee scrollamount="2" direction="up" height="340" onmouseover="this.stop();" onmouseout="this.start();"> <ul id="ticker01"> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> </ul> </marquee> </div> </div> </div> </div> <div class="col-12 col-lg-4 col-md-4 mb-1"> <ul class="nav nav-pills" role="tablist"> <li class="nav-item"> <a class="nav-link text-center active" data-toggle="pill" href="#home2">Tender</a> </li> <li class="nav-item"> <a class="nav-link text-center" data-toggle="pill" href="#menu2">Recruitment</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div id="home2" class="container tab-pane active"> <div class="holder"> <ul id="ticker012"> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> </ul> </div> </div> <div id="menu2" class="container tab-pane fade"> <div class="holder"> <ul id="ticker012"> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> </ul> </div> </div> </div> </div> <div class="col-12 col-lg-4 col-md-4 mb-1"> <ul class="nav nav-pills" role="tablist"> <li class="nav-item"> <a class="nav-link text-center active" data-toggle="pill" href="#home3">Tender</a> </li> <li class="nav-item"> <a class="nav-link text-center" data-toggle="pill" href="#menu3">Recruitment</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div id="home3" class="container tab-pane active"> <div class="holder"> <ul id="ticker012"> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> </ul> </div> </div> <div id="menu3" class="container tab-pane fade"> <div class="holder"> <ul id="ticker012"> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> <li><div class="text-danger">20/10/2020</div><br/><a href="#"> Final Exam of classes BSc start from 2/10/2020 university campus</a></li> </ul> </div> </div> </div> </div> </div> </div> </section>

*{ margin:0; padding:0; list-style:none; } .holder { box-shadow: -1px 2px 17px 1px #e6e1e1; background-color: #fff; width: 324px; height: 350px; overflow: hidden; padding: 10px 10px; font-family: Helvetica; /* border: 1px solid var(--third-bg-color); */ margin-left: -12px; margin-top: -1px; margin-bottom: 8px; } .news-tab .nav-pills .nav-link.active, .nav-pills .show>.nav-link { color: #fff; background-color: blue; width: 165px; } .news-tab .nav-pills .nav-link { border: 1px solid #b9b9b9; width: 165px; }