Diana – 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.
1. Index v2, collections, collections list
2. Login page
3. Contact Us
4. My account
5. Wishlist Products
6. My cart
7. Checkout
8. About Us
9. Our team
10. Team Member
11. Our Services
12 Testimonials
13. FAQ
14. Pricing
15. Blog
16. Portfolio
17. Coming soon
18. Single Product
Back to top
Was this article helpful ?
Javascript
All javascripts are placed in folder /js. In main.js file we implement all functions calls.
This theme uses following Javascript files:
- Bootstrap v 3 framework (powerful front-end framework for faster and easier web development),
- jQuery v1.10.2 (A fast javascript library that Foodtruckifies how to traverse HTML documents, handle events, perform animations.),
- colorselector.js – (color ring picker),
- jquery.frogaloop.min.js, jquery.stellar.min.js – ct-mediaSection – (paralax, videos),
- jquery.elevatezoom.js – elevate-zoom (zoom effects on images),
- gmap3.min.js – (google maps, contact page),
- jquery.magnific-popup.min – (images popup),
- jquery.nouislider.all.js – nouislider/ (range slider in single product),
- imagesloaded.js, jquery.isotope.min.jsportoflio/init.js – (isotope),
- select2/init.js, select2.min.js – (styling select boxes with jquery),
- spinner/init.js (styled input quantity element where we can put any value, my cart page),
- stacktable/init.js, stacktable.js – (table which change the whole content to responsive table on the mobile),
- device.min.js,
- jquery.appear.js,
- jquery.browser.min.js,
- jquery.easing.1.3.js,
- jquery.placeholder.min.js,
- modernizr.custom.js,
- snap.min.js (mobile swaping),
- plugins/headroom/init.js, headroom.js, jQuery.headroom.js (menu and topbar effects),
- owl.carousel.min.js (owl slider),
- init.js
Google Map (GMAP3 Plugin)
This is google map with custom marker, you can define couple parameters:
- data-location – address to show
- data-height – map height (if undefined height will be 220px)
- data-offset – by how many map should be repositioned from marker center point (default -30)
It uses gmap3 plugin.
Documentation: here
HTML Markup:
|
1 |
<div class="ct-googleMap" data-location="Narbutta 24, Warsaw" data-zoom="15" data-height="500"></div> |
All javascript code can be found in js/main.js file.
jquery.appear
This plugin call function when element appear in viewport. This is used in custom animation, progress bars, counter timer.
Documentation: https://github.com/bas2k/jquery.appear/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
if (jQuery().appear) { if (device.mobile()) { // disable animation on mobile jQuery("body").removeClass("withAnimation"); } else { jQuery('.withAnimation .animated').appear(function () { jQuery(this).each(function () { jQuery(this).addClass('activate'); jQuery(this).addClass($(this).data('fx')); }); }, {accY: -150}); } } |
Back to top
Was this article helpful ?
Top Bar
There are two variations of top bar:
- deafult
- ct-topBar–grey
Gray top bar
To change bar color to gray just add the class above to the bar markup, like the following:
|
1 2 3 4 5 6 7 8 9 |
<div class="ct-topBar ct-topBar--grey"> <div class="container"> <div class="ct-topBar-navigation pull-left"> <ul class="list-unstyled"> <li><i class="fa fa-fw fa-phone"></i> Call us: (012) 345-6789</li> <li><a href="login.html"><i class="fa fa-fw fa-user"></i> Login</a></li> <li><a href="create-account.html"><i class="fa fa-fw fa-pencil"></i> Create an account</a></li> </ul> </div> |
Back to top
Was this article helpful ?
Mutlitple SearchBox
Use our Multiple search box, where you can set advanced search options for products!
Multiple Search Box
Use the following HTML markup to include it to your page:
|
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 |
<div class="ct-searchBox ct-u-marginBottom60"> <form action="#"> <div class="ct-searchBookmark"> <a href="#" class="ct-js-filter"> <div class="ct-searchBookmark-header">Filter by: Price, Silver</div> </a> <div class="ct-searchContent"> <div class="ct-searchContent-category ct-searchContent-category--transparent">Price</div> <div class="ct-searchContent-description"> <div class="ct-searchContent-slider"> <div class="ct-js-noUiSliderPrice ct-u-marginBottom40"></div> <input type="text" class="form-control" id="lower-value"> <input type="text" class="form-control" id="upper-value"> </div> </div> <div class="ct-searchContent-category">Metal</div> <div class="ct-searchContent-description"> <!-- labels have to be next to each other --> <label for="checkbox1"> <input type="checkbox" id="checkbox1"><span>18k Yellow Gold</span> </label><label for="checkbox2"> <input type="checkbox" id="checkbox2"><span>18k White Gold</span> </label><label for="checkbox3"> <input type="checkbox" id="checkbox3"><span>14k White Gold</span> </label><label for="checkbox4"> <input type="checkbox" id="checkbox4"><span>14k White Gold</span> </label><label for="checkbox5"> <input type="checkbox" id="checkbox5"><span>Platinum</span> </label><label for="checkbox6"> <input type="checkbox" id="checkbox6"><span>Silver</span> </label><label for="checkbox7"> <input type="checkbox" id="checkbox7"><span>Stainless steel</span> </label> </div> <div class="ct-searchContent-category">Size</div> <div class="ct-searchContent-description"> <label for="checkbox8"> <input type="checkbox" id="checkbox8"><span>Less than 4mm</span> </label><label for="checkbox9"> <input type="checkbox" id="checkbox9"><span>4-6mm</span> </label><label for="checkbox10"> <input type="checkbox" id="checkbox10"><span>7-8mm</span> </label> </div> <div class="ct-searchContent-category">Color</div> <div class="ct-searchContent-color"> <select class="ct-js-colorSelector"> <option value="0" data-color="#d2a48a" selected="selected">salmon</option> <option value="1" data-color="#e1c99b">yellow</option> <option value="2" data-color="#deddd9">grey</option> <option value="3" data-color="#cd5c5c">indianred</option> <option value="4" data-color="#6495ed">cornflowerblue</option> <option value="5" data-color="#8fbc8f">darkseagreen</option> <option value="6" data-color="#ffd700">gold</option> <option value="7" data-color="#ffa500">orange</option> <option value="8" data-color="#db7093">palevioletred</option> <option value="9" data-color="#696969">dimgrey</option> </select> </div> <div class="clearfix"></div> </div> </div> </form> |
Notice, that Multiple Search box requires the following Javascripts if you want to use Color Picker and Range Slider for it:
|
1 2 3 4 5 |
<script src="assets/js/color-selector/colorselector.js"></script> <script src="assets/js/color-selector/init.js"></script> <script src="assets/js/nouislider/jquery.nouislider.all.js"></script> <script src="assets/js/nouislider/init.js"></script> |
Back to top
Was this article helpful ?
Products Listing
There are two types of displaying products listing:
- ct-showProducts–default
Product listing
- ct-showProducts–list
Products list
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 |
<ul class="ct-productsList list-unstyled list-inline"> <li> <div class="ct-productShop ct-productShop--zoom ct-productShop--smaller"> <div class="ct-productShop-category"> <span class="ct-productShop-h5">Rings</span> <div class="clearfix"></div> <div class="text-center"> <img class="ct-js-zoomImage" src="./assets/images/demo-content/featured-item2.jpg" data-zoom-image="assets/images/demo-content/featured-item2-large.jpg" alt=""> </div> </div> <div class="ct-productShop-content"> <div class="ct-productShop-content-description"> <div class="ct-productShop-content-description-h5 text-uppercase">Best Seller</div> <a href="single-product.html"> <h3>Charleso Krypell Sterlingoinum & 14K Yellow Gold</h3> <span>$290.99</span> </a> <div class="ct-listElementDescription"> <div class="ct-stars"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star ct-u-colorGrey"></i> <i class="fa fa-star ct-u-colorGrey"></i> <div class="ct-reviews"> <a href="single-product.html">2 customer reviews</a> </div> </div> <div class="ct-u-paddingTop10 ct-u-paddingBottom15"> <a class="ct-detailsLink" href="#"><i class="fa fa-long-arrow-right fa-fw"></i> details</a> </div> <div> <a class="btn btn-default" href="#" role="button"><i class="fa fa-shopping-cart"></i></a> <div class="ct-or text-uppercase ct-u-paddingBottom20"> OR </div> <a class="btn btn-default" href="#" role="button">Speed Buy <i class="fa fa-long-arrow-right ct-u-paddingLeft10"></i></a> </div> </div> <span class="ct-productShop-shopCart"> <a class="btn btn-default" href="#" role="button"><i class="fa fa-shopping-cart fa-fw"></i></a> <a class="btn btn-default btn-hidden" href="#" role="button"><i class="fa fa-chain fa-fw"></i></a> </span> </div> </div> <div class="clearfix"></div> </div> </li> |
Javascript code:
|
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 |
$(document).ready(function () { var $tilesItems = $("#ct-js-showTiles"); var $listItems = $("#ct-js-showList"); var $showProducts = $(".ct-showProducts"); if($tilesItems && $listItems){ $tilesItems.click(function(e){ e.preventDefault(); var $existListClass = $(".ct-showProducts--list"); if($existListClass){ $showProducts.removeClass("ct-showProducts--list"); $showProducts.addClass("ct-showProducts--default"); $showProducts.css("display", "none"); $showProducts.fadeIn(); $(this).addClass("is-active"); $listItems.removeClass("is-active"); } }); $listItems.click(function(e){ e.preventDefault(); var $existDefaultClass = $(".ct-showProducts--list"); if($existDefaultClass){ $showProducts.removeClass("ct-showProducts--default"); $showProducts.addClass("ct-showProducts--list"); $showProducts.css("display", "none"); $showProducts.fadeIn(); $(this).addClass("is-active"); $tilesItems.removeClass("is-active"); } }); } }); |
Back to top
Was this article helpful ?
Shop Product
There are two variations of shop products.
Default Product
Variaton class:
- ct-productShop–default
Default shop product
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="ct-productShop ct-productShop--default"> <div class="ct-productShop-category"> <span class="ct-productShop-h5">Earrings</span> <div class="clearfix"></div> <img class="" src="./assets/images/demo-content/latest-item1.jpg" data-zoom-image="assets/images/demo-content/latest-item1-large.jpg" alt=""> </div> <div class="ct-productShop-content"> <div class="ct-productShop-content-description"> <a href="single-product.html"> <h3>Leslie Greene 18K Whiting Gold Square Aria Drop Earrings</h3> <span>$255.00</span> </a> <span class="ct-productShop-shopCart"> <a class="btn btn-default" href="#" role="button"><i class="fa fa-shopping-cart fa-fw"></i></a> <a class="btn btn-default btn-hidden" href="#" role="button"><i class="fa fa-chain fa-fw"></i></a> </span> </div> </div> </div> |
Shop product with zoom effect
Variation class:
- ct-productShop–zoom
Shop product with zoom
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="ct-productShop ct-productShop--zoom"> <div class="ct-productShop-category"> <span class="ct-productShop-h5">Rings</span> <div class="clearfix"></div> <img class="ct-js-zoomImage" src="./assets/images/demo-content/featured-item1.jpg" data-zoom-image="assets/images/demo-content/featured-item1-large.jpg" alt=""> </div> <div class="ct-productShop-content"> <div class="ct-productShop-content-description"> <a href="single-product.html"> <h3>Aaron basha 18K White Yellows Pink Enamel Flower</h3> <span><del>450.99</del> $318.00</span> </a> <span class="ct-productShop-shopCart"> <a class="btn btn-default" href="#" role="button"><i class="fa fa-shopping-cart fa-fw"></i></a> <a class="btn btn-default btn-hidden" href="#" role="button"><i class="fa fa-chain fa-fw"></i></a> </span> </div> </div> </div> |
These effects are used in sliders as well.
Javasript needed for Zoom Effect on images:
Learn more:
Zoom effect docs:
www.elevateweb.co.uk/image-zoom
Back to top
Was this article helpful ?
Single Product
Product Cusotmization, description, details can be added with the following 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 |
<div class="ct-productCustomization"> <h3>Certified Radiant-Cut Diamond Doubled Engagement Ring in 14K White Gold</h3> <h5 class="ct-u-paddingTop15">Earrings</h5> <div class="ct-price"> <span class="ct-u-size24"><del>$310.00</del></span> <span class="ct-u-colorBlack ct-u-size40">$289.00</span> <span class="ct-u-size15">(Free Delivery)</span> </div> <div class="ct-code ct-u-paddingBoth20"> <div class="pull-left ct-u-paddingRight15"> <span class="ct-code-black">Code</span><span class="ct-code-grey">DR2633-750-W</span> </div> <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.createit.pl&layout=standard&show_faces=true&action=like&colorscheme=light&" style="overflow:hidden;max-width:100%;height:30px" scrolling="no" frameborder="0" allowTransparency="true"></iframe> <div class="clearfix"></div> </div> <div class="ct-stars"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star ct-u-colorGrey"></i> <i class="fa fa-star ct-u-colorGrey"></i> <div class="ct-reviews"> <a href="#">2 customer reviews</a> </div> </div> <form action="#"> <div class="ct-pincode ct-u-paddingBoth20"> <div class="ct-pincodeBox"> <span>Check Availability At:</span><input type="text" class="form-control" placeholder="enter your pincode"> </div> <button class="btn btn-default btn-sm" type="submit">Check</button> <div class="clearfix"></div> </div> </form> <form action="#"> <div class="ct-productSize"> <div class="ct-u-size16 ct-u-paddingBottom10">Select Size:</div> <div class=""> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> <span>5</span> </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> <span>6</span> </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> <span>7</span> </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio4" value="option4"> <span>8</span> </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio5" value="option5"> <span>9</span> </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio6" value="option6"> <span>10</span> </label> </div> </div> <div class="ct-u-size16 ct-u-paddingTop10">Select Color:</div> <select class="ct-js-colorSelector"> <option value="0" data-color="#d2a48a" selected="selected">salmon</option> <option value="1" data-color="#e1c99b">yellow</option> <option value="2" data-color="#deddd9">grey</option> </select> <div class="ct-productQuantity"> <div class="ct-u-size16 ct-u-paddingBottom10">Select Quantity:</div> <div class=""> <select class="ct-select ct-select--small"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> </div> <div class="ct-speedbuy ct-u-paddingBoth20"> <a class="btn btn-default" href="#" role="button"><i class="fa fa-shopping-cart"></i></a> <div class="ct-or text-uppercase ct-u-paddingBottom20"> OR </div> <a class="btn btn-default ct-u-size18 text-uppercase" href="#" role="button">Speed Buy <i class="fa fa-long-arrow-right ct-u-paddingLeft10"></i></a> </div> </form> </div> |
Back to top
Was this article helpful ?
Wishlist
Diana comes with a wishlist. It changes to different table on mobile with special stacktable script. To use it you will need ct-js-wishList class.
Wishlist
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<table class="ct-wishList ct-js-wishList ct-u-marginTop30"> <thead> <tr> <th class="ct-wishList-image"></th> <th class="ct-wishList-description">Product name</th> <th class="ct-wishList-price">Unit Price</th> <th class="ct-wishList-stock">Stock Status</th> <th class="ct-wishList-button"></th> </tr> </thead> <tbody> <tr> <td class="ct-wishList-image"><img src="assets/images/demo-content/wishlist-item2.jpg" alt="Wishlist Product 1"></td> <td class="ct-wishList-description"><a class="ct-wishList-itemLink" href="single-product.html">I Am Loved® Diamond Shaped Pendant in Sterling Silver & 14K Gold</a></td> <td class="ct-wishList-price">$239.00</td> <td class="ct-wishList-stock ct-u-colorLightGrey">In Stock</td> <td class="ct-wishList-button ct-wishList-buttonX"><a class="btn btn-default btn-md ct-js-buttonX" href="#">X</a></td> </tr> |
Javascript code:
|
1 2 |
<script src="assets/js/stacktable/stacktable.js"></script> <script src="assets/js/stacktable/init.js"></script> |
Learn more:
Back to top
Was this article helpful ?
Reviews
Add reviews to your product with simple 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 |
<div class="ct-feedback ct-u-paddingTop30"> <span class="pull-left">Very Beautiful Ring!!</span><span></span> <span class="pull-right"><i class="fa fa-pencil fa-fw"></i> Posted by: <a href="#" class="author">Karen1234</a></span> <div class="clearfix"></div> <div class="ct-stars ct-u-paddingBoth10"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="ct-feedbackDescription ct-u-paddingBottom20"> This ring looks really elegant and dainty!! Love it!! This is really a pretty ring. get all kinds of compliments, I normally wear an 8 on my ring finger, so I orderd the size 10 for my pointer finger. perfect fit. I bought the clad & it is awesome. </div> <div class="ct-recommendation ct-u-paddingBoth20"> <span class="ct-fw-600">Would you recommend this product as a gift?</span><br> <span>Yes</span><br> <span class="ct-fw-600">Who would this be a perfect gift for?</span><br> <span>Families</span><br> <div class="ct-recommendationReport ct-u-paddingBoth25">Was this review helpful to you? <a href="#">Yes</a><a href="#">No</a><span><i class="fa fa-fw fa-long-arrow-right"></i> <a href="#"> Report Inappropriate Review</a></span></div> <div> <span>Share this review:</span> <ul class="ct-socials ct-socials--small ct-socials--black list-inline list-unstyled"> <li><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook fa-fw"></i></a></li> <li><a href="https://twitter.com/createitpl"><i class="fa fa-twitter fa-fw"></i></a></li> <li><a href="#"><i class="fa fa-rss fa-fw"></i></a></li> </ul> </div> </div> </div> |
Reviews
Back to top
Was this article helpful ?
Ratings
There are several types of ratings:
Ratings in single product content
Ratings in single product content
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 |
<div class="ct-ratings"> <div class="ct-ratingsLeft"> <h4>Rating Snapshot</h4> <div class="ct-stars"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star ct-u-colorGrey"></i> <i class="fa fa-star ct-u-colorGrey"></i> <div class="ct-reviews"> <a href="#">2 customer reviews</a> </div> </div> <div class="ct-u-paddingTop10">Overall Rating 2.8 out of 5</div> <div class="ct-u-paddingTop15 ct-fs-i">(21 of 56 (38%) reviewers would recommend this product to a friend.)</div> </div> <div class="ct-ratingsRight"> <ul class="list-unstyled ct-u-paddingTop15"> <li><span>5 stars</span><span><span data-width="60"></span></span><span>12</span></li> <li><span>4 stars</span><span><span data-width="20"></span></span><span>7</span></li> <li><span>3 stars</span><span><span data-width="50"></span></span><span>7</span></li> <li><span>2 stars</span><span><span data-width="80"></span></span><span>17</span></li> <li><span>1 star</span><span><span data-width="45"></span></span><span>13</span></li> </ul> </div> <div class="clearfix"></div> <hr> <div class="ct-range ct-u-paddingTop25"> <div>Sizing Snapshot</div> <div>Fit Snug</div> <div class="ct-rangeSlider"> <div class="ct-js-noUiSliderDisabled ct-noUiSlider"></div> </div> <div>Runs Large</div> </div> </div> |
Star ratings
Star ratings
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="ct-stars"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star ct-u-colorGrey"></i> <i class="fa fa-star ct-u-colorGrey"></i> <div class="ct-reviews"> <a href="#">2 customer reviews</a> </div> </div> |
Javascript ratings
Bar ratings
HTML markup:
|
1 2 3 4 5 6 7 8 9 |
div class="ct-ratingsRight"> <ul class="list-unstyled ct-u-paddingTop15"> <li><span>5 stars</span><span><span data-width="60"></span></span><span>12</span></li> <li><span>4 stars</span><span><span data-width="20"></span></span><span>7</span></li> <li><span>3 stars</span><span><span data-width="50"></span></span><span>7</span></li> <li><span>2 stars</span><span><span data-width="80"></span></span><span>17</span></li> <li><span>1 star</span><span><span data-width="45"></span></span><span>13</span></li> </ul> </div> |
Javascript code:
|
1 2 3 4 5 6 7 8 |
$(document).ready(function(){ $(".ct-ratingsRight ul li span:nth-child(2) span").each(function(){ if($(this).attr("data-width")){ var $barWidth = $(this).attr("data-width"); $(this).css("width", $barWidth+'%'); } }); }); |
Back to top
Was this article helpful ?
Pricing
Create pricing box with simple HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="ct-pricing ct-u-marginBoth40"> <div class="ct-pricing-iconBox ct-u-paddingTop20"> <div class="ct-pricing-iconBox-icon"> <img src="assets/images/demo-content/pricing-chains.png" alt="Chains"> <span class="ct-u-size24">$120</span> </div> </div> <ul class="ct-pricing-list list-unstyled ct-u-marginTop30"> <li>Solder chain</li> <li>Figure</li> <li>Supply and Solder</li> <li>Tighten clasp</li> </ul> <div class="ct-u-paddingTop30 ct-u-paddingBottom20"> <a class="btn btn-default ct-pricing-button"> <i class="fa fa-long-arrow-right"></i> </a> </div> </div> |
Pricing
Back to top
Was this article helpful ?
Sliders
There are three available types of sliders:
Main slider
Main Slider
You can use it with the following 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 class="ct-js-owl owl-carousel ct-mainCarousel ct-mainCarousel--arrowsMiddle" data-pagination="false" data-items="1" data-autoPlay="false" data-bg="true" data-animations="true" data-height="525" data-navigation="true"> <div class="item" data-bg="./assets/images/demo-content/slider-image.jpg"> <div class="inner"> <div class="container"> <div class="row"> <div class="col-sm-12 text-center"> <h1 class="ct-u-colorBlack"> <span class="animated" data-fx="fadeIn">Customized Diamond</span> <br> <span class="ct-u-colorWhite animated" data-fx="fadeIn" data-time="200">& Wedding Rings</span></h1> <div class="text-center ct-u-paddingTop15 ct-u-paddingBottom30"> <hr class="hr-slider animated" data-fx="fadeIn"> </div> <div class="text-center"> <a class="btn btn-blackTransparent animated" data-fx="fadeInUp" href="#" role="button">Browse Collection <i class="fa fa-angle-double-right"></i></a> </div> </div> </div> </div> <a href="#" class="ct-btn-shadowBar text-left animated" data-fx="fadeInUp"> <div class="container"> <i class="fa fa-angle-right fa-fw"></i> View all Nickelodeon Offers </div> </a> </div> </div> |
We have few variations of the arrows:
- ct-mainCarousel–arrowsTop
- ct-mainCarousel–arrowsMiddle
- ct-mainCarousel–arrowsTopRight
- ct-mainCarousel–arrowsTopLeft
- ct-mainCarousel–arrowsTopCenter
Product Slider
Product 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 |
<div class="ct-js-owl owl-carousel ct-productCarousel ct-productCarousel--arrowsTop" data-single="false" data-pagination="false" data-navigation="true" data-items="4"> <div class="owl-item"> <div class="ct-productShop ct-productShop--zoom"> <div class="ct-productShop-category"> <span class="ct-productShop-h5">Rings</span> <div class="clearfix"></div> <img class="ct-js-zoomImage" src="./assets/images/demo-content/featured-item1.jpg" data-zoom-image="assets/images/demo-content/featured-item1-large.jpg" alt=""> </div> <div class="ct-productShop-content"> <div class="ct-productShop-content-description"> <a href="single-product.html"> <h3>Aaron basha 18K White Yellows Pink Enamel Flower</h3> <span><del>450.99</del> $318.00</span> </a> <span class="ct-productShop-shopCart"> <a class="btn btn-default" href="#" role="button"><i class="fa fa-shopping-cart fa-fw"></i></a> <a class="btn btn-default btn-hidden" href="#" role="button"><i class="fa fa-chain fa-fw"></i></a> </span> </div> </div> </div> </div> |
With the following variations of arrows:
- ct-productCarousel–arrowsTop
- ct-productCarousel–arrowsTopRight
PersonBox Slider
PersonBox 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 |
<div class="ct-js-owl owl-carousel text-center" data-single="false" data-pagination="false" data-autoPlay="true"> <div class="owl-item"> <div class="ct-personBox"> <a href="team-member.html"> <div class="ct-personBox-image"> <img src="assets/images/demo-content/team-member1.jpg" alt="Team Member 1"> <div class="ct-personBox-image-link"> <i class="fa fa-long-arrow-right ct-u-colorWhite"></i> </div> <div class="ct-personBox-bottomBar"></div> </div> </a> <div class="ct-u-paddingTop15 ct-u-paddingBottom10 text-left"> <ul class="ct-socials ct-socials--medium ct-socials--black ct-socials--blackBorder list-inline list-unstyled"> <li><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook"></i></a></li> <li><a href="https://twitter.com/createitpl"><i class="fa fa-twitter"></i></a> </ul> </div> <div class="ct-u-size18 ct-u-paddingBottom5 ct-personBox-name text-left"><a href="team-member.html">Margarite Jencons</a></div> <div class="ct-fs-i ct-u-size15 ct-u-colorLighterGrey text-left">Jewelry Professional</div> </div> </div> |
Remember to attach the following, required javascript files for owl slider:
Back to top
Was this article helpful ?
Divided Section
These sections are by default above the footer, in prefooter section, because they are fixed all the time on the bottom of the main content.
Left Section HTML markup:
Divided section
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="ct-dividedSection-left"> <h3>Sign up for our newsletter</h3> <form role="form" action="#"> <div class="input-group"> <input type="email" class="form-control" placeholder="Your Email Address"> <span class="input-group-btn"> <button class="btn btn-default btn-sm" type="button"><i class="fa fa-fw fa-long-arrow-right"></i></button> </span> </div> </form> </div> |
|
1 2 3 4 5 6 |
<div class="ct-dividedSection-right"> <img src="assets/images/demo-content/prefooter-diamond.png" class="text-right pull-left" alt="Diamond Ring"> <h3 class="text-uppercase text-right">Have a jewelry inquiry?</h3> If you have any questions regarding our jeweleries please <a href="#">contact us directly</a> or use our contact form to get in touch. <div class="ct-dividedSection-right-triangle hidden-sm hidden-xs"></div> </div> |
Back to top
Was this article helpful ?
Highlights
Add awesome highlights boxes with simple HTML markup!
Highlights
HTML markup:
|
1 2 3 4 5 6 7 8 9 |
<div class="ct-highlightsItem"> <div class="ct-highlightsItem-content"> <span class="ct-highlightsItem-content-firstTitle ct-u-size30 text-uppercase">Free</span> <br> <span class="ct-highlightsItem-content-secondTitle ct-u-size34 text-uppercase ct-fw-600">Shipping</span> <br> <span class="ct-highlightsItem-content-thirdTitle ct-u-size16">Orders over $200</span> </div> </div> |
Back to top
Was this article helpful ?
Buttons
There are three sizes of buttons:
- btn
- btn-sm
- btn-md
Each can have one of the following variations:
- btn-default
- btn-white
- btn-blackTransparent
- btn-blackTransparent–white
- btn-transparentWhite
HTML markup:
|
1 2 3 |
<button type="submit" class="btn btn-default"> <i class="fa fa-long-arrow-right"></i> Submit </button> |
Back to top
Was this article helpful ?
Boxes
There are two types of boxes:
Image Box
Image Box
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="imageBox ct-u-paddingBoth40"> <img src="assets/images/demo-content/services-item1.jpg" alt="Services Item 1"> <div class="imageBox-content"> <div class="imageBox-content-title ct-u-size16 ct-fw-600 ct-u-paddingBottom10">Jewelry Cleaning Maintainance</div> <div class="imageBox-content-tip ct-u-size16 ct-u-colorLighterGrey ct-fs-i ct-u-paddingBottom25"> Maintaining the beauty of your jewelry is easy </div> <p class="imageBox-content-description text-justify ct-u-size16"> Duis tristique risus in ullamciorperi susicipit. Praiesent aucitor magna id ipsuim vehicula fermentium. Sed cuirsuis neque eget mauris pellenteisque egestas et in ante. Nunc ultrices dui nunc, placerat imperdiet urna vehicula in. </p> </div> <div class="clearfix"></div> </div> |
Number Box
Number box
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="numberBox"> <div class="ct-u-paddingTop30 ct-u-paddingBottom30"> <div class="numberBox-iconBox"><span class="numberBox-icon ct-u-size18">1</span></div> <div class="numberBox-title ct-u-size24">Jewelry Financing</div> </div> <div class="numberBox-description ct-u-size16 text-justify ct-u-paddingBottom25"> Suspendisse volutpat neque quam, ac vehicula lacus eleifend vel. Doneiuc egestas iuivehicula congue. Lorem ipsum dolor sit amet, consectei tur adipiscing elit. </div> <div class="ct-u-paddingBottom50"> <a class="btn btn-default" href="#"><i class="fa fa-long-arrow-right fa-fw"></i> details</a> </div> </div> |
Back to top
Was this article helpful ?
Tabs
Standard Tabs
Tabs
|
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 |
<div role="tabpanel" class="ct-u-paddingTop20 ct-u-paddingBottom30"> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#description" aria-controls="description" role="tab" data-toggle="tab">Description</a></li> <li role="presentation"><a href="#delivery" aria-controls="delivery" role="tab" data-toggle="tab">Delivery Date Estimate</a></li> <li role="presentation"><a href="#reviews" aria-controls="reviews" role="tab" data-toggle="tab">Customer Reviews</a></li> <li role="presentation"><a href="#questions" aria-controls="questions" role="tab" data-toggle="tab">Community Q&A</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="description"> <div class="adjust-text"> <div class="ct-u-paddingBottom30 ct-u-paddingTop10 ct-panelWidget"> <a href="#" class="pull-left"><i class="fa fa-fw fa-file-text-o"></i> Ring Size Guide</a> <span class="pull-right">Adjust Text Size <a href="#" class="plus">+</a><a href="#" class="minus">-</a></span> <div class="clearfix"></div> </div> <p>Bands of brilliance. Pave set with simulated diamonds, this distinctive, double band bar ring makes quite the impression on your finger.<br> Sterling Silver, 18K Rose Gold-Clad Sterling Silver, or 18K Yellow Gold-Clad Sterling Silver.<br> For more details on this ring's fit, please refer to the Ring Size Guide above. </p> <ul class="list-unstyled ct-advantageList"> <li>Sterling silver</li> <li>Total Diamonique simulated diamond weight is approximately 9/10 carat</li> <li>Pave-set, round simulated diamonds set into a polished, open, double-band bar design</li> <li>Sizes 5, 6, 7, 8, 9, 10; due to the special nature of the plating process, we don’t not recommend resizing by a jeweler</li> <li>Measures approximately 3/8"L x 3/4"W</li> <li>Imported</li> </ul> </div> </div> |
Nested Tabs
Nested tabs
|
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 |
div role="tabpanel" class="tab-pane tab-pane-inner" id="questions"> <div role="tabpanel"> <!-- Nav tabs --> <ul class="nav nav-tabs pull-left ct-u-marginBottom20" role="tablist"> <li role="presentation" class="active"><a href="#featured" aria-controls="featured" role="tab" data-toggle="tab">Featured Q&A</a></li> <li role="presentation"><a href="#all" aria-controls="all" role="tab" data-toggle="tab">View All Q&A</a></li> </ul> <div class="ct-dividedTabSearch pull-right"> <form role="form" action="#"> <div class="input-group"> <input type="email" class="form-control" placeholder="Search All Questions For This Product"> <button class="btn btn-default btn-sm" type="button"><i class="fa fa-fw fa-long-arrow-right"></i></button> </div> </form> </div> <div class="clearfix"></div> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="featured"> <h5>Questions With Most Answers</h5> <div class="panel-group ct-u-marginBottom40" id="accordion2" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> <span class="pull-left"><i class="fa fa-fw fa-long-arrow-right"></i> What country was it made in?</span> <span class="pull-right"><i class="fa fa-fw fa-comment"></i> 1 answer</span> <span class="clearfix"></span> </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> |
Back to top
Was this article helpful ?
Accordion
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="panel-group ct-u-marginBottom40" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> <i class="fa fa-circle ct-u-size4 ct-u-verticalMiddle ct-u-paddingRight5"></i> Is it safe to buy a diamond and other pieces of jewelry over the internet? </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> What? You lost the appraisal certificate?! Truth is we'd like you to return all bridal and engagement rings that come with an IGI® Appraisal Certify with the certificate. But, if you can't find it – call us and we'll give you a quote for the exact price of the replacement. However, your refund -- if you return the ring without the certificate -- will be reduced by $149 or more, depending on the certificate replacement cost. </div> </div> </div> |
Back to top
Was this article helpful ?
Tooltips
Add tooltips anywhere you want!
Tooltips
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="ct-tooltips text-center ct-u-paddingTop50 ct-u-paddingBottom40"> <ul class="list-unstyled list-inline"> <li data-toggle="tooltip" title="75,000+ customers trusted us to create their rings."><i class="fa fa-heart fa-fw fa-6x"></i></li> <li data-toggle="tooltip" title="Pay by cash, credit card, bank transfer or store."><i class="fa fa-dollar fa-fw fa-6x"></i></li> <li data-toggle="tooltip" title="Fully protected, all payments secured."><i class="fa fa-lock fa-fw fa-6x"></i></li> <li data-toggle="tooltip" title="Double guarantee for gold and diamonds."><i class="fa fa-certificate fa-fw fa-6x"></i></li> <li data-toggle="tooltip" title="24/7 support at your service."><i class="fa fa-headphones fa-fw fa-6x"></i></li> <li data-toggle="tooltip" title="Latest news collections directly on your email."><i class="fa fa-envelope fa-fw fa-6x"></i></li> <li data-toggle="tooltip" title="Free & easy returns in 48h."><i class="fa fa-circle-o-notch fa-fw fa-6x"></i></li> <li data-toggle="tooltip" title="Free Delivery and Assurance."><i class="fa fa-truck fa-fw fa-6x"></i></li> <li data-toggle="tooltip" title="Your data is fully protected."><i class="fa fa-folder fa-fw fa-6x"></i></li> <li data-toggle="tooltip" title="Find your measurements for your ring."><i class="fa fa-pencil-square-o fa-fw fa-6x"></i></li> </ul> </div> |
Back to top
Was this article helpful ?
Socials
Diana comes with two types and four colours of socials:
Types:
- ct-socials–small
- ct-socials–medium
- ct-socials–large
Colours:
- ct-socials–blackBorder
- ct-socials–whiteBorder
- ct-socials–white
- – ct-socials–black
HTML markup:
|
1 2 3 4 5 |
<ul class="ct-socials ct-socials--large ct-socials--white list-inline list-unstyled"> <li><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook fa-fw"></i></a></li> <li><a href="https://twitter.com/createitpl"><i class="fa fa-twitter fa-fw"></i></a></li> <li><a href="#"><i class="fa fa-rss fa-fw"></i></a></li> </ul> |
Socials
Back to top
Was this article helpful ?
Short Info
There are two available color variations of Short Info:
- ct-shortInfoReason–grey
- ct-shortInfoReason–black
Short Info
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="ct-shortInfoReason ct-shortInfoReason--black ct-u-displayTableVertical pull-left"> <div class="ct-shortInfoReason-description ct-u-displayTableCell"> Please call us to assist you with your selection process. We will work with your objectives, not ours. </div> <div class="ct-shortInfoReason-title ct-u-displayTableCell"> <div class="ct-u-size28 text-right ct-shortInfoReason-center">Concierge</div> <div class="ct-u-size22 text-right ct-shortInfoReason-center">Service</div> </div> <div class="ct-shortInfoReason-image ct-u-displayTableCell"> <img src="assets/images/demo-content/speaker.png" alt="Speaker"> </div> </div> |
Back to top
Was this article helpful ?
Video
There are two available Video elements:
VideoBox
Video Box
HTML markup:
|
1 2 3 4 |
<div class="ct-videoBox"> <iframe src="//player.vimeo.com/video/9211288" width="100%" height="372" frameborder="0" allowfullscreen></iframe> <p class="ct-videoBox-description ct-u-paddingTop20">...</p> </div> |
Video Product
Video Product
HTML markup:
|
1 2 3 4 5 6 7 |
<div class="ct-videoProduct is-active"> <img src="assets/images/demo-content/video-image-1-small.jpg" alt="Video 1"> <div class="ct-videoProduct-description"> ... </div> <div class="clearfix"></div> </div> |
Javascript code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(document).ready(function(){ $('.ct-videoBox:first').css('display','block'); $('.ct-videoProduct').click(function(){ if($('.ct-videoProduct.is-active')){ $('.ct-videoProduct.is-active').each(function(){ $(this).removeClass('is-active'); }); } if(!($(this).hasClass('is-active'))) $(this).addClass('is-active'); var elnum = $(this).index(); $('.ct-videoBox').each(function(){ $(this).css("display", "none"); }); $('.ct-videoBox').eq(elnum).css("display", "block"); }); }); |
Back to top
Was this article helpful ?
Blog
Add your blog posts with the following 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 |
<div class="ct-blogBox ct-u-paddingTop30"> <div class="ct-blogBox-image ct-u-paddingBottom25"> <img src="assets/images/demo-content/blog-item1.jpg" alt="Picture 1"> </div> <h5 class="ct-u-size16 ct-fw-600 ct-blogBox-title">Jewellery Storage Is Just As Important!</h5> <div class="ct-blogDescription ct-u-size15 ct-u-paddingTop15"> <div class="pull-left ct-blogDescription-posted"> <span><i class="fa fa-pencil fa-fw"></i> Posted by: <a href="#">Karen1234</a></span> <span class="ct-u-paddingLeft15"><i class="fa fa-calendar fa-fw"></i> 9 Nov, 2014</span> </div> <div class="pull-right ct-blogDescription-comments"> <span><i class="fa fa-comments fa-fw"></i> <a href="#">3 comments</a></span> </div> <div class="clearfix"></div> <p class="text-justify ct-u-paddingTop20 ct-u-size16"> ... </p> <p class="text-justify ct-u-paddingTop30 ct-u-size16"> .... </p> <p class="text-justify ct-u-paddingTop30 ct-u-size16"> ... </p> <p class="text-justify ct-u-paddingTop30 ct-u-paddingBottom40 ct-u-size16"> ... </p> <hr> <div class="ct-blogDescription-tags ct-u-paddingBoth15"> <i class="fa fa-fw fa-tag ct-u-colorBlack"></i> Tagged: <a href="#">designer jewelry</a>, <a href="#">ring</a>, <a href="#">engagement</a>, <a href="#">wedding</a>, <a href="#">necklace</a>, <a href="#">pendant</a>, <a href="#">bracelet</a> </div> </div> </div> |
Blog Post
Blog Comments
Blog comments
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="ct-blogComment"> <p class="ct-u-size16 ct-u-paddingBottom15 ct-u-paddingTop30">Who is the designer of the ring on your middle finger in the photo on the bottom left (red sleeve)? Thank you!</p> <hr> <div class="pull-right ct-u-paddingBoth10 ct-u-size15"> <span><i class="fa fa-pencil fa-fw"></i> Posted by: <a href="#">Karen1234</a></span> <span class="ct-u-paddingLeft15"><i class="fa fa-calendar fa-fw"></i> 9 Nov, 2014</span> </div> <div class="clearfix"></div> <hr> </div> |
Back to top
Was this article helpful ?
Portfolio
Create beautiful portfolio items with the following HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="ct-portfolio ct-u-paddingTop30"> <div class="ct-portfolio-image ct-u-paddingBottom25"> <img src="assets/images/demo-content/blog-item1.jpg" alt="Picture 1"> </div> <h5 class="ct-u-size16 ct-fw-600 ct-portfolio-title">Jewellery Storage Is Just As Important!</h5> <div class="ct-portfolioDescription ct-u-size15 ct-u-paddingTop15"> <p class="text-justify ct-u-paddingTop20 ct-u-size16"> ... </p> <p class="text-justify ct-u-paddingTop30 ct-u-size16"> ... </p> <p class="text-justify ct-u-paddingTop30 ct-u-size16"> ... </p> <p class="text-justify ct-u-paddingTop30 ct-u-paddingBottom40 ct-u-size16"> ... </p> </div> </div> |
Portfolio Single page
Back to top
Was this article helpful ?
Pagination
There are two available variations:
- default
Pagination
- ct-u-bgcolor-transparent
Transparent pagination
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="ct-pagination ct-u-paddingBoth15"> <div class="ct-totalItems pull-left">Items 1 to 50 of 149 total</div> <div class="ct-pages pull-right"> <span>Page:</span> <ul class="ct-numerPages list-unstyled list-inline"> <li><a class="active" href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <a class="ct-rightArrow" href="#"><i class="fa fa-long-arrow-right fa-fw"></i></a> </div> <div class="clearfix"></div> </div> |
Back to top
Was this article helpful ?
Testimonial
We have two variations of testimonial:
- ct-testimonials–left
- ct-testimonials–right
Testimonial
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="ct-testimonials ct-testimonials--left ct-u-marginTop40"> <div class="ct-testimonials-image"> <img src="assets/images/demo-content/testimonials-image1.jpg" alt="Testimonial 1"> </div> <div class="ct-testimonials-content"> <div class="ct-testimonials-content-name ct-u-paddingBottom30"> <div class="ct-u-size24">Katie M.</div> <div class="ct-u-size16 ct-u-colorGrey">Assistant Manager</div> </div> <div class="ct-testimonials-content-description ct-u-size16 text-justify"> I have been impressed with personalized attention and care for their “clients”. You feel like you become a part of this family the first time you walk through their door. And I have been impressed with the exceptional quality and their diverse jewelry selection – and of course if you don’t see what you like, they can customize any piece to make it your own. </div> </div> <div class="clearfix"></div> </div> |
Back to top
Was this article helpful ?
Widget
Footer widgets
Footer widget
|
1 2 3 4 5 6 7 8 9 10 11 |
<h5 class="ct-widgetHeader text-uppercase ct-u-size18">Customer Service</h5> <div class="ct-widgetLinks"> <ul class="ct-widgetLinks-list"> <li><a href="my-cart.html">My Orders</a></li> <li><a href="my-account.html">My Addresses</a></li> <li><a href="my-account.html">My Account</a></li> <li><a href="wishlist.html">My WishList</a></li> <li><a href="login.html">Login</a></li> <li><a href="create-account.html">Register</a></li> </ul> </div> |
Sidebar Widget
Sidebar widget
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="widget"> <div class="widget-inner"> <h4 class="ct-headerBox ct-u-borderBottom3 ct-u-paddingBottom10 text-left">Specials</h4> <div class="ct-specials ct-u-marginBoth20"> <img class="ct-js-zoomImage" src="./assets/images/demo-content/specials-item.jpg" data-zoom-image="assets/images/demo-content/specials-item-large.jpg" alt=""> <div class="ct-specialsDescription"> <span>14K White Gold Rings, 0.33 Carat Diamond Stud</span> <span class="ct-u-size22"><del>150.00</del> $129.00</span> <a class="btn btn-default" href="#" role="button"><i class="fa fa-shopping-cart"></i></a> </div> <div class="clearfix"></div> </div> </div> </div> |
Back to top
Was this article helpful ?
Contact form
Template comes with ready to use:
- Contact Form
- Newsletter Form
All needed files are in /form directory.
Remember to includeon page.
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!
Contact Form
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 |
<div class="ct-contactForm"> <div class="successMessage alert alert-success" style="display: none"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> Thank You! </div> <div class="errorMessage alert alert-danger" style="display: none"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> Ups! An error occured. Please try again later. </div> <form role="form" action="./assets/form/send.php" method="post" class="contactForm validateIt" data-email-subject="Contact Form" data-show-errors="true"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <input id="contact_name" placeholder="Name" required="" type="text" name="field[]" class="form-control"> <label for="contact_name">Name</label> </div> <div class="form-group"> <input id="contact_email" placeholder="Email" required="" type="email" name="field[]" class="form-control"> <label for="contact_email">Email</label> </div> <div class="form-group"> <input id="contact_subject" placeholder="Subject" required="" type="text" name="field[]" class="form-control"> <label for="contact_subject">Subject</label> </div> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="form-group"> <textarea id="contact_message" placeholder="Message" class="form-control" rows="8" name="field[]" required=""></textarea> <label for="contact_message">Message</label> </div> </div> </div> <div class="row"> <div class="col-xs-12"> <button type="submit" class="btn ct-btn--perspective btn-primary btn-lg text-uppercase pull-right"><i class="fa fa-paper-plane"></i> Send Message </button> </div> </div> </form> </div> |
Newsletter Form
HTML Markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<h4 class="uppercase motive section-top">Subscribe to Newsletter</h4> <div class="successMessage alert alert-success" style="display: none;"><button class="close" type="button" data-dismiss="alert">×</button> Thank You!</div> <div class="errorMessage alert alert-danger" style="display: none;"><button class="close" type="button" data-dismiss="alert">×</button> Ups! An error occured. Please try again later.</div> <form class="form-inline validateIt" action="../../assets/form/send.php" method="post" data-email-subject="Newsletter Form" data-show-errors="true" data-hide-form="true"> <div class="input-group"><input class="form-control" name="field[]" type="email" placeholder="Enter your email address" /> <input name="msg_subject" type="hidden" value="New Newsletter subscription" /> <span class="input-group-btn"> <button class="btn btn-brick" type="submit">GO</button> </span></div> </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
Back to top
Was this article helpful ?