Below we have given you a quick overview of the features packed into the Nominee Template:
-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) --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)
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!
Note: Twitter fetcher is not works on local server due to the fact many computer browsers block JavaScript execution when running from file:// instead of http://. Always ensure you are running from a webserver eg via localhost if you want to test locally. You could use XAMPP or WAMP server to make your local host as a local server.
(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 script.js from assets/js/scripts.js in any code editor.
Find out /* ======= Countdown ======= */ wrapper, put your date in existing date.
The script is look like:
/* ======= Countdown ======= */
(function () {
$("#countdown").countdown({
date: "10 octabar 2015 12:00:00",
format: "on"
});
}());
HTML Markup:
<ul id="countdown">
<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/
Superslides JS: https://github.com/nicinabox/superslides
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!
Portfolio Images: http://www.pexels.com/, https://pixabay.com/en/
HTML5 Videos: http://mazwai.com/#175
Youtube Video: https://www.youtube.com/watch?v=wHyT68JRB28