<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 ----------> <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> <nav class="navbar navbar-default" style="background-color:#3366ff;width:80%;margin:auto;margin-top:50px;"> <div class="container-fluid"> <!-- 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="#bs-example-navbar-collapse-1" aria-expanded="false"> <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="#" style="color:white;font-family:raleway;">Enterprise</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div style="font-family:Oswald;" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav" style="color:white;"> <li><a href="#" style="color:white;"><i class="fa fa-home"></i>  Home</a></li> <li><a href="#" style="color:white;"><i class="fa fa-shopping-basket"></i>  Shop</a></li> <li><a href="#" style="color:white;"><i class="fa fa-users"></i>  partners</a></li> </Ul> <ul class="nav navbar-nav navbar-right" style="color:white;"> <li><a href="#" style="color:white;"><i class="fa fa-group"></i>  Forum</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="home"> <h1>Welcome</h1> <p><i class="fa fa-home"></i></i></p> <p>Welcome on our website</p> <div class="container"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://placehold.it/760x400/cccccc/ffffff"> <div class="carousel-caption"> <h4><a href="#">Lorem ipsum dolor sit amet consetetur sadipscing</a></h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="http://placehold.it/760x400/999999/cccccc"> <div class="carousel-caption"> <h4><a href="#">consetetur sadipscing elitr, sed diam nonumy eirmod</a></h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="http://placehold.it/760x400/dddddd/333333"> <div class="carousel-caption"> <h4><a href="#">tempor invidunt ut labore et dolore</a></h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="http://placehold.it/760x400/999999/cccccc"> <div class="carousel-caption"> <h4><a href="#">magna aliquyam erat, sed diam voluptua</a></h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="http://placehold.it/760x400/dddddd/333333"> <div class="carousel-caption"> <h4><a href="#">tempor invidunt ut labore et dolore magna aliquyam erat</a></h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p> </div> </div><!-- End Item --> </div><!-- End Carousel Inner --> <ul class="list-group col-sm-4"> <li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"><h4>Lorem ipsum dolor sit amet consetetur sadipscing</h4></li> <li data-target="#myCarousel" data-slide-to="1" class="list-group-item"><h4>consetetur sadipscing elitr, sed diam nonumy eirmod</h4></li> <li data-target="#myCarousel" data-slide-to="2" class="list-group-item"><h4>tempor invidunt ut labore et dolore</h4></li> <li data-target="#myCarousel" data-slide-to="3" class="list-group-item"><h4>magna aliquyam erat, sed diam voluptua</h4></li> <li data-target="#myCarousel" data-slide-to="4" class="list-group-item"><h4>tempor invidunt ut labore et dolore magna aliquyam erat</h4></li> </ul> <!-- Controls --> <div class="carousel-controls"> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div><!-- End Carousel --> </div> <br/><br/><br/> <div class="row" style="padding-right:75px;padding-left:75px;"> <div class="col-md-4"> <h1><span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-plane fa-stack-1x fa-inverse"></i> </span></h1> <br/> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices, odio sit amet mattis tristique.</p> </div> <div class="col-md-4"> <h1><span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-fighter-jet fa-stack-1x fa-inverse"></i> </span></h1> <br/> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices, odio sit amet mattis tristique.</p> </div> <div class="col-md-4"> <h1><span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-rocket fa-stack-1x fa-inverse"></i> </span></h1> <br/> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices, odio sit amet mattis tristique.</p> </div> </div> <br/><br/><p></p><i class="fa fa-shield fa-3x"></i></p></br></br> <div class="row" style="padding-right:50px;padding-left:50px;"> <div class="col-md-6"> <h1>Who are us ?</h1> <br/> <p>Caput tempore imperii cuius templum cupiebat postulatus tempore fatidicum vetitis an quo fatidicum pulsatae vetitis portenderetur an cunctum ut cum ut templum pileo operiebat maiestatis Serenianus incertum absolvi operiebat cupiebat quaeritatum Phoenice imperium artibus firmum ut caput templum expresse artibus pileo et firmum misisse cum caput quaeritatum incertum caput quo aperte maiestatis familiarem tempore qua imperii ignavia vetitis expresse portenderetur ex an ad operiebat populatam convictus incertum Celsen in ac incertum ex lege caput absolvi cum fatidicum quaeritatum incertum operiebat fatidicum reus qua operiebat quo ut caput Celsen cum templum firmum expresse iure quaeritatum pileo duce cupiebat incantato incertum ac.</p> </div> <div class="col-md-6"> <h1>Our skills</h1> <br/> <p style="text-align:left;">CSS</p> <div class="progress progress-striped"> <div class="progress-bar progress-bar-info" style="width: 20%"></div> </div> <p style="text-align:left;">HTML</p> <div class="progress progress-striped"> <div class="progress-bar progress-bar-success" style="width: 40%"></div> </div> <p style="text-align:left;">PHP</p> <div class="progress progress-striped"> <div class="progress-bar progress-bar-warning" style="width: 60%"></div> </div> <p style="text-align:left;">Javascript</p> <div class="progress progress-striped"> <div class="progress-bar progress-bar-danger" style="width: 80%"></div> </div> </div> </div> <br/><br/><p></p><i class="fa fa-shield fa-3x"></i></p><br/><br/> <h2>best products</h2> <center> <div class="row db-padding-btm db-attached" style="width:90%;margin-auto;"> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="db-wrapper"> <div class="db-pricing-eleven db-bk-color-one"> <div class="price"> ^$5 <small>per quarter</small> </div> <div class="type"> SMALL PLAN </div> <ul> <li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li> <li><i class="glyphicon glyphicon-time"></i>150+ Projects </li> <li><i class="glyphicon glyphicon-trash"></i>Lead Required</li> </ul> <div class="pricing-footer"> <a href="#" class="btn db-button-color-square btn-lg">ORDER</a> </div> </div> </div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="db-wrapper"> <div class="db-pricing-eleven db-bk-color-two popular"> <div class="price"> ^$10 <small>per quarter</small> </div> <div class="type"> MEDIUM PLAN </div> <ul> <li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li> <li><i class="glyphicon glyphicon-time"></i>150+ Projects </li> <li><i class="glyphicon glyphicon-trash"></i>Lead Required</li> </ul> <div class="pricing-footer"> <a href="#" class="btn db-button-color-square btn-lg">ORDER</a> </div> </div> </div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="db-wrapper"> <div class="db-pricing-eleven db-bk-color-three"> <div class="price"> ^$25 <small>per quarter</small> </div> <div class="type"> ADVANCE PLAN </div> <ul> <li><i class="glyphicon glyphicon-print"></i>30+ Accounts </li> <li><i class="glyphicon glyphicon-time"></i>150+ Projects </li> <li><i class="glyphicon glyphicon-trash"></i>Lead Required</li> </ul> <div class="pricing-footer"> <a href="#" class="btn db-button-color-square btn-lg">ORDER</a> </div> </div> </div> </div> </div> </center> <br/><br/><p></p><i class="fa fa-shield fa-3x"></i></p><br/><br/> <h2>Ours partners</h2> <br/><br/> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Partner1&w=350&h=150">    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Partner2&w=350&h=150">   <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Partner3&w=350&h=150"> </div> <br/><br/><br/><br/> <div class="panel panel-default" style="background-color:rgba(51, 102, 255,0.7);width:80%;margin-bottom:50px;color:white;margin-right:auto;margin-left:auto;"> <div class="panel-body"> <div class="row"> <div class="col-md-4"> <h1 style="float:left;">Enterprise  </h1> <p style="margin-left:10px;">Anazarbus Iovis Iovis quidam repentina Africae perspicabilis Danaes referens a referens opulentus mors Mopsuestia sospitales amni profectus a et referensAnazarbus Iovis Iovis quidam repentina Africae perspicabilis Danaes referens a referens opulentus mors Mopsuestia sospitales amni profectus a et referensAnazarbus Iovis Iovis quidam repentina Africae perspicabilis Danaes referens a referens opulentus mors Mopsuestia sospitales amni profectus a et referens.</p> </div> <div class="col-md-4"> <ul class="list-group" style="color:black;"> <li class="list-group-item"><a href="#">Cras justo odio</a></li> <li class="list-group-item"><a href="#">Dapibus ac facilisis in</a></li> <li class="list-group-item"><a href="#">Morbi leo risus</a></li> <li class="list-group-item"><a href="#">Porta ac consectetur ac</a></li> <li class="list-group-item"><a href="#">Vestibulum at eros</a></li> </ul> </div> <div class="col-md-4"> <div style="margin:auto;"> Coded with : <h1><i class="fa fa-css3"></i> & <i class="fa fa-html5"></i></h1> </div> </div> </div> </div> <div class="panel-footer" style="background-color:rgb(51, 102, 255);border:0px black solid;color:white;"><i class="fa fa-rocket"></i> Designed by <a href="http://amji-dev.raidghost.com/" style="text-decoration:underlines;color:white;" target="_blank">Amjido</a></div> </div>

.home{ margin-top:10px; margin-bottom:50px; width:80%; background-color:rgba(51, 204, 255,0.7); margin-left:auto; margin-right:auto; text-align:center; border-radius:5px; padding-top:10px; padding-bottom:45px; } h1,h2,h3,h4,h5,h46,p{ font-family: 'Raleway', sans-serif; font-weight:bold; } #myCarousel .carousel-caption { left:0; right:0; bottom:0; text-align:left; padding:10px; background:rgba(0,0,0,0.6); text-shadow:none; } #myCarousel .list-group { position:absolute; top:0; right:0; } #myCarousel .list-group-item { border-radius:0px; cursor:pointer; } #myCarousel .list-group .active { background-color:#eee; } @media (min-width: 992px) { #myCarousel {padding-right:33.3333%;} #myCarousel .carousel-controls {display:none;} } @media (max-width: 991px) { .carousel-caption p, #myCarousel .list-group {display:none;} } body{ background-image:url('http://image.noelshack.com/fichiers/2015/48/1448773730-upfeathers.png') } /*============================================================= Authour URL: www.designbootstrap.com http://www.designbootstrap.com/ License: MIT ======================================================== */ /*============================================================ BACKGROUND COLORS ============================================================*/ .db-bk-color-one { background-color: #f55039; } .db-bk-color-two { background-color: #46A6F7; } .db-bk-color-three { background-color: #47887E; } .db-bk-color-six { background-color: #F59B24; } /*============================================================ PRICING STYLES ==========================================================*/ .db-padding-btm { padding-bottom: 50px; } .db-button-color-square { color: #fff; background-color: rgba(0, 0, 0, 0.50); border: none; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; } .db-button-color-square:hover { color: #fff; background-color: rgba(0, 0, 0, 0.50); border: none; } .db-pricing-eleven { margin-bottom: 30px; margin-top: 50px; text-align: center; box-shadow: 0 0 5px rgba(0, 0, 0, .5); color: #fff; line-height: 30px; } .db-pricing-eleven ul { list-style: none; margin: 0; text-align: center; padding-left: 0px; } .db-pricing-eleven ul li { padding-top: 20px; padding-bottom: 20px; cursor: pointer; } .db-pricing-eleven ul li i { margin-right: 5px; } .db-pricing-eleven .price { background-color: rgba(0, 0, 0, 0.5); padding: 40px 20px 20px 20px; font-size: 60px; font-weight: 900; color: #FFFFFF; } .db-pricing-eleven .price small { color: #B8B8B8; display: block; font-size: 12px; margin-top: 22px; } .db-pricing-eleven .type { background-color: #52E89E; padding: 50px 20px; font-weight: 900; text-transform: uppercase; font-size: 30px; } .db-pricing-eleven .pricing-footer { padding: 20px; } .db-attached > .col-lg-4, .db-attached > .col-lg-3, .db-attached > .col-md-4, .db-attached > .col-md-3, .db-attached > .col-sm-4, .db-attached > .col-sm-3 { padding-left: 0; padding-right: 0; } .db-pricing-eleven.popular { margin-top: 10px; } .db-pricing-eleven.popular .price { padding-top: 80px; } li:hover{ background-color:rgba(95, 176, 228,0.5); }

$(document).ready(function(){ var clickEvent = false; $('#myCarousel').carousel({ interval: 4000 }).on('click', '.list-group li', function() { clickEvent = true; $('.list-group li').removeClass('active'); $(this).addClass('active'); }).on('slid.bs.carousel', function(e) { if(!clickEvent) { var count = $('.list-group').children().length -1; var current = $('.list-group li.active'); current.removeClass('active').next().addClass('active'); var id = parseInt(current.data('slide-to')); if(count == id) { $('.list-group li').first().addClass('active'); } } clickEvent = false; }); }) $(window).load(function() { var boxheight = $('#myCarousel .carousel-inner').innerHeight(); var itemlength = $('#myCarousel .item').length; var triggerheight = Math.round(boxheight/itemlength+1); $('#myCarousel .list-group-item').outerHeight(triggerheight); });