<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <!-- Carousel --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- 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="/Style%20Library/Images/bg%202.jpg"> <!-- Static Header --> <div class="header-text hidden-xs"> <div class="col-md-12 text-center"> <h2> <span>Welcome to the <strong>Report Center</strong></span> </h2> <br> <h3> <span>Get all of your reports in one location..</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="/Style%20Library/Images/bg%202.jpg"> <!-- Static Header --> <div class="header-text hidden-xs"> <div class="col-md-12 text-center"> <h2> <span>Department Reports</span> </h2> <br> <h3> <span>Manage your business more effective.</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="/Style%20Library/Images/bg%202.jpg"> <!-- Static Header --> <div class="header-text hidden-xs"> <div class="col-md-12 text-center"> <h2> <span>Client Reports</span> </h2> <br> <h3> <span>Client specific reports, SLA, and more...</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="fa fa-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="fa fa-chevron-right"></span> </a> </div><!-- /carousel --> </div> </div>

@import "//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"; .container { margin-top: 20px; } /* Carousel Styles */ .carousel-indicators .active { background-color: #2980b9; } .carousel-inner img { width: 100%; max-height: 460px } .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; } .carousel-control.left span { padding: 15px; } .carousel-control.right span { padding: 15px; } .carousel-control .fa fa-chevron-left, .carousel-control .fa fa-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next { position: absolute; top: 45%; z-index: 5; display: inline-block; } .carousel-control .fa fa-chevron-left, .carousel-control .icon-prev { left: 0; } .carousel-control .fa fa-chevron-right, .carousel-control .icon-next { right: 0; } .carousel-control.left span, .carousel-control.right span { background-color: #000; } .carousel-control.left span:hover, .carousel-control.right span:hover { opacity: .7; filter: alpha(opacity=70); } /* Carousel Header Styles */ .header-text { position: absolute; top: 20%; left: 1.8%; right: auto; width: 96.66666666666666%; color: #fff; } .header-text h2 { font-size: 40px; } .header-text h2 span { background-color: #2980b9; padding: 10px; } .header-text h3 span { background-color: #000; 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; }