Elements
These modular elements can be readily used and customized across pages and in different blocks.
Default Timer <> show code
<div class="count-down no-title">
<div class="simple_timer"></div>
</div>
How to use
This countdown is designed using syotimer jquery plugin. You can find the whole documentation of how to use it in the website. Here are some instructions for the example design as shown:
- Use .count-down wrapper for all timer
- The .no-title class used if you dont want to show Days, Hours, Minutes, Seconds as caption
- Use a class or id as a hook to javascript as the following example
$('.simple_timer').syotimer({ year: 2018, month: 5, day: 9, hour: 20, minute: 30 });
Example
Timer With Title <> show code
<!-- Default -->
<div class="count-down titled">
<div class="simple_timer"></div>
</div>
<!-- Circled -->
<div class="count-down titled circled">
<div class="simple_timer"></div>
</div>
<!-- colored background -->
<div class="count-down bg-primary colored-bg text-center titled circled">
<div class="simple_timer"></div>
</div>
<!-- Image background -->
<div class="count-down bg-image titled circled" style="background-image: url('../..');">
<div class="simple_timer"></div>
</div>
How to use
For the different customization follow the instructions:
- Use a class or id as a hook to javascript as the following example
$('.simple_timer').syotimer({ year: 2018, month: 5, day: 9, hour: 20, minute: 30 }); - The .titled class is used to show Days, Hours, Minutes, Seconds as caption
- Use the .circled class with .count-down for the circle timer
- The .bg-image class let's you to set a image as background
Example
Circled
Example
Colored Background
Example
Image Background
Example
Default Counter Up <> show code
<!-- Default style -->
<div class="count-down">
<div class="fun-text">
<span class="counter">25</span><span>+</span>
<p>Years of Experience</p>
</div>
<div class="fun-text">
<span class="counter">700</span><span>+</span>
<p>Happy Customers</p>
</div>
<div class="fun-text">
<span class="counter">50</span><span>+</span>
<p>our Expert staffs</p>
</div>
</div>
<!-- Color background -->
<div class="count-down colored-bg bg-primary text-center">
...
</div>
<!-- Image Background -->
<div class="count-down bg-image shadow text-center" style="background-image: url('.../..');">
...
</div>
How to use
This counter up is designed using Counter-Up jquery plugin. You can find the whole documentation of how to use it in the website. Here are some instructions for the example design as shown:
- Use a class or id as a hook to javascript as the following example
$('.counter').counterUp({ delay : 10, time : 3000 }); - For the basic style just use any class .count-down
- Wrap the .counter into .fun-text
- .colored-bg used for color background
- .bg-image used for image background and use .shadow for the overlay on the image
Example
25+
Years of Experience
700+
Happy Customers
50+
our Expert staffs
Colored Background
Example
25+
Years of Experience
700+
Happy Customers
50+
our Expert staffs
Image Background
Example
25+
Years of Experience
700+
Happy Customers
50+
our Expert staffs