Below we have given you a quick overview of the features packed into the Nominee Template:
1. Unzip the file and find out the folder nominee, there are all html template files in this folder.
2. Folder Structure is as follows
-assets (all assets/required file of this template) --bootstrap (bootstrap core files) --css (all css files) --fonts (font-awesome font icon set ) --images (all images) --js (all javascript files) --magnific(image popup) --owl.carousel --simple-text-rotator --superslides --videos (html5 video formats) --YTPlayer (js for youtube background) - email-templates (a basic email template functional with contact form) -index.html (Main html file) -sendemail.php (PHP file for functional contact form)
3. You will need to Upload these files to your Web Server using FTP or cpanel in order to use it on your Website. And other files can be used according to your preferences.
4. Now enjoy the theme and adding section/feature according to your need.
Being based on Twitter Bootstrap, Nominee inherits its awesome grid system. It's a responsive, mobile first grid that appropriately scales up to 12 columns as the device or view port size increases.
Example markup:
<div class="row">
<div class="col-md-12">
Level 1 column
<div class="row">
<div class="col-md-6">Level 2</div>
<div class="col-md-6">Level 2</div>
</div>
</div>
</div>
CSS Files
<!-- Web Fonts --> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'> <!-- Font Awesome --> <link href="assets/fonts/fontAwesome/css/font-awesome.min.css" rel="stylesheet"> <!-- Flaticon --> <link href="assets/fonts/flaticon/flaticon.css" rel="stylesheet"> <!-- Magnific-popup css --> <link href="assets/magnific/magnific-popup.css" rel="stylesheet"> <!-- owl.carousel --> <link href="assets/owl.carousel/assets/owl.carousel.css" rel="stylesheet"> <link href="assets/owl.carousel/assets/owl.theme.min.css" rel="stylesheet"> <!-- Bootstrap --> <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="assets/css/style.css" rel="stylesheet"> <link href="assets/css/responsive.css" rel="stylesheet">
JavaScripts Files
<!-- jQuery --> <script src="assets/js/jquery-2.1.3.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="assets/bootstrap/js/bootstrap.min.js"></script> <script src="assets/js/jquery.easing.min.js"></script> <script src="assets/js/smoothscroll.min.js"></script> <script src="assets/js/jquery.inview.min.js"></script> <script src="assets/js/jquery.stellar.js"></script> <script src="assets/js/jquery.countTo.min.js"></script> <script src="assets/js/coundown-timer.js"></script> <script src="assets/js/jquery.shuffle.min.js"></script> <script src="assets/js/bootstrap-tabcollapse.js"></script> <script src="assets/magnific/jquery.magnific-popup.min.js"></script> <script src="assets/js/ajaxchimp.js"></script> <script src="assets/js/twitterFetcher.min.js"></script> <script src="assets/owl.carousel/owl.carousel.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js"></script> <script src="assets/js/scripts.js"></script>
There are two kinds of font icons used in this template.
Font Awesome is a @font-face iconset that allows you to change size and color of the icons just using CSS.
To add an icon, simply create an empty element with class 'fa fa-[icon name]', for example:
<i class="fa fa-file"></i> <i class="fa fa-home"></i> <i class="fa fa-envelope"></i>
Flaticon is also a @font-face iconset that allows you to change size and color of the icons just using CSS.
To add an icon, simply create an empty element with class 'flaticon-[icon name]', for example:
<i class="flaticon-house121"></i> <span class="flaticon-lifeline5"></span>
Configuring and Set-up Twitter Feed is extremely easy!
(function () {
var twitterWidgetConfig = {
id: "613424231099953152", //put your Widget ID here
domId: "trendyTwitterFeed",
maxTweets: 3,
enableLinks: true,
showUser: false,
showTime: true,
showInteraction: false,
customCallback: handleTweets
};
twitterFetcher.fetch(twitterWidgetConfig);
function handleTweets(tweets) {
var x = tweets.length;
var n = 0;
var html = "";
while (n < x) {
html += '<div class="item">' + tweets[n] +
"</div>";
n++
}
$(".twitter-widget").html(html);
$(".twitter_retweet_icon").html(
'<i class="fa fa-retweet"></i>');
$(".twitter_reply_icon").html(
'<i class="fa fa-reply"></i>');
$(".twitter_fav_icon").html(
'<i class="fa fa-star"></i>');
$(".twitter-widget").owlCarousel({
items: 1,
loop: true,
autoplay: true
});
}
}());
HTML Markup:
<div id="trendyTwitterFeed"> <div class="twitter-widget"></div> <!-- html code injected via javascript --> </div>
Configuring and Set-up countdown time is extremely easy.
To customize/change the countdown time, please open the file in any code editor and change the date from ul as follows:
<ul class="countdown" data-date="31 december 2018 12:00:00">
<li>
<span class="days">00</span>
<p>days</p>
</li>
<li>
<span class="hours">00</span>
<p>hours </p>
</li>
<li>
<span class="minutes">00</span>
<p>minutes</p>
</li>
<li>
<span class="seconds">00</span>
<p>seconds</p>
</li>
</ul><!-- /countdown -->
The HTML5 <video> element specifies a standard way to embed a video in a web page. You can play a video in your webpage background or any section. You can host video form root server or can add link form other server.
For browser support you have to provide two format video(.webm/.ogg and .mp4)
The markup:
<video class="text-center" muted="" autoplay="" loop="" poster='assets/videos/christopher_smith.png' > <!-- WebM/VP8 for Firefox4, Opera, and Chrome --> <source type="video/webm" src="assets/videos/christopher_smith.webm"> <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 --> <source type="video/mp4" src="assets/videos/christopher_smith.mp4"> Your browser does not support the video tag. </video>
<a class="player"
data-property="{videoURL:'https://www.youtube.com/watch?v=wHyT68JRB28',
containment:'.home-section',
startAt:0,
mute:true,
autoPlay:true,
loop:true,
opacity:1,
addRaster: true,
showControls: false,
stopMovieOnBlur: false
}">
</a>
js markup:
$(function(){
$(".player").YTPlayer();
});
For more customization go to the link: "https://github.com/pupunzi/jquery.mb.YTPlayer/wiki"
/* === Mail Chimp subscription form settings === */
(function () {
$('.mailchimp').ajaxChimp({
callback: mailchimpCallback,
//replace bellow url with your own mailchimp form post url inside the url: "---".
//to learn how to get your own URL, please check documentation file.
url: "http://trendytheme.us9.list-manage.com/subscribe/post?u=85ba3666ffb519396fbe64dc5&id=c335e5ec53"
});
function mailchimpCallback(resp) {
if (resp.result === 'success') {
$('.subscription-success').html('<i class="fa fa-check"></i>' + resp.msg).fadeIn(1000);
$('.subscription-error').fadeOut(500);
} else if(resp.result === 'error') {
$('.subscription-error').html('<i class="fa fa-times"></i>' + resp.msg).fadeIn(1000);
}
}
}());
HTML Markup:
<form class="subscribe-form mailchimp form-inline" role="form" method="post"> <!-- to showing error message --> <label for="subscribeEmail" class="error"></label> <div class="form-group"> <label class="sr-only" for="subscribeEmail">Subscribe</label> <input type="email" class="form-control" id="subscribeEmail" name="EMAIL" placeholder="Enter you email here"> </div><!-- /.form-group --> <button type="submit" class="btn btn-primary btn-lg">Subscribe</button> <!-- to showing success messages --> <p class="subscription-success"></p> </form>
In this Template there is a full functional working contact form. We have also added a simple email template with this contact form.
To customize/change the email address please open "sendemail.php" file from root folder in any code editor .
Go to the line number 9. There is a line:
$to = 'youremail@gmail.com'; //put your email here
Replace the existing email address with your own mailing address.
Thats it! your template is ready now for receive message from others via mail. (Required javascript added in scripts file.)
We used a dynamic google map in this template. You can easily change your location, address, map marker, map color and almost everything.
/* ======= GOOGLE MAP ======= */
(function () {
//set your google maps parameters
var $latitude = 40.721020,
$longitude = -73.998166,
$map_zoom = 16 /* ZOOM SETTING */
//google map custom marker icon
var $marker_url = 'assets/images/map-marker.png';
//we define here the style of the map
var style = [{
"stylers": [{
"hue": "#000"
}, {
"saturation": -100
}, {
"gamma": 2.15
}, {
"lightness": 12
}]
}];
//set google map options
var map_options = {
center: new google.maps.LatLng($latitude, $longitude),
zoom: $map_zoom,
panControl: true,
zoomControl: true,
mapTypeControl: true,
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
styles: style
}
//inizialize the map
var map = new google.maps.Map(document.getElementById('myMap'), map_options);
//add a custom marker to the map
var marker = new google.maps.Marker({
position: new google.maps.LatLng($latitude, $longitude),
map: map,
visible: true,
icon: $marker_url
});
var contentString = '<div id="mapcontent">' + '<p>Nominee, 795 Folsom Ave, San Francisco.</p></div>';
var infowindow = new google.maps.InfoWindow({
maxWidth: 320,
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}());
HTML Markup:
<div id="myMap"></div>
Twitter Bootstrap: http://getbootstrap.com/
animate.css: http://daneden.github.io/animate.css/
Google Fonts: http://www.google.com/webfonts
Font Awesome: http://fontawesome.io/
Flaticons: http://www.flaticon.com/
jQuery: jquery-2.1.3.min.js
jQuery Easing: http://gsgd.co.uk/sandbox/jquery/easing/
smoothscroll: http://cferdinandi.github.io/smooth-scroll/
Stellar JS: http://markdalgleish.com/projects/stellar.js/
CountTo JS: https://github.com/jsdelivr/jsdelivr/tree/master/files/jquery.countto/0.1.0
Shuffle JS: http://vestride.github.io/Shuffle/
Tab Collaps JS: https://github.com/flatlogic/bootstrap-tabcollapse
Magnific Popup: http://dimsemenov.com/plugins/magnific-popup/
Twitter Fetcher: https://github.com/jaysonsantos/jquery-twitter-fetcher
coundown-timer: coundown-timer.js
inview: https://github.com/protonet/jquery.inview
Owl Carousel: http://owlcarousel.owlgraphic.com/
YTPlayer: https://github.com/pupunzi/jquery.mb.YTPlayer
Ajax Mailchimp : https://github.com/scdoshi/jquery-ajaxchimp
Google Map: https://maps.googleapis.com/maps/api/js
Photos and Videos
Important!
HTML5 Videos: http://mazwai.com/#175
Youtube Video: https://www.youtube.com/watch?v=wHyT68JRB28