HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<section class="ct-mediaSection" data-type="parallax" data-height="863" data-background="../assets/images/demo-content/media-section-2.jpg" data-stellar-background-ratio="0.2" data-background-mobile="../assets/images/demo-content/media-section-2.jpg"> <div class="ct-mediaSection-inner"> <div class="container"> <div class="col-sm-8 ct-u-backgroundDark"> <div class="ct-sectionHeader ct-sectionHeader--type2 ct-u-marginBottom50 text-center"> <h3 class="ct-sectionHeader-title text-uppercase text-center ct-u-colorWhite"> Our room types</h3> </div> <div class="media ct-iconBox ct-iconBox--type3"> <div class="media-left"> <span class="media-object ct-iconBox-icon ct-icon-bedSingle" role="presentation"></span> </div> <div class="media-body"> <h5 class="media-heading ct-u-colorWhite">Single private ensuite</h5> <p class="ct-u-colorWhite ct-iconBox-description">Contains 1 single bed, bathroom, desk, flat screen tv, wifi access, hair dryer, wardrobe & towels.</p> </div> </div> <div class="media ct-iconBox ct-iconBox--type3"> <div class="media-left"> <span class="media-object ct-iconBox-icon ct-icon-bedDouble" role="presentation"></span> </div> <div class="media-body"> <h5 class="media-heading ct-u-colorWhite">Double room ensuite</h5> <p class="ct-u-colorWhite ct-iconBox-description">Contains 1 single bed, bathroom, desk, flat screen tv, wifi access, hair dryer, wardrobe & towels.</p> </div> </div> <div class="media ct-iconBox ct-iconBox--type3"> <div class="media-left"> <span class="media-object ct-iconBox-icon ct-icon-bedTwin" role="presentation"></span> </div> <div class="media-body"> <h5 class="media-heading ct-u-colorWhite">Twin private ensuite</h5> <p class="ct-u-colorWhite ct-iconBox-description">Contains 1 single bed, bathroom, desk, flat screen tv, wifi access, hair dryer, wardrobe & towels.</p> </div> </div> <div class="media ct-iconBox ct-iconBox--type3"> <div class="media-left"> <span class="media-object ct-iconBox-icon ct-icon-bedTriple" role="presentation"></span> </div> <div class="media-body"> <h5 class="media-heading ct-u-colorWhite">Triple private ensuite</h5> <p class="ct-u-colorWhite ct-iconBox-description">Contains 1 single bed, bathroom, desk, flat screen tv, wifi access, hair dryer, wardrobe & towels.</p> </div> </div> <div class="media ct-iconBox ct-iconBox--type3"> <div class="media-left"> <span class="media-object ct-iconBox-icon ct-icon-bedTwin" role="presentation"></span> </div> <div class="media-body"> <h5 class="media-heading ct-u-colorWhite">4, 6 or 8 bed dorm / bunk bed</h5> <p class="ct-u-colorWhite ct-iconBox-description">All beds come with private reading lamp, fleece blankets and pillows. Each bed has its own storage locker that can be locked. Bed linen is provided.</p> </div> </div> </div> <img src="../assets/images/demo-content/chambermaid.png" class="ct-mediaSection-Subimage animated hidden-sm" data-fx="fadeInUp" data-time="1000" alt="Chambermaid"/> </div> </div> </section> |
JavaScript
<script src=”../assets/js/ct-mediaSection/js/smoothScroll.js”></script><script src=”../assets/js/ct-mediaSection/js/jquery.stellar.min.js”></script>
<script src=”../assets/js/ct-mediaSection/js/media-section.js”></script>
Screenshot
Divided icon wall