"Hotel Grid"
Bootstrap 3.0.0 Snippet by SammuMufeed

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!-- Carousel ================================================== --> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- 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> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="https://farm9.staticflickr.com/8109/8633449673_b729f92436_b.jpg" alt="First slide" class="banner-item"> <div class="container"> <div class="carousel-caption"> <h1>this is a place for those who <br>venture out</h1> <br> <p>VISIT THE MALDIVIAN DREAM</p> <br><br><br><br><br> </div> </div> </div> <div class="item"> <img src="images/b2.jpg" alt="Second slide" class="banner-item"> <div class="container"> <div class="carousel-caption"> <h1>Another example headline.</h1> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> </div> </div> </div> <div class="item"> <img src="images/b1.jpg" alt="First slide" class="banner-item"> <div class="container"> <div class="carousel-caption"> <h1>One more for good measure.</h1> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> </div> </div> </div> </div> <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><!-- /.carousel --> <div class="container-fluid main-text"> <h2>ADVENTURE IS EVERYWHERE.</h2> <p>EXPLORE THE UNEXPLORED</p> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-3 hotel-thumbs" style="background:#333;"> <img src="" class="cit"> <div class="text">VELAVARU ISLAND RESORT</div> </div> <div class="col-md-3 hotel-thumbs" style="height:300px; background:#CCC; padding:0;"> <img src="" class="cit"> <div class="text">MEERU ISLAND RESORT</div> </div> <div class="col-md-3 hotel-thumbs" style="background:#333;"> <img src="" class="cit" > <div class="text">KANUHURA ISLAND RESORT</div> </div> <div class="col-md-3 hotel-thumbs" style="background:#CCC;"> <img src="" class="cit"> <div class="text">BANDOS ISLAND RESORT</div> </div> <div class="col-md-3 hotel-thumbs" style="background:#333;"> <img src="" class="cit"> <div class="text">ZITHALI RESORTS</div> </div> <div class="col-md-3 hotel-thumbs" style="background:#CCC;"> <img src="" class="cit"> <div class="text">TAJ EXOTICA RESORT</div> </div> <div class="col-md-3 hotel-thumbs"> <img src="" class="cit"> <div class="text">MEERU ISLAND RESORT</div> </div> <div class="col-md-3 hotel-thumbs" style="background:#333;"> <img src="" class="cit"> <div class="text">MEERU HONEYMOON RESORT</div> </div> </div><!-- row --> </div><!-- /container --> <div class="container-fluid main-text"> <h2>MORE FROM OUR DESTINATIONS</h2> <p>YOU HAVE MORE TO EXPLORE</p> </div> <div class="container"> <div class="row"> <div class="col-md-4 col-xs-12 pull-right booking"></div> <div class="col-md-8 col-xs-12" style="background:#ccc; height:300px;"> <div class="row"> <div class="col-md-6" style="background:#000; height:150px;"></div> <div class="col-md-6" style="background:#fff; height:150px;"></div> <div class="col-md-6" style="background:#eee; height:150px;"></div> <div class="col-md-6" style="background:#bbb; height:150px;"></div> </div> </div> </div> </div> <div class="container-fluid main-text"> <h2>OUR TRAVEL PACKAGES</h2> <p>EXPERIENCE US</p> </div> <div class="container"> <div class="row"> <div class="col-md-3" style="background:#ccc; height:350px;"></div> <div class="col-md-3" style="background:#eee; height:350px;"></div> <div class="col-md-3" style="background:#666; height:350px;"></div> <div class="col-md-3" style="background:#999; height:350px;"></div> </div> </div>
/* GLOBAL STYLES -------------------------------------------------- */ /* Padding below the footer and lighter body text */ @import url(http://fonts.googleapis.com/css?family=Oswald:300); @import url(http://fonts.googleapis.com/css?family=Karla); @import url(http://fonts.googleapis.com/css?family=Cabin); body { padding-bottom: 40px; color: #5a5a5a; } /* CUSTOMIZE THE NAVBAR -------------------------------------------------- */ /* Special class on .container surrounding .navbar, used for positioning it into place. */ .navbar-wrapper { position: absolute; top: 0; right: 0; left: 0; z-index: 20; } /* Flip around the padding for proper display in narrow viewports */ .navbar-wrapper > .container { padding-right: 0; padding-left: 0; } .navbar-wrapper .navbar { padding-right: 15px; padding-left: 15px; } .navbar-wrapper .navbar .container { width: auto; } /* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */ /* Carousel base class */ .carousel { height: 650px; margin-bottom: 60px; } /* Since positioning the image, we need to help out the caption */ .carousel-caption { z-index: 10; } .carousel-caption h1 {font-family: 'Cabin'; text-transform: capitalize; font-size: 3em;} .item .carousel-caption p { font-family: 'Arimo', sans-serif; font-size: 1.2em; text-shadow:0;} /* Declare heights because of positioning of img element */ .carousel .item { height: 650px; background-color: #777; } .carousel-inner > .item > img { position: absolute; top: 0; left: 0; min-width: 100%; height: 650px; } /* MARKETING CONTENT -------------------------------------------------- */ /* Center align the text within the three columns below the carousel */ .marketing .col-lg-4 { margin-bottom: 20px; text-align: center; } .marketing h2 { font-weight: normal; } .marketing .col-lg-4 p { margin-right: 10px; margin-left: 10px; } /* Featurettes ------------------------- */ .featurette-divider { margin: 80px 0; /* Space out the Bootstrap <hr> more */ } /* Thin out the marketing headings */ .featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -1px; } /* RESPONSIVE CSS -------------------------------------------------- */ @media (min-width: 768px) { /* Navbar positioning foo */ .navbar-wrapper { margin-top: 20px; } .navbar-wrapper .container { padding-right: 15px; padding-left: 15px; } .navbar-wrapper .navbar { padding-right: 0; padding-left: 0; } /* The navbar becomes detached from the top, so we round the corners */ .navbar-wrapper .navbar { border-radius: 4px; } /* Bump up size of carousel content */ .carousel-caption p { margin-bottom: 20px; font-size: 21px; line-height: 1.4; } .featurette-heading { font-size: 50px; } } @media (min-width: 992px) { .featurette-heading { margin-top: 120px; } } .hotel-thumbs { position: relative; height:300px; background:#CCC; padding:0;} .hotel-thumbs .text { position: absolute; top:40%; color: #FFF; left: 0; right: 0; text-align: center; text-shadow: 2px 2px #7cbed0; /* Supports chrome 4.0+, ie 10.0+, firefox 3.5+, safari 4.0+, opera 9.6+ */ font-family: 'Oswald', sans-serif; font-weight: normal; font-size: 16px; word-spacing: 4px; letter-spacing: 4px; } .main-text { text-align: center; margin-bottom: 30px; margin-top: 70px; } .main-text h2 { font-family: 'Cabin', sans-serif; letter-spacing: 9px; font-size: 23px;} .main-text p { font-family: 'Karla', sans-serif; letter-spacing: 8px;} .booking { background: #444; height: 300px;}

Questions / Comments: