ColorCV ^Docs

Before proceeding forward and making any changes to template its recommended to know the hierarchy of template and files structure.

Templates

Following are the templates created so far for ColorCV. These template are coded in Bootstrap framework.

Templates:

Folder Structure

Special thanks goes to those authors, teams or organisations who helped me through their awesome plugins or frameworks.

ColorCV - Root

• /content
  • HTML Files
• /css
  • CSS Files
• /fonts
  • Glyphicon
  • FontAwesome
• /images
  • Images
• /js
  • Javascript Files
• /php
  • PHP Files
• /index-v1.html - Template 01 - default
• /index-v2.html - Template 02
• /index-v3.html - Template 03
• /readme.txt

Code Structure

Code structure of ColorCV template is well organized and also properly indented. Important sections, divs & code blocks are commented also. Please take a look some of code samples below.

Here are list of sections that are created in ColorCV templates.

Profile - <section>

Profile section has necessary curriculum & contact informatoin for ColorCV template. Following are the images of profile sections from all templates.

Resume - <section>

Resume section has all necessary curriculum informatoin to showcase your experenice and skills in professional way. Following are the images of resume sections from all templates.

Portfolio - <section>

If you want to showcase your work in stylish and in touch friendly popup box with filter buttons, than portfolio section is right here. Following are the images of portfolio sections from all templates.

Blog - <section>

Ofcourse every site should have a blog/news page to share thoughts to world, thats why blog section is here for you. Following are the images of profile sections from all templates.

Testimonials - <section>

Testimonials are important if you want to go beyond amd win trust of your client. Following are the images of testimonials sections from all templates. Only template 02 has testimonials feature added according to template.

Contact - <section>

Ofcourse every business wants that their clients can contact them easily, so Contact section is right here for share contact information. Following are the images of contact sections from all templates.

Customizing template is so easy, although you should have little knowledge of html to make necessary changes. Here are further necessary instructions regarding customizing any ColorCV template.

Note: Content structure is same apart from bit differece in section hierarchy due to difference in layout designs.

Profile Customization - <section>

<section id="profile-section" class="strips__strip">
	<div class="strip__content">
		<header class="strip__header">
			<figure class="strip__thumb avatar_thumb">
				<img src="images/avatar-image.jpg" width="128" height="128" class="img-circle img-thumbnail img-animation" alt="Avatar Image">
			</figure>
			<h1 class="strip__title" data-name="Profile">Profile</h1>
		</header>
		<div class="strip__inner-content">
			<div class="row">
				<div class="col-lg-3 col-md-5 col-sm-5">
					<div class="avatar-thumb">
						<img src="images/avatar-image.jpg" class="img-thumbnail img-responsive" alt="Avatar Image">
						<div id="social-nav" class="floating-social hidden-xs">
							<a href="#" data-toggle="tooltip" data-placement="left" title="Facebook"><i class="fa fa-facebook"></i></a>
							<a href="#" data-toggle="tooltip" data-placement="left" title="Twitter"><i class="fa fa-twitter"></i></a>
							<a href="#" data-toggle="tooltip" data-placement="left" title="Google Plus"><i class="fa fa-google-plus"></i></a>
							<a href="#" data-toggle="tooltip" data-placement="left" title="Linkedin"><i class="fa fa-linkedin-square"></i></a>
							<a href="#" data-toggle="tooltip" data-placement="left" title="Pinterest"><i class="fa fa-pinterest"></i></a>
							<a href="#" data-toggle="tooltip" data-placement="left" title="Skype"><i class="fa fa-skype"></i></a>
							<a href="#" data-toggle="tooltip" data-placement="left" title="RSS Feed"><i class="fa fa-rss"></i></a>
						</div>
					</div>
				</div>
				<div class="col-lg-5 col-md-7 col-sm-7">
					<h2 class="avatar-name page-title text-uppercase">Umair Razzaq</h2>
					<h6 class="header-caption user-designation lead">Web Front-end Developer</h6>
					<hr class="clearfix less-margin hidden-xs">
					<ul class="fa-ul avatar-contact text-lg">
						<li><a href="#"><span class="fa-li fa fa-envelope-o"></span> info@emailaddress.com</a></li>
						<li><a class="avatar-tel" href="#"><span class="fa-li fa fa-phone"></span> 92 345 7936496</a></li>
						<li><a href="#"><span class="fa-li fa fa-link"></span> www.websitename.com</a></li>
					</ul>
				</div>
				<hr class="clearfix visible-md visible-sm visible-xs">
				<div class="col-lg-4 col-md-12 col-sm-12">
					<h3 class="title h4">Basic Information</h3>
					<table class="table table-responsive avatar-information text-sm">
						<tbody>
							<tr>
								<td><strong>Date of Birth:</strong></td>
								<td>25 May, 1987</td>
							</tr>
							<tr>
								<td><strong>Gender:</strong></td>
								<td>Male</td>
							</tr>
							<tr>
								<td><strong>Languages:</strong></td>
								<td><span>English</span>, <span>Urdu</span>, <span>Arabic</span>, <span>French</span></td>
							</tr>
							<tr>
								<td><strong>Occupation:</strong></td>
								<td>Web Front-end Developer</td>
							</tr>
							<tr>
								<td><strong>Freelance:</strong></td>
								<td>Available</td>
							</tr>
							<tr>
								<td><strong>Address:</strong></td>
								<td>Live in heart of someone special, Somewhere in the world :)</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<hr class="clearfix">
			<div class="row">
				<div class="col-md-6">
					<h2 class="title h3">Short About Me</h2>
					<p class="text-sm text-faded">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
					<br>
					<img src="images/signature.png" class="img-responsive" alt="Avatar Signature">
				</div>
				<hr class="clearfix visible-sm visible-xs">
				<div class="col-md-6">
					<h2 class="title h3">My Expertise</h2>
					<ul class="media-list services-list">
						<li class="media service-item">
							<div class="media-left">
								<i class="media-object fa fa-tv fa-3x"></i>
							</div>
							<div class="media-body">
								<h4 class="media-heading">Web UI Design</h4>
								<span class="text-sm text-faded">Lorem Ipsum is simply dummy text. It has been the industry's standard dummy text ever since the 1500s.</span>
							</div>
						</li>
						<li class="media service-item">
							<div class="media-left">
								<i class="media-object fa fa-code fa-3x"></i>
							</div>
							<div class="media-body">
								<h4 class="media-heading">Web Development</h4>
								<span class="text-sm text-faded">Lorem Ipsum is simply dummy text. It has been the industry's standard dummy text ever since the 1500s.</span>
							</div>
						</li>
						<li class="media service-item">
							<div class="media-left">
								<i class="media-object fa fa-mobile-phone fa-4x"></i>
							</div>
							<div class="media-body">
								<h4 class="media-heading">Mobile App Development</h4>
								<span class="text-sm text-faded">Lorem Ipsum is simply dummy text. It has been the industry's standard dummy text ever since the 1500s.</span>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</section> <!-- /.strips_strip -->
						

to customize profile <section> following are the some instructions.

• Avatar/Profile Image: - <img src="images/avatar-image.jpg" alt="..."> - To add your image simply avatar-image.jpg with yours. But please keep in mind you have to put your image in /images directory.
• Avatar Name: - <h2 class="avatar-name ...">Umair Razzaq</h2> - Avatar name is actually header name of profile section. So whatever put there will be show up in profile section.
• Avatar Designation: - <h6 class="header-caption ...">Web Front-end Developer</h6> - Avatar/Site slogan or tagline
• Contact Info: - .avatar-contact list items, where you can add Email, Phone and Website information.
• Avatar Information: - More information can be place in .avatar-information <table>.
• About Content: - About me content area.
• Services Content: - My services area.

Resume Customization - <section>

<section id="resume-section" class="strips__strip">
	<div class="strip__content">
		<header class="strip__header">
			<figure class="strip__thumb">
				<i class="fa fa-graduation-cap icon-animation"></i>
			</figure>
			<h1 class="strip__title" data-name="Resume">Resume</h1>
		</header>
		<div class="strip__inner-content">
			<header class="page-header">
				<h2 class="page-title text-uppercase"><span class="hb hb-md hb-white"><i class="fa fa-graduation-cap" aria-hidden="true"></i></span> Resume</h2>
				<h6 class="header-caption lead">Check out my professional curriculum</h6>
				<a href="#" class="btn btn-default btn-outline"><i class="fa fa-download"></i> Download</a>
			</header>
			<div id="resume-carousel" class="owl-carousel owl-theme">
				<div class="item">
					<div class="row">
						<div class="col-md-4">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h3 class="panel-title">Experience <i class="fa fa-code pull-right"></i></h3>
								</div>
								<div class="panel-body">
									<div class="timeline-wrapper">
										<div class="timeline-item">
											<div>
												<h4>Expereince Title @ Institute</h4>
												<h6>Sept 2015 – Nov 2015</h6>
											</div>
											<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry, Its the industry’s standard ever since 1500s.</p>
										</div>
										<div class="timeline-item">
											<div>
												<h4>Expereince Title @ Institute</h4>
												<h6>Sept 2015 – Nov 2015</h6>
											</div>
											<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry, Its the industry’s standard ever since 1500s.</p>
										</div>
										<div class="timeline-item">
											<div>
												<h4>Expereince Title @ Institute</h4>
												<h6>Sept 2015 – Nov 2015</h6>
											</div>
											<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry, Its the industry’s standard ever since 1500s.</p>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-4">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h3 class="panel-title">Education <i class="fa fa-graduation-cap pull-right"></i></h3>
								</div>
								<div class="panel-body">
									<div class="timeline-wrapper">
										<div class="timeline-item">
											<div>
												<h4>Education Title @ Institute</h4>
												<h6>Sept 2015 – Nov 2015</h6>
											</div>
											<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry, Its the industry’s standard ever since 1500s.</p>
										</div>
										<div class="timeline-item">
											<div>
												<h4>Education Title @ Institute</h4>
												<h6>Sept 2015 – Nov 2015</h6>
											</div>
											<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry, Its the industry’s standard ever since 1500s.</p>
										</div>
										<div class="timeline-item">
											<div>
												<h4>Education Title @ Institute</h4>
												<h6>Sept 2015 – Nov 2015</h6>
											</div>
											<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry, Its the industry’s standard ever since 1500s.</p>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-4">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h3 class="panel-title">Skills <i class="fa fa-pie-chart pull-right"></i></h3>
								</div>
								<div class="panel-body">
									<div class="skills-wrapper">
										<div class="skill-item">
											<h4 class="skill-title">HTML5 + CSS3 <span class="badge pull-right">100%</span></h4>
											<div class="skill-rating">
												<span></span>
												<span></span>
												<span></span>
												<span></span>
												<span></span>
											</div>
										</div>
										<div class="skill-item">
											<h4 class="skill-title">jQuery <span class="badge pull-right">80%</span></h4>
											<div class="skill-rating">
												<span></span>
												<span></span>
												<span></span>
												<span></span>
												<span class="transparent"></span>
											</div>
										</div>
										<div class="skill-item">
											<h4 class="skill-title">Wordpress <span class="badge pull-right">60%</span></h4>
											<div class="skill-rating">
												<span></span>
												<span></span>
												<span></span>
												<span class="transparent"></span>
												<span class="transparent"></span>
											</div>
										</div>
										<div class="skill-item">
											<h4 class="skill-title">Bootstrap <span class="badge pull-right">80%</span></h4>
											<div class="skill-rating">
												<span></span>
												<span></span>
												<span></span>
												<span></span>
												<span class="transparent"></span>
											</div>
										</div>
									</div>
								</div>
							</div>

							<div class="panel panel-default">
								<div class="panel-heading">
									<h3 class="panel-title">Languages <i class="fa fa-flag pull-right"></i></h3>
								</div>
								<div class="panel-body">
									<div class="languages-wrapper">
										<div class="skill-item">
											<h4 class="skill-title">English <span class="badge pull-right">80%</span></h4>
											<div class="skill-rating">
												<span></span>
												<span></span>
												<span></span>
												<span></span>
												<span class="transparent"></span>
											</div>
										</div>
										<div class="skill-item">
											<h4 class="skill-title">Arabic <span class="badge pull-right">60%</span></h4>
											<div class="skill-rating">
												<span></span>
												<span></span>
												<span></span>
												<span class="transparent"></span>
												<span class="transparent"></span>
											</div>
										</div>
										<div class="skill-item">
											<h4 class="skill-title">French <span class="badge pull-right">40%</span></h4>
											<div class="skill-rating">
												<span></span>
												<span></span>
												<span class="transparent"></span>
												<span class="transparent"></span>
												<span class="transparent"></span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="row">
						<div class="col-md-4">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h3 class="panel-title">Other Skills <i class="fa fa-pie-chart pull-right"></i></h3>
								</div>
								<div class="panel-body">
									<div class="skills-wrapper">
										<div class="skill-item">
											<h4 class="skill-title">Team Work <span class="badge pull-right">100%</span></h4>
											<div class="skill-rating">
												<span></span>
												<span></span>
												<span></span>
												<span></span>
												<span></span>
											</div>
										</div>
										<div class="skill-item">
											<h4 class="skill-title">Project Management <span class="badge pull-right">80%</span></h4>
											<div class="skill-rating">
												<span></span>
												<span></span>
												<span></span>
												<span></span>
												<span class="transparent"></span>
											</div>
										</div>
										<div class="skill-item">
											<h4 class="skill-title">Client Handling <span class="badge pull-right">60%</span></h4>
											<div class="skill-rating">
												<span></span>
												<span></span>
												<span></span>
												<span class="transparent"></span>
												<span class="transparent"></span>
											</div>
										</div>
										<div class="skill-item">
											<h4 class="skill-title">Consistanacy <span class="badge pull-right">80%</span></h4>
											<div class="skill-rating">
												<span></span>
												<span></span>
												<span></span>
												<span></span>
												<span class="transparent"></span>
											</div>
										</div>
										<div class="skill-item">
											<h4 class="skill-title">Presentation <span class="badge pull-right">80%</span></h4>
											<div class="skill-rating">
												<span></span>
												<span></span>
												<span></span>
												<span></span>
												<span class="transparent"></span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-4">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h3 class="panel-title">Awards <i class="fa fa-trophy pull-right"></i></h3>
								</div>
								<div class="panel-body">
									<div class="interests-wrapper">
										<div class="interest-item item-inline">
											<i class="fa fa-trophy fa-2x fa-border"></i>
											<h4 class="interest-title">English</h4>
										</div>
										<div class="interest-item item-inline">
											<i class="fa fa-trophy fa-2x fa-border"></i>
											<h4 class="interest-title">English</h4>
										</div>
										<div class="interest-item item-inline">
											<i class="fa fa-trophy fa-2x fa-border"></i>
											<h4 class="interest-title">English</h4>
										</div>
										<div class="interest-item item-inline">
											<i class="fa fa-trophy fa-2x fa-border"></i>
											<h4 class="interest-title">English</h4>
										</div>
									</div>
								</div>
							</div>

							<div class="panel panel-default">
								<div class="panel-heading">
									<h3 class="panel-title">Interests <i class="fa fa-heart pull-right"></i></h3>
								</div>
								<div class="panel-body">
									<div class="interests-wrapper">
										<div class="interest-item item-inline">
											<i class="fa fa-bicycle fa-2x fa-border"></i>
											<h4 class="interest-title">Cycling</h4>
										</div>
										<div class="interest-item item-inline">
											<i class="fa fa-book fa-2x fa-border"></i>
											<h4 class="interest-title">Reading</h4>
										</div>
										<div class="interest-item item-inline">
											<i class="fa fa-paper-plane fa-2x fa-border"></i>
											<h4 class="interest-title">Travelling</h4>
										</div>
										<div class="interest-item item-inline">
											<i class="fa fa-camera fa-2x fa-border"></i>
											<h4 class="interest-title">Photography</h4>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-4">
							<div class="panel panel-default">
								<div class="panel-body">
									<div class="progress-wrapper">
										<div class="progress-item">
											<i class="fa fa-coffee fa-3x progress-icon"></i>
											<strong class="progress-counter h1">9999</strong>
											<span class="progress-caption text-muted">Cup of Tea</span>
										</div>
										<div class="progress-item">
											<i class="fa fa-code fa-3x progress-icon"></i>
											<strong class="progress-counter h1">99999</strong>
											<span class="progress-caption text-muted">Code Written</span>
										</div>
										<div class="progress-item">
											<i class="fa fa-smile-o fa-3x progress-icon"></i>
											<strong class="progress-counter h1">999</strong>
											<span class="progress-caption text-muted">Clients Served</span>
										</div>
										<div class="progress-item">
											<i class="fa fa-money fa-3x progress-icon"></i>
											<strong class="progress-counter h1">99999</strong>
											<span class="progress-caption text-muted">Earned So far</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12">
							<div class="panel panel-default">
								<div class="panel-body">
									<div id="testimonial-tabs">
										<!-- Nav tabs -->
										<ul class="nav nav-tabs" role="tablist">
											<li role="presentation" class="active"><a href="#tab-1" role="tab" data-toggle="tab"></a></li>
											<li role="presentation"><a href="#tab-2" role="tab" data-toggle="tab"></a></li>
											<li role="presentation"><a href="#tab-3" role="tab" data-toggle="tab"></a></li>
										</ul>

										<!-- Tab panes -->
										<div class="tab-content">
											<div role="tabpanel" class="tab-pane fade in active" id="tab-1">
												<blockquote class="testimonial-item">
													<q>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</q>
													<footer>
														<cite>Full Name, Designation</cite>
													</footer>
												</blockquote>
											</div>
											<div role="tabpanel" class="tab-pane fade" id="tab-2">
												<blockquote class="testimonial-item">
													<q>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</q>
													<footer>
														<cite>Full Name, Designation</cite>
													</footer>
												</blockquote>
											</div>
											<div role="tabpanel" class="tab-pane fade" id="tab-3">
												<blockquote class="testimonial-item">
													<q>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</q>
													<footer>
														<cite>Full Name, Designation</cite>
													</footer>
												</blockquote>
											</div>
										</div>													  
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section> <!-- /.strips_strip -->
						

to customize resume <section> following are the some instructions.

• Section Title: - title for resume section.
• Experience: - Timeline styled experience items.
• Education: - Timeline styled education items.
• Skills: - progress bar styled skill bars.
• Languages: - progress bar styled language bars.
• Awards: - Iconic based items.
• Interests: - Iconic based items.
• Counters: - Counter section, counter up triggered on section appear.
• Testimonials: - tabbed style blockquote items.

Portfolio Customization - <section>

<section id="portfolio-section" class="strips__strip">
	<div class="strip__content">
		<header class="strip__header">
			<figure class="strip__thumb">
				<i class="fa fa-star icon-animation"></i>
			</figure>
			<h1 class="strip__title" data-name="Portfolio">Portfolio</h1>
		</header>
		<div class="strip__inner-content">
			<header class="page-header">
				<h2 class="page-title text-uppercase"><span class="hb hb-md hb-white"><i class="fa fa-star" aria-hidden="true"></i></span> Portfolio</h2>
				<h6 class="header-caption lead">Check our wonderful work</h6>
			</header>

			<div class="button-group filter-button-group">
				<button data-filter="*">All</button>
				<button data-filter=".graphic">Graphics</button>
				<button data-filter=".illustration">Illustrations</button>
				<button data-filter=".website">Websites</button>
				<button data-filter=".mobileapp">Mobile Apps</button>
			</div>

			<div class="row portfolio-items portfolio-hexagon">
				<div class="col-xl-2 col-lg-3 col-md-3 col-sm-4 col-xs-6 portfolio-item graphic">
					<a href="images/portfolio/portfolio-09.jpg">
						<img src="images/portfolio/portfolio-small-09.jpg" class="img-responsive" alt="Portfolio Image">
						<h2 class="h4">This is a title</h2>
					</a>
				</div>
				<div class="col-xl-2 col-lg-3 col-md-3 col-sm-4 col-xs-6 portfolio-item illustration">
					<a href="images/portfolio/portfolio-02.jpg">
						<img src="images/portfolio/portfolio-small-02.jpg" class="img-responsive" alt="Portfolio Image">
						<h2 class="h4">This is a title</h2>
					</a>
				</div>
				<div class="col-xl-2 col-lg-3 col-md-3 col-sm-4 col-xs-6 portfolio-item website">
					<a href="images/portfolio/portfolio-03.jpg">
						<img src="images/portfolio/portfolio-small-03.jpg" class="img-responsive" alt="Portfolio Image">
						<h2 class="h4">This is a title</h2>
					</a>
				</div>
				<div class="col-xl-2 col-lg-3 col-md-3 col-sm-4 col-xs-6 portfolio-item mobileapp">
					<a href="images/portfolio/portfolio-04.jpg">
						<img src="images/portfolio/portfolio-small-04.jpg" class="img-responsive" alt="Portfolio Image">
						<h2 class="h4">This is a title</h2>
					</a>
				</div>
				<div class="col-xl-2 col-lg-3 col-md-3 col-sm-4 col-xs-6 portfolio-item graphic">
					<a href="images/portfolio/portfolio-05.jpg">
						<img src="images/portfolio/portfolio-small-05.jpg" class="img-responsive" alt="Portfolio Image">
						<h2 class="h4">This is a title</h2>
					</a>
				</div>
				<div class="col-xl-2 col-lg-3 col-md-3 col-sm-4 col-xs-6 portfolio-item illustration">
					<a href="images/portfolio/portfolio-07.jpg">
						<img src="images/portfolio/portfolio-small-07.jpg" class="img-responsive" alt="Portfolio Image">
						<h2 class="h4">This is a title</h2>
					</a>
				</div>
				<div class="col-xl-2 col-lg-3 col-md-3 col-sm-4 col-xs-6 portfolio-item website">
					<a href="images/portfolio/portfolio-06.jpg">
						<img src="images/portfolio/portfolio-small-06.jpg" class="img-responsive" alt="Portfolio Image">
						<h2 class="h4">This is a title</h2>
					</a>
				</div>
				<div class="col-xl-2 col-lg-3 col-md-3 col-sm-4 col-xs-6 portfolio-item mobileapp">
					<a href="images/portfolio/portfolio-08.jpg">
						<img src="images/portfolio/portfolio-small-08.jpg" class="img-responsive" alt="Portfolio Image">
						<h2 class="h4">This is a title</h2>
					</a>
				</div>
			</div>
		</div>
	</div>
</section> <!-- /.strips_strip -->
						

to customize portfolio <section> following are the some instructions.

• Section Title: - title for portfolio section.
• Filter Buttons: - with these user can filter through portfolio items.
• Portfolio Item: - Portfolio item has specific style pattern to make it functoin with filter buttons and lightbox.

Blog Customization - <section>

<section id="blog-section" class="strips__strip">
	<div class="strip__content">
		<header class="strip__header">
			<figure class="strip__thumb">
				<i class="fa fa-pencil icon-animation"></i>
			</figure>
			<h1 class="strip__title" data-name="Blog">Blog</h1>
		</header>
		<div class="strip__inner-content">
			<header class="page-header">
				<h2 class="page-title text-uppercase"><span class="hb hb-md hb-white"><i class="fa fa-pencil" aria-hidden="true"></i></span> Blog</h2>
				<h6 class="header-caption lead">Checkout My Recent Thoughts</h6>
			</header>

			<div id="blog-carousel" class="owl-carousel owl-theme">
				<div class="item">
					<div class="thumbnail">
						<figure class="item-thumb">
							<img src="images/blog/blog-featured-thumbnail.jpg" class="img-responsive" title="Post Item Title" alt="Blog Thumbnail">
							<figcaption class="sr-only">Post Item Title</figcaption>
						</figure>
						<div class="caption">
							<h2 class="h3 title">Post Item Title</h2>
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
							<a href="content/post-content.html" class="read-btn hb hb-sm hb-dark" role="button" data-remote="false" data-toggle="modal" data-target="#blogPost-modal">
								<i class="btn-icon fa fa-arrow-right"></i>
								<strong class="btn-caption">More</strong>
							</a>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="thumbnail">
						<figure class="item-thumb">
							<a href="#" class="btn btn-link post-type" data-toggle="tooltip" data-placement="right" title="Category: Video"><i class="fa fa-play fa-2x"></i></a>
							<img src="images/blog/blog-featured-thumbnail-02.jpg" class="img-responsive" title="Post Item Title" alt="Blog Thumbnail">
							<figcaption class="sr-only">Post Item Title</figcaption>
						</figure>
						<div class="caption">
							<h2 class="h3 title">Post Item Title</h2>
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
							<a href="content/post-content.html" class="read-btn hb hb-sm hb-dark" role="button" data-remote="false" data-toggle="modal" data-target="#blogPost-modal">
								<i class="btn-icon fa fa-arrow-right"></i>
								<strong class="btn-caption">More</strong>
							</a>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="thumbnail">
						<figure class="item-thumb">
							<a href="#" class="btn btn-link post-type" data-toggle="tooltip" data-placement="right" title="Category: Audio"><i class="fa fa-volume-up fa-2x"></i></a>
							<img src="images/blog/blog-featured-thumbnail-03.jpg" class="img-responsive" title="Post Item Title" alt="Blog Thumbnail">
							<figcaption class="sr-only">Post Item Title</figcaption>
						</figure>
						<div class="caption">
							<h2 class="h3 title">Post Item Title</h2>
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
							<a href="content/post-content.html" class="read-btn hb hb-sm hb-dark" role="button" data-remote="false" data-toggle="modal" data-target="#blogPost-modal">
								<i class="btn-icon fa fa-arrow-right"></i>
								<strong class="btn-caption">More</strong>
							</a>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="thumbnail">
						<figure class="item-thumb">
							<a href="#" class="btn btn-link post-type" data-toggle="tooltip" data-placement="right" title="Category: Quote"><i class="fa fa-quote-left fa-2x"></i></a>
							<img src="images/blog/blog-featured-thumbnail-04.jpg" class="img-responsive" title="Post Item Title" alt="Blog Thumbnail">
							<figcaption class="sr-only">Post Item Title</figcaption>
						</figure>
						<div class="caption">
							<h2 class="h3 title">Post Item Title</h2>
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
							<a href="content/post-content.html" class="read-btn hb hb-sm hb-dark" role="button" data-remote="false" data-toggle="modal" data-target="#blogPost-modal">
								<i class="btn-icon fa fa-arrow-right"></i>
								<strong class="btn-caption">More</strong>
							</a>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="thumbnail">
						<figure class="item-thumb">
							<a href="#" class="btn btn-link post-type" data-toggle="tooltip" data-placement="right" title="Category: Article"><i class="fa fa-file-text-o fa-2x"></i></a>
							<img src="images/blog/blog-featured-thumbnail-05.jpg" class="img-responsive" title="Post Item Title" alt="Blog Thumbnail">
							<figcaption class="sr-only">Post Item Title</figcaption>
						</figure>
						<div class="caption">
							<h2 class="h3 title">Post Item Title</h2>
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
							<a href="content/post-content.html" class="read-btn hb hb-sm hb-dark" role="button" data-remote="false" data-toggle="modal" data-target="#blogPost-modal">
								<i class="btn-icon fa fa-arrow-right"></i>
								<strong class="btn-caption">More</strong>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section> <!-- /.strips_strip -->
						

to customize blog <section> following are the some instructions.

• Section Title: - title for blog section.
• Post Item: - Carousel styled blog posts.

Testimonials Customization - <section>

<div id="testimonial-section" class="section color5 scroll-pane" data-letter="t">
	<div class="section__wrapper">
		<section class="row">
			<header class="col-md-4 page-header">
				<div data-spy="affix">
					<h1 class="page-title text-uppercase"><span class="hb hb-md hb-white"><i class="fa fa-comment" aria-hidden="true"></i></span> Testimonials</h1>
					<p class="section__caption">Some of pride words from Clients</p>
					<a href="#" class="btn btn-default btn-outline"><i class="fa fa-thumbs-up"></i> Hire Me!</a>
				</div>
			</header>
			<div class="col-md-8 content-wrapper">
				<p class="lead">Please speak, we would love to hear from you. It could be Suggestion or Question. And we will get back to you as soon as we get this mail.</p>
				<hr class="clearfix">
				<div id="testimonials" class="clearfix">
					<blockquote class="testimonial-item">
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
						<footer>
							<img src="images/avatar-image.jpg" alt="quote person">
							<cite><a href="#">John Doe</a></cite>
						</footer>
					</blockquote>
					<blockquote class="testimonial-item">
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
						<footer>
							<img src="images/avatar-image.jpg" alt="quote person">
							<cite><a href="#">John Doe</a></cite>
						</footer>
					</blockquote>
					<blockquote class="testimonial-item">
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
						<footer>
							<img src="images/avatar-image.jpg" alt="quote person">
							<cite><a href="#">John Doe</a></cite>
						</footer>
					</blockquote>
					<blockquote class="testimonial-item">
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
						<footer>
							<img src="images/avatar-image.jpg" alt="quote person">
							<cite><a href="#">John Doe</a></cite>
						</footer>
					</blockquote>

					<button class="btn btn-block btn-outline clear clearfix">Load More</button>
				</div>
			</div>
		</section>
	</div>
</div> <!-- End #testimonials-section -->
						

to customize blog <section> following are the some instructions.

• Section Title: - title for blog section.
• Testimonial Item: - Carousel styled blog posts.

Note: Testimonial section is only available in index-v2.html

Contact Customization - <section>

<section id="contact-section" class="strips__strip">
	<div class="strip__content">
		<header class="strip__header">
			<figure class="strip__thumb">
				<i class="fa fa-envelope icon-animation"></i>
			</figure>
			<h1 class="strip__title" data-name="Contact">Contact</h1>
		</header>
		<div class="strip__inner-content container">
			<header class="page-header">
				<h2 class="page-title text-uppercase"><span class="hb hb-md hb-white"><i class="fa fa-envelope" aria-hidden="true"></i></span> Contact</h2>
				<h6 class="header-caption lead">Do you have requirements for work?</h6>
				<a href="#" class="btn btn-default btn-outline"><i class="fa fa-thumbs-up"></i> Hire Me!</a>
			</header>
			<p class="lead">Please speak, we would love to hear from you. It could be Suggestion or Question. And we will get back to you as soon as we get this mail.</p>
			<div class="row">
				<div class="col-md-6">
					<div class="map-address">
						<div class="map-marker hidden">
							<button type="button" class="btn btn-link" data-container="body" data-toggle="popover" data-placement="left" data-content="lorum ipsum, Lorem ipsum dolor sit amet, consectetuer adipiscing elit."><i class="fa fa-map-marker fa-2x" aria-hidden="true"></i></button>
						</div>

						<div class="map-container">
							<svg id="map-svg" viewBox="0 0 670.2 432.4" style="enable-background:new 0 0 670.2 432.4;" xml:space="preserve" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
								<defs>
									<linearGradient id="map-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
										<stop offset="0%" stop-color="#fff" stop-opacity="0.10" />
										<stop offset="100%" stop-color="#fff" stop-opacity="0.35" />
									</linearGradient>
									<clipPath id="map-mask">
										<use xlink:href="#map-globe"></use>
									</clipPath>
								</defs>
								<g clip-path="url(#map-mask)" fill="url(#map-gradient)" id="map-shape">
									<path id="map-globe" d="M338,49.3l7.5-0.6l7.7-6.7h10.6l6.2-2.4v5l-2.9,5.5l1.5,0.1l-3.5,4.1l5.2,5.7l-14.8,13.8l-3.4,0.2l-6.2-4.7l0,0
									v-3.9l-4-4.4v-7.5l-4-3.4L338,49.3L338,49.3z M312,166v9.1l10.7,10.9H320l-0.6,9H296v-20.7l12.5-12.8L312,166z M134,26.4l20.5-7.4h7
									l12.8-13h22.9H197v8.6l-15,15v18.1l-12,12.6V79h-11.6l-5.1-7l4.2-9.1L134,42.7V26.4z M201.4,132.1l-7.4,6.5V160h-0.6L180,143.2
									v-17.4l-17.6-17.7l-9,8.6l-7.2-6.9l-5.3,4.4L125.2,101h53.3l13.5,12v8.4L201.4,132.1z M123.1,57.1l14.5-0.1l6.8,5.1l-4.6,3.3
									L157.3,86h12.5l6.3,5H140l-17-17.8L123.1,57.1z M107.5,73l6.5,7.3V93h-4.5L94.1,77.8L93.8,73H107.5z M78,95h21.2l6.3,6h8l22.2,22.7
									l-1.5,2.3h-7.8l-4.2-4.2L118,126h-10.3l-10.5-11h-5.8L78,101.6V95z M247,315v18.3L219,362v7l-27,28.7V409l-5,3.7v19.7l-10-10.7v-32
									l3-3.3v-20l2-3.7V345l-21-21.3v-21.3l5.8-5.3l-12.1-13h-15.2l-11-12h-3.7L96,243.3v-6.7l-15-14v-29L53.8,165H40.2l-15.4,9.6L7,157.3
									v-14.7L0,136v-16.3l18.5-4.6h12.7l5,5h14.7l5.7,4h41.1l9.6,11h11l4.3-4.3l4.3,4.3h12l7.3-11.5l6.1,3.5l6.3-8.1l4.4,7.4v8.7l-22,22.3
									V180h14.5l13.5,11.6v-12.9l7-7l-5-5V157h12.2l34,34.3L191.8,217H182l-8,8v5.3l-13.7,13v3.3l2.1,3.4l-0.1,6.4l-3,0.1l-3.6-6.5
									l-23.8,0.3v12L142,273l9.9-2v1.6l17.8,17.4h46.7l23.3,25H247L247,315z M262.3,131l-22.3,8.7v2.7l-6,6.2V166l-16-15v-37.2l-10-9.6
									V86.4l-6.4-7.4H181V59.6l6-7.2V31.1l18.1-0.1l15.3-15h9.5l16.2-16h17.1l15.9,13.1l-4.4,1.7l5.9,7.7l6.8-3.5h6l8.6,8.5l-20,13.1v25.3
									l-3,3.9v19.7l-2,6.9l3.2,20.3L269.7,131H262.3z M272,145.1v-6.4l12.5-0.8h7.5v2.7l-0.5,13.3h-10.8L272,145.1z M412,339.8l-6,5.5V361
									h-5v-25.7l11-11.4V339.8z M395,309.2v24.3l-11,9.3v8.6l-4,4.3v7l-4.1,17.3h-13.7L343,361.5v-16l-5-4.9v-28.9l-5-5V301h-28.6
									L285,282.3V255l28.7-15h7.1l4.8-5H337v6h12.1l5.9,7v-3h18.8l13.2,15v8.3l21.5,20.7h6.7L395,309.2z M525.3,322.6H509v-3.2L498.7,309
									v-6.7l12.2,12.2h12.5l4.2,4.2L525.3,322.6z M600.3,400l-3.2-4.3l0.3-3.1h4.3L600.3,400z M591.6,388l-2.8-2.7l0.2-6.3h-7.3l-5.3-6
									H564l-4.6,6h-8.6l-2.8,1h-12v-16.2l-0.6-2l2.9-9l6.5-2.9h5.2l15.2-15H576v-3.1l10,10.6V331h3l6,4v3.8l10,12.2l0.1,37.1h-13.5V388z
									M533.6,313.8L552,298l-1.3,23.3l-7.6,2.7L533.6,313.8z M590.3,219.3h-5.5l-2.3,3.2l2.4,3.5l0.1,9l-10.3,7.7v2l-2.1,1.3l-3.4-2.7
									l0.1-6.5l10.5-8.2l-0.1-11.3l6.8-7.8l8,4.7L590.3,219.3z M600.8,327h-16.3l-8.2-8.6l3-3.4h18.6l3.1,2.4L600.8,327z M654,142.2v4.1
									L612.7,190l1.9-16.4l8.7-11.5l-10.6,9h-19l-13.5,14h3.8v14.3l-21.2,24.4l6.6,4.7l-7.1,5.7l-6.3-3.6v-2.8l-7.2-6.2l-5.8,4.9v6.2l5,4
									v12.9l-4.5,17.6h-14.6l-8.3,1.8l8.4,9.4v3.8l-6.8,11.5L516,286v9.3l2.1,3.2l-0.6,6l-5.8-0.5l-2-7.5l-0.2-16.4L495.9,266h-4
									l-15.3,12.7l-0.3,4l-5.1,6.2l-8.4-8.1l-0.2-9.7L449.2,261h-15.3l6,5.8L422.5,284h-11.7L392,266.1v-7.9l-15.3-16l7.4-6.2h-8.6
									l-22.2-25.1l-4.4-2.9v4.6l6.3,6.6v4.7l-3.8,2l-10.1-6.9h-7l-16.1,16h-8.5L299,224.2V219h16v-15.6l20.9-16.4h21.6l4.6-17.4v-9.3h-3
									v-11.8l3-3.7l-12,3.5V181H341v-8h-14v-27.6l42.2-29.4h12.6l13.2,13.7v3.8l-6.5,5.9l-8.5-7.8v6.1l12.1,11.2l28.3-21.9h16.1l21-20h12
									l25.7-25h15.9l12.5-13.1l5.7,6.1h8.2l-0.1,16.5l-8.9,9.5h30.2l8.8,9h44l14.3,14h16.3l2.3-3h15.5l10.3,11.4L654,142.2z"></path>
									<g data-location="TR">
										<circle class="Pin-back" cx="160" cy="210" r="2.5" fill="#fff" fill-opacity="0.5" />
										<circle class="Pin-front" cx="160" cy="210" r="2.5" fill="#fff" />
									</g>
									<g data-location="NY">
										<circle class="Pin-back" cx="174" cy="222" r="2.5" fill="#fff" fill-opacity="0.5" />
										<circle class="Pin-front" cx="174" cy="222" r="2.5" fill="#fff" />
									</g>
									<g data-location="SF">
										<circle class="Pin-back" cx="94.5" cy="229.5" r="2.5" fill="#fff" fill-opacity="0.5" />
										<circle class="Pin-front" cx="94.5" cy="229.5" r="2.5" fill="#fff" />
									</g>
									<g data-location="LN">
										<circle class="Pin-back" cx="317" cy="186" r="2.5" fill="#fff" fill-opacity="0.5" />
										<circle class="Pin-front" cx="317" cy="186" r="2.5" fill="#fff" />
									</g>
									<g data-location="SP">
										<circle class="Pin-back" cx="515" cy="301" r="2.5" fill="#fff" fill-opacity="0.5" />
										<circle class="Pin-front" cx="515" cy="301" r="2.5" fill="#fff" />
									</g>
								</g>
							</svg>
						</div>
					</div>
				</div>
				<hr class="clearfix visible-sm visible-xs">
				<div class="col-md-6">
					<h3 class="title visible-sm visible-xs">Inquiry Form</h3>
					<form action="php/contact.php" target="hidden" method="post" id="enquiry-form">
						<div id="alert-msg" class="alert-msg"></div>
						<div class="row">
							<div class="col-md-6 form-group">
								<label class="sr-only" for="contact-name">Full Name:</label>
								<input type="text" class="form-control" id="contact-name" name="contact-name" placeholder="Full Name" required="required">
							</div>
							<div class="col-md-6 form-group">
								<label class="sr-only" for="contact-email">Email Address:</label>
								<input type="email" class="form-control" id="contact-email" name="contact-email" placeholder="Email Address" required="required">
							</div>
						</div>
						<div class="row">
							<div class="col-md-6 form-group">
								<label class="sr-only" for="contact-budget">Phone Number:</label>
								<input type="text" class="form-control" id="contact-phone" name="contact-phone" placeholder="Phone Number" required="required">
							</div>
							<div class="col-md-6 form-group">
								<label class="sr-only" for="contact-budget">Project Budget:</label>
								<input type="text" class="form-control" id="contact-budget" name="contact-budget" placeholder="Project Budget" required="required">
							</div>
						</div>
						<div class="form-group">
							<label class="sr-only" for="contact-message">Comments</label>
							<textarea class="form-control" id="contact-message" name="contact-message" placeholder="Comments" rows="6" required="required"></textarea>
							<button type="submit" class="hb hb-sm hb-dark submit-btn"><i class="fa fa-envelope" aria-hidden="true"></i></button>
						</div>
					</form>
				</div>
			</div>
			<div class="clearfix visible-xs">
				<hr class="clearfix">
				<div id="social-nav-contact" class="contact-social-icons">
					<a href="#" data-toggle="tooltip" data-placement="top" title="Facebook"><i class="fa fa-facebook"></i></a>
					<a href="#" data-toggle="tooltip" data-placement="top" title="Twitter"><i class="fa fa-twitter"></i></a>
					<a href="#" data-toggle="tooltip" data-placement="top" title="Google Plus"><i class="fa fa-google-plus"></i></a>
					<a href="#" data-toggle="tooltip" data-placement="top" title="Linkedin"><i class="fa fa-linkedin-square"></i></a>
					<a href="#" data-toggle="tooltip" data-placement="top" title="Pinterest"><i class="fa fa-pinterest"></i></a>
					<a href="#" data-toggle="tooltip" data-placement="top" title="Skype"><i class="fa fa-skype"></i></a>
					<a href="#" data-toggle="tooltip" data-placement="top" title="RSS Feed"><i class="fa fa-rss"></i></a>
				</div>
			</div>
		</div>
	</div>
</section> <!-- /.strips_strip -->
						

to customize contact <section> following are the some instructions.

• Section Title: - title for contact section.
• SVG Map: - Intereactive SVG Map. Please click on reference to know more about it. Reference
• Contact Form: - Inquiry form for contact section.

Special thanks goes to those authors, teams or organisations who helped me through their awesome plugins or frameworks.

• Twitter Bootstrap
• jQuery Framework
• FontAwesome Icons
• Google Fonts - Open Sans
• SimpleLightbox Image Gallery
• Unsplash - Stock Images
• CodePen.io
• Owl Carousel
• jQuery Counter Up
• Hexagon CSS