<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='http://fonts.googleapis.com/css?family=Lato:400,700|Exo+2:700,400' rel='stylesheet' type='text/css'> <div class="container"> <div class="row"> <section class="col-xs-12"> <div id="carousel-example-generic" class="carousel slide box" data-ride="carousel"> <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" class=""></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <div class="row"> <h2 class="center-block">Bootstrap is an AWESOME Plugin</h2> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="block block-1"> <h4>Easy to install</h4> <button class="btn btn-default btn-lg">Learn More</button> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="block block-2"> <h4>Easy to learn <span class="hidden-md">& use</span></h4> <button class="btn btn-default btn-lg">Learn More</button> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="block block-3"> <h4>Easy to Customize</h4> <button class="btn btn-default btn-lg">Learn More</button> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="block block-4"> <h4>Easy to Maintain</h4> <button class="btn btn-default btn-lg">Learn More</button> </div> </div> </div> </div> <div class="item"> <div class="row"> <h2 class="center-block">Not only a RESPONSIVE Framework</h2> <div class="col-xs-12 col-sm-6"> <div class="block block-1"> <h4>Numbers of CSS & Javascript Components</h4> <button class="btn btn-default btn-lg">Learn More</button> </div> </div> <div class="col-xs-12 col-sm-6"> <div class="block block-2"> <h4>Includes 200 glyphs in the format of font</h4> <button class="btn btn-default btn-lg">Learn More</button> </div> </div> </div> </div> <div class="item"> <div class="row"> <h2 class="center-block">Use any component with this SLIDER</h2> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="block block-1"> <h4>MODAL</h4> <button class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Launch modal</button> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="block block-2"> <h4>Forms</h4> <form> <div class="input-group"> <span class="input-group-addon">User ID</span> <input type="text" class="form-control" placeholder="Username"> </div> <div class="input-group"> <span class="input-group-addon">Password</span> <input type="password" class="form-control"> </div> <button class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal">Login</button> </form> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="block block-3"> <h4>Linked Item</h4> <div class="list-group"> <a href="http://webdevron.com" class="list-group-item active">Website</a> <a href="https://fb.com/webdevron" class="list-group-item">Facebook Profile</a> <a href="https://twitter.com/webdevrony" class="list-group-item">Twitter</a> <a href="https://linkedin.com/in/webdevron" class="list-group-item">LinkedIn</a> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="block block-4"> <h4>And table</h4> <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Table heading</th> <th>Table heading</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>2</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>3</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>4</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>5</td> <td>Table cell</td> <td>Table cell</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Welcome</h4> </div> <div class="modal-body"> About Me-<br> <a href="http://webdevron.com">@ My website</a><br> <a href="http://fb.com/webdevron">@ facebook</a><br> <a href="http://fb.com/webdevrony">@ twitter</a><br> <a href="https://www.linkedin.com/in/webdevron">@ linkedin</a><br> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

h2,h3,h4,h5{ font-family: 'Exo 2', sans-serif; font-weight: bold; } .box{ border: solid 1px #FFF; outline: solid 1px #e0e0e0; } p,b{ float: left; display: block; font-family: 'Lato', sans-serif; } .carousel{ margin-top: 30px; position: relative; padding-bottom: 50px; background-color: #D8D8D8; } .item{ min-height: 325px; padding-left: 30px; padding-right: 30px; } .item h2{ width: 80%; color: #FFF; padding: 15px; font-size: 38px; margin-bottom: 30px; text-align: center; text-shadow: 1px 2px 3px #444; } .item .block{ width: 100%; float: left; color: #FFF; min-height: 200px; text-align: center; padding: 15px; margin-bottom: 20px; box-shadow: 1px 2px 3px #444; } .item h4{ width: 100%; padding: 15px; font-size: 30px; font-weight: 900; text-align: center; text-shadow: 2px 2px 2px #555; } .item p{ text-align: center; font-size: 18px; } .item .input-group{ margin-bottom: 10px; } .block-1{ background-color: #94C83C } .block-2{ background-color: #F36E20 } .block-3{ background-color: #3498DB } .block-4{ background-color: #F7C767 } .carousel-indicators { bottom: 0px; }