It is nice to let your visitors to know how to keep in touch with you. In {Theme} for Contact Information section we are using Slick slider. More information about this jQuery Slick plugin you will find in the documentation link down below.
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 |
<div data-autoplay="true" data-autoplaySpeed="3000" data-arrows="false" data-items-xs="2" data-items-sm="2" data-items-md="3" data-items-lg="4" data-items="1" class="ct-slick ct-js-slick ct-contact-information"> <div class="tablex item"><a href="https://www.google.pl/maps?q=121+King+Street,+Melbourne&um=1&ie=UTF-8&sa=X&ved=0CAcQ_AUoAWoVChMI6NOf-4DHyAIVgvxyCh02aA8-"> <div class="ct-contact-information-item ct-u-background--motive-15"> <div class="inner"><i class="fa fa-home"></i></div> <div class="inner"><span class="ct-contact-information-title h4">my location</span><span class="ct-contact-information-subtitle h5">121 King Street, Melbourne</span></div> </div></a> </div> <div class="tablex item"><a href="tel:08001234567"> <div class="ct-contact-information-item ct-u-background--motive-10"> <div class="inner"><i class="fa fa-mobile"></i></div> <div class="inner"><span class="ct-contact-information-title h4">phone no.</span><span class="ct-contact-information-subtitle h5">0 800 123 4567</span></div> </div></a> </div> <div class="tablex item"><a href="mailto:example@example.com"> <div class="ct-contact-information-item ct-u-background--motive-5"> <div class="inner"><i class="fa fa-envelope-o"></i></div> <div class="inner"><span class="ct-contact-information-title h4">e-mail address</span><span class="ct-contact-information-subtitle h5">example@example.com</span></div> </div></a> </div> <div class="tablex item"> <div class="ct-contact-information-item ct-u-background--motive"> <div class="inner"><i class="fa fa-clock-o"></i></div> <div class="inner"><span class="ct-contact-information-title h4">working time</span><span class="ct-contact-information-subtitle h5">Mon-Fri, 9-5</span></div> </div> </div> </div> |
Screenshot
Contact Information
Slick Custom Tweaks
New Responsive data-attributes for ease of use:
- data-items-xl
- data-items-lg
- data-items-md
- data-items-sm
- data-items-xs
Slick Documentation can be found here. Files are bundled inside sella.min.js & style.css