HTML Structure

FlatCV is a one-page HTML-template. This zip archive contains 2 html files (index.html and print.html).

The author's picture and information are located in #header:

<ul id="nav_tabs">
	<li class="splash">
		<a href="#splash">
			<div id="profile_photo">
				<img src="images/user_photo.jpg" height="150" width="150" alt="Title Example">
			</div>
			<div id="profile_name">
				<div id="author_name">
					<div class="profile_inner">
						<!-- You can edit name and lastname here -->
						<div class="name">John Johnson</div>
						<div class="pos">Graphic & Web Designer</div>
					</div>
				</div>
			</div>
		</a>
	</li>
	<li class="profile"><a href="#profile"><span class="icon">a</span></a></li>
	<li class="portfolio"><a href="#portfolio"><span class="icon">b</span></a></li>
	<li class="contacts"><a href="#contacts"><span class="icon">c</span></a></li>
</ul>

Social Links

<div class="social_links">
	<ul>
		<li><a href="#" class="icon1"><span>0</span></a></li>
		<li><a href="#" class="icon2"><span>1</span></a></li>
		<li><a href="#" class="icon3"><span>3</span></a></li>
		<li><a href="#" class="icon4"><span>p</span></a></li>
	</ul>
</div>

List Of Social Networks

• 0 — Facebook
• 1 — Twitter
• 2 — Google Plus
• 3 — Dribble
• 4 — LinkedIn
• 5 — Pinterest
• 6 — Vimeo
• 7 — Youtube
• 8 — Behance
• 9 — Flickr
• m — Email
• l — Skype
• n — VK
• p — Instagram

<li><a href="#" class="icon4"><span>Put symbol here</span></a></li>

Skills-widget example

<!-- Skills widget -->
<aside class="widget-odd widget widget_skills">
	<h3 class="widget_title">Graphic Skills</h3>
		<div class="widget_inner">
		<div class="skills_row odd first">
			<span class="progressbar">
				<span class="progress" style="background-color: rgb(152, 118, 252);">
					<span class="caption_wrap">
						<span class="caption">Adobe Photoshop/</span>
						<span class="value">99%</span>
					</span>
				</span>
			</span>
		</div>
		<div class="skills_row even">
			<span class="progressbar">
				<span class="progress" style="background-color: rgb(196, 118, 245);">
					<span class="caption_wrap">
						<span class="caption">Adobe Illustrator/</span>
						<span class="value">80%</span>
					</span>
				</span>
			</span>
		</div>
		<div class="skills_row even">
			<span class="progressbar">
				<span class="progress" style="background-color: rgb(249, 196, 54);">
					<span class="caption_wrap">
						<span class="caption">3D Max/</span>
						<span class="value">50%</span>
					</span>
				</span>
			</span>
		</div>
	</div>
</aside>
<!-- /Skills widget -->

Resume post example

<!-- Resume Post -->
<article class="post resume_post resume_post_1 first odd">
	<div class="resume_period category1">
		<span class="period_from">2005</span>
		<div class="period_to">2007</div>
	</div>
	<div class="extra_wrap">
		<div class="resume_header">
			<h4 class="post_title">
				<span class="post_title_icon category1 icon2"></span>
				commodo consequat
			</h4>
			<h5 class="resume_position category1">
				<span class="icon icon2"></span>
				Web Designer
			</h5>
		</div>
		<div class="resume_content">
			<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
			eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
		</div>
	</div>
</article>
<!-- /Resume Post -->

Portfolio post example

<!-- Portfolio post -->
<article class="portfolio_post filter2">
	<div class="post_pic portfolio_post_pic">
		<a href="assets/gallery/portfolio02.jpg" class="w_hover img-link img-wrap" rel="prettyPhoto[gallery]" title="Portfolio item">
			<span class="overlay"></span>
			<span class="link-icon"><img src="images/magnify.png" alt="Title Example"></span>
			<img src="images/portfolio2.jpg" height="400" width="600" alt="Title Example">
			<span class="caption">
				<h4 class="post_title">Duis dolor arcu, lobortis</h4>
				<h5>Aenean auctor tempor</h5>
			</span>
		</a>
	</div>
</article> 
<!-- /Portfolio post -->
					

Contacts

$contact_email = 'your_mail@mail.com';

Google Map

<script type="text/javascript">
	jQuery(document).ready(function(){
		googlemap_init(jQuery("#gmap").get(0), "Enter your address here");
	});
</script>

Phone number

<span class="phone">+123 456 789 111</span>

Email and Website

<span class="email">your_email@mail.com</span>
<span class="website"><a href="#">your_website_url.com</a></span>

QR-code

<img src="qr_code_url_here" height="150" width="150" alt="">

PSD Files

You’ll find also PSD folder in our template archive.

Sources and Credits

This section discloses the sources of various files used within the theme and describes their function. Use this section to gain an understanding on how the theme functions behind the scenes if considering any type of modification.

• Fonts:
  • Arial (standard)
  • Helvetica (standard)
  • Cabin (non standard)

All non standard fonts are from Google Web Fonts

We have used the pictures from:
http://www.bigstockphoto.com/

All images are copyrighted to their respective owners and not available for download with this theme.