About Political Buddies Template

If you like this template, please spare a minute to rate it.

Template Overview:

Political Buddies is a modern looking responsive HTML5 template which is specially designed & developed for political campaign and election activism in mind. It is perfectly functional and ideal for political activism and election campaign web sites . All elements those are required to build a unique and creative political activism and election campaign site, comes with in template package.

Political Buddies built with Popular Bootstrap 3.3.6 framework. So, you can easily create a professional Political activism and Campaign web site with unlimited color combination.

Political Buddies template works smoothly and super fast on your Computer, tablet and mobile devices and comes with eye catching pre made blocks and sections such as About us, Process section, Event section, Team section, Blog section, Appointment form, Testimonial box, Counter section, Highlight Boxes, Contact form section and much more.

Undoubtedly, Political Buddies will gives you the easiest and best experience while customizing the template for Political activism and Campaign web site. Any issue regarding Political Buddies template, we’re here to assist you.

Political Buddies Template Features:

  • Two Unique Home Page Layout.
  • Single/One Paged Home Version Included.
  • Modern,Creative and Very Clean looking Design.
  • Fully Responsive Template Build With Bootstrap 3.3.6.
  • Campaign Gallery Page.
  • Event Lists Page.
  • Functional Contact Form.
  • SCSS Files Included.
  • Font Awesome Icon font.
  • Google Fonts used.
  • Custom 404 Page.
  • Coming Soon Page.
  • Developer Friendly and Well Commented Code.
  • Extensive Documentation.
  • Premium Support From Developer.

15+ Political Pre Made Templates:

  • Home Page 1 (index.html)
  • Home Page 2 (home-2.html)
  • One Paged Home Version (index-one-page.html)
  • About Us (about-us.html)
  • Events (events.html)
  • Single Events (event-single.html)
  • Contact Us (contact.html)
  • Teams (team.html)
  • Single Team (event-team.html)
  • Donation Page (donation.html)
  • Blog (blog.html)
  • Blog single(single.html)
  • FAQ (faq.html)
  • Coming Soon (coming-soon.html)
  • 404 Page(404.html)
  • Gallery 01(gallery-1.html)
  • Gallery 01(gallery-2.html)
  • Element Highlights (element-highlights.html)
  • Element Counter (element-counters.html)
  • Element CTA (element-cta.html)
  • Element Sponsors/Logos (element-logos.html)
  • Element Testimonials (element-testimonial.html)
  • Element Newsletter (element-newsletter.html)

HTML File & Elements Structure

All the directories and files are well organized as it shown on the image bellow. Same file tree has been applicable for all HTML files-

This template is a mobile friendly (responsive) layout which is designed based on Twitter Bootstrap v3.3.6. See our HTML file structure which is in index.html. All the contents should set inside the container div.

Setup Slider:

You will get following lines of code in index.html page.

Slider Container Block HTML:

<div id="slider_1" class="owl-carousel" data-nav="false" data-dots="true" data-autoplay="true" data-autoplaytimeout="50000">

Parameter Reference:

  • data-nav="false" Default: false. Set 'true' to show navigation arrows.
  • data-dots="true" Default: true. Set 'false' to hide navigation arrows.
  • data-autoplay="true" Default: true. Set 'false' to stop automatic slider item rotation.
  • data-autoplaytimeout="50000" Default: 10000 (10s). Set number of seconds for each slider item rotation.
  • data-bg_effect="false" Default: false. Set 'true' to enable slider background zoom effect.

Slider Item Block HTML:

<div class="slider_item_container" data-bg_img="images/home_1_slider_1.jpg" data-bg_color="#264676" data-bg_opacity="0.1">

Parameter Reference:

  • data-bg_img="images/home_1_slider_1.jpg" Set the path of slider image. Recommended Size: 1900X800 px.
  • data-bg_color="#264676" You can set custom Overlay Color on slider image.
  • data-bg_opacity="0.1" Set overlay color opacity. For a Solid Background use opacity value as 1.

Slider Content Animation:

You can set custom animation for each 'Heading text', 'Sub-Heading' or in 'Buttons'. Check full list of animation classes in here.

<div class="slider-bg" data-animation-in="fadeInLeft" data-animation-out="zoomInDown">                                    
    <div class="col-sm-12 wow fadeInLeft" data-wow-duration="1s">

Animation Parameter Reference:

  • data-animation-in="fadeInLeft" Set custom animation for each animation item Appearance In effect.
  • data-animation-out="zoomInDown" Set custom animation for each animation item Appearance Out effect.
  • class="col-sm-12 wow fadeInLeft" Set Content Animation for each block.

Slider Output:

Slider Full Code:

<!--  HOME SLIDER BLOCK  -->
<div class="slider-wrap">
    <div id="slider_1" class="owl-carousel" data-nav="false" data-dots="true" data-autoplay="true" data-autoplaytimeout="50000">

        <div class="slider_item_container" data-bg_img="images/home_1_slider_1.jpg" data-bg_color="#264676" data-bg_opacity="0.1">
            <div class="item">
                <div class="slider-content">
                    <div class="container text-left">
                        <div class="row">
                            <div class="slider-bg" data-animation-in="fadeInUp" data-animation-out="fadeInRight">                                            
                                <div class="col-sm-12 wow fadeInUp" data-wow-duration="1s">  

                                        <h3 class="text-dark">Choose Peter for a better future!</h3>
                                        <h2 class="text-dark">
                                            DREAM TOGETHER
                                            <br>
                                            AND MAKE IT HAPPEN! 

                                        </h2>
                                        <a href="#" class="btn btn-theme btn-theme margin-top-24">JOIN WITH US</a>
                                    </div>                                      
                            </div> <!-- end .col-sm-12  -->
                        </div> <!-- end .row  -->
                    </div><!-- end .container -->
                </div> <!--  end .slider-content -->
            </div> <!-- end .item  -->
        </div> <!-- end .slider_item_container  -->

        <div class="slider_item_container" data-bg_img="images/home_1_slider_2.jpg" data-bg_color="#111111" data-bg_opacity="0.5" >
            <div class="item">
                <div class="slider-content">
                    <div class="container text-center">
                        <div class="row">
                            <div class="slider-bg" data-animation-in="fadeInLeft" data-animation-out="zoomInDown">                                    
                                <div class="col-sm-12 wow fadeInLeft" data-wow-duration="1s">

                                    <h3>Nation need all of us !</h3>
                                        <h2>
                                            DIVIDED WE FALL
                                            <br>
                                            UNITED WE STAND TOGETHER.
                                        </h2>
                                        <a href="#" class="btn btn-theme btn-theme margin-top-24">JOIN WITH US</a>
                                        <a href="#" class="btn btn-theme btn-theme-invert margin-top-24">MAKE DONATION</a>
                                </div>                                            
                            </div> <!-- end .col-sm-12  -->
                        </div> <!-- end .row  -->
                    </div><!-- end .container -->
                </div> <!--  end .slider-content -->
            </div> <!-- end .item  -->
        </div> <!-- end .slider_item_container  -->

    </div> <!-- end .slider_1  -->
</div> 
                                  

CSS File Structure

We are using 7 CSS files in this template and we separated styles for improving convenience to edit this template. If you are going to use this template in production we recommend you to merge all stylesheets into one file (for decreasing HTTP queries).

<link href="libs/bootstrap/styles/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="libs/font-awesome/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="libs/animate/styles/animate.css" rel="stylesheet" type="text/css">
<link href="libs/owl.carousel/styles/owl.carousel.css" rel="stylesheet" type="text/css">
<link href="libs/owl.carousel/styles/owl.theme.css" rel="stylesheet" type="text/css">
<link href="libs/venobox/styles/venobox.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">

Compile SCSS File:

This template css complied with SCSS. Inside the directory src, you will get all scss files. The base/_variables.scss declares template colors and variables and _layout.scss contains all necessary declaration for css. styles.scss will be compiled to css/style.css. Other two less files mixins.scss and reset.scss are for common CSS behaviour.

Check Video Tutorial

Less Complier:

We have used "crunch2" less compiler to generate CSS from less file. It's FREE and very easy to use. You can download it from following link- https://getcrunch.co/

Steps To Compile Less File Using Crunch2:

Please follow the steps to compile template LESS file.

Step 01:From Crunch 2 menu open project/template files and select "styles.less" file.

Step 02:Next, from Crunch 2 menu click "Crunch!".

Step 03:Compiler will compile "styles.less" to "styles.css" file and display success message bottom of Crunch 2 editor.

Step 04:Open and edit "css/less/variables.less" file to change font family, primary color and other options.

Setup JavaScript Files

There are 12 jQuery files including necessary plugins, all of them be found in jsfolder of home directory. custom-scripts.js This file must go all the way down to other files and plugins for app landing page. This file contains custom codes-

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/jquery.backTop.min.js "></script>
<script src="js/waypoints.min.js"></script>
<script src="js/waypoints-sticky.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/venobox.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/custom-scripts.js"></script>

Logo Change

Hedaer Logo Screenshot

Template Font

We have used Google font Montserrat for heading font and Poppins for body font. Font used in the top of the file less/variables.less

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800|Poppins:300,400');

Animation

We used WOW plugin to trigger animations on scroll. Here are some animation classes we used in this Template. To learn more about WOW please read their Documentation

  • fadeIn
  • fadeInLeft
  • fadeInRight
  • fadeInUp
  • fadeInDown
  • fadeInLeftBig
  • fadeInRightBig
  • fadeInUpBig
  • fadeInDownBig

Background Image

We used several background images in our template. You'll find the code in the file css/less/layout.less. These code will be available after the compilation of the layout.less and written in the css/layout.css in the. Examples are given in the screenshot-

In the layout.less

In the index.html

Remove Pre Load Icon

Step 01:Open index.html or any other templates using an editor.

Step 02: You will get following lines of codes top of the template.

<div id="preloader">
  <span class="margin-bottom"><img src="images/loader.gif" alt=""></span>
</div>

Step 03:Remove those codes from template and save the file.

Remove Back To Top Button

Step 01:Open index.html or any other templates using an editor.

Step 02: You will get following lines of codes bottom of the template.

<a id="backTop">Back To Top</a>

Step 03:Remove those codes from template and save the file.

Google Map

For any kind of business, Google Map is considered as an essential tool. To keep this requirement in mind, this template facilitates the option to display Google Map anywhere of the page. Check out step by step instructions to setup a Google Map -

Step 01: Open contact.html file and you'll get two JavaScript files has been included at the bottom of the page. Note that, you need to Set Google Map API Key in first JavaScript file. Otherwise, Google Map may not work properly.

<script src="https://maps.google.com/maps/api/js?sensor=true&key=AIzaSyB8asWf-NyxR0dTHf_OMY9iT_lRncQG8x3"></script>
<script src="js/jquery.gmap.min.js"></script>

Step 02: We have defined a div with an ID called 'map canvas' and we are going to show the map in there. You will get following example code in contact.html tempate.

<div class="section-google-map-block wow fadeInUp">
    <div id="map_canvas"></div>
</div>

Step 03: Next, navigate to the 'js/custom-scripts.js' folder in template directory. In that file, you can set Map Custom Height, location latitude and longitude. Generate your location "Latitude" and "Loongitude" from https://latlong.net/ & find more examples of Google Map in https://hpneo.github.io/gmaps/examples.html

// GOOGLE MAP FOR CONTACT US PAGE.
if ($('#map_canvas').length) {
    var map;
    $('#map_canvas').css({
        'height': '400px'
    });
    map = new GMaps({
        div: '#map_canvas',
        lat: -12.043333,
        lng: -77.028333
    });
    map.addMarker({
        lat: -12.043333,
        lng: -77.028333,
        title: 'Lima',
        click: function (e) {
            alert('You clicked in this marker');
        }
    });
}

Setup Google Map API Key:

Step 01. Go to following link and get your own API key.
https://developers.google.com/maps/documentation/javascript/get-api-key

Step 02. Click GET A KEY button and Popup window will appear.

Step 03. Now, follow the popup window instructions and you’ll get an API key like following example. Copy that API Key and add it in your JS code.

https://maps.google.com/maps/api/js?key=your-api-key

Output: If everything has been done perfectly, you will see a Google map displaying properly in your page like the following example.

Contact Form

Without any question, Contact Form is the most popular and well known communication medium between site owner and the customer. To be more specific, in terms of building a strong and solid customers base contact form can play a massive role. We believe that, it will helps you to achieve your business goal. To consider this fact, we have included a Fully functional, Responsive and Eye catching Contact Form with template package, which validates the customer submitted information, processes it and send message instantly without reloading the page. Lets learn more about Contact Form HTML, JavaScript and PHP Code.

Contact Form HTML Code:

You can set custom text in 'placeholder' and 'data-msg' tags.

<div class="contact-form-block">

        <h2 class="contact-title">Say Hello To Us</h2>

        <form role="form" action="#" method="post" id="contact-form">

            <div class="form-group">
                <input type="text" class="form-control" id="user_name" name="user_name" placeholder="Name" data-msg="Please Write Your Name">
            </div>

            <div class="form-group">
                <input type="email" class="form-control" id="user_email" name="user_email" placeholder="Email" data-msg="Please Write Your Valid Email">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="email_subject" name="email_subject" placeholder="Subject" data-msg="Please Write Your Message Subject">
            </div>

            <div class="form-group">
                <textarea class="form-control" rows="5" name="email_message" id="email_message" placeholder="Message" data-msg="Please Write Your Message" ></textarea>
            </div>

            <div class="form-group">
                <button type="submit" class="btn btn-theme">Send Now</button>
            </div>

        </form>

    </div> 

Contact Form JavaScript Code:

if($('#contact-form').length) {

       var $contact_form = $("#contact-form");
       var $contact_submit_btn = $contact_form.find("button.btn-custom");
       var $user_name = $contact_form.find("#user_name");
       var $user_email = $contact_form.find("#user_email");
       var $email_subject = $contact_form.find("#email_subject");
       var $email_message = $contact_form.find("#email_message");

       var emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;

       var $all_fields = $([]).add($user_name).add($user_email).add($email_subject).add($email_message);

       $all_fields.val("");

       var $error_border =  "border-bottom: 1px solid red;";
       var contact_form_bValid, user_name_bValid,user_email_bValid,user_email_subject_bValid, user_email_message_bValid;

       $contact_form.find("button[type=submit]").on("click", function() {

               contact_form_bValid = true;

               if( $user_name.val() === "" ) {

                   user_name_bValid = false;
                   $user_name.next("span").remove();
                   $user_name.attr("style", $error_border).after("" + $user_name.attr("data-msg") + "");

               } else {
                   user_name_bValid = true;
                   $user_name.removeAttr("style").next("span").remove();

               }

                contact_form_bValid = contact_form_bValid && user_name_bValid;


               if( $user_email.val() === ""  || email_checkRegexp( $user_email , emailRegex) === false  ) {

                   user_email_bValid = false;
                   $user_email.next("span").remove();
                   $user_email.attr("style", $error_border).after("" + $user_email.attr("data-msg") + "");

               } else {
                    user_email_bValid = true;
                   $user_email.removeAttr("style").next("span").remove();

               }

               contact_form_bValid = contact_form_bValid && user_email_bValid;


               if( $email_subject.val() === "" ) {

                   user_email_subject_bValid = false;
                   $email_subject.next("span").remove();
                   $email_subject.attr("style", $error_border).after("" + $email_subject.attr("data-msg") + "");

               } else {
                   user_email_subject_bValid = true;
                   $email_subject.removeAttr("style").next("span").remove();
               }

               contact_form_bValid = contact_form_bValid && user_email_subject_bValid;

               if( $email_message.val() === "" ) {

                   user_email_message_bValid = false;
                   $email_message.next("span").remove();
                   $email_message.attr("style", $error_border).after("" + $email_message.attr("data-msg") + "");

               } else {
                   user_email_message_bValid = true;
                   $email_message.removeAttr("style").next("span").remove();

               }

               contact_form_bValid = contact_form_bValid && user_email_message_bValid;

               if ( contact_form_bValid === true ) {

                   $all_fields.attr("disabled", "disabled");
                   $contact_submit_btn.after("Please wait ....").attr("disabled","disabled");

                   $.ajax({
                   url: "contact_email.php",
                   type: 'POST',
                   dataType: 'JSON',
                   data: {
                       safety_key: 'dynatf',
                       user_name: $user_name.val(),
                       user_email: $user_email.val(),
                       email_subject: $email_subject.val(),
                       email_message: $email_message.val()
                   },
                   success: function (data) {

                       if ( data.status === 1) {

                           $contact_submit_btn.next("span").remove();
                           $contact_submit_btn.after("" + data.msg + "");

                           setTimeout(function(){

                               $all_fields.removeAttr("disabled").val("");

                               $contact_submit_btn.next("span").slideUp('slow',function(){
                                   $(this).remove();
                                   $contact_submit_btn.removeAttr("disabled");
                               });

                           },3000);

                       } else {

                           $all_fields.removeAttr("disabled");

                       }

                   },
                   error: function (xhr, textStatus, e) {
                       alert("Email can not be sent. Please try again.");
                       return;
                   }

               });

               }

           return false;

       })

   }

Contact Form PHP Code:

You will get following codes in 'contact_email.php' file. There, you just need to set Administrator user email address, who would like to receive the customer messages.

<?php

if (!isset($_REQUEST['safety_key'])) {
    die();
}

$to = "youremail@gmail.com"; // write you email address in here.

// Fetching Values from URL.

$user_name = $_POST['user_name'];

$user_email = $_POST['user_email'];

$email_subject = $_POST['email_subject'];

$email_message = $_POST['email_message'];

$template = '<div>Hello ' . $user_name . ',<br>'
        . '<br>Thank you...! For Contacting Us.<br><br>'
        . 'Name:' . $user_name . '<br>'
        . 'Email:' . $user_email . '<br>'
        . 'Message:' . $email_message . '<br><br>'
        . 'This is a Contact Confirmation mail.'
        . '<br>'
        . 'We Will contact You as soon as possible .</div>';

$message = "<div>" . $template . "</div>";

$headers = 'MIME-Version: 1.0' . "\r\n";

$headers.='Content-type: text/html; charset=utf-8; charset=iso-8859-1' . "\r\n";

$headers.='From:' . $user_email . "\r\n"; // Sender's Email

mail($to, $email_subject, $message, $headers, '');

$data = array(
    'status' => 1,
    'msg' => "Your Query has been received, We will contact you soon."
);

echo json_encode($data);

Support & Miscellaneous

Reddrop Buddies Theme comes with six month premium support directly from the developer.

Troubleshooting

It's a HTML5 template. So, you can not use it in WordPress platform.

Change Log

2018, 22 February - v 1.0.0

  • Initial release

Our Themes & Templates

WordPress Themes

    WordPress Plugins

      HTML5 Themes

        Back To Top