Nominee- Responsive html Template for Candidate


Nominee is a html template designed specifically for political and public figures.
It can also be use as any non-profit organization, such as charity, event, campaign etc. It's unique design is flexible enough to fit any political option and social issue.
 
Its allow your visitors to get immersed in your content with full screen images, parallax video backgrounds, elegant typography and animations.
 
With a few simple adjustments your site can go from a serious campaign presentation to a more informal grass roots movement.

Below we have given you a quick overview of the features packed into the Nominee Template:

  1. For political, nonprofit organizations,
  2. Extremely easy to setup and configure,
  3. Built with latest Bootstrap framework,
  4. W3C valid HTML5  code,
  5. Fully responsive to give a perfect user experience on all devices,
  6. Clean and well documented code
  7. Working ajax subscription form with Mailchimp integration
  8. Working PHP Contact Form with a Simple Email Template,
  9. jQuery Countdown
  10. Includes Entire Font Awesome,
  11. Cross browser support,
  12. Attractive CSS animation,
  13. Google Fonts used,
  14. Six background styles
  15. Excellent customer support – We care about your site as much as you and will help in anyway possible.

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.

 

HTML Structure

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.

  1. FontAwesome
  2. Flaticon

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!

To customize/change the Twitter Feed ID, please open script.js from assets/js/scripts.js in any code editor.
 
Find out  /* ======= Twitter Feed ======= */  wrapper, put your Widget ID there. There is a clear description how to create a valid twitter ID to use. 
 
* ### HOW TO CREATE A VALID ID TO USE: ###
* Go to www.twitter.com and sign in as normal, go to your settings page.
* Go to "Widgets" on the left hand side.
* Create a new widget for what you need eg "user time line" or "search" etc.
* Feel free to check "exclude replies" if you don't want replies in results.
* Now go back to settings page, and then go back to widgets page and
* you should see the widget you just created. Click edit.
* Look at the URL in your web browser, you will see a long number like this:
* 345735908357048478
* Use this as your ID below instead!
 
 
JavaScript Markup:
    (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>
jquery.mb.YTPlayer - use a custom youtube player for a video as background on jQuery framework.
 
This is a jQuery component that let you play a Youtube® movie in a chromeless player.
You can even use a movie as background of your HTML page.
 
Important notice!
The plug in works only if used under a web server. It doesn’t work if you run the HTML page as file (file://…).
 
If you want to run it locally on your computer you need a web server installed (for ex: MAMP for Mac, XAMP for Windows,LAMP for linux) and reach the file from http://localhost… or whatever you mapped in the Host file as localhost.
 
HTML Markup:
<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>

 

data-property:
*data-property is an attribute of the TAG where you can pass the settings of the player.
 

 

js markup:

$(function(){
    $(".player").YTPlayer();
  });

 

For more customization go to the link: "https://github.com/pupunzi/jquery.mb.YTPlayer/wiki

We used a dynamic full functional Mailchimp  Newsletter Subscription form  in this template. You can easily change your Mailchimp form post url.
 
First open script.js from assets/js/scripts.js find out  /* === Mail Chimp subscription form settings === */  wrapper.  
Replace exsisting url with your own mailchimp form post url inside the url: "---".
 
JS Markup: 
/* === 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&amp;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.

First open script.js from assets/js/scripts.js find out  /* ======= GOOGLE MAP ======= */  wrapper.  
Put your latitude longitude, put your map marker at $marker_url.
Write your address in "contentString".  
You can also change map color form "stylers"  zoom options form "map_zoom"
 
In html put the map "id" in any section and give it a min-height(your desired height)

JavaScript Code:
/* ======= 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>

HTML/CSS

Twitter Bootstraphttp://getbootstrap.com/

animate.csshttp://daneden.github.io/animate.css/

 

Fonts

Google Fonts: http://www.google.com/webfonts

Font Awesome: http://fontawesome.io/

Flaticons: http://www.flaticon.com/

 

JavaScripts

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! 

The images used on the demo site are for demonstration purposes only and are not included in the download file. You need to contact authors to get permission in case you want to use them in your commercial or non-commercial projects.
We have included placeholder images for each instance. 
 
Slider and Background Images:  Image One: , Image Two: , Image Three: , Image Four: , Image Five: , Image Six: , Image Seven: , Image Eight: , Image Nine:
Portfolio Images: 

HTML5 Videos:   http://mazwai.com/#175

Youtube Video: https://www.youtube.com/watch?v=wHyT68JRB28

 

Once again, thank you very much for purchasing this template;  we'll be glad to help you if you have any questions.
If you have a more general question relating to the templates on ThemeForest, please consider visiting the forums and asking your question in the "Item Discussion" section.
 
Thanks,
Trendy Theme Team :)
VERSION 2.0
======================
1. Merge all individual files in one root folder
2. Changed Some script on script.js
3. Changed some html markup on countdown wrapper
4. Changed twitterFetcher.js
5. Fixed some minor issues
 
 
 
VERSION 1.0
======================
Initial release
 
 
 
Instructions for Previous (VERSION 1.0) user:
======================================================
Recently Twitter have changed their API, for that reason twitter feed not working properly. If you want to update your previous file please replace your "twitterFetcher.min.js" with newly added twitterFetcher.js and don't forget to call this file in bottom of your index.html
 
If you want to use new features from updated file you need to replace your "scripts.js" with the updated "scripts.js". 
 
Warning: You should keep a backup of your all previous file, replacing files may replace your custom  javascript.