Table of Contents

Welcome

Welcome

Welcome to Classic CV Document, huge thanks for support.
The following instructions will guide you through how to setup this theme.

If you have any questions with the theme, please feel free to contact us
or visit our site.

Overview

Firstly, I recommend you to see all-layouts.html for overviewing this template.

Overview

Installation

  1. Unzip, you'll find a classic-cv folder.
  2. Test the template in any browser. We recommend you to view all-layouts.html first.
  3. You can remove any section if you want.
  4. Save and upload the files to your site

You can view a demo on Our Site or view index.html.

Folder Structure

please see README.md

HTML Structure

Bootstrap Overview

Main css - based on Bootstrap CSS

Bootstrap Grid

Grid layout and Responsive layout - based on Bootstrap Grid. This will explain the basics of grid system used in this template.

Header

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Classic CV, Resume - HTML Template by Jojoee</title>
<meta name="description" content="Classic CV, Resume - html template">
<meta name="keywords" content="Classic, CV, Resume, html template">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- google font -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<!-- bootstrap css -->
<link rel="stylesheet" href="vendor/bootstrap/bootstrap.min.css">
<!-- font awesome -->
<link rel="stylesheet" href="vendor/font-awesome/font-awesome.min.css">
<!-- magnific popup -->
<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.min.css">
<!-- waves -->
<link rel="stylesheet" href="vendor/waves/waves.min.css">
<!-- main css -->
<link rel="stylesheet" href="css/style.css">
<!-- theme css -->
<link rel="stylesheet" href="css/themes/themes.css">
<!-- demo css -->
<link rel="stylesheet" href="css/demo.css">
<!-- development purpose -->
<!-- <style type="text/css">#__bs_notify__ {display: none !important;}</style> -->
<!-- <style type="text/css">body{overflow:visible!important;}#loading{display:none !important;}</style> -->
<link rel="shortcut icon" href="favicon.ico" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />
</head>

Content

refer to all-layouts.html

Header

header-classic

Classic

Bootsxxrid

BG Image Full width

header-bimg

BG Image

header-bname

Big Name

header-min

Minimal

header-norm

Norm

header-binfo

Big Info

Content

Basic

Basic

Pie Chart

Pie Chart

Column and Rating

Column and Rating

Portfolio

Portfolio

Footer

Footer

Google map, Testimonials, Contact Form, Copyright

<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script src="vendor/jquery/jquery-2.1.3.min.js"><\/script>')</script>
<!-- boostrap js -->
<script type="text/javascript" src="vendor/bootstrap/bootstrap.min.js"></script>
<!-- magnific popup -->
<script type="text/javascript" src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- waves -->
<script type="text/javascript" src="vendor/waves/waves.min.js"></script>
<!-- jquery-validation -->
<script type="text/javascript" src="vendor/jquery-validation/jquery.validate.min.js"></script>
<!-- google map api v3 -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBlShcnF_Jt9AdsFNCLqA56S8ERRkdusGI"></script>
<!-- gmap -->
<script type="text/javascript" src="vendor/gmaps/gmaps.min.js"></script>
<!-- easy-pie-chart -->
<script type="text/javascript" src="vendor/easy-pie-chart/jquery.easypiechart.min.js"></script>
<!-- demo script -->
<script type="text/javascript" src="js/demo.js"></script>
<!-- main script -->
<script type="text/javascript" src="js/vendor.js"></script>
<script type="text/javascript" src="js/script.js"></script>

Addon

<div class="addon">
  <a data-toggle="tooltip" data-placement="left" class="contact-btn addon-right waves-effect waves-block" title="Say Hello~" href="javascript:;"><i class="fa fa-envelope"></i></a>
  <!-- .contact-btn -->
  <div id="contact-section" class="contact-panel panel visible-lg-block">
    <div class="panel-heading panel-default"><p class="panel-title">Contact Form</p></div>
    <div class="panel-body">
      <p class="contact-welcome">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In.</p>
      <form id="contact-form" class="contact-form form-horizontal" action="javascript:;">
        <fieldset>
          <div class="form-group">
            <div class="col-lg-12">
              <input type="text" class="form-control" id="name" name="name" placeholder="name" tabindex="1">
            </div>
          </div>
          <div class="form-group">
            <div class="col-lg-12">
              <input type="text" class="form-control" id="email" name="email" placeholder="email" tabindex="2">
            </div>
          </div>
          <div class="form-group">
            <div class="col-lg-12">
              <input type="text" class="form-control" id="subject" name="subject" placeholder="subject" tabindex="3">
            </div>
          </div>
          <div class="form-group">
            <div class="col-lg-12">
              <textarea class="form-control" rows="3" id="message" name="message" placeholder="message" tabindex="4"></textarea>
            </div>
          </div>
          <div class="form-group">
            <div class="col-lg-12">
              <button type="submit" class="btn">Submit</button>
            </div>
          </div>
        </fieldset>
      </form><!-- #contact-form -->
    </div>
  </div>
  <!-- #contact-section -->
  <div id="form-success-modal" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header bg-success">
          <h4 class="modal-title">Thank you for submitting</h4>
        </div>
        <div class="modal-body">
          <p>
            Duis a euismod libero. Suspendisse convallis facilisis.<br />
            Fusce at purus et erat finibus volutpat. Donec vel accumsan odio.
          </p>
        </div>
      </div>
    </div>
  </div>
  <!-- #form-success-modal -->
  <div id="form-error-modal" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header bg-danger">
          <h4 class="modal-title">Error, please try again</h4>
        </div>
        <div class="modal-body">
          <p>
            Duis a euismod libero. Suspendisse convallis facilisis.<br />
            Fusce at purus et erat finibus volutpat. Donec vel accumsan odio.
          </p>
        </div>
      </div>
    </div>
  </div>
  <!-- #form-error-modal -->
  <a class="to-top-btn addon-right waves-effect waves-block" title="Go to Top" href="javascript:;"><i class="fa fa-angle-up"></i></a>
  <!-- .to-top-btn -->
  <a data-toggle="tooltip" data-placement="left" class="print-btn addon-right" title="Print" href="javascript:window.print()" class="print"><i class="fa fa-print"></i></a>
  <!-- .print-btn -->
  <a data-toggle="tooltip" data-placement="left"  class="download-btn addon-right" title="Download" href="javascript:;" class="downloads"><i class="fa fa-download"></i></a>
  <!-- .download-btn -->
</div>
<!-- .addon -->

Basic Usage

Layout Settings

Just delete any section that you don't want from all-layouts.html, for example

  • If you want header - header-bimg
  • And - professional profile, work experience, technical skills, portfolio
  • And - copyright

so your code should be

<div id="page" class="container">
  <div id="header">
    <div class="header-bimg cv-section">
      <div class="col-md-8 left">
        <h1>John Doe</h1>
        <h2>Front End Developer</h2>
        <p class="welcome">Welcome</p>
        <div class="social-box">
          <a href="#" class="facebook-icon "><i class="fa fa-facebook waves-effect waves-light waves-block"></i></a>
          <a href="#" class="twitter-icon"><i class="fa fa-twitter waves-effect waves-light waves-block"></i></a>
          <a href="#" class="googleplus-icon"><i class="fa fa-google-plus waves-effect waves-light waves-block"></i></a>
          <a href="#" class="linkedin-icon"><i class="fa fa-linkedin waves-effect waves-light waves-block"></i></a>
          <a href="#" class="github-icon"><i class="fa fa-github waves-effect waves-light waves-block"></i></a>
        </div>
      </div>
    </div>
    <!-- .header-bimg -->
  </div>
  <!-- .header -->
  <div id="content">
    <div class="content cv-section">
      <div class="col-md-3">
        <h2>Professional Profile</h2>
      </div>
      <div class="col-md-9">
        <p>Laecenas ac diam vel leo fringilla elementum. Quisque mi sapien, vulputate at felis in, rhoncus fringilla sem. Nunc non magna volutpat, bibendum magna ac, laoreet lectus. Vivamus et nibh ac arcu lobortis elementum eget sed mi. Pellentesque auctor ligula a ante tempus interdum. Praesent sed luctus ligula. Nam varius, mauris vitae accumsan pharetra, enim lacus eleifend nibh, in mattis enim magna in arcu.</p>
        <p>Donec auctor lacus eu diam congue tempor. Aliquam gravida nec turpis at sagittis. Proin molestie enim non nisi porttitor posuere. Ut blandit justo at sapien iaculis rutrum. Quisque vel diam at mi mattis tincidunt nec id odio.</p>
      </div>
    </div>
    <!-- .content - professional profile -->
    <div class="content cv-section">
      <div class="col-md-3">
        <h2>Work Experience</h2>
      </div>
      <div class="col-md-9">
        <div class="cv-item">
          <h3>Project Manager</h3>
          <h4>Web Design Studios, Full-Time, Mar 2014 - Present</h4>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula, magna et bibendum malesuada, purus augue suscipit dolor, vitae fringilla dui nibh non lectus. Curabitur in pellentesque tortor. Nunc posuere vestibulum augue, quis posuere orci blandit vitae. Suspendisse dignissim elit dui, ac dictum felis interdum nec.</p>
          <ul>
            <li>Vivamus vitae libero odio, eu interdum elit</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
            <li>Donec dignissim purus vel leo accumsan interdum</li>
            <li>Proin sit amet massa mi, in volutpat ante</li>
          </ul>
        </div>
        <div class="cv-item">
          <h3>Front End Developer</h3>
          <h4>Graphic House, Full-Time, Feb 2012 - Feb 2014</h4>
          <br>
          <p>Curabitur in pellentesque tortor. Nunc posuere vestibulum augue, quis posuere orci blandit vitae. Suspendisse dignissim elit dui, ac dictum felis interdum nec.</p>
          <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
            <li>Donec dignissim purus vel leo accumsan interdum</li>
            <li>Proin sit amet massa mi, in volutpat ante</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- .content - work experience -->
    <div class="content cv-section">
      <div class="col-md-3">
        <h2>Technical Skills</h2>
      </div>
      <div class="col-md-9">
        <div class="cv-item">
          <h3>HTML5 & CSS3</h3>
          <p class="welcome">Expert, 4 Years</p><br>
          <p>Vestibulum feugiat gravida est nec ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam vel velit quam. Donec quis porta libero.</p>
        </div>
        <div class="cv-item">
          <h3>Javascript</h3>
          <p class="welcome">Expert, 4 Years</p><br>
          <p>Vestibulum feugiat gravida est nec ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam vel velit quam. Donec quis porta libero.</p>
        </div>
        <div class="cv-item">
          <h3>PHP</h3>
          <p class="welcome">Expert, 4 Years</p><br>
          <p>Nunc imperdiet placerat diam et aliquet. Suspendisse massa neque, rhoncus eget posuere ac, aliquet ut mi. Etiam rhoncus placerat lorem eu posuere.</p>
          <p>Nunc dignissim commodo urna, eget bibendum nisl vehicula nec. Mauris faucibus erat elit, nec malesuada augue varius sit amet. Morbi sit amet scelerisque risus.</p>
        </div>
      </div>
    </div>
    <!-- .content - technical skills-->
    <div class="content cv-section hidden-print">
      <div class="col-md-12">
        <h2>Portfolio</h2>
      </div>
      <div class="col-md-12 portfolio">
        <div class="col-md-3 col-sm-4 col-xs-12 port-item">
          <a href="media/img/amaze.jpg" class="mfp-zoom" title="Amaze">
            <img src="media/img/amaze.jpg" alt="Amaze" title="Amaze">
          </a>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-12 port-item">
          <a href="media/img/gratisography-37h.jpg" class="mfp-zoom" title="Tree">
            <img src="media/img/gratisography-37h.jpg" alt="Tree" title="Tree">
          </a>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-12 port-item">
          <a href="media/img/gratisography-66h.jpg" class="mfp-zoom" title="Rose">
            <img src="media/img/gratisography-66h.jpg" alt="Rose" title="Rose">
          </a>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-12 port-item">
          <a href="media/img/gratisography-114h.jpg" class="mfp-zoom" title="Bridge">
            <img src="media/img/gratisography-114h.jpg" alt="Bridge" title="Bridge">
          </a>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-12 port-item">
          <a href="media/img/gratisography-127h.jpg" class="mfp-zoom" title="Castle with bike">
            <img src="media/img/gratisography-127h.jpg" alt="Castle with bike" title="Castle with bike">
          </a>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-12 port-item">
          <a href="media/img/gratisography-135h.jpg" class="mfp-zoom" title="Square">
            <img src="media/img/gratisography-135h.jpg" alt="Square" title="Square">
          </a>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-12 port-item">
          <a href="media/img/reprocess-on-teresa-bench.jpg" class="mfp-zoom" title="Somewhere with bench">
            <img src="media/img/reprocess-on-teresa-bench.jpg" alt="Somewhere with bench" title="Somewhere with bench">
          </a>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-12 port-item">
          <a href="media/img/stare.jpg" class="mfp-zoom" title="Stare">
            <img src="media/img/stare.jpg" alt="Stare" title="Stare">
          </a>
        </div>
      </div>
    </div>
    <!-- .content - portfolio -->
  </div>
  <!-- #contnet -->
  <div id="footer">
    <div class="copyright">
      <p>© <span class="year">2015</span> JOHN DOE, ALL RIGHTS RESERVED.</p>
    </div>
    <!-- .copy right -->
  </div>
  <!-- #footer -->
</div>

Background Image Settings

Solid Color, Image or SVG

 

default-bg

 

red-bg

 

deep-purple-bg

 

blue-bg

 

green-bg

 

brown-bg

 

blue-gray-bg

 

gray-lighter-higher-bg

 

gray-lighter-high-bg

 

gray-lighter-bg

 

svgeneration-blue-jean

 

svgeneration-construction-paper

 

svgeneration-cross-stripes

 

svgeneration-graph-paper

 

svgeneration-oriental-roof

 

svgeneration-patchwork

 

svgeneration-zags

 

trianglify-blue

 

trianglify-green-light

 

trianglify-gray

 

trianglify-ocean-blue

 

trianglify-ocean-green

 

trianglify-orange

 

trianglify-pink

 

trianglify-purple

 

trianglify-red

 

gratisography-28h

 

gratisography-56h

 

gratisography-134h

 

gratisography-161h

If you want to change body background

  1. get the class name from above
  2. insert class name on your file

For example, I want trianglify-red so my body tag is <body class="trianglify-red">
if you want to add / customize you can see on this section

Colors

Theme color will affect to

theme-affect

 

themes
  ├── theme-blue.css..................blue theme
  ├── theme-blue-gray.css.............blue gray theme
  ├── theme-brown.css.................brown theme
  ├── theme-green.css.................green theme
  ├── theme-red.css...................red theme
  └── themes.css......................all themes

If you want to change you theme color

  1. choose one from this below
  2. add css file (themes/[theme-name].css) to your file
  3. add id name to body tag such as <body id="theme-green">

 

theme-red

 

theme-blue

 

theme-green

 

theme-brown

 

theme-blue-gray

Customization

Background

Just create new class, for example

/* solid color */
body.blue-bg {
  background-color: #e3f2fd !important;
}

/* background pattern / svg / image */
body.svgeneration-cross-stripes {
  background-image: url(../media/bg/svgeneration-cross-stripes.svg);
}

body.gratisography-56h {
  background-image: url(../media/bg/gratisography-56h.jpg);
}

add class to your file and add to body tag such as <body class="gratisography-56h">

Theme Color

You have two options

  • CSS
  • LESS

CSS

Edit theme name and replace the original color code with the color code you want to change, for example

#theme-red #header > .cv-section {
  border-top: 10px solid #d32f2f;
}
#theme-red a,
#theme-red li:before,
#theme-red .content .fa,
#theme-red .settings-panel .panel-title {
  color: #d32f2f;
}
#theme-red #contact-section [type="submit"],
#theme-red #contact-section-second [type="submit"] {
  background-color: #d32f2f;
}

I want to change #theme-red to #them-darkseagreen, so I will replace it to 

#theme-darkseagreen #header > .cv-section {
  border-top: 10px solid #8FBC8F;
}
#theme-darkseagreen a,
#theme-darkseagreen li:before,
#theme-darkseagreen .content .fa,
#theme-darkseagreen .settings-panel .panel-title {
  color: #8FBC8F;
}
#theme-darkseagreen #contact-section [type="submit"],
#theme-darkseagreen #contact-section-second [type="submit"] {
  background-color: #8FBC8F;
}

LESS

  1. open file less/themes/themes.less, you will see #THEME - GENERATE section
  2. add new theme color such as #theme-chocolate { .theme-default( #D2691E ); }
  3. then compile, output will be located here css/themes/themes.css

Javascript Reference Document

Javascript Reference - Overview

overview

README.md

Javascript Reference - script.js

script.js

main javascript file that is not related to vendors

Javascript Reference - vendor.js

vendor.js

main javascript file that is related to vendors

Javascript Reference - demo.js

demo.js

javascript file for demo purpose

Others

For further information, please see CHANGELOG.md and README.md