<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <section class="jk-header"> <div class="container"> <div class="row"> <div class="col-12-md"> <nav class="navbar navbar-inverse"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-3"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="images/logo.png" alt=""/></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-collapse-3"> <ul class="nav navbar-nav navbar-right"> <li><a class="active" href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">Disclaimer</a></li> <li><a href="#">Contact Us</a></li> </ul> </div><!-- /.navbar-collapse --> <!-- /.container --> </nav><!-- /.navbar --> </div> </div> <div class="col-md-4"> <div class="jk-disclaimer"> <h1>Disclaimer</h1> </div> </div> <div class="col-md-8"> <div class="jk-toll-free"> <h1>Call Us USA Toll Free: <span> +0000000</span> </h1> </div> </div> <P class="pra">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sagittis dui. Donec erat eros, posuere sed neque ut, viverra tincidunt velit. Sed arcu magna, hendrerit a pellentesque nec, maximus vel tellus. Maecenas at velit nulla. Nam suscipit in massa eu volutpat. In vehicula interdum mauris et consequat. Vivamus molestie tempus mi fringilla bibendum. Nam vulputate eros eu nisl pretium scelerisque. Praesent maximus, felis vel commodo pretium, odio tortor luctus purus, eu maximus ipsum turpis eu erat. Suspendisse ultrices urna neque, id euismod neque facilisis sit amet. Aliquam venenatis mi ac est lobortis, nec blandit diam finibus. </P> </div> </section>

@charset "utf-8"; /* CSS Document */ @font-face{ font-family:myLobster; src:url(../fonts/LobsterTwo-Bold.otf); } @font-face{ font-family:myriadRegular; src:url(../fonts/MyriadPro-Regular.otf); } @font-face{ font-family:myriadbold; src:url(../fonts/MyriadPro-Bold.otf); } .jk-header-top{ width:100%; height:10px; background:#ff0000; } .jk-header{ width:100%; background:#17191b; border-top:10px solid #ff0000; } /* Code snippet by maridlcrmn for Bootsnipp.com Follow me on Twitter @maridlcrmn */ .navbar-brand { position: relative; z-index: 2; } .navbar-nav.navbar-right .btn { position: relative; z-index: 2; padding: 4px 20px; margin: 10px auto; } .navbar .navbar-collapse { position: relative; } .navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 22px; } .navbar .nav-collapse { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding-right: 120px; padding-left: 80px; width: 100%; } .navbar.navbar-default .nav-collapse { background-color: #f8f8f8; } .navbar.navbar-inverse .nav-collapse { background-color: #222; } .navbar .nav-collapse .navbar-form { border-width: 0; box-shadow: none; } .nav-collapse>li { float: right; } .btn.btn-circle { border-radius: 50px; } .btn.btn-outline { background-color: transparent; } @media screen and (max-width: 767px) { .navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 15px; padding-right: 15px; } .navbar .nav-collapse { margin: 7.5px auto; padding: 0; } .navbar .nav-collapse .navbar-form { margin: 0; } .nav-collapse>li { float: none; } } .navbar-inverse .navbar-nav > li > a { color: #fff; } .navbar-nav > li > a { font-family: myriadRegular; font-size: 16px; padding: 30px 25px; } .navbar-brand { float: left; font-size: 18px; height: 50px; line-height: 20px; padding: 25px 0; } .navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 0px; } .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { background-color: transparent; border-top: 10px solid #17191b ; color: #fff; position: relative; top: -10px; padding: 30px 25px; } .navbar-nav > li > a.active { background-color: transparent; border-top: 10px solid #17191b ; color: #fff; position: relative; top: -10px; padding: 30px 25px; } .navbar-inverse { background-color: #17191b; border:none; } .jk-disclaimer{ width:100%; } .jk-disclaimer h1 { color: #fff; font-family: myriadRegular; font-size: 30px; margin: 0; padding: 20px 0 0; } .jk-toll-free{ width:100%; } .jk-toll-free h1 { color: #fff; font-family: myriadRegular; font-size: 25px; margin: 0; padding: 0 0 35px; } .jk-toll-free h1 span{ font-size:55px; font-family: myriadbold; color:#ff0000; margin:0px; } .jk-toll-free h2 { color: #fff; font-family: myriadRegular; font-size: 25px; margin: 0; padding: 0 0 35px; } .jk-toll-free h2 span{ font-size:55px; font-family: myriadbold; color:#ff0000; margin:0px; } .pra{ color: #fff; font-family: myriadRegular; font-size: 16px; text-align:justify; padding:20px opx; }