{Theme} comes with several types of boxes:
Icon Boxes
-
Icon Left:
Icon box left
HTML markup:
12345<div class="ct-iconBox ct-iconBox--leftIcon"><i class="ct-u-motive ct-u-size50 fa fa-bus"></i><h4 class="text-uppercase ct-fw-600 ct-u-size18">Bus Drivers</h4><p>Lorem ipsum dolor sit amet, coinsectei tur adipiscing elit. Proin lobortis quaiu sit amet turpis imperdiet finibus. </p></div> -
Icon Right:
Icon box right
HTML markup:
12345<div class="ct-iconBox ct-iconBox-motive ct-iconBox--rightIcon"><i class="ct-u-motive ct-u-size50 fa fa-music"></i><h4 class="text-uppercase ct-fw-600 ct-u-size18">Music</h4><p>Lorem ipsum dolor sit amet, coinsectei tur adipiscing elit. Proin lobortis quaiu sit amet turpis imperdiet finibus. </p></div>
Media Boxes
-
Video (with Magnific Popup):
Video Box
HTML markup:
12345<div class="ct-mediaBox"><a href="http://mazwai.com/system/posts/videos/000/000/086/preview_mp4_2/trim_hawaii--under_the_sea.mp4?1407079699" class="ct-js-magnificPopupMedia"><video muted="" class="ct-js-video" src="http://mazwai.com/system/posts/videos/000/000/086/preview_mp4_2/trim_hawaii--under_the_sea.mp4?1407079699"></video></a></div> -
Image (with Magnific Popup):
Image Box
HTML markup:
12345<div class="ct-mediaBox"><a href="assets/images/demo-content/FreshVideoImage02.png" class="ct-js-magnificPopupImage"><img src="assets/images/demo-content/FreshVideoImage02.png"></a></div> -
Text:
HTML markup:
Text Box
1234<div class="ct-mediaBox ct-mediaBox--text"><h3 class="text-uppercase">Media Boxes</h3><a href="http://mazwai.com/system/posts/videos/000/000/086/preview_mp4_2/trim_hawaii--under_the_sea.mp4?1407079699" class="ct-js-magnificPopupMedia"><span>view</span></a></div>
Counter Boxes
Counter Box
HTML markup:
|
1 2 3 4 5 |
<div class="ct-counterBox"> <span class="ct-counterBox-number ct-js-counter" data-ct-to="95" data-ct-speed="50">95</span> <h5 class="ct-counterBox-title text-uppercase ct-fw-700">Happy<br>Customers</h5> <span class="ct-counterBox-icon"><i class="icon-profile-male"></i> </span> </div> |
Count Down Boxes
Countdown Box
|
1 2 3 4 5 6 |
<div class="row centered text-center ct-u-paddingBoth30" id="counter"></div> <script src="assets/js/countdown/jquery.mb-comingsoon.min.js"></script> <script type="text/javascript"> $('#counter').mbComingsoon({expiryDate: new Date(2015, 0, 1, 9, 30), speed: 950}); </script> |
Numbered Boxes
Numbered box
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="ct-numberedBox"> <div class="ct-numberedBox-head"> <div class="ct-line ct-line--1 animated activate bounceInLeft ct-show" data-fx="bounceInLeft ct-show" data-time="0"></div> <div class="ct-line ct-line--2 animated activate bounceInLeft ct-show" data-fx="bounceInLeft ct-show" data-time="250"></div> <div class="ct-line ct-line--3 animated activate bounceInLeft ct-show" data-fx="bounceInLeft ct-show" data-time="500"></div> <h2 class="ct-fw-300 ct-u-positionRelative"><span class="">01</span></h2> </div> <h4 class="ct-fw-400">Offers Only For Members</h4> <p class="ct-u-paddingBottom20">Duis eu venenatis uturipis, uaiteui mu uopre itiium imetiusi. Nuillam iquiiis urt lacus faucimu bustum.</p> <button class="btn btn-motive"><span>Learn More <i class="fa fa-location-arrow"></i></span></button> </div> |