<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <div class="container"> <a class="navbar-brand" href="#">Kilimanjaro Hotel</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </div> </nav> <header> <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <!-- Slide One - Set the background image for this slide in the line below --> <div class="carousel-item active" style="background-image: url('https://source.unsplash.com/RCAhiGJsUUE/1920x1080')"> <div class="carousel-caption d-none d-md-block"> <h3 class="display-4">Karibu Kilimanjaro</h3> <p class="lead">This is a description for the first slide.</p> </div> </div> <!-- Slide Two - Set the background image for this slide in the line below --> <div class="carousel-item" style="background-image: url('https://source.unsplash.com/wfh8dDlNFOk/1920x1080')"> <div class="carousel-caption d-none d-md-block"> <h3 class="display-4">5 star Hotel</h3> <p class="lead">This is a description for the second slide.</p> </div> </div> <!-- Slide Three - Set the background image for this slide in the line below --> <div class="carousel-item" style="background-image: url('https://source.unsplash.com/O7fzqFEfLlo/1920x1080')"> <div class="carousel-caption d-none d-md-block"> <h3 class="display-4">Home away from home</h3> <p class="lead">This is a description for the third slide.</p> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </header> <!-- Page Content --> <section class="py-5"> <div class="container text-center"> <h1 class="font-weight-light">Kilimanjaro Hotel</h1> <p class="lead">Welcome to Kilimanjaro Hotel a place for real lux an confortable Holday <a href="https://kilimanjaro.com">Webublog</a>!</p> </div> </section> <!-- Page Content --> <div class="container"> <div class="col-lg-12"> <h1 class="font-weight-light text-center text-lg-left mt-4 mb-0">Our Popular Destinations</h1> <hr class="mt-2 mb-5"> <div class="row text-center text-lg-left"> <div class="col-lg-6 col-md-4 col-6 p-1"> <a href="#" class="d-block h-100"> <img class="img-fluid w-100" src="https://source.unsplash.com/pWkk7iiCoDM/400x300" alt=""> </a> <div class="card-img-overlay text-white"> <h2 class="ugali">Mwanza</h2> </div> </div> <div class="col-lg-3 col-md-4 col-6 p-1"> <a href="#" class="d-block mb-4 h-100"> <img class="img-fluid" src="https://source.unsplash.com/aob0ukAYfuI/400x300" alt=""> </a> <div class="card-img-overlay text-white"> <h2 class="ugali">Mwanza</h2> </div> </div> <div class="col-lg-3 col-md-4 col-6 p-1"> <a href="#" class="d-block h-100"> <img class="img-fluid " src="https://source.unsplash.com/EUfxH-pze7s/400x300" alt=""> </a> <div class="card-img-overlay text-white"> <h2>Arusha</h2> </div> </div> <div class="col-lg-3 col-md-6 col-6 p-1"> <a href="#" class="d-block h-100"> <img class="img-fluid" src="https://source.unsplash.com/M185_qYH8vg/400x300" alt=""> </a> <div class="card-img-overlay text-white"> <h2 class="ugali">Mwanza</h2> </div> </div> <div class="col-lg-3 col-md-4 col-6 p-1"> <a href="#" class="d-block mb-4 h-100"> <img class="img-fluid" src="https://source.unsplash.com/sesveuG_rNo/400x300" alt=""> </a> <div class="card-img-overlay text-white"> <h2 class="ugali">Mwanza</h2> </div> </div> <div class="col-lg-6 col-md-8 col-8 p-1"> <a href="#" class="d-block h-100"> <img class="img-fluid w-100 fix-im" src="https://source.unsplash.com/AvhMzHwiE_0/400x300" alt=""> </a> <div class="card-img-overlay text-white"> <h2 class="ugali">Mwanza</h2> </div> </div> <div class="col-lg-4 col-md-8 col-6 p-1 fix-im"> <a href="#" class="d-block h-100"> <img class="img-fluid" src="https://source.unsplash.com/sesveuG_rNo/400x300" alt=""> </a> <div class="card-img-overlay text-white"> <h2 class="ugali">Mwanza</h2> </div> </div> <div class="col-lg-4 col-md-6 col-8 p-1"> <a href="#" class="d-block h-100"> <img class="img-fluid fix-im" src="https://source.unsplash.com/AvhMzHwiE_0/400x300" alt=""> </a> <div class="card-img-overlay text-white"> <h2 class="ugali">Mwanza</h2> </div> </div> <div class="col-lg-4 col-md-4 col-6 p-1"> <a href="#" class="d-block h-100"> <img class="img-fluid fix-im" src="https://source.unsplash.com/2gYsZUmockw/400x300" alt=""> </a> <div class="card-img-overlay text-white"> <h2 class="ugali">Mwanza</h2> </div> </div> </div> </div> </div> <!-- /.container --> <!-- Header --> <header class="bg-primary text-center py-5 mb-4"> <div class="container"> <h1 class="font-weight-light text-white">Book With Us Now and get 10% discaunt!</h1> </div> </header> <!-- Page Content --> <div class="container py-4 mt-4"> <!-- Page Heading --> <h1 class="my-4 text-info display-4">VIP Destination Packages,<BR/> <small class="text-secondary">Lux with Kilimanjaro Hotel</small> </h1> <p class="lead ">OTHER top Destination</p> <button type="button" class="text-info shadow border-0 btn btn-outline-secondary">Miami</button> <button type="button" class="text-info shadow border-0 btn btn-outline-secondary">Moshi</button> <button type="button" class="text-info shadow border-0 btn btn-outline-secondary">Dar es salaam</button> <button type="button" class="text-info shadow border-0 btn btn-outline-secondary">Arusha</button> <button type="button" class="text-info shadow border-0 btn btn-outline-secondary">Penckin</button> <div class="row mt-4"> <div class="col-lg-3 col-sm-6 mb-4"> <div class="card shadow border-0 h-100"> <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a> <div class="card-body"> <h4 class="card-title"> <a href="#">Hotel Package</a> </h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p> </div> </div> </div> <div class="col-lg-3 col-sm-6 mb-4"> <div class="card shadow border-0 h-100"> <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a> <div class="card-body"> <h4 class="card-title"> <a href="#">Hotel Package</a> </h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p> </div> </div> </div> <div class="col-lg-3 col-sm-6 mb-4"> <div class="card shadow border-0 h-100"> <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a> <div class="card-body"> <h4 class="card-title"> <a href="#">Hotel Package</a> </h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p> </div> </div> </div> <div class="col-lg-3 col-sm-6 mb-4"> <div class="card shadow border-0 h-100"> <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a> <div class="card-body"> <h4 class="card-title"> <a href="#">Hotel Packager</a> </h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p> </div> </div> </div> </div> </div> <!-- Page Content --> <div class="container py-4 mt-4"> <p class="display-3">Meet our Hotel Team</p> <div class="row"> <!-- Team Member 1 --> <div class="col-xl-3 col-md-6 mb-4"> <div class="card border-0 shadow"> <img src="https://source.unsplash.com/TMgQMXoglsM/500x350" class="card-img-top" alt="..."> <div class="card-body text-center"> <h5 class="card-title mb-0">Team Member</h5> <div class="card-text text-black-50">Web Developer</div> </div> </div> </div> <!-- Team Member 2 --> <div class="col-xl-3 col-md-6 mb-4"> <div class="card border-0 shadow"> <img src="https://source.unsplash.com/9UVmlIb0wJU/500x350" class="card-img-top" alt="..."> <div class="card-body text-center"> <h5 class="card-title mb-0">Team Member</h5> <div class="card-text text-black-50">Web Developer</div> </div> </div> </div> <!-- Team Member 3 --> <div class="col-xl-3 col-md-6 mb-4"> <div class="card border-0 shadow"> <img src="https://source.unsplash.com/sNut2MqSmds/500x350" class="card-img-top" alt="..."> <div class="card-body text-center"> <h5 class="card-title mb-0">Team Member</h5> <div class="card-text text-black-50">Web Developer</div> </div> </div> </div> <!-- Team Member 4 --> <div class="col-xl-3 col-md-6 mb-4"> <div class="card border-0 shadow"> <img src="https://source.unsplash.com/ZI6p3i9SbVU/500x350" class="card-img-top" alt="..."> <div class="card-body text-center"> <h5 class="card-title mb-0">Team Member</h5> <div class="card-text text-black-50">Web Developer</div> </div> </div> </div> </div> <!-- /.row --> </div> <!-- /.container -->

.carousel-item { height: 65vh; min-height: 350px; background: no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .fix-im { position: relative; bottom:11rem; } @media screen and (max-width:768px){ .flex-100 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .fix-im {bottom: 0rem;} } .ugali { background: black; padding: 6px; }