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
Twitter Feed
This is live twitter feed. This plugin will grab your latest tweets and display them on page. Configuration: – just edit twitter/config.php file :
|
1 2 3 4 5 6 7 8 9 |
$config = array( 'username' => "XXX", //username 'limit' => 3, //how many tweets we would like to display? 'with_replies' => true, //show replies? true or false 'oauth_access_token' => 'TOKEN', 'oauth_access_token_secret' => 'TOKEN_SECRET', 'consumer_key' => 'KEY', 'consumer_secret' => 'KEY_SECRET', ); |
Where can I get these keys, tokens, etc? Twitter API requires authentication to display tweets from your account. To twiiter feed work you need to create the ‘application’ and generate […]
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 […]
Flexslider
Below you will find HTML markup for flexslider:
|
1 2 3 4 5 |
<div class="flexslider ct-flexslider--controlsVertical ct-flexslider--controlsWhite ct-js-flexslider" data-animations="true" data-height="100%"> (...) </div> |
You can change number of flexslider parameters using javascript – learn more about parameters.
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.) jQuery FlexSlider v2.2.0 GMAP3 […]
Typography
We use google font service to include fonts or font face sets. Ligh Font used: Open Sans Credits: Open Sans
Charts
Progress Bars This theme has 2 types of layout and all you have to do is change one class. Also, everything is done via data attribute.
|
1 2 3 4 5 6 7 8 |
<div class="progress"> <div class="progress-bar animating" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="ct-progressBar-text">60% Complete</span> <div class="ct-progressBar-tr"></div> </div> </div> </div> |
Stripped progress bar
|
1 2 3 4 5 6 7 8 |
<div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped animating" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> <span class="ct-progressBar-text">40% Complete (success)</span> <div class="ct-progressBar-tr"></div> </div> </div> </div> |
aria-valuenow: Percentage this bar should have aria-valuemax: Max value aria-valuemin: Min value
Features
Media Sections
{Theme} supports media sections with Parallax, KenBurns effect and videos. Parallax Section
|
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 |
<section class="ct-mediaSection ct-u-paddingBoth70" data-stellar-background-ratio="0.3" data-height="650" data-type="parallax" data-bg-image="./assets/images/demo-content/bigImage1.jpg" data-bg-image-mobile="./assets/images/demo-content/bigImage1-mobile.jpg" style="min-height: 650px; height: 650px; background-image: url(http://orlando.html.themeforest.createit.pl/light/assets/images/demo-content/bigImage1.jpg); background-position: 50% 50%;"> <div class="ct-mediaSection-inner"> <div class="container"> <div class="row"> <div class="col-sm-4"> <header class="ct-pageSectionHeader"> <h3 class="text-lowercase ct-fw-600"> Parallax <small class="ct-fw-700 text-uppercase">Yes, we are the absolute best in the business </small> </h3> </header> </div> <div class="col-sm-8"> <p> Donec justo mauris, sagittis sed vulputate ut, commodo dapibus massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ut mi lacus. Morbi accumsan mauris ac posuere vehicula. Donec bibendum tellus rutrum turpis varius dictum. Maecenas tristique arcu sed rhoncus laoreet. Praesent eget fermentum nisi. Donec ac velit aliquet, bibendum sem in, convallis est. Phasellus sodales ultricies cursus. Vivamus leo nunc, pretium vitae dictum a, mollis ut sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec porttitor tristique sem, dictum vehicula nisi accumsan eget. Pellentesque habitant morbi tristique senectus et netus. </p> <a href="contact.html" class="btn btn-primary ct-btn--rounded text-uppercase">Contact Us</a> <a href="features-p-tables.html" class="btn ct-btn--black ct-btn--rounded text-uppercase">Pricing Options</a> </div> </div> </div> </div> </section> |
We are using stellar.js for the parallax effect. Check their documentation to check which attributes you can use in each parallax section. http://markdalgleish.com/projects/stellar.js/docs/ Our custom data-attributes for the parallax section are: data-height: Define the minimun height for the sections data-type: Type of […]