"Homepage"
Bootstrap 3.3.0 Snippet by hossam

<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;">Aisha Dental Center</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>  Login</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>  Contact US</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <h1 style="margin-left:590px">Welcome</h1> <p style="margin-left:660px"><i class="fa fa-home"></i></i></p> <p style="margin-left:560px">Welcome on Aisha Dental Center</p> <div class="home text-center"> <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"> </div> </div><!-- End Item --> <div class="item"> <img src="http://placehold.it/760x400/999999/cccccc"> <div class="carousel-caption"> </div> </div><!-- End Item --> <div class="item"> <img src="http://placehold.it/760x400/dddddd/333333"> <div class="carousel-caption"> </div> </div><!-- End Item --> <div class="item"> <img src="http://placehold.it/760x400/999999/cccccc"> <div class="carousel-caption"> </div> </div><!-- End Item --> <div class="item"> <img src="http://placehold.it/760x400/dddddd/333333"> <div class="carousel-caption"> </div> </div><!-- End Item --> </div><!-- End Carousel Inner --> </div>
.home{ margin-top:10px; margin-bottom:50px; width:80%; background-color:rgba(255,0,255); margin-left:270px; 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); });

Related: See More


Questions / Comments: