ANDREW CV

Responsive Landing Template


Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

ANDREW CV is Responsive HTML5 App Landing Onepage Template built with Bootstrap v3.3.6, HTML5 and CSS3. Well Organized and valid Code. This Documentation provide you a clear guideline for how to use and customize template. If you have any questions that are beyond the scope of this help file, please submit a ticket on http://support.deviserweb.com

ANDREW CV is fully responsive HTML5 Template followed HTML5 Structure. Every section is seperated with Comments. We maintain all Coding Procedure.

 

<!-- =========================
  pre loader
  ============================== -->

<div id="loading">
  <div id="loading-center">
    <div id="loading-center-absolute">
      <div class="object" id="object_four"></div>
      <div class="object" id="object_three"></div>
      <div class="object" id="object_two"></div>
      <div class="object" id="object_one"></div>
    </div>
  </div>
</div>

<!-- =========================
  name
  ============================== -->

<div class="container-fluid" id="name">
  <div class="container">
  </div>
</div>

<!-- =========================
  navbar
  ============================== -->

<div class="container-fluid sticky" id="sticky_nav">
  <div class="container">
  </div>
</div>

<!-- =========================
  about me
  ============================== -->

<div class="container-fluid" id="about_me">
  <div class="container">
  </div>
</div>

<!-- =========================
  services
  ============================== -->

<div class="container-fluid" id="services">
  <div class="container">
  </div>
</div>

<!-- =========================
  education
  ============================== -->

<div class="container-fluid" id="education">
  <div class="container">
  </div>
</div>

<!-- =========================
  skills
  ============================== -->

<div class="container-fluid" id="skills">
  <div class="container">

    <!-- =========================
      linear progress bar
      ============================== -->

    <div class="row linear_progress">
    </div>

    <!-- =========================
      circular progress bar
      ============================== -->

       <div class="row circular_progress">
       <div class="more_skills">
      </div>
    </div>
  </div>
</div>

<!-- =========================
  work example
  ============================== -->

<div class="container-fluid" id="work_example">
  <div class="container">
  </div>
</div>

<!-- =========================
  portfolio model starts
  ============================== -->

<div class="portfolio_model" data-index="1">
  <div class="container-fluid">
    <div class="container">
    </div>
  </div>
  <div class="portfolio_model" data-index="2">
    <div class="container-fluid">
      <div class="container">
      </div>
    </div>
  </div>
</div>
</div>

<!-- =========================
  portfolio model ends
  ============================== -->

<!-- =========================
  client numbeR
  ============================== -->

<div class="container-fluid" id="client_number">
  <div class="container">
  </div>
</div>

<!-- =========================
  pricing plan
  ============================== -->

<div class="container-fluid" id="pricing_plan">
  <div class="container">
  </div>
</div>

<!-- =========================
  my testimonials
  ============================== -->

<div class="container-fluid" id="my_testimonials">
  <div class="container">
  </div>
</div>

<!-- =========================
  contact me
  ============================== -->

<div class="container-fluid" id="contact_me">
  <div class="container">
  </div>
</div>

<!-- =========================
  follow us
  ============================== -->

<div class="container-fluid footer">
  <div class="container">
  </div>
</div>
 

 

We are using latest CSS coding standard. Custom Style writeen into style.css which is override Bootstrap style somewhere else. An Responsive style written into responsive.css.

CSS Files included:

style.css file contains all of the specific styling for the template. Here is an example of general style which is specify using following label:

<head>

  <!-- SIMPLE LINE ICON -->
  <link rel="stylesheet" type="text/css" href="css/simple-line-icons.css" media="all" />

  <!-- FONT-AWESOME -->
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" media="all" />

  <!-- GOOGLE FONTS -->
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800,700,300' rel='stylesheet' type='text/css'>

  <!-- BOOTSTRAP -->
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="all" />

  <!-- OWL-CAROUSEL SLIDER -->
  <link rel="stylesheet" type="text/css" href="css/owl.carousel.css" media="all" />
  <link rel="stylesheet" type="text/css" href="css/owl.theme.default.min.css" media="all" />

  <!-- ANIMATE CSS -->
  <link rel="stylesheet" type="text/css" href="css/animate.min.css" media="all" />

  <!-- CUSTOM CSS -->
  <link rel="stylesheet" type="text/css" href="css/style.css" media="all"/>

  <!-- COLORS CSS -->
  <!-- <link rel="stylesheet" type="text/css" href="css/curious-blue.css" media="all"/> -->
  <!-- <link rel="stylesheet" type="text/css" href="css/shamrock.css" media="all"/> -->
  <!-- <link rel="stylesheet" type="text/css" href="css/hippie-blue.css" media="all"/> -->
  <!-- <link rel="stylesheet" type="text/css" href="css/shocking.css" media="all"/> -->
  <!-- <link rel="stylesheet" type="text/css" href="css/wild-willow.css" media="all"/> -->

  <!-- RESPONSIVE CSS --> 
  <link rel="stylesheet" type="text/css" href="css/responsive.css" media="all" />

</head>

This theme imports the following Javascript files.

<!-- VENDOR JQUERY -->
<script src="js/jquery-1.12.0.min.js" type="text/javascript"></script>

<!-- BOOTSTRAP -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>

<!-- OWL CAROUSEL -->
<script src="js/owl.carousel.min.js" type="text/javascript"></script>

<!-- WAYPOINT -->
<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>

<!-- WOW JS -->
<script src="js/wow.min.js" type="text/javascript"></script>

<!-- FILTERIZR -->
<script src="js/jquery.filterizr.min.js" type="text/javascript"></script>

<!-- COUNTER UP -->
<script src="js/jquery.counterup.min.js" type="text/javascript"></script>

<!-- CIRCULAR PROGRESS -->
<script src="js/circle-progress.js" type="text/javascript"></script>

<!-- SMOOTH SCROLL -->
<script src="js/smooth-scroll.min.js" type="text/javascript"></script>

<!-- STICKY NAV -->
<script src="js/jquery.sticky.js" type="text/javascript"></script>

<!-- CUSTOM JS -->
<script src="js/script.js" type="text/javascript"></script>
 

We have used one types of font throughout the template

  1. Open Sans

All of the fonts are available on google fonts. You can choose other fonts from google directory. We have linked them at head part in index.html

<!-- GOOGLE FONTS -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800,700,300' rel='stylesheet' type='text/css'>

Check <head> part of your index.html page. You will find all colors link available.style-blue.css color is activated by default. But if you want to use another color just simply uncomment that but don't uncomment the style.css.

 

<!-- CUSTOM CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="all"/>

<!-- COLORS CSS -->
<!-- <link rel="stylesheet" type="text/css" href="css/curious-blue.css" media="all"/> -->
<!-- <link rel="stylesheet" type="text/css" href="css/shamrock.css" media="all"/> -->
<!-- <link rel="stylesheet" type="text/css" href="css/hippie-blue.css" media="all"/> -->
<!-- <link rel="stylesheet" type="text/css" href="css/shocking.css" media="all"/> -->
<!-- <link rel="stylesheet" type="text/css" href="css/wild-willow.css" media="all"/> -->

We used WOW plugin to trigger animations on scroll. It used Animate.css for CSS animation. You will find all of the animations in Animate.css website. To learn more about WOW please read their Documentation

 

<div class="section-header wow Desired-Animation-Effect">Your Content Goes Here</div>
 
<div class="cd-timeline-block">
  <div class="cd-timeline-icon wow bounceIn" data-wow-offset="10" data-wow-delay=".2s">
    <i class="icon-diamond icons"></i>
  </div>
  <div class="cd-timeline-content wow bounceIn" data-wow-offset="80" data-wow-delay=".2s">
    <h2>WebCode LTD <br><span>Senior UI Designer</span></h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, um provident rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, umujtro.
    </p>
    <span class="cd-date">2008 - 2009</span>
  </div>
</div>

We have used Font Awesome 4.6.3Simple Line Icons throughout the template.These icon font sets can be styled dynamically using CSS.

Examples : 

Font Awesome Icon :
<i class="fa fa-facebook"></i>

 

Simple Line Icon :
<i class="icon-cursor"></i>

See full list of FontAwesome icons here : http://www.fontawesome.io/icons

Complete list of Simple Line Icon here : https://thesabbir.github.io/simple-line-icons/

Linear Progress Bar :

If you want to change the progress limit of linear progress bar just change the limit below : 

 

<div class="linear_percent wow fadInUp">
  <div class="col-md-2">
    <h5><span>UX</span> Design</h5>
  </div>
  <div class="col-md-4">
    <div class="barWrapper">
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
          <span class="popOver" data-toggle="tooltip" data-placement="top" title="95%"> </span>
        </div>
      </div>
    </div>
  </div>
</div>

 

Circular Progress Bar :

If you want to change the progress limit of circular progress bar just change the limit below : 

<div class="col-md-2 col-sm-6 wow fadeInUp">
  <div class="circle" data-number="1">
    <p data-percent="80"></p>
    <span>Leadership</span>
  </div>
</div>

In the "work example" and "portfolio model" section data-modal="1"data-index="1" need to be same for porper portfolio item selecton.

 

<!-- =========================
  work example
  ============================== -->

<div class="portfolio_item">
  <img class="img-responsive" src="images/phone.png" alt="sample image">
  <div class="portfolio_caption" data-modal="1">
    <i class="fa fa-search-plus"></i>
    <p>Project name here</p>
  </div>
</div>

 

<!-- =========================
  portfolio model starts
  ============================== -->

<div class="portfolio_model" data-index="1">
  <div class="container-fluid">
  </div>
</div>

 

In the template there are two portfolio model used but if you need more then just copy the portfolio model and change the data-index="Number" according to data moal="Number"

ontact form will use php to send emails. So just open sendmail.php file. Don't worry, no need to be familiar with PHP to edit this file. Our code is well commented so that a newbie can make necessary changes. Change the current email kawsar@deviserweb.com to your email address. Your form is ready!

(NOTE: Contact form require web server to send email. Emails can go to your spam/junk folder.)

if( isset($name) && isset($email) && isset($message) && is_email_valid($email) ) {

    // Avoid Email Injection and Mail Form Script Hijacking
    $pattern = "/(content-type|bcc:|cc:|to:)/i";
    if( preg_match($pattern, $name) || preg_match($pattern, $email) || preg_match($pattern, $message) ) {
        exit;
    }

    // Email will be send
    $to = "kawsar@deviserweb.com"; // Change with your email address
    $sub = "$name from Andrew-CV"; // You can define email subject
    // HTML Elements for Email Body
    $body = <<<EOD
    <strong>Name:</strong> $name <br>
    <strong>Email:</strong> <a href="mailto:$email?subject=feedback" "email me">$email</a> <br> <br>
    <strong>Message:</strong> $message <br>
EOD;
//Must end on first column

The following jQuery files including necessary plugins, all of them be found in jsfolder of home directory. Let's see what each file for:

 

Finally thank you very much for purchasing this theme. Please keep that in mind that we are working very hard to providing better quality in coming days.If you have any questions relating to this template we'll do our best to assist.

Email: contact@deviserweb.com

Facebook | Twitter