<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 ----------> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#myPage">Logo</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-right"> <li><a href="#myPage">HOME</a></li> <li><a href="#band">ABOUT</a></li> <li><a href="#tour">SERVICES</a></li> <li><a href="#portfolio">PORTFOLIO</a></li> <li><a href="#team">TEAM</a></li> <li><a href="#contact">CONTACT</a></li> <li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li> </ul> </div> </div> </nav> <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="https://static.pexels.com/photos/372810/pexels-photo-372810.jpeg" alt="Chania" width="100%" height="100%"> <div class="carousel-caption"> <h3>Chania</h3> <p>The atmosphere in Chania has a touch of Florence and Venice.</p> </div> </div> <div class="item"> <img src="https://images.pexels.com/photos/325680/pexels-photo-325680.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Chania" width="100%" height="100%"> <div class="carousel-caption"> <h3>Chania</h3> <p>The atmosphere in Chania has a touch of Florence and Venice.</p> </div> </div> <div class="item"> <img src="https://images.pexels.com/photos/6003/man-hand-car-black.jpg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Chania" width="100%" height="100%"> <div class="carousel-caption"> <h3>Chania</h3> <p>The atmosphere in Chania has a touch of Florence and Venice.</p> </div> </div> <div class="item"> <img src="https://images.pexels.com/photos/168938/pexels-photo-168938.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Chania" width="100%" height="100%"> <div class="carousel-caption"> <h3>Chania</h3> <p>The atmosphere in Chania has a touch of Florence and Venice.</p> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <div class="top-padding1 bg-color1"> <div class="container "> <h3><strong>OUR SERVICES </strong></h3> <p>We have created a Car Washing website. Lorem ipsum..</p> <br> <div class="col-md-4"> <div class="top-space"> <div class="left-icon"> <span style="font-size: 45px" class="glyphicon glyphicon-volume-up"></span> </div> <div class="services-textbox"> <h3>Lorem ipsum</h3> <p> consectetur adipiscing elit. Proin fermentum dolor tortor, id interdum diam pulvinar feugiat.</p> </div> <div class="clearfix"> </div> </div> </div> <div class="col-md-4"> <div class="top-space"> <div class="left-icon"> <span style="font-size: 45px" class="glyphicon glyphicon-warning-sign"></span> </div> https://bootsnipp.com/user/snippets/Ez7X6#myCarousel <div class="services-textbox"> <h3>Lorem ipsum</h3> <p> consectetur adipiscing elit. Proin fermentum dolor tortor, id interdum diam pulvinar feugiat.</p> </div> <div class="clearfix"> </div> </div> </div> <div class="col-md-4"> <div class="top-space"> <div class="left-icon"> <span style="font-size: 45px" class="glyphicon glyphicon-dashboard"></span> </div> <div class="services-textbox"> <h3>Lorem ipsum</h3> <p> consectetur adipiscing elit. Proin fermentum dolor tortor, id interdum diam pulvinar feugiat.</p> </div> <div class="clearfix"> </div> </div> </div> <div class="col-md-4"> <div class="top-space"> <div class="left-icon"> <span style="font-size: 45px" class="glyphicon glyphicon-time"></span> </div> <div class="services-textbox"> <h3>Lorem ipsum</h3> <p> consectetur adipiscing elit. Proin fermentum dolor tortor, id interdum diam pulvinar feugiat.</p> </div> <div class="clearfix"> </div> </div> </div> <div class="col-md-4"> <div class="top-space"> <div class="left-icon"> <span style="font-size: 45px" class="glyphicon glyphicon-flag"></span> </div> <div class="services-textbox"> <h3>Lorem ipsum</h3> <p> consectetur adipiscing elit. Proin fermentum dolor tortor, id interdum diam pulvinar feugiat.</p> </div> <div class="clearfix"> </div> </div> </div> <div class="col-md-4"> <div class="top-space"> <div class="left-icon"> <span style="font-size: 45px" class="glyphicon glyphicon-road"></span> </div> <div class="services-textbox"> <h3>Lorem ipsum</h3> <p> consectetur adipiscing elit. Proin fermentum dolor tortor, id interdum diam pulvinar feugiat.</p> </div> <div class="clearfix"> </div> </div> </div> <div class="clearfix"> </div> </div> </div> <div class="portfolio bg-color2"> <div class="portfolio-items"> <div class="col-md-3 portfolio-item"> <div class="portfolio-img"> <img class="img-responsive" src="https://images.pexels.com/photos/230554/pexels-photo-230554.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" title="name"> </div> <div class="portfolio-text"> <a href="#"><span class="glyphicon glyphicon-link"></span></a> <h4>Car Care</h4> <p>Praesent sem risus, posuere ut turpis in, facilisis aliquet metus</p> </div> </div> <div class="col-md-3 portfolio-item"> <div class="portfolio-img"> <img class="img-responsive" src="https://images.pexels.com/photos/29842/pexels-photo-29842.jpg?w=940&h=650&auto=compress&cs=tinysrgb" title="name"> </div> <div class="portfolio-text"> <a href="#"><span class="glyphicon glyphicon-link"></span></a> <h4>vestibulum</h4> <p>Praesent sem risus, posuere ut turpis in, facilisis aliquet metus</p> </div> </div> <div class="col-md-3 portfolio-item"> <div class="portfolio-img"> <img class="img-responsive" src="https://images.pexels.com/photos/6003/man-hand-car-black.jpg?w=940&h=650&auto=compress&cs=tinysrgb" title="name"> </div> <div class="portfolio-text"> <a href="#"><span class="glyphicon glyphicon-link"></span></a> <h4>vestibulum</h4> <p>Praesent sem risus, posuere ut turpis in, facilisis aliquet metus</p> </div> </div> <div class="col-md-3 portfolio-item"> <div class="portfolio-img"> <img class="img-responsive" src="https://images.pexels.com/photos/198742/pexels-photo-198742.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" title="name"> </div> <div class="portfolio-text"> <a href="#"><span class="glyphicon glyphicon-link"></span></a> <h4>vestibulum</h4> <p>Praesent sem risus, posuere ut turpis in, facilisis aliquet metus</p> </div> </div> <div class="clearfix"> </div> <div class="col-md-3 portfolio-item"> <div class="portfolio-img"> <img class="img-responsive" src="https://images.pexels.com/photos/230554/pexels-photo-230554.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" title="name"> </div> <div class="portfolio-text"> <a href="#"><span class="glyphicon glyphicon-link"></span></a> <h4>Car Care</h4> <p>Praesent sem risus, posuere ut turpis in, facilisis aliquet metus</p> </div> </div> <div class="col-md-3 portfolio-item"> <div class="portfolio-img"> <img class="img-responsive" src="https://images.pexels.com/photos/29842/pexels-photo-29842.jpg?w=940&h=650&auto=compress&cs=tinysrgb" title="name"> </div> <div class="portfolio-text"> <a href="#"><span class="glyphicon glyphicon-link"></span></a> <h4>vestibulum</h4> <p>Praesent sem risus, posuere ut turpis in, facilisis aliquet metus</p> </div> </div> <div class="col-md-3 portfolio-item"> <div class="portfolio-img"> <img class="img-responsive" src="https://images.pexels.com/photos/6003/man-hand-car-black.jpg?w=940&h=650&auto=compress&cs=tinysrgb" title="name"> </div> <div class="portfolio-text"> <a href="#"><span class="glyphicon glyphicon-link"></span></a> <h4>vestibulum</h4> <p>Praesent sem risus, posuere ut turpis in, facilisis aliquet metus</p> </div> </div> <div class="col-md-3 portfolio-item"> <div class="portfolio-img"> <img class="img-responsive" src="https://images.pexels.com/photos/198742/pexels-photo-198742.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" title="name"> </div> <div class="portfolio-text"> <a href="#"><span class="glyphicon glyphicon-link"></span></a> <h4>vestibulum</h4> <p>Praesent sem risus, posuere ut turpis in, facilisis aliquet metus</p> </div> </div> </div> <div class="clearfix"> </div> <div class="top-padding2"> <div class="container text-center"> <p>posuere ut turpis in, facilisis aliquet metus</p> <br> <button type="button" class="btn btn-danger">Explore More</button> </div> </div> </div> <div class="top-padding2 bg-color3"> <div class="container-fluid "> <div class="row-fluid"> <div class="col-md-12"> <div class="col-md-3"> <ul> <p>GitHub</p> <li><a href="#">About us</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact & support</a></li> <li><a href="#">Enterprise</a></li> <li><a href="#">Site status</a></li> </ul> </div> <div class="col-md-3"> <ul class="unstyled"> <li>Applications<li> <li><a href="#">Product for Mac</a></li> <li><a href="#">Product for Windows</a></li> <li><a href="#">Product for Eclipse</a></li> <li><a href="#">Product mobile apps</a></li> </ul> </div> <div class="col-md-3"> <ul class="unstyled"> <li>Services<li> <li><a href="#">Web analytics</a></li> <li><a href="#">Presentations</a></li> <li><a href="#">Code snippets</a></li> <li><a href="#">Job board</a></li> </ul> </div> <div class="col-md-3"> <ul class="unstyled"> <li>More<li> <li><a href="#">Training</a></li> <li><a href="#">Students & teachers</a></li> <li><a href="#">The Shop</a></li> <li><a href="#">Plans & pricing</a></li> <li><a href="#">Contact us</a></li> </ul> </div> </div> </div> <hr> </div> </div> <div class="top-padding3 bg-color4"> <div class="row-fluid"> <div class="col-md-12"> <div class="col-md-8"> <a href="#">Terms of Service</a> <a href="#">Privacy</a> <a href="#">Security</a> </div> <div class="col-md-4"> <p class="muted pull-right">© 2013 Company Name. All rights reserved</p> </div> </div> </div> </div>

a {color: #f2f3f4;} a:hover {color: #ba0541;} .top-padding3{ padding-top: 15px; padding-bottom: 25px; } /* ************* 1 PORTFOLIO **********************/ .portfolio-items div.col-md-3 { padding: 0; } .portfolio-item { position: relative; } .portfolio-item:hover div.portfolio-text { display: block; } .portfolio-text { position: absolute; top: 0px; bottom: 0; width: 100%; padding: 1em; background: #f44248; display: none; text-align: center; padding-top:60px; color:#fff; } .top-padding2{ padding-top: 40px; padding-bottom: 30px; } /* ************* 1 COLOR **********************/ .bg-color1 { background-color:#f2f2f2; } .bg-color2 { background-color:#b20332; color:#fff; } .bg-color3 { background-color:#4f313a; color:#fff; } .bg-color4 { background-color:#0f0f0f; color:#fff; } /* ************* 1 Services css **********************/ .top-padding1 { padding-top: 80px; padding-bottom: 70px; } .top-space { padding: 1em 0; } .left-icon { float: left; width: 20%; margin-top: 1em; } .services-textbox { float: right; width: 78%; } .left-icon span.icons1 { background-position: -7px 0px; } .left-icon span { width: 64px; height: 64px; display: inline-block; background: url(../images/icons.png) no-repeat -8px 0px; vertical-align: middle; } /* ************* 2 Navigation Css **********************/ .navbar { font-family: helvetica, sans-serif; margin-bottom: 0; background-color: #b23e46; border: 0; font-size: 14px !important; letter-spacing: 1px; opacity: 0.9; } .navbar li a, .navbar .navbar-brand { color: #fff !important; } .navbar-nav li a:hover { color: #e8ced0 !important; } .navbar-default .navbar-toggle { border-color: transparent; } .open .dropdown-toggle { color: #fff; background-color: #555 !important; } /* .................. 3. Carousel ..........................*/ #myCarousel { max-height: 450px; width: auto; overflow: hidden; }