HTML Markup :
Icon box 1
Icon Box
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="ct-iconBox-1"> <div class="ct-icon"> <img src="assets/images/Speach.png" alt=""/> </div> <p class="ct-u-paddingBoth20"> No one would have believed in the last years of the nine- teenth century that this world was being watched keenly. </p> <h6> <a class="btn btn-link"> At most terrestrial men fancied </a> </h6> </div> |
Icon box 2 – animated counter
|
1 2 3 4 5 6 7 8 |
<div class="ct-iconBox-2"> <div class="ct-icon animated activate pulse infinite"> <img src="assets/images/notebook-icon.png" alt=""/> </div> <span class="ct-fw-700 ct-u-colorWhite ct-js-counter" data-ct-to="512" data-ct-speed="5000">0</span> <p>Praesentium</p> </div> |
Icon box 3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="ct-u-displayTableVertical"> <div class="ct-u-displayTableCell"> <div class="ct-iconBox-3"> <div class="ct-img-wrapper-2"> <img src="assets/images/progress-1.jpg" alt=""/> <i class="fa fa-angle-right animated activate pulse infinite"></i> </div> <h5 class="ct-fw-600 ct-u-paddingTop30 ct-u-paddingBottom20">Perspiciatis unde</h5> <p class="ct-content"> No one would have believed in the last years of the nine- teenth century that this world was being watched keenly </p> </div> </div> </div> |
CSS Classes
ct-iconBox-1, .ct-iconBox-2, .ct-iconBox-3: Icon boxes type.
ct-icon: Sets size for image or icon.
ct-img-wrapper-2: Sets position relative.
ct-img-wrapper-2: returns position relative.
ct-fw-700: font weight 700.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
ct-u-displayTableVertical{ display: table; .ct-u-displayTableCell{ vertical-align: middle; } } .ct-u-displayTableRow{ display: table-row; } .ct-u-displayTableCell{ display: table-cell; } |
animated, activate, pulse, infinite: Add animation to the icon, requires using ‘cssAnimate‘ class in body HTML attribute.
Class ‘pulse‘ can be replaced with other class like ‘wobble‘ or ‘shake‘ to receive different animation
ct-content: some description, text, etc.
ct-u-colorWhite: gives white color to a component.
Icon boxes may be used as counters, therefore js classes are required.
To create a counter, remember to attach “ct-js-counter” class to counter component like below:
|
1 2 |
<span class="ct-js-counter" data-ct-to="512" data-ct-speed="5000">0</span> |
You can edit counter settings with the following data attributes:
data-ct-to: Max value for counter to count.
data-ct-speed: Counter speed.
Remember to attach the following script to your HTML page, when you want to use a counter:
|
1 2 |
<script src="assets/js/counter/jquery.countTo.js"></script>, <script src="assets/js/counter/init.js"></script> |