Disrupt - Single Product e-Commerce HTML Template – Responsive HTML5 Template
Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to start new ticket on this page. Thanks so much!
Scope of free support
We can help you with:
- Responding to questions or problems regarding the item and its features
- Fixing any discovered item’s bugs
- Providing updates to ensure compatibility with new software versions
Back to top
Was this article helpful ?
HTML Structure
This theme is built upon bootstrap framework and is fully responsive. It adapts to window resolution and looks good on all devices including iPad and iPhone.
See for yourself (resize your browser).
If you would like to read more
about bootstrap framework click here :
Grid System and Single row structure
The default Bootstrap grid system utilizes 12 columns. It’s responsive grid and adapts to viewport. Below 767px viewports, the columns become fluid and stack vertically. The fluid grid system uses percents instead of pixels for column widths. Each row always include 12 columns (for example col-md-8 + col-md-4 = col-md-12).
Bootstrap documentation: here
Basic grid HTML:
|
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 |
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> |
Page structure
Below you will find default page structure :
|
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 |
<!DOCTYPE html> <html> <head> [css] </head> <body> [header] [main menu] <!-- main container --> <div id="wrapper"> [component 1] <!-- fullwidth element --> </div> [fullwidth parallax] <div class="container"> <!-- / fullwidth element --> [component 6] </div> <!-- / main container --> [footer] [javascripts] </body> </html> |
Back to top
Was this article helpful ?
CSS files and structure
If you would like to edit the color, font, or style of any elements, you would do the following:
|
1 |
#primaryContent a {color: #someColor;} |
If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn’t a similar style that has more weight.
I.E.
|
1 |
#wrap #primaryContent a {color: #someColor;} |
So, to ensure that your new styles are applied, make sure that they carry enough “weight” and that there isn’t a style lower in the CSS file that is being applied after yours.
Colors
The theme includes a css file wich you can use to edit the colors.
You just need to add the corresponding CSS file to the head of the page like this:
|
1 2 3 4 5 |
<head> (..) <link rel="stylesheet" type="text/css" href="css/motive.css"> (..) </head> |
Icons
We’ve included 360+ font icons.
Awesome Icons – http://fontawesome.io/icons/
HTML markup:
|
1 2 |
<!-- Awesome Icons --> <i class="fa fa-cog"></i> |
CSS Files & Structure
We’ve included 2 files.
bootstrap.css contains Bootstrap 3 Library.
style.css file contains general styles.
style.less
- variables
- mixins
- animate
- slick
- selectize
- global
- utili
- lightgallery
- lg-transitions
- date-picker
- shop-locator
- navbar
- footer
- buttons
- contact-form
- toggleables
- tooltip
- typography
Back to top
Was this article helpful ?
Java Script Components
JavaScript files:
- datetime-picker
- gmaps
- jquery.isotope.min.js – http://isotope.metafizzy.co/
- lightgallery.js – http://sachinchoolur.github.io/lightGallery/demos/
- MENU-EFFECT
- paypal-html-shop – more information about this plugin you will find HERE
- progressBar
- selectize.min.js
- shop-locator – more information about this plugin you will find HERE
- slick.js – http://kenwheeler.github.io/slick/
- jquery.min.js – https://jquery.com/
- skrollr.min.js – http://prinzhorn.github.io/skrollr/
- datepicker
- selectize.min.js – https://brianreavis.github.io/selectize.js/
- paypal-html-shop – more information about this plugin you will find HERE
- progressBar
- slick.js – http://kenwheeler.github.io/slick/
- helpers.js
- bootstrap.min.js – http://getbootstrap.com/getting-started/
- browser.min.js – https://github.com/gabceb/jquery-browser-plugin
- device.min.js – https://github.com/borismus/device.js/tree/master/build
- jquery.appear.js
- jquery.placeholder.min.js – https://github.com/mathiasbynens/jquery-placeholder
- main.js
Screenshot
Back to top
Was this article helpful ?
Preloader
In Disrupt - Single Product e-Commerce HTML Template we are using Pace preloader.
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="ct-preloader"> <div class="ct-preloader-inner"> <div class="ct-preloader-logo"> <img src="../assets/images/demo-content/drone/distrupt-logo-dark.png" alt=""> <h6 class="ct-preloader-title">Please wait, loading...</h6> <div class="loading"> <div class="loading-line"></div> <div class="loading-break loading-dot-1"></div> <div class="loading-break loading-dot-2"></div> <div class="loading-break loading-dot-3"></div> </div> </div> </div> </div> |
This HTMl is added to the body of the HTML
|
1 2 3 |
<body> preloader </body> |
ScreenShot
Loader
JavaScript
|
1 |
$('.ct-preloader').fadeOut('slow'); |
You will find this code on path ../assets/js/main.js
Back to top
Was this article helpful ?
Navigation
Navigation is really important part of the theme. In Disrupt - Single Product e-Commerce HTML Template we have 3 variations of it. The menu markup also contains search bar.
- Default navigation
- Navbar wide navigation
- Navbar white
- Navbar dark
— Default navigation
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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<nav data-height="80" class="navbar navbar-default navbar-desktop navbar--animated navbar-top"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="navbar-header"> <a href="index.html" class="navbar-brand"> <img src="../assets/images/demo-content/drone/distrupt-logo-dark.png" alt=""> </a> </div> <ul class="navbar-buttons list-unstyled list-inline pull-right"> <li><a href="" class="btn-group btn-group--separated"><span class="btn btn-xs btn-accient btn-separated">Order now</span><span class="btn btn-xs btn-accient btn-separated"><i class="fa fa-shopping-cart"></i></span></a> </li> </ul> <ul role="menu" class="nav navbar-nav ct-navbar--fadeIn"> <li class="nav-item dropdown"><a>Home</a> <ul role="menu" class="dropdown-menu"> <li class="nav-item"><a href="index3.html">Smartwatch</a> </li> <li class="nav-item"><a href="index.html">Drone</a> </li> <li class="nav-item"><a href="index5.html">Smartphone</a> </li> <li class="nav-item"><a href="index2.html">Beacon</a> </li> <li class="nav-item dropdown-submenu"><a href="index4.html">Vr mask</a> <ul role="menu" class="dropdown-menu"> <li class="nav-item"><a href="#">Submenu 1</a> </li> <li class="nav-item"><a href="#">Submenu 2</a> </li> <li class="nav-item"><a href="#">Submenu 3</a> </li> <li class="nav-item"><a href="#">Submenu 4</a> </li> </ul> </li> </ul> </li> <li class="nav-item"><a href="#">Features</a> </li> <li class="nav-item"><a href="#">Product</a> </li> <li class="nav-item dropdown"><a>Pages</a> <ul role="menu" class="dropdown-menu"> <li class="nav-item"><a href="services.html">Services</a> </li> <li class="nav-item"><a href="shop-locator.html">Shop locator</a> </li> <li class="nav-item"><a href="press-kit.html">Press kit</a> </li> <li class="nav-item"><a href="404.html">404 page</a> </li> <li class="nav-item"><a href="faq.html">FAQ</a> </li> <li class="nav-item"><a href="investors.html">Investors</a> </li> <li class="nav-item"><a href="privacy-policy.html">Privacy Policy</a> </li> <li class="nav-item"><a href="terms-conditions.html">Terms & conditions</a> </li> </ul> </li> <li class="nav-item"><a href="about-us.html">About us</a> </li> <li class="nav-item"><a href="contact-us.html">Contact</a> </li> </ul> </div> </div> </div> </nav> |
Screenshots
Default navigation
— Navbar wide navigation
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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<nav data-background="#ffffff" data-height="80" class="navbar navbar-default navbar-fixed navbar-desktop navbar-wide"> <div class="navbar-header"> <a href="index.html" class="navbar-brand"> <div class="inner"> <img src="../assets/images/demo-content/drone/distrupt-logo-dark.png" alt=""> </div> </a> <ul class="ct-socials ct-socials--motive list-unstyled list-inline"> <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Facebook"><i class="fa fa-facebook"></i></a> </li> <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Twitter"><i class="fa fa-twitter"></i></a> </li> <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Pinterest"><i class="fa fa-pinterest"></i></a> </li> </ul> <div class="ct-contactBox"><a href="tel:123456789"><span class="ct-contactBox-top">Call us now:</span><span class="ct-contactBox-number">0 123 456 7890</span></a> </div> <div class="ct-iconBox ct-iconBox--small media ct-contactBox--responsive"> <a href="tel:123456789"> <div class="media-left"> <div class="ct-iconBox-icon"><i class="fa fa-phone"></i> </div> </div> </a> </div> <div class="ct-iconBox ct-iconBox--small media"> <a href="shop-locator.html"> <div class="media-left"> <div class="ct-iconBox-icon"><i class="fa fa-map-marker"></i> </div> </div> <div class="media-body"> <h6 class="ct-iconBox-title">Locate <br> our shop</h6> </div> </a> </div> </div> <div class="ct-search-link"><a href="#"><i class="fa fa-search"></i></a> </div> <ul role="menu" class="nav navbar-nav ct-navbar--fadeIn"> <li class="nav-item dropdown"><a>Home</a> <ul role="menu" class="dropdown-menu"> <li class="nav-item"><a href="index3.html">Smartwatch</a> </li> <li class="nav-item"><a href="index.html">Drone</a> </li> <li class="nav-item"><a href="index5.html">Smartphone</a> </li> <li class="nav-item"><a href="index2.html">Beacon</a> </li> <li class="nav-item dropdown-submenu"><a href="index4.html">Vr mask</a> <ul role="menu" class="dropdown-menu"> <li class="nav-item"><a href="#">Submenu 1</a> </li> <li class="nav-item"><a href="#">Submenu 2</a> </li> <li class="nav-item"><a href="#">Submenu 3</a> </li> <li class="nav-item"><a href="#">Submenu 4</a> </li> </ul> </li> </ul> </li> <li class="nav-item"><a href="#">Product</a> </li> <li class="nav-item"><a href="#">Experience</a> </li> <li class="nav-item dropdown"><a>Pages</a> <ul role="menu" class="dropdown-menu"> <li class="nav-item"><a href="services.html">Services</a> </li> <li class="nav-item"><a href="shop-locator.html">Shop locator</a> </li> <li class="nav-item"><a href="press-kit.html">Press kit</a> </li> <li class="nav-item"><a href="404.html">404 page</a> </li> <li class="nav-item"><a href="faq.html">FAQ</a> </li> <li class="nav-item"><a href="investors.html">Investors</a> </li> <li class="nav-item"><a href="privacy-policy.html">Privacy Policy</a> </li> <li class="nav-item"><a href="terms-conditions.html">Terms & conditions</a> </li> </ul> </li> <li class="nav-item"><a href="about-us.html">About us</a> </li> <li class="nav-item"><a href="contact-us.html">Contact</a> </li> <li class="nav-item"><a href="#">Order now</a> </li> </ul> </nav> |
Screenshot
Navbar whide
— Navbar white
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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<nav data-height="80" class="navbar navbar-default navbar-light navbar-desktop navbar--animated navbar-top"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="navbar-header"> <a href="index.html" class="navbar-brand"> <img src="../assets/images/demo-content/smartphone/logo-light.png" alt=""> </a> </div> <ul class="navbar-buttons list-unstyled list-inline pull-right"> <li><a href="" class="btn-group btn-group--separated"><span class="btn btn-xs btn-transparent btn--white btn-separated">Order now</span><span class="btn btn-xs btn-transparent btn--white btn-separated"><i class="fa fa-shopping-cart"></i></span></a> </li> </ul> <ul role="menu" class="nav navbar-nav ct-navbar--fadeIn"> <li class="nav-item dropdown"><a>Home</a> <ul role="menu" class="dropdown-menu"> <li class="nav-item"><a href="index3.html">Smartwatch</a> </li> <li class="nav-item"><a href="index.html">Drone</a> </li> <li class="nav-item"><a href="index5.html">Smartphone</a> </li> <li class="nav-item"><a href="index2.html">Beacon</a> </li> <li class="nav-item dropdown-submenu"><a href="index4.html">Vr mask</a> <ul role="menu" class="dropdown-menu"> <li class="nav-item"><a href="#">Submenu 1</a> </li> <li class="nav-item"><a href="#">Submenu 2</a> </li> <li class="nav-item"><a href="#">Submenu 3</a> </li> <li class="nav-item"><a href="#">Submenu 4</a> </li> </ul> </li> </ul> </li> <li class="nav-item"><a href="#">Features</a> </li> <li class="nav-item"><a href="#">Product</a> </li> <li class="nav-item dropdown"><a>Pages</a> <ul role="menu" class="dropdown-menu"> <li class="nav-item"><a href="services.html">Services</a> </li> <li class="nav-item"><a href="shop-locator.html">Shop locator</a> </li> <li class="nav-item"><a href="press-kit.html">Press kit</a> </li> <li class="nav-item"><a href="404.html">404 page</a> </li> <li class="nav-item"><a href="faq.html">FAQ</a> </li> <li class="nav-item"><a href="investors.html">Investors</a> </li> <li class="nav-item"><a href="privacy-policy.html">Privacy Policy</a> </li> <li class="nav-item"><a href="terms-conditions.html">Terms & conditions</a> </li> </ul> </li> <li class="nav-item"><a href="about-us.html">About us</a> </li> <li class="nav-item"><a href="contact-us.html">Contact</a> </li> </ul> </div> </div> </div> </nav> |
Screenshot
Navbar whide
— Navbar dark
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 |
<nav data-height="80" class="navbar navbar-dark navbar-fixed navbar-desktop"> <div class="container"> <div class="row"> <div class="col-sm-4"> <ul class="list-unstyled list-inline ct-socials--rounded"> <li><a href="#"><i class="fa fa-facebook"></i></a> </li> <li><a href="#"><i class="fa fa-twitter"></i></a> </li> <li><a href="#"><i class="fa fa-instagram"></i></a> </li> </ul> </div> <div class="col-sm-4"> <div class="navbar-header"> <a href="index.html" class="navbar-brand"> <img src="../assets/images/demo-content/beacon/distrupt-logo-light.png" alt=""> </a> </div> </div> <div class="col-sm-4"> <ul role="menu" class="nav navbar-nav"> <li class="ct-productCart-link"><a href="#"><i class="fa fa-shopping-cart"></i></a> <div class="ct-productCart"> </div> </li> <li class="nav-item-toggle"><a href="#"><i class="fa fa-bars"></i></a> </li> </ul> </div> </div> </div> </nav> |
Screenshot
Navbar dark
Back to top
Was this article helpful ?
Section Header
In Disrupt - Single Product e-Commerce HTML Template we have one varsion of this element that can be created using this markup below
HTML markup
|
1 2 3 4 |
<div class="ct-sectionHeader ct-sectionHeader--typeDarken ct-sectionHeader--subtitleItalic text-center"> <h3 class="ct-sectionHeader-title">Features</h3> <h4 class="ct-sectionHeader-subtitle">We were developing our drone for 3 years. After many prototypes we are ready to show you nothing less than perfection.</h4> </div> |
Screenshot
Section header
Back to top
Was this article helpful ?
Accordion
HTML markup example
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="1" role="tablist" aria-multiselectable="true" class="panel-group ct-accordion-dark"> <div class="panel panel-default"> <div role="tab" id="header-1" class="panel-heading"> <h4 class="panel-title"><a aria-controls="collapse-1" aria-expanded="true" data-parent="#1" data-toggle="collapse" href="#collapse-1" role="button">When the product will be available in shops worldwide?</a></h4> </div> <div id="collapse-1" role="tabpanel" aria-labelledby="header-1" class="panel-collapse collapse"> <div class="panel-body"> <p>Our plan is to release the device around Q3 2017. We know it is a lot of time but at the same moment we want to deliver the best possible quality</p> </div> </div> </div> </div> |
Screenshot
Accordion Open and Closed
JavaScript
Bootstrap Documentation for Accorion can be found Here.
Back to top
Was this article helpful ?
Divider section
In Disrupt - Single Product e-Commerce HTML Template we have 2 versions of Divider sections.
- Default
- Currency
Default
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 |
<section id="next-section-1" class="ct-dividerSection ct-dividerSection--motive ct-call-to-action--type1 ct-u-padding-both-60"> <div class="inner"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="ct-dividerSection--left"> <div class="ct-iconBox ct-iconBox--type3 ct-iconBox--white media"> <div class="media-left"> <img src="../assets/images/demo-content/drone/icon-2.png" alt=""> </div> <div class="media-body"> <h4 class="ct-iconBox-title">pre-Order Now For $299</h4> <p class="ct-iconBox-description">Get free gift and become our special member</p> </div> </div> </div> <div class="ct-dividerSection--right text-right"><a href="" class="btn-group btn-group--separated"><span class="btn btn-dark btn-separated">Purchase now</span><span class="btn btn-dark btn-separated"><i class="fa fa-shopping-cart"></i></span></a> <a href="" class="btn-group btn-group--separated"><span class="btn btn-white btn-separated">Read more</span><span class="btn btn-white btn-separated"><i class="fa fa-caret-right"></i></span> </a> </div> </div> </div> </div> </div> </section> |
Screenshot
Default
Currency
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 |
<section class="ct-dividerSection ct-dividerSection--currency ct-dividerSection--motive ct-call-to-action--type1 ct-u-padding-both-70"> <div class="inner"> <div class="container"> <div class="row"> <div class="col-sm-12 text-center-lg"> <div class="ct-dividerSection--left"> <div class="ct-iconBox ct-iconBox--type3 ct-iconBox--white media"> <div class="media-body"> <h4 class="ct-iconBox-title">Order Now</h4> <p class="ct-iconBox-description">Get free gift and become our special member</p> </div> </div> </div> <div class="ct-dividerSection--right"> <form action="" class="ct-addToCart ct-contactForm form-inline ct-contactForm--white"> <div class="form-group"> <input type="text" placeholder="Piece" value="" required class="form-control input-required-value"> <div class="ct-addToCart-logic"><span class="ct-input-increment"><i class="fa fa-plus-circle"></i></span><span class="ct-input-decrement"><i class="fa fa-minus-circle"></i></span> </div> <input type="hidden" id="required-value" value="0"> </div> <div class="form-group"> <select> <option value="Black">Black</option> <option value="Purple">Purple</option> <option value="Yellow">Yellow</option> <option value="Green">Green</option> <option value="White">White</option> </select> </div> <div class="form-group"> <button type="submit" class="btn-group btn-group--separated"><span class="btn btn-dark btn-lg btn-separated">add to cart</span><span class="btn btn-dark btn-lg btn-separated"><i class="fa fa-shopping-cart"></i></span> </button> </div> </form> </div> </div> </div> </div> </div> </section> |
Screenshot
Currency
Back to top
Was this article helpful ?
Testimonials
The best way to adversize your company is to let your customers speak for you. And we have two types of this element! In Disrupt - Single Product e-Commerce HTML Template
— Slider
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 58 59 60 61 62 63 64 65 66 |
<div class="ct-testimonials"> <div class="ct-testimonials-slider ct-dots--type1 ct-dots--positionBottomOffset"> <div class="item"> <div class="ct-testimonial"> <div class="ct-testimonial-icon"><i class="fa fa-commenting-o"></i> </div> <p class="ct-testimonial-text">Nam a diam tincidunt, condimentum nisi et, fringilla lectus. Nullam nec lectus eu erat tempus pulvinar.</p> </div> </div> <div class="item"> <div class="ct-testimonial"> <div class="ct-testimonial-icon"><i class="fa fa-commenting"></i> </div> <p class="ct-testimonial-text">Praesent sed ipsum vitae erat volutpat tempor vitae non quam. Nunc ut quam ante. Vestibulum convallis nisi eleifend ultricies tincidunt. Cras ac lectus a erat fermentum commodo. Suspendisse potenti</p> </div> </div> <div class="item"> <div class="ct-testimonial"> <div class="ct-testimonial-icon"><i class="fa fa-commenting-o"></i> </div> <p class="ct-testimonial-text">Phasellus sit amet ultrices odio. Quisque euismod vehicula lacus et cursus. Quisque fringilla consequat porta. Fusce sodales porttitor.</p> </div> </div> <div class="item"> <div class="ct-testimonial"> <div class="ct-testimonial-icon"><i class="fa fa-commenting"></i> </div> <p class="ct-testimonial-text">Integer euismod luctus sapien, tempor vehicula est condimentum ac. Morbi eleifend neque eu orci semper volutpat. Pellentesque dolor justo, facilisis in diam gravida, scelerisque mattis velit.</p> </div> </div> <div class="item"> <div class="ct-testimonial"> <div class="ct-testimonial-icon"><i class="fa fa-commenting-o"></i> </div> <p class="ct-testimonial-text">Nam a diam tincidunt, condimentum nisi et, fringilla lectus. Nullam nec lectus eu erat tempus pulvinar.</p> </div> </div> </div> </div> <div class="ct-testimonials-slider-nav-thumbnails"> <div class="item"> <div class="ct-testimonial-thumbnailItem"> <h6 class="ct-testimonial-author">Jeffrey Kendrick</h6><span class="ct-testimonial-authorDescription">Manager @ Crisppi</span> </div> </div> <div class="item"> <div class="ct-testimonial-thumbnailItem"> <h6 class="ct-testimonial-author">Stan wallis</h6><span class="ct-testimonial-authorDescription">CEO @ SoftySoft</span> </div> </div> <div class="item"> <div class="ct-testimonial-thumbnailItem"> <h6 class="ct-testimonial-author">Jane honda</h6><span class="ct-testimonial-authorDescription">actress</span> </div> </div> <div class="item"> <div class="ct-testimonial-thumbnailItem"> <h6 class="ct-testimonial-author">Ben Gobama</h6><span class="ct-testimonial-authorDescription">Ben Gobama</span> </div> </div> <div class="item"> <div class="ct-testimonial-thumbnailItem"> <h6 class="ct-testimonial-author">Jeffrey Kendrick</h6><span class="ct-testimonial-authorDescription">Manager @ Crisppi</span> </div> </div> </div> |
Screenshot
Testimonial
Back to top
Was this article helpful ?
Slider
This is the default markup with classes you must use if you want to create a slick slider.
HTML markup
|
1 2 3 4 5 |
<div class="ct-slick ct-js-slick"> <div class="item">...</div> ... <div class="item">...</div> </div> |
— Main Slider
If you want to achieve slider looking like the one on our demo page use this markup example
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 |
<div data-items="1" data-dots="true" data-height="100%" data-draggable="false" data-arrows="false" class="ct-js-slick ct-slick--parallaxMode ct-u-displayTable ct-dots--type1 ct-dots--positionBottom"> <div data-parallax="50" data-background="../assets/images/demo-content/drone/slider-item-3.jpg" class="item text-center"> <div class="item-inner"> <div class="ct-pageHeader ct-pageHeader--type1"> <img src="../assets/images/demo-content/drone/logo-brand.png" class="ct-pageHeader-image"> <h1 class="ct-pageHeader-title ct-u-color--white">Aerial Views<span class="ct-u-colorMotive">Unleashed Now</span></h1> <div class="btn-group ct-u-margin-top-30"><a href="#" class="btn btn-accient">Buy now for $299</a><a href="#next-section-1" data-scroll="#next-section-1" class="btn btn-transparent btn--withIcon btn--motiveColor">See why to Buy<i class="fa fa-caret-right"></i></a> </div> </div> </div> </div> <div data-parallax="50" data-background="../assets/images/demo-content/drone/slider-item.jpg" class="item"> <div class="item-inner"> <div class="ct-pageHeader ct-pageHeader--type2"> <img src="../assets/images/demo-content/drone/logo-brand.png" class="ct-pageHeader-image"> <h1 class="ct-pageHeader-title ct-u-colorMotive ct-u-font-weight--700">High Durability</h1><a href="#" class="btn btn-accient ct-u-margin-top-25">Buy now for $299</a> </div> </div> </div> <div data-parallax="50" data-background="../assets/images/demo-content/drone/slider-item-2.jpg" class="item"> <div class="item-inner"> <div class="ct-pageHeader ct-pageHeader--type3"> <div class="media"> <div class="media-left"> <img src="../assets/images/demo-content/drone/logo-brand.png" class="ct-pageHeader-image"> </div> <div class="media-body"> <h1 class="ct-pageHeader-title ct-u-color--white">Stands for<span class="ct-u-colorMotive">Quality</span></h1> </div> </div> <div class="btn-group ct-u-margin-top-40"><a href="#" class="btn btn-accient">Buy now for $299</a><a href="#" class="btn btn-transparent btn--withIcon btn--white">See why to Buy<i class="fa fa-caret-right"></i></a> </div> </div> </div> </div> </div> </div> |
Screenshot
Main slider
JavaScript
|
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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
$slick.each(function () { var $this = $(this), // Items Settings ctslidesToShow = parseInt(validatedata($this.attr("data-items"), 1), 10), // Non Responsive slides_xs = parseInt(validatedata($this.attr("data-items-xs"), ctslidesToShow), 10), slides_sm = parseInt(validatedata($this.attr("data-items-sm"), slides_xs), 10), // Default Item from smaller Device; slides_md = parseInt(validatedata($this.attr("data-items-md"), slides_sm), 10), // Default Item from smaller Device; slides_lg = parseInt(validatedata($this.attr("data-items-lg"), slides_md), 10), // Default Item from smaller Device; ctaccessibility = parseBoolean($this.attr("data-accessibility"), true), ctadaptiveHeight = parseBoolean($this.attr("data-adaptiveHeight"), false), ctautoplay = parseBoolean($this.attr("data-autoplay"), false), ctarrows = parseBoolean($this.attr("data-arrows"), true), ctcenterMode = parseBoolean($this.attr("data-centerMode"), false), ctdots = parseBoolean($this.attr("data-dots"), false), ctdraggable = parseBoolean($this.attr("data-draggable"), true), ctfade = parseBoolean($this.attr("data-fade"), false), ctfocusOnSelect = parseBoolean($this.attr("data-focusOnSelect"), false), ctinfinite = parseBoolean($this.attr("data-infinite"), true), ctmobileFirst = parseBoolean($this.attr("data-mobileFirst"), true), ctpauseOnHover = parseBoolean($this.attr("data-pauseOnHover"), true), ctpauseOnDotsHover = parseBoolean($this.attr("data-pauseOnDotsHover"), false), ctswipe = parseBoolean($this.attr("data-swipe"), true), ctswipeToSlide = parseBoolean($this.attr("data-swipeToSlide"), true), cttouchMove = parseBoolean($this.attr("data-touchMove"), true), ctuseCSS = parseBoolean($this.attr("data-useCSS"), true), ctvariableWidth = parseBoolean($this.attr("data-variableWidth"), false), ctvertical = parseBoolean($this.attr("data-vertical"), false), ctrtl = parseBoolean($this.attr("data-rtl"), false), ctasNavFor = validatedata($this.attr("data-asNavFor")), ctappendArrows = validatedata($this.attr("data-appendArrows")), ctprevArrow = validatedata($this.attr("data-prevArrow"), '<button type="button" class="slick-nav slick-prev"></button>'), ctnextArrow = validatedata($this.attr("data-nextArrow"), '<button type="button" class="slick-nav slick-next"></button>'), ctcenterPadding = validatedata($this.attr("data-centerPadding"), '50px'), ctcssEase = validatedata($this.attr("data-cssEase"), 'ease'), cteasing = validatedata($this.attr("data-easing"), 'linear'), ctlazyLoad = validatedata($this.attr("data-lazyLoad"), 'ondemand'), ctrespondTo = validatedata($this.attr("data-respondTo"), 'window'), ctslide = validatedata($this.attr("data-slide")), ctanimations = validatedata($this.attr("data-animations"), true), ctedgeFriction = parseInt(validatedata($this.attr("data-edgeFriction"), 0.15), 10), ctinitialSlide = parseInt(validatedata($this.attr("data-initialSlide"), 0), 10), ctautoplaySpeed = parseInt(validatedata($this.attr("data-autoplaySpeed"), 5000), 10), ctslidesToScroll = parseInt(validatedata($this.attr("data-slidesToScroll"), 1), 10), ctspeed = parseInt(validatedata($this.attr("data-speed"), 300), 10), cttouchThreshold = parseInt(validatedata($this.attr("data-touchThreshold"), 5), 10); $this.slick({ slidesToShow: ctslidesToShow, // Number of slides to show accessibility: ctaccessibility, // Enables tabbing and arrow key navigation adaptiveHeight: ctadaptiveHeight, // Enables adaptive height for single slide horizontal carousels. autoplay: ctautoplay, // Enables Autoplay autoplaySpeed: ctautoplaySpeed, // Autoplay Speed in milliseconds arrows: ctarrows, // Prev/Next Arrows asNavFor: ctasNavFor, // Set the slider to be the navigation of other slider (Class or ID Name) appendArrows: ctappendArrows, // Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object) prevArrow: ctprevArrow, // Allows you to select a node or customize the HTML for the "Previous" arrow. nextArrow: ctnextArrow, // Allows you to select a node or customize the HTML for the "Next" arrow. centerMode: ctcenterMode, // Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts. centerPadding: ctcenterPadding, // Side padding when in center mode (px or %) cssEase: ctcssEase, // CSS3 Animation Easing dots: ctdots, // Show dot indicators draggable: ctdraggable, // Enable mouse dragging fade: ctfade, // Enable fade focusOnSelect: ctfocusOnSelect, // Enable focus on selected element (click) easing: cteasing, // Add easing for jQuery animate. Use with easing libraries or default easing methods edgeFriction: ctedgeFriction, // Resistance when swiping edges of non-infinite carousels infinite: ctinfinite, // Infinite loop sliding initialSlide: ctinitialSlide, // Slide to start on lazyLoad: ctlazyLoad, // Set lazy loading technique. Accepts 'ondemand' or 'progressive' mobileFirst: ctmobileFirst, // Responsive settings use mobile first calculation pauseOnHover: ctpauseOnHover, // Pause Autoplay On Hover pauseOnDotsHover: ctpauseOnDotsHover, // Pause Autoplay when a dot is hovered respondTo: ctrespondTo, // Width that responsive object responds to. Can be 'window', 'slider' or 'min' (the smaller of the two) slide: ctslide, // Element query to use as slide slidesToScroll: ctslidesToScroll, // Number of slides to scroll speed: ctspeed, // Slide/Fade animation speed swipe: ctswipe, // Enable swiping swipeToSlide: ctswipeToSlide, // Allow users to drag or swipe directly to a slide irrespective of slidesToScroll touchMove: cttouchMove, // Enable slide motion with touch touchThreshold: cttouchThreshold, // To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slide useCSS: ctuseCSS, // Enable/Disable CSS Transitions variableWidth: ctvariableWidth, // Variable width slides vertical: ctvertical, // Vertical slide mode rtl: ctrtl // Change the slider's direction to become right-to-left // Responsive Breakpoints // end Responsive Breakpoints }); // end slick initialize $this.slick('setOption', 'responsive', [{ breakpoint: $width_lg, settings: { slidesToShow: slides_lg } }], true) $this.slick('setOption', 'responsive', [{ breakpoint: $width_md, settings: { slidesToShow: slides_md } }], true) $this.slick('setOption', 'responsive', [{ breakpoint: $width_sm, settings: { slidesToShow: slides_sm } }], true) $this.slick('setOption', 'responsive', [{ breakpoint: $width_xs, settings: { slidesToShow: slides_xs } }], true) |
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
Back to top
Was this article helpful ?
Buttons
In Disrupt - Single Product e-Commerce HTML Template you will find several variations of sizes and colors for buttons. Using the class you see down below you will be able to set the size of the button and its color.
- Size
- btn-lg
- btn-sm
- btn-xs
- Color Full
- group–separated
- motiveColor
- default
- primary
- success
- info
- warning
- dark
- accent
- white
- Color Open
- transparent
HTML markup
|
1 2 |
<button class="btn btn-motive btn-lg">Read More</button> <a href="#" class="btn btn-motive btn-lg">Read More</a> |
Screenshot examples
- accent/transparent
accent & transparent buttons
- group–separated( dark,default)
dark & default buttons
Back to top
Was this article helpful ?
Data Attributes
This are the attributes you can use in the Disrupt - Single Product e-Commerce HTML Template
- data-color – custom text color
- data-font-size – custom font size
- data-height – custom height
- data-background – custom background
- data-show – show hidden content
- data-parallax – set parallax value
Back to top
Was this article helpful ?
Icon Box
You can easily change what icon will be displayed in box by changing icon class. Here you will find full set of icons.
Disrupt - Single Product e-Commerce HTML Template have 4 varations of icon boxes that are using the classes you can see below.
- .ct-iconBox–type1
- .ct-iconBox–type2
- ct-iconBox–type4
- ct-iconBox–type5
HTML markup example
|
1 2 3 4 5 6 |
<div class="ct-iconBox ct-iconBox--type1"> <div class="ct-iconBox-icon"><i class="fa fa-shield"></i> </div> <h6 class="ct-iconBox-title">Durable</h6> <p class="ct-iconBox-description">For special tasks</p> </div> |
Screenshot
Icon box ver.1
HTML markup example
|
1 2 3 4 5 6 |
<div class="ct-iconBox ct-iconBox--type2"> <div class="ct-iconBox-icon"><i class="fa fa-shield"></i> </div> <h6 class="ct-iconBox-title">Durable</h6> <p class="ct-iconBox-description">For special tasks</p> </div> |
Screenshot
Icon box ver.2
HTML markup example
|
1 2 3 4 5 6 |
<div class="ct-iconBox ct-iconBox--type4"> <div class="ct-iconBox-icon"><i class="fa fa-shield"></i> </div> <h6 class="ct-iconBox-title">Durable</h6> <p class="ct-iconBox-description">For special tasks</p> </div> |
Screenshot
Icon box ver.4
HTML markup example
|
1 2 3 4 5 6 |
<div class="ct-iconBox ct-iconBox--type5"> <div class="ct-iconBox-icon"><i class="fa fa-shield"></i> </div> <h6 class="ct-iconBox-title">Durable</h6> <p class="ct-iconBox-description">For special tasks</p> </div> |
Screenshot
Icon box ver.5
Back to top
Was this article helpful ?
Person Box
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<a href="#" class="ct-personBox"> <div class="ct-personBox-image"> <img src="../assets/images/demo-content/drone/person-image-1.jpg" alt="" /> <div class="inner"> <div class="inner-table"> <div class="inner-cell"><span class="ct-personBox-nameHidden">Jack</span> </div> </div> </div> </div> <h6 class="ct-personBox-name">Jack</h6> </a> |
Screenshot
Person box example
Back to top
Was this article helpful ?
Lightgallery
It is a really nice way to present images on your website
HTML marker (example)
|
1 2 |
<div id="ct-gallery" class="ct-gallery ct-js-gallery ct-gallery--col5 lightGallery"><a href="assets/images/demo-content/portfolio-big-image.jpg"> </div> |
Screenshot
Lightgallery
JavaScript
|
1 2 3 4 5 |
$('.lightGallery').each(function() { $(this).lightGallery({ thumbnail:true }); }); |
Lightgallery Documentation can be found here. Files are bundled inside sella.min.js & style.css
Back to top
Was this article helpful ?
Contact Form
All needed files are in /form directory.
To configure form just edit form/config.php and change e-mails to your own :
|
1 2 |
$to = "mail@example.com"; $from = "mail@example.com"; |
That’s it!
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 |
<form action="../assets/form/send.php" method="POST" class="validateIt ct-form ct-form--with-inner"> <div class="row ct-u-margin-bottom-20"> <div class="col-md-4"> <div class="inner-group"> <div class="form-group"> <input type="text" placeholder="Name *" id="contact_name" required="required" class="form-control form-control-light input-lg"/> <label for="contact_name" class="sr-only">Name *</label> </div> <div class="form-group"> <input type="text" placeholder="Email *" id="contact_email" required="required" class="form-control form-control-light input-lg"/> <label for="contact_email" class="sr-only">Email *</label> </div> </div> </div> <div class="col-md-8"> <div class="form-group"> <textarea placeholder="Your message *" id="contact_message" rows="5" required="required" class="form-control form-control-light ct-u-margin-both-0"></textarea> <label for="contact_message" class="sr-only">Your message *</label> </div> </div> </div> <div class="row"> <div class="col-sm-8 text-left"><span class="ct-u-color--gray ct-u-font-family-secondary ct-u-font-style--italic center-block ct-u-margin-top-15">Fields marked with * are mandatory</span></div> <div class="col-sm-4"> <div class="row"> <div class="col-xs-5"><a class="btn btn-link"><i class="fa fa-close"></i>clear</a></div> <div class="col-xs-7"> <button class="btn btn-motive btn-square">send message</button> </div> </div> </div> </div> </form> |
Screenshot
Contact form
Options (can be changed in HTML) :
- Mail Subject – just change value in :
- Success Message – change successMessage div content
- Error Message – change errorMessage div content
Back to top
Was this article helpful ?
Sources & Credits
The following sources and files have been used to build up this theme
Twitter Bootstrap – http://twitter.github.com/bootstrap/
jQuery – http://www.jquery.com
Isotope – http://isotope.metafizzy.co/
Chartist – https://gionkunz.github.io/chartist-js/
Slick – http://kenwheeler.github.io/slick/
Back to top
Was this article helpful ?