<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <link href='https://fonts.googleapis.com/css?family=Montserrat Alternates' rel='stylesheet'> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact Us</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-collapse --> </nav> <div class="container-fluid"> <div class="row"> <!-- Carousel --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxxxLLxU6fEZrxLwJb04bROOtnGphxEjRVRkyrN6o3_q2A7oJJjg"> <!-- Static Header --> <div class="header-text hidden-xs"> <div class="col-md-12 text-center"> <h2> <span>EXPLORE <strong>AUTOMATIC JQUERY</strong></span> </h2> <br> <h3> <span>Delightful Trips, Awesome Foods. Enjoy!!</span> </h3> <br> <div class=""> <a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div> </div> </div><!-- /header-text --> </div> <div class="item"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxxxLLxU6fEZrxLwJb04bROOtnGphxEjRVRkyrN6o3_q2A7oJJjg" alt="Second slide"> <!-- Static Header --> <div class="header-text hidden-xs"> <div class="col-md-12 text-center"> <h2> <span>Welcome to LOREM IPSUM</span> </h2> <br> <h3> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </h3> <br> <div class=""> <a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div> </div> </div><!-- /header-text --> </div> <div class="item"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxxxLLxU6fEZrxLwJb04bROOtnGphxEjRVRkyrN6o3_q2A7oJJjg" alt="Third slide"> <!-- Static Header --> <div class="header-text hidden-xs"> <div class="col-md-12 text-center"> <h2> <span>Welcome to LOREM IPSUM</span> </h2> <br> <h3> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </h3> <br> <div class=""> <a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div> </div> </div><!-- /header-text --> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div><!-- /carousel --> </div> </div> <div id="services" class="container-fluid tbpadding text-center "> <h2 class="bigpixi_head"><span>100% Satisfactory </span>Courses</h2> <h4>Get CCIE certified at NetworkBricks & start your career with package of 2-8 Lacs </h4> <br> <div class="row"> <div class="col-sm-4"> <span style="font-size: 55px" class="glyphicon glyphicon-volume-up"></span> <h4>Experienced Trainers</h4> <p>Lorem ipsum dolor sit amet..</p> </div> <div class="col-sm-4"> <span style="font-size: 55px" class="glyphicon glyphicon-volume-up"></span> <h4>Small Training Batch</h4> <p>Lorem ipsum dolor sit amet..</p> </div> <div class="col-sm-4"> <span style="font-size: 55px" class="glyphicon glyphicon-volume-up"></span> <h4>Flexible Timings</h4> <p>Lorem ipsum dolor sit amet..</p> </div> </div> </div> <div class="container"> <div class="banner-bottom"> <div class="container tbpadding"> <h2 class="bigpixi_head"><span>Travel To </span>Germany</h2> <div class="col-md-12 text-center"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Even though using "lorem ipsum" often arouses curiosity because of its resemblance to classical Latin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. ... Even though using "lorem ipsum" often arouses curiosity because of its resemblance to classical Latin</p> </div> </div> </div> </div> <div class="container"> <div class="row tbpadding"> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 margin50"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-2 col-xs-4"><img src="http://demos.pixelatethemes.com/factorial/Demo_2/images/home_page_variation2/delicate_team.png" alt="delicate team"></div> <div class="col-lg-9 col-md-8 col-sm-10 col-xs-8"> <h4><b>Dedicated Team</b></h4> <p>Neque porro quisquam est, qui do lorem ipsum quia dolor sit ametig, consectetur adipis civelit sed.</p> </div> </div> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 margin50"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-2 col-xs-4"><img src="http://demos.pixelatethemes.com/factorial/Demo_2/images/home_page_variation2/delicate_team.png" alt="delivery time"></div> <div class="col-lg-9 col-md-8 col-sm-10 col-xs-8"> <h4><b>Delivery on Time</b></h4> <p>Neque porro quisquam est, qui do lorem ipsum quia dolor sit ametig, consectetur adipis civelit sed.</p> </div> </div> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 margin40"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-2 col-xs-4"><img src="http://demos.pixelatethemes.com/factorial/Demo_2/images/home_page_variation2/delicate_team.png" alt="Update Technology"></div> <div class="col-lg-9 col-md-8 col-sm-10 col-xs-8"> <h4><b>Updated Technology</b></h4> <p>Neque porro quisquam est, qui do lorem ipsum quia dolor sit ametig, consectetur adipis civelit sed.</p> </div> </div> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-2 col-xs-4"><img src="http://demos.pixelatethemes.com/factorial/Demo_2/images/home_page_variation2/delicate_team.png" alt="quality assurance"></div> <div class="col-lg-9 col-md-8 col-sm-10 col-xs-8"> <h4><b>Quality Assurance</b></h4> <p>Neque porro quisquam est, qui do lorem ipsum quia dolor sit ametig, consectetur adipis civelit sed.</p> </div> </div> </div> </div> </div> <section class="footer tbpadding"> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="link-area"> <h3>ABOUT US</h3> <P>Building Consensus among your Senior leaders to leverage your digital strengths and work on gaps which are hindering your growth.</P> <li class="fa-li"><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> <li class="fa-li"><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> <li class="fa-li"><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li> </div> </div> <div class="col-md-3"> <div class="link-area"> <h3>PRODUCT</h3> <ul> <li><a href="#"> Services-1</a></li> <li><a href="#"> Services-1</a></li> <li><a href="#"> Services-1</a></li> <li><a href="#"> Services-1</a></li> <li><a href="#"> Services-1</a></li> </ul> </div> </div> <div class="col-md-3"> <div class="link-area"> <h3>COMPANY</h3> <ul> <li><a href="#"> Home</a></li> <li><a href="#"> Blog</a></li> <li><a href="#"> About</a></li> <li><a href="#"> contact</a></li> <li><a href="#"> Jobs</a></li> </ul> </div> </div> <div class="col-md-3"> <div class="link-area"> <h3>LEARM MORE</h3> <ul> <li><a href="#"> Services-1</a></li> <li><a href="#"> Services-1</a></li> <li><a href="#"> Services-1</a></li> <li><a href="#"> Services-1</a></li> <li><a href="#"> Services-1</a></li> </ul> </div> </div> </div> </div> </section>

body { font-family: 'Montserrat Alternates'; } .navbar-default { background-color: #f1761e; border-color: #c84403; } .navbar-default .navbar-brand { color: #ffffff; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #050505; } .navbar-default .navbar-text { color: #ffffff; } .navbar-default .navbar-nav > li > a { color: #ffffff; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #050505; } .navbar-default .navbar-nav > li > .dropdown-menu { background-color: #f1761e; } .navbar-default .navbar-nav > li > .dropdown-menu > li > a { color: #ffffff; } .navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover, .navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus { color: #050505; background-color: #c84403; } .navbar-default .navbar-nav > li > .dropdown-menu > li.divider { background-color: #c84403; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #050505; background-color: #c84403; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #050505; background-color: #c84403; } .navbar-default .navbar-toggle { border-color: #c84403; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #c84403; } .navbar-default .navbar-toggle .icon-bar { background-color: #ffffff; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #ffffff; } .navbar-default .navbar-link { color: #ffffff; } .navbar-default .navbar-link:hover { color: #050505; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #ffffff; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #050505; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #050505; background-color: #c84403; } } /* Carousel Styles */ .carousel-control { color: brown; } .carousel-indicators .active { background-color: #ff5900; } .carousel-inner img { width: 100%; max-height: 420px; } .carousel-control { width: 0; } .carousel-control.left, .carousel-control.right { opacity: 1; filter: alpha(opacity=100); background-image: none; background-repeat: no-repeat; text-shadow: none; margin-right: 25px; } .carousel-control.left span { margin-left: 15px; font-size: 60px; } .carousel-control.right span { font-size: 60px; margin-right: 50px; } .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next { position: absolute; top: 45%; z-index: 5; display: inline-block; } .carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev { left: 0; } .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next { right: 0; } .carousel-control.left span, .carousel-control.right span { background-color: none; } .carousel-control.left span:hover, .carousel-control.right span:hover { opacity: .7; filter: alpha(opacity=70); } /* Carousel Header Styles */ .header-text { position: absolute; top: 35%; left: 1.8%; right: auto; width: 96.66666666666666%; color: #000; } .header-text h2 { font-size: 30px; } .header-text h2 span { padding: 10px; } .header-text h3 span { padding: 15px; } .btn-min-block { min-width: 170px; line-height: 26px; } .btn-theme { color: #fff; background-color: transparent; border: 2px solid #fff; margin-right: 15px; } .btn-theme:hover { color: #000; background-color: #fff; border-color: #fff; } /*below banner text */ .banner-bottom { padding: 3em 0 3em; } .bigpixi_head { font-size: 35px; } .bigpixi_head span { color: #212121; } .bigpixi_head { font-size: 36px; color: #c84403; font-weight: 600; margin-bottom: 30px; letter-spacing: 4px; text-transform: uppercase; text-align: center; padding-bottom: .8em; position: relative; } .bigpixi_head:before { width: 11%; bottom: 8%; left: 44.5%; } .bigpixi_head:after { width: 18%; right: 41%; bottom: 0%; } .bigpixi_head:before { position: absolute; background: #c84403; height: 2px; content: ''; } p.bigpixipara { font-size: 14px; color: #777; width: 100%; margin: 0 auto; line-height: 25px; text-align: center; } .tbpadding { padding: 60px 60px; } .footer { padding-top:100px; background-color:#e0e1e2; }