Sporta - Extreme Sports, Manufacture 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
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> |
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
1. Animate CSS
2. Slick
3. Selectize
4. Countdown
5. Magnific Popup
6. Isotope
7. Pace
8. Circular Progress Bar
9. Utilities
10. Typography
11. Navbar
12. Buttons
13. Icons
14. Socials
15. Action Link
16. Sliders
17. Form
18. Widgets
19. Sidebar
20. Footer
21. Boxes
22. Cart
23. Wishlist
24. Blog
25. Breadcrumbs
26. Headers
27. Mobile Menu
28. Blockquote
29. Pagination
30. Team
31. Lists
32. Coming Soon
33. Progress Bar
34. Map
35. Contacts
Was this article helpful ?
Navbar
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 |
<nav class="ct-menu"> <div class="navbar navbar-fixed text-center navbar-default"> <div class="container-fluid"> <form class="ct-search form-group"> <input id="navbar-search" placeholder="Search..." required="required" name="field[]" class="form-control" /> <label for="navbar-search" class="sr-only">Search...</label> <button type="submit"><i class="fa fa-search"></i> </button> </form> <div class="navbar-header"> <a href="index.html" class="navbar-brand"> <img src="assets/images/demo-content/page-logo.png" alt="Sporta Logo"> </a> </div> <ul class="ct-socials list-inline list-unstyled pull-left"> <li class="ct-socials__item--facebook"><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook"></i></a> </li> <li class="ct-socials__item--twitter"><a href="https://twitter.com/createitpl"><i class="fa fa-twitter"></i></a> </li> <li class="ct-socials__item--instagram"><a href="#"><i class="fa fa-instagram"></i></a> </li> <li class="ct-socials__item--linkedin"><a href="#"><i class="fa fa-linkedin"></i></a> </li> </ul> <ul class="ct-menu-icons pull-right"> <li class="ct-search-toggle"><a href="#" class="ct-icon"><i class="fa fa-search"></i></a> </li> <li class="ct-wishlist-dropdown"> <a href="#" class="ct-icon"> <div class="ct-wishlist-number">0</div><i class="fa fa-heart-o"></i> </a> <div class="ct-wishlist"></div> </li> <li class="ct-cart-dropdown"> <a href="#" class="ct-icon"> <div class="ct-cart-number"></div><i class="fa fa-shopping-cart"></i><i class="fa fa-cart-arrow-down"></i> </a> <div class="ct-cart"></div> </li> <li class="ct-mobile-toggle"><a href="#" class="ct-icon"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li role="presentation" class="dropdown nav-item"><a data-toggle="dropdown" href="index.html" role="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle">Home<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="index.html">Home</a> </li> <li><a href="index-shop.html">Shop</a> </li> <li><a href="index-parallax.html">Parallax</a> </li> </ul> </li> <li class="nav-item"><a href="about-us.html">About Us</a> </li> <li class="nav-item"><a href="services.html">Services</a> </li> <li role="presentation" class="dropdown nav-item"><a data-toggle="dropdown" href="sample-page.html" role="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle">Pages<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="sample-page.html">Sample Page</a> </li> <li><a href="sample-left-sidebar.html">Left Sidebar</a> </li> <li><a href="sample-right-sidebar.html">Right Sidebar</a> </li> </ul> </li> <li class="nav-item"><a href="#">Features</a> </li> <li role="presentation" class="dropdown nav-item"><a data-toggle="dropdown" href="blog.html" role="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle">Blog<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="blog.html">Blog</a> </li> <li><a href="blog-single.html">Single Post</a> </li> </ul> </li> <li class="nav-item"><a href="#">Shop</a> </li> <li class="nav-item"><a href="contact.html">Contact Us</a> </li> </ul> </div> </div> </nav> |
If you do not want a fixed navbar, remove class navbar-fixed
Screenshots
Navbar
Was this article helpful ?
Page Headers
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<header class="ct-page-header ct-u-scratches--bottom ct-u-scratches--inner ct-u-background--black"> <div class="inner"> <div class="container"> <div class="row"> <div class="col-sm-4"> <h1 class="ct-page-header__title">About us</h1> </div> <div class="col-sm-8"> <ul class="breadcrumb"> <li><a href="#">home</a> </li> <li>About Us</li> </ul> </div> </div> </div> </div> </header> |
Screenshot
Page headers
Was this article helpful ?
Super Header
HTML markup
|
1 2 3 4 |
<div class="ct-super-header"> <h1>-50%<small>On all products<br>mega sporta sale</small></h1> <div class="clearfix"></div><a href="#" class="btn btn-motive" tabindex="0">Browse Products</a> </div> |
Screenshot
Super header
Was this article helpful ?
Isotope gallery
With this markup you will be able to create beautiful and responsive isotope gallery.
HTML markup
|
1 2 3 4 5 6 7 |
<div class="ct-isotope-gallery"> ... <figure class="ct-isotope-item"> <img src="assets/images/example-image.jpg" alt="example" /> </figure> ... </div> |
The first item should have a class isotope-grid-sizer
Screenshot
Isotope gallery
Was this article helpful ?
Action Link
With the use of Action link you will be able to send users of Sporta - Extreme Sports, Manufacture HTML Template to some interesting places on your website.
HTML markup
|
1 2 3 4 5 6 7 8 9 |
<div class="ct-action-link__wrapper"> <a href="#" class="ct-action-link"> <span class="ct-action-link__text-left">please click here</span> <span class="ct-action-link__icon"> <i class="fa fa-calendar-o"></i> </span> <span class="ct-action-link__text-right">to see more events</span> </a> </div> |
Screenshot
Action link
Was this article helpful ?
Socials
With the use of Font Awesome 4.5 icons you will be able to have clean and simple Sporta - Extreme Sports, Manufacture HTML Template social media buttons. They come with two variations
- dark (can be created with the use of ct-socials–dark style class)
- bigger (can be created with the use of ct-socials–bigger style class)
This classes should be added to the <ul> </ul> of the Socials markup to get the same effect as on demo example
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ul class="ct-socials"> <li class="ct-socials__item--facebook"> <a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook"></i></a> </li> <li class="ct-socials__item--twitter"> <a href="https://twitter.com/createitpl"><i class="fa fa-twitter"></i></a> </li> <li class="ct-socials__item--instagram"> <a href="#"><i class="fa fa-instagram"></i></a> </li> <li class="ct-socials__item--linkedin"> <a href="#"><i class="fa fa-linkedin"></i></a> </li> </ul> |
Screenshot example
Social buttons
Was this article helpful ?
Map
HTML markup
|
1 2 3 4 |
<div id="ct-map"></div> // Script Tag <script src="https://maps.googleapis.com/maps/api/js"></script> |
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 |
// When the window has finished loading create our google map below google.maps.event.addDomListener(window, 'load', gmapinit); function gmapinit() { var drag; if (device.mobile() || device.tablet()) { drag = false; } else { drag = true } // Basic options for a simple Google Map // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions var mapOptions = { // How zoomed in you want the map to start at (always required) zoom: 11, draggable: drag, scrollwheel: false, disableDefaultUI: true, // The latitude and longitude to center the map (always required) center: new google.maps.LatLng(40.6700, -73.9400), // New York // How you would like to style the map. // This is where you would paste any style found on Snazzy Maps. styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}] }; // Get the HTML DOM element that will contain your map // We are using a div with id="map" seen below in the <body> var mapElement = document.getElementById('ct-map'); // Create the Google Map using our element and options defined above var map = new google.maps.Map(mapElement, mapOptions); // Let's also add a marker while we're at it var marker = new google.maps.Marker({ position: new google.maps.LatLng(40.6700, -73.9400), map: map, icon: 'assets/images/marker.png' }); } |
Screenshot
Map
Was this article helpful ?
Contacts
With the use of Font Awesome 4.5 icons you will be able to have clean and simple Sporta - Extreme Sports, Manufacture HTML Template Contact information.
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 |
<div class="ct-contacts"> <div class="media"> <div class="media-left"><a href="#"><i class="fa fa-home"></i></a> </div> <div class="media-body"><a href="https://goo.gl/qdPJHL" class="media-title ct-u-color--accent">121 King Street, Melbourne<br> Victoria 3000 Australia</a> </div> </div> <div class="ct-u-padding-top-20"></div> <div class="media"> <div class="media-left"><a href="#"><i class="fa fa-phone"></i></a> </div> <div class="media-body"><a href="11234567890" class="ct-u-color--accent">+1 123 456 7890</a> </div> </div> <div class="media"> <div class="media-left"><a href="#"><i class="fa fa-envelope-o"></i></a> </div> <div class="media-body"><a href="mailto:example@example.com">example@example.com</a> </div> </div> <div class="media"> <div class="media-left"><a href="#"><i class="fa fa-globe"></i></a> </div> <div class="media-body"><a href="www.example.com" target="_blank">www.example.com</a> </div> </div> </div> |
Screenshot example
Contact
Was this article helpful ?
Main Slider with Thumbnails
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 |
<div id="slick-main" data-arrows="false" data-dots="false" data-height="70%" data-draggable="false" data-fade="true" class="ct-slick ct-js-slick ct-slick--main ct-u-background--accent"> <div data-background="assets/images/demo-content/slider-bg-1.jpg" class="ct-header tablex item ct-u-mask"> <div class="container"> <div class="row"> <div class="col-sm-3 hidden-xs"> <img src="assets/images/demo-content/logo-1.png" alt=""> </div> <div class="col-sm-9 ct-u-padding-top-40"> <h1>Extreme Hardware for extreme warriors<small>we at sporta are working with passion<br><span>our hardware is made to last</span></small></h1><a href="#" class="btn btn-motive">About Us</a> <a href="#" class="btn btn-default-o">Our Services</a> </div> </div> </div> </div> <div data-background="assets/images/demo-content/slider-thumb-2.jpg" class="ct-header tablex item ct-u-mask--darker"></div> <div data-background="assets/images/demo-content/slider-thumb-3.jpg" class="ct-header tablex item ct-u-mask--darker"></div> <div data-background="assets/images/demo-content/slider-thumb-4.jpg" class="ct-header tablex item ct-u-mask--darker"></div> <div data-background="assets/images/demo-content/slider-thumb-1.jpg" class="ct-header tablex item ct-u-mask--darker"></div> </div> <div class="container ct-u-background--accent"> <div data-arrows="true" data-items-md="4" data-items-sm="3" data-items-xs="2" data-asNavFor="#slick-main" data-focusOnSelect="true" class="ct-slick ct-js-slick ct-slick--thumbs"> <div class="item"> <div class="inner"> <img src="assets/images/demo-content/slider-thumb-1.jpg" alt=""><span>1. Extreme Passion</span> </div> </div> <div class="item"> <div class="inner"> <img src="assets/images/demo-content/slider-thumb-2.jpg" alt=""><span>2. Best Weapons</span> </div> </div> <div class="item"> <div class="inner"> <img src="assets/images/demo-content/slider-thumb-3.jpg" alt=""><span>3. Strong Warriors</span> </div> </div> <div class="item"> <div class="inner"> <img src="assets/images/demo-content/slider-thumb-4.jpg" alt=""><span>4. Huge Tribe</span> </div> </div> <div class="item"> <div class="inner"> <img src="assets/images/demo-content/slider-thumb-1.jpg" alt=""><span>1. Extreme Passion</span> </div> </div> </div> </div> |
If you do not want a fixed navbar, remove class navbar-fixed
Screenshots
Main slider with thumbnails
Was this article helpful ?
Service Box
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="ct-service-box"> <div class="ct-service-box__icon"><i class="fa fa-rocket"></i> </div> <h3 class="ct-service-box__title">Custom shop</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in.</p> <div class="ct-counter-box"> <div class="ct-counter-box__number"><span>2277</span> </div> <h3 class="ct-counter-box__heading">Customs made<br>so far</h3> </div> </div> |
Screenshot
Service box
Was this article helpful ?
Countdown
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div id="ct-countdown" class="ct-countdown" data-countdown-to="06/20/2016 15:19:50"> <h6>Countdown to the next event</h6> <div><span class="ct-countdown__days">89</span> <div class="ct-countdown__text">Days</div> </div> <div><span class="ct-countdown__hours">04</span> <div class="ct-countdown__text">Hours</div> </div> <div><span class="ct-countdown__minutes">09</span> <div class="ct-countdown__text">Minutes</div> </div> <div><span class="ct-countdown__seconds">48</span> <div class="ct-countdown__text">Seconds</div> </div> </div> |
Countdown accepts the following format: MM/DD/YYYY HOURS:MINUTES:SECONDS
Screenshots
Countdown
Was this article helpful ?
Icon Box
Our Icon Boxes are using Font Awesome 4.5 icons. All of them can be find HERE. Sporta - Extreme Sports, Manufacture HTML Template have two variations of this element
- Left variation ( can be set with the use of ct-icons__left class style)
- Right variation ( can be set with the use of ct-icons__right class style)
— Left variation
HTML markup
|
1 2 3 4 5 |
<div class="ct-icon-box ct-icon-box__left"> <div class="ct-icon-box__icon"><i class="fa fa-gg-circle"></i> </div> <h6 class="ct-icon-box__heading">Fresh killer design</h6> </div> |
Screenshot
Right variation
— Right variation
HTML markup
|
1 2 3 4 5 |
<div class="ct-icon-box ct-icon-box__right"> <h6 class="ct-icon-box__heading">Fresh killer design</h6> <div class="ct-icon-box__icon"><i class="fa fa-paint-brush"></i> </div> </div> |
Screenshot
Left variation
Was this article helpful ?
Icons
Icons used in the Sporta - Extreme Sports, Manufacture HTML Template are Font Awesome 4.5 icons. All of them can be find HERE.
HTML markup
|
1 2 3 |
<div class="ct-icon"> <i class="fa fa-search"></i> </div> |
Screenshot
Icons
Was this article helpful ?
Counters
With Sporta - Extreme Sports, Manufacture HTML Template counters you will be able to show some numbers !
HTML markup
|
1 2 3 4 5 |
<div class="ct-icon-box ct-icon-box__left"> <div class="ct-icon-box__icon"><i class="fa fa-gg-circle"></i> </div> <h6 class="ct-icon-box__heading">Fresh killer design</h6> </div> |
Screenshot
Counters
Was this article helpful ?
Progress Bars
The best way to show the progress of your work simply use one of the progress bars markups. Sporta - Extreme Sports, Manufacture HTML Template have two variations
- Progress bar
- Circular progress bar
— Progress Bar
HTML markup
|
1 2 3 4 5 6 7 |
<div class="ct-progress-bar"> <span class="ct-progress-bar__title">Repairs</span> <span class="ct-progress-bar__percent">75%</span> <div data-percent="75%" class="ct-progress-bar__line"> <span></span> </div> </div> |
Screenshot
Progress bar
— Circular Progress Bar
HTML markup
|
1 2 3 |
<div data-percent="75" class="ct-circular-progress"> <h5 class="ct-circular-progress__title">repairs</h5> </div> |
Screenshot
Circular progress bar
Was this article helpful ?
Contact Box
HTML markup
|
1 2 3 4 5 6 7 8 9 |
<div class="ct-contact-box media"> <div class="ct-contact-box__left media-left"> <div class="ct-contact-box__icon"><i class="fa fa-futbol-o"></i> </div> </div> <div class="ct-contact-box__body media-body media-middle"> <h3 class="ct-contact-box__title media-heading">Help & Support<a href="mailto:support@example.com">support@example.com</a></h3> </div> </div> |
Screenshot
Contact box
Was this article helpful ?
Feature Box
HTML markup
|
1 2 3 4 5 6 7 8 9 10 |
<div class="ct-feature-box media"> <div class="media-left"> <div class="ct-feature-box__icon"><i class="fa fa-truck"></i> </div> </div> <div class="media-body media-middle"> <h3 class="media-heading">Free delivery</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit.</p> </div> </div> |
Screenshot
Feature box
Was this article helpful ?
Team Box
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<figure class="ct-team-box"> <a href="team-1.html" class="ct-team-box__media mfp-ajax"> <img src="assets/images/demo-content/team-1.jpg" alt="Mike" class="ct-team-box__image"> <button type="button" class="btn btn-accent ct-team-box__button">View Full Profile </button> </a> <h4 class="ct-team-box__name">Mike</h4> <ul class="ct-socials list-inline list-unstyled"> <li class="ct-socials__item--facebook"><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook"></i></a> </li> <li class="ct-socials__item--twitter"><a href="https://twitter.com/createitpl"><i class="fa fa-twitter"></i></a> </li> <li class="ct-socials__item--instagram"><a href="#"><i class="fa fa-instagram"></i></a> </li> </ul> </figure> |
Screenshots
Team box
Was this article helpful ?
Team Popup
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 |
<div class="ct-team-ajax"> <div class="row"> <div class="col-md-5"> <img src="assets/images/demo-content/team-1.jpg" alt="John Smithers" /> </div> <div class="col-md-7"> <header> <h4>John Smithers<a href="11234567890">+1 (123) 456-7890</a><small>co-founder</small> </h4> <ul class="ct-socials list-inline list-unstyled"> <li class="ct-socials__item--facebook"><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook"></i></a> </li> <li class="ct-socials__item--twitter"><a href="https://twitter.com/createitpl"><i class="fa fa-twitter"></i></a> </li> <li class="ct-socials__item--linkedin"><a href="#"><i class="fa fa-linkedin"></i></a> </li> </ul> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit.</p> </div> </div> <div class="row"> <div class="col-md-5"> <h4>I can help you with</h4> <ul class="ct-team-ajax__list ct-list"> <li>general inquiries</li> <li>business partnerships</li> <li>wholesale</li> <li>endorsement</li> <li>event organisation</li> <li>warranty</li> <li>we can simply hang on</li> </ul> </div> <div class="col-md-7"> <form> <h4>Drop me a line</h4> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <input type="text" placeholder="Name" id="ajax-name" name="field[]" required="required" class="form-control" /> <label for="ajax-name" class="sr-only">Name</label> </div> </div> <div class="col-sm-6"> <div class="form-group"> <input type="email" placeholder="Email" id="ajax-email" name="field[]" required="required" class="form-control" /> <label for="ajax-email" class="sr-only">Email</label> </div> </div> <div class="col-sm-12"> <div class="form-group"> <textarea placeholder="Message" id="ajax-message" rows="4" required="required" name="field[]" class="form-control"></textarea> <label for="ajax-message" class="sr-only">Message</label> </div> </div> </div> <button type="submit" class="btn btn-motive">Send Message </button> </form> </div> </div> </div> |
Screenshots
Team popup
Was this article helpful ?
Product
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="ct-product-box"> <div class="ct-product-box__inner"> <div class="ct-product-box__image"> <img src="assets/images/demo-content/product-1.jpg" alt="Sporta Predator RX6" class="ct-product-box__img"> </div> <div class="ct-product-box__heading"> <div class="ct-product-box__title">Sporta Predator RX6</div> <div class="ct-product-box__price"><span class="ct-product-box__price--default">$ 2999</span> </div> </div> <div class="ct-product-box__footer"><a href="#" data-toggle="tooltip" title="" class="ct-product-box__button ct-product-box--tooltip" tabindex="0" data-original-title="Additional information about current item"><i class="fa fa-info"></i></a> <a href="#" class="ct-product-box__button ct-product-box__wishlist" tabindex="0"><i class="fa fa-heart-o"></i> </a><a href="#" class="ct-product-box__button ct-product-box__button--wide" tabindex="0">Add to cart</a> </div> </div> </div> |
Screenshot
Product
This element will be fully working only with the use of the jQuery Paypal HTML Shop that is part of the Sporta - Extreme Sports, Manufacture HTML Template
Was this article helpful ?
Contact 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!
You can create contact form with a use of:
- Input
- Textarea
- Submit button
–Input
HTML markup
|
1 2 3 4 |
<div class="form-group"> <input type="text" placeholder="Name" id="name" name="field[]" required="required" class="form-control"> <label for="name" class="sr-only">Name</label> </div> |
–Textarea
HTML markup
|
1 2 3 4 |
<div class="form-group"> <textarea placeholder="Your Comment" id="comment" rows="4" required="required" name="field[]" class="form-control"></textarea> <label for="comment" class="sr-only">Your Comment</label> </div> |
–Submit button
HTML markup
|
1 2 3 |
<button type="submit" class="btn btn-motive"> Add Comment </button> |
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
Was this article helpful ?
Shop Locator plugin
Was this article helpful ?
External Documentations
The following sources and files have been used to build up this theme
Was this article helpful ?