<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--login html --> <section style="background:#efefe9; height: 760px;"> <div class="container"> <div class="row"> <div class="board"> <!-- <h2>Welcome to IGHALO!^™</h2>--> <div class="board-inner"> <ul class="nav nav-tabs" id="myTab"> <div class="liner"></div> <li class="active"> <a href="#home" data-toggle="tab" title="welcome"> <span class="round-tabs one"> <i class="glyphicon glyphicon-user"></i> </span> </a> </li> <li> <a href="#profile" data-toggle="tab" title="profile"> <span class="round-tabs two"> <i class="glyphicon glyphicon-lock"></i> </span> </a> </li> <li> <a href="#messages" data-toggle="tab" title="bootsnipp goodies"> <span class="round-tabs three"> <i class="glyphicon glyphicon-pencil"></i> </span> </a> </li> <li> <a href="#settings" data-toggle="tab" title="blah blah"> <span class="round-tabs four"> <i class="glyphicon glyphicon-shopping-cart"></i> </span> </a> </li> <li> <a href="#doner" data-toggle="tab" title="completed"> <span class="round-tabs five"> <i class="glyphicon glyphicon-download-alt"></i> </span> </a> </li> </ul> </div> <div class="tab-content"> <div class="tab-pane fade in active" id="home"> <table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%"> <thead> <tr> <th>0</th> <th>0</th> <th>0</th> <th>0</th> <th>0</th> <th>0</th> </tr> </thead> <tbody> <tr> <td>Car Model</td> <td>fththh</td> <td>thyhththth</td> <td>fghyhhh</td> <td>fhtyhfyhg</td> <td>User Name</td> </tr> <tr> <td>Address</td> <td>fththh</td> <td>thyhththth</td> <td>fghyhhh</td> <td>fhtyhfyhg</td> <td>Purches Insut</td> </tr> <tr> <td>Premia Price</td> <td>fththh</td> <td>thyhththth</td> <td>fghyhhh</td> <td>fhtyhfyhg</td> <td>Name</td> </tr> <tr> <td>Car plate number</td> <td>fththh</td> <td>thyhththth</td> <td>fghyhhh</td> <td>fhtyhfyhg</td> <td>Last Name</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td>ID</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td>Email</td> </tr> </tbody> </table> </div> <div class="tab-pane fade" id="profile"> <p class="narrow text-center"> Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim. </p> </div> <div class="tab-pane fade" id="messages"> <p class="narrow text-center"> Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim. </p> </div> <div class="tab-pane fade" id="settings"> <p class="narrow text-center"> Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim. </p> </div> <div class="tab-pane fade" id="doner"> <div class="text-center"> <i class="img-intro icon-checkmark-circle"></i> </div> <p class="narrow text-center"> Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim. </p> </div> <div class="clearfix"></div> </div> <h3 class="main" style="text-align: center;">Select insurance packeges from list - </h3> <table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%"> <thead> <tr> <th>0</th> <th>0</th> <th>0</th> <th>0</th> <th>0</th> <th>0</th> </tr> </thead> <tbody> <tr> <td>Car Model</td> <td>fththh</td> <td>thyhththth</td> <td>fghyhhh</td> <td>fhtyhfyhg</td> <td>Package</td> </tr> <tr> <td>Address</td> <td>fththh</td> <td>thyhththth</td> <td>fghyhhh</td> <td>fhtyhfyhg</td> <td>Price</td> </tr> <tr> <td>Premia Price</td> <td>fththh</td> <td>thyhththth</td> <td>fghyhhh</td> <td>fhtyhfyhg</td> <td> <input id="checkBox" type="checkbox"> </td> </tr> </tbody> </table> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"> <button type="button" class="btn btn-warning" style="text-align: center; width: 100%; padding: 10px;">Buy checked packeges</button> </div> <div class="col-md-4"></div> </div> </div> </div> </div> </section> <!--end html -->

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700); /* written by riliwan balogun http://www.facebook.com/riliwan.rabo*/ .board { width: 90%; margin: 60px auto; height: 500px; background: #fff; /*box-shadow: 10px 10px #ccc,-10px 20px #ddd;*/ } .board .nav-tabs { position: relative; /* border-bottom: 0; */ /* width: 80%; */ margin: 40px auto; margin-bottom: 0; box-sizing: border-box; } .board > div.board-inner { background: #fafafa url(http://subtlepatterns.com/patterns/geometry2.png); background-size: 30%; } p.narrow { width: 60%; margin: 10px auto; } .liner { height: 2px; background: #ddd; position: absolute; width: 80%; margin: 0 auto; left: 0; right: 0; top: 50%; z-index: 1; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #555555; cursor: default; /* background-color: #ffffff; */ border: 0; border-bottom-color: transparent; } span.round-tabs { width: 70px; height: 70px; line-height: 70px; display: inline-block; border-radius: 100px; background: white; z-index: 2; position: absolute; left: 0; text-align: center; font-size: 25px; } span.round-tabs.one { color: rgb(34, 194, 34); border: 2px solid rgb(34, 194, 34); } li.active span.round-tabs.one { background: #fff !important; border: 2px solid #ddd; color: rgb(34, 194, 34); } span.round-tabs.two { color: #febe29; border: 2px solid #febe29; } li.active span.round-tabs.two { background: #fff !important; border: 2px solid #ddd; color: #febe29; } span.round-tabs.three { color: #3e5e9a; border: 2px solid #3e5e9a; } li.active span.round-tabs.three { background: #fff !important; border: 2px solid #ddd; color: #3e5e9a; } span.round-tabs.four { color: #f1685e; border: 2px solid #f1685e; } li.active span.round-tabs.four { background: #fff !important; border: 2px solid #ddd; color: #f1685e; } span.round-tabs.five { color: #999; border: 2px solid #999; } li.active span.round-tabs.five { background: #fff !important; border: 2px solid #ddd; color: #999; } .nav-tabs > li.active > a span.round-tabs { background: #fafafa; } .nav-tabs > li { width: 20%; } /*li.active:before { content: " "; position: absolute; left: 45%; opacity:0; margin: 0 auto; bottom: -2px; border: 10px solid transparent; border-bottom-color: #fff; z-index: 1; transition:0.2s ease-in-out; }*/ .nav-tabs > li:after { content: " "; position: absolute; left: 45%; opacity: 0; margin: 0 auto; bottom: 0px; border: 5px solid transparent; border-bottom-color: #ddd; transition: 0.1s ease-in-out; } .nav-tabs > li.active:after { content: " "; position: absolute; left: 45%; opacity: 1; margin: 0 auto; bottom: 0px; border: 10px solid transparent; border-bottom-color: #ddd; } .nav-tabs > li a { width: 70px; height: 70px; margin: 20px auto; border-radius: 100%; padding: 0; } .nav-tabs > li a:hover { background: transparent; } .tab-content {} .tab-content .head { font-family: 'Roboto Condensed', sans-serif; font-size: 25px; text-transform: uppercase; padding-bottom: 10px; } .btn-outline-rounded { padding: 10px 40px; margin: 20px 0; border: 2px solid transparent; border-radius: 25px; } .btn.green { background-color: #5cb85c; /*border: 2px solid #5cb85c;*/ color: #ffffff; } @media( max-width: 585px) { .board { width: 90%; height: auto !important; } span.round-tabs { font-size: 16px; width: 50px; height: 50px; line-height: 50px; } .tab-content .head { font-size: 20px; } .nav-tabs > li a { width: 50px; height: 50px; line-height: 50px; } .nav-tabs > li.active:after { content: " "; position: absolute; left: 35%; } .btn-outline-rounded { padding: 12px 20px; } } select.form-control.input-sm { background: #00a1ff !important; border: 0px !important; border-radius: 0px !important; color: #FFF !important; font-weight: 500 !important; font-size: 13px !important; font-family: 'Roboto', sans-serif; -webkit-box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.18); -moz-box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.18); box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.18); } .pagination>li>a, .pagination>li>span { background: #00a1ff !important; border: 0px !important; border-radius: 0px !important; color: #FFF !important; font-weight: 500 !important; font-size: 13px !important; font-family: 'Roboto', sans-serif; -webkit-box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.18); -moz-box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.18); box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.18); } .table-striped>tbody>tr:nth-of-type(odd) { background-color: #00a1ff!important; color: #FFF!important; font-size: 13px!important; font-family: 'Roboto', sans-serif; font-weight: 500!important; } tr.even { background: #bfbfbf!important; color: #000!important; font-size: 13px!important; font-weight: 500!important; font-family: 'Roboto', sans-serif; } th.sorting, .sorting_asc { font-family: 'Roboto', sans-serif; font-weight: 500 !important; border: 1px solid #FFF !important; color: #FFF; border: 1px solid #93CE37; border-bottom: 3px solid #9ED929; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#30b3ff+0,00a1ff+100 */ background: rgb(48, 179, 255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(48, 179, 255, 1) 0%, rgba(0, 161, 255, 1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(48, 179, 255, 1) 0%, rgba(0, 161, 255, 1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(48, 179, 255, 1) 0%, rgba(0, 161, 255, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#30b3ff', endColorstr='#00a1ff', GradientType=0); /* IE6-9 */ -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius: 5px 5px 0px 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; } .main { margin-top: 5px; margin-bottom: 25px; } input.form-control.input-sm { background: #00a1ff !important; border: 0px !important; border-radius: 0px !important; color: #FFF !important; font-weight: 500 !important; font-size: 13px !important; font-family: 'Roboto', sans-serif; -webkit-box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.18); -moz-box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.18); box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.18); }