Glitche - CV/Resume Template

By:Olexandr Beshley

Thank you for your purchase. If you have any questions, mail me to - beshleygame@mail.ru

File structure

After unpacking archive, you'll see this structure:

						
html/
│ 
├──doc/
├──theme_colors/		
│──│──default(blue, green, pink, purple, red)/
│──│──│──css/
│──│──│──│──animate.css
│──│──│──│──glitche-basic.css
│──│──│──│──glitche-layout.css
│──│──│──│──ionicons.css
│──│──│──│──magnific-popup.css
│──│──│──fonts/
│──│──│──images/
│──│──│──js/
│──│──│──│──glitche-scripts.js
│──│──│──│──imagesloaded.pkgd.js
│──│──│──│──jquery.min.js
│──│──│──│──jquery.validate.js
│──│──│──│──magnific-popup.js
│──│──│──│──masonry.pkgd.js
│──│──│──│──masonry-filter.js
│──│──│──│──typed.js
│──│──│──less/
│──│──│──│──glitche-basic.less
│──│──│──│──glitche-layout.less
│──│──│──│──setting.less
│──│──│──index.html
│──│──│──resume.html
│──│──│──portfolio.html
│──│──│──blog.html
│──│──│──blog_inner.html
│──│──│──contacts.html

css - all CSS for pages
- animate.css - CSS for animations
- ionicons.css - CSS for "ionicons" icons
- magnific-popup.css - CSS for "Magnific Popup" plugin
- glitche-basic.css - CSS for basic styles
- glitche-layout.css - CSS for theme layout
less - all LESS for pages
- setting.less - LESS for setting theme
- glitche-basic.less - LESS for basic styles
- glitche-layout.less - LESS for theme layout
js - all JS for pages
- glitche-scripts.js - Main JS for theme
- imagesloaded.pkgd.js - JS plugin for masonry
- jquery.min.js - jQuery library
- jquery.validate.js - JS plugin for validate forms
- magnific-popup.js - JS plugin for popups
- masonry.pkgd.js - Masonry plugin for: "Portfolio", "Clients", "Blog" items
- masonry-filter.js - Plugin for "Portfolio" filters
- typed.js - JS plugin for typing text animation

Settings

For editing the theme you can use following settings, folder "/less/setting.less" .

Name	Value	Description
Colors setting for theme elements
@bg	#fff	Container color
@default-color	#363636	Default color
@extra-color	#999	Extra color
@dark-color	#141414	Dark color
@light-color	#DDD	Light color
@white-color	#fff	White color
@active-color	#f26b38	Theme color
@extra-active-color	#ede574	Titles color
@error-color	red	Error field color
Fonts setting for theme
@default-font	'Roboto Mono'	Default font for Theme
@icons-font	'Ionicons'	Icons font for Theme
Sizes setting for theme
@large-size	15px	Large Size
@default-size	13px	Default Size
@small-size	12px	Small Size
@extra-small-size	11px	Extra Small Size
@title-size	68px	Title Size
@subtitle-size	15px	Subtitle Size
@h1-size	26px	H1 Size
@h2-size	23px	H2 Size
@h3-size	20px	H3 Size
@h4-size	18px	H4 Size
@h5-size	16px	H5 Size
@h6-size	14px	H6 Size
@default-letter-spacing	0em	Default Letter Spacing
@extra-letter-spacing	0.04em;	Extra Letter Spacing
@line-height	23px	Default Line-height for text
Colors Theme
@active-color	#f26b38	Default(Orange) Theme color
@active-color	#e84a5f	Red Theme color
@active-color	#9C27B0	Purple Theme color
@active-color	#303F9F	Blue Theme color
@active-color	#4CAF50	Green Theme color
@active-color	#FF4081	Pink Theme color

Include of fonts

To use fonts, you must add one tag 'link' from section below to head section.

					
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,100,300italic,300,100italic,400italic,500,500italic,700,700italic&subset=latin,cyrillic" 
rel="stylesheet">

Next step is to set the @default-font option with using settings table.

Contact Form PHP

To modify the form is submitted, you can use the following settings, folders "/mailer/form_setting.php" and "/mailer/feedback.php"

HTML structure

					
<!DOCTYPE html>
<html>
<head>
	
	<!-- Meta-information -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Glitche - CV/Resume Template</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	
	<!-- Mobile Specific Metas -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	
	<!-- Load Fonts -->
	<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,100,300italic,300,100italic,400italic,500,500italic,700,700italic&subset=latin,cyrillic' 
	rel='stylesheet'>
	
	<!-- CSS -->
	<link rel="stylesheet" href="css/glitche-basic.css" />
	<link rel="stylesheet" href="css/glitche-layout.css" />
	<link rel="stylesheet" href="css/ionicons.css" />
	<link rel="stylesheet" href="css/magnific-popup.css" />
	<link rel="stylesheet" href="css/animate.css" />
	
	<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	
	<!-- Favicons -->
	<link rel="shortcut icon" href="images/favicons/favicon.ico">
	<link rel="apple-touch-icon" href="images/favicons/apple-touch-icon.png">
	<link rel="apple-touch-icon" sizes="72x72" href="images/favicons/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="images/favicons/apple-touch-icon-114x114.png">
	
</head>

<body class="load">	
	
	<!-- Preloader -->
	<div class="preloader">
		<div class="centrize full-width">
			<div class="vertical-center">
				<div class="pre-inner">
					<div class="load typing-load"><p>loading...</p></div>
					<span class="typed-load"></span>
				</div>
			</div>
		</div>
	</div>
	
	<!-- Container -->
	<div class="container">
		
		<!-- Header -->
		<header>
			<div class="head-top">
				<a href="#" class="menu-btn"><span></span></a>
				<div class="top-menu">
					<ul>
						<li><a href="resume.html" class="lnk" data-text="Resume">Resume</a></li>
						<li><a href="portfolio.html" class="lnk" data-text="Portfolio">Portfolio</a></li>
						<li><a href="blog.html" class="lnk" data-text="Blog">Blog</a></li>
						<li><a href="contacts.html" class="btn" data-text="Contacts">Contacts</a></li>
					</ul>
				</div>
			</div>
		</header>
		
		<div class="wrapper">
		
			...
		
		</div>
		
		<!-- Footer -->
		<footer>
			<div class="soc">
				<a target="_blank" href="https://dribbble.com/"><span class="ion ion-social-dribbble"></span></a>
				<a target="_blank" href="https://twitter.com/"><span class="ion ion-social-twitter"></span></a>
				<a target="_blank" href="https://github.com/"><span class="ion ion-social-github"></span></a>
				<a target="_blank" href="https://www.instagram.com/"><span class="ion ion-social-instagram-outline"></span></a>
			</div>
			<div class="copy">© 2016 Glitche. All rights reserved.</div>
			<div class="clr"></div>
		</footer>
		
		<!-- Lines -->
		<div class="line top"></div>
		<div class="line bottom"></div>
		<div class="line left"></div>
		<div class="line right"></div>
		
	</div>
	
	<!-- jQuery Scripts -->
    <script src="js/jquery.min.js"></script>
	<script src="js/jquery.validate.js"></script>
	<script src="js/typed.js"></script>
	<script src="js/magnific-popup.js"></script>
	<script src="js/masonry.pkgd.js"></script>
	<script src="js/imagesloaded.pkgd.js"></script>
	<script src="js/masonry-filter.js"></script>
	
	<!-- Main Scripts -->
	<script src="js/glitche-scripts.js"></script>
	
</body>
</html>

HTML structure of "Home" section

					
<div class="wrapper">

	<!-- I'm John Doe -->
	<div class="section started">
		<div class="centrize full-width">
			<div class="vertical-center">
				<div class="started-content">
					<div class="h-title glitch-effect" data-text="I'm John Doe">I'm <span>John Doe</span></div>
					<div class="h-subtitle typing-subtitle">
						<p>UX/UI Designer and Front-end Director.</p>
						<p>Based in Kiev.</p>
					</div>
					<span class="typed-subtitle"></span>
				</div>
			</div>
		</div>
	</div>

</div>

HTML structure of "Resume" section

					
<div class="wrapper">
		
	<!-- Started -->
	<div class="section started">
		<div class="centrize full-width">
			<div class="vertical-center">
				<div class="started-content">
					<div class="h-title glitch-effect" data-text="Resume">Resume</div>
					<div class="h-subtitle typing-bread">
						<p><a href="index.html">Home</a> / <a href="resume.html">Resume</a></p>
					</div>
					<span class="typed-bread"></span>
				</div>
			</div>
		</div>
		<a href="#" class="mouse_btn"><span class="ion ion-mouse"></span></a>
	</div>
	
	<!-- About -->
	<div class="section about">
		<div class="content">
			<div class="title">
				<div class="title_inner">About Me</div>
			</div>
			<div class="image">
				<img src="images/man1.jpg" alt="" />
			</div>
			<div class="desc">
				<p>Lorem ipsum dolor sit amet, in quodsi vulputate pro. Ius illum vocent mediocritatem an, cule dicta 
				iriure at. Ubique maluisset vel te, his dico vituperata ut. Pro ei phaedrum maluisset. Ex audire suavitate has, 
				ei quodsi tacimates sapientem sed, pri zril ubique ut. Te cule tation munere noluisse. Enim torquatos ne pri, 
				eum mollis salutandi corrumpit et, fugit apeirian duo ad.</p>
				<div class="info-list">
					<ul>
						<li><strong>Name:</strong> John Doe</li>
						<li><strong>Age:</strong> 22 Years</li>
						<li><strong>Job:</strong> Web Developer</li>
						<li><strong>Citizenship:</strong> Ukraine</li>
						<li><strong>Residence: </strong> Kiev</li>
						<li><strong>E-mail:</strong> johndoe@domain.com</li>
					</ul>
				</div>
				<div class="bts"><a href="#" class="btn fill" data-text="Download CV">Download CV</a></div>
			</div>
			<div class="clear"></div>
		</div>
	</div>
	
	<!-- Resume -->
	<div class="section resume">
		<div class="content">
			<div class="cols">
				<div class="col col-md">
					<div class="title">
						<div class="title_inner">Experience</div>
					</div>
					<div class="resume-items">
						<div class="resume-item active">
							<div class="date">2013 - Present</div>
							<div class="name">Art Director - Facebook Inc</div>
							<p>Morbi nulla arcu, pellentesque sed egestas in, tempor eget felis. Nullam tincidunt augue 
							in leo feugiat, quis interdum nisi sollicitudin.</p>
						</div>
						<div class="resume-item">
							<div class="date">2011 - 2012</div>
							<div class="name">Front-end Developer - Google Inc</div>
							<p>Duis ipsum ligula, feugiat nec auctor vitae, porta sit amet urna. Praesent ex lorem, 
							porta nec aliquet eu, ullamcorper eget nibh.</p>
						</div>
						...
					</div>
				</div>
				<div class="col col-md">
					<div class="title">
						<div class="title_inner">Education</div>
					</div>
					<div class="resume-items">
						<div class="resume-item">
							<div class="date">2007 - 2008</div>
							<div class="name">Art University of New York</div>
							<p>Morbi nulla arcu, pellentesque sed egestas in, tempor eget felis. Nullam tincidunt augue 
							in leo feugiat, quis interdum nisi sollicitudin.</p>
						</div>
						...
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<!-- Skills -->
	<div class="section skills">
		<div class="content">
			<div class="title">
				<div class="title_inner">My Skills</div>
			</div>
			<div class="skills">
				<ul>
					<li> 
						<div class="name">WordPress</div>
						<div class="progress">
							<div class="percentage" style="width:70%;">
								<span class="percent">70%</span>
							</div>
						</div>
					</li>
					...
				</ul>
			</div>
		</div>
	</div>
	
	<!-- Service -->
	<div class="section service">
		<div class="content">
			<div class="title">
				<div class="title_inner">My Services</div>
			</div>
			<div class="service-items">
				<div class="service-item">
					<div class="icon"><span class="ion ion-social-html5"></span></div>
					<div class="name">Front-end</div>
					<p>Morbi nulla arcu, pellentesque sed egestas in.</p>
				</div>
				...
			</div>
		</div>
	</div>
	
	<!-- Clients -->
	<div class="section clients">
		<div class="content">
			<div class="title">
				<div class="title_inner">Clients</div>
			</div>
			<div class="box-items">
				<div class="box-item">
					<div class="image">
						<a target="_blank" href="https://www.google.com">
							<img src="images/clients/client_1.png" alt="" />
							<span class="info">
								<span class="centrize full-width">
									<span class="vertical-center">
										<span class="ion ion-link"></span>
									</span>
								</span>
							</span>
						</a>
					</div>
				</div>
				...
			</div>
			<div class="clear"></div>
		</div>
	</div>

</div>

HTML structure of "Portfolio" section

					
<!-- Started Portfolio -->
<div class="section started">
	<div class="centrize full-width">
		<div class="vertical-center">
			<div class="started-content">
				<div class="h-title glitch-effect" data-text="Portfolio">Portfolio</div>
				<div class="h-subtitle typing-bread">
					<p><a href="index.html">Home</a> / <a href="portfolio.html">Portfolio</a></p>
				</div>
				<span class="typed-bread"></span>
			</div>
		</div>
	</div>
	<a href="#" class="mouse_btn"><span class="ion ion-mouse"></span></a>
</div>

<!-- Works -->
<div class="section works">
	<div class="content">
		<div class="title">
			<div class="title_inner">Recent Works</div>
		</div>
		<!-- Works Filter -->
		<div class="filter-menu">
			<div class="filters">
				<div class="btn-group">
					<label data-text="Nature"><input type="checkbox" value="f-graphic" />Graphics</label>
					...
				</div>
			</div>
		</div>
		<!-- Works Items -->
		<div class="box-items">
			<!-- Work Item -->
			<div class="box-item f-mockups">
				<div class="image">
					<a href="#popup-1" class="has-popup">
						<img src="images/works/work1.jpg" alt="" />
						<span class="info">
							<span class="centrize full-width">
								<span class="vertical-center">
									<span class="ion ion-ios-plus-empty"></span>
								</span>
							</span>
						</span>
					</a>
				</div>
				<div class="desc">
					<div class="category">Mockups</div>
					<a href="#popup-1" class="name has-popup">Canvas Tote Bag MockUp</a>
				</div>
				<!-- Work Popup -->
				<div id="popup-1" class="popup-box mfp-fade mfp-hide">
					<div class="content">
						<div class="image">
							<img src="images/works/work1.jpg" alt="">
						</div>
						<div class="desc">
							<div class="category">Mockups</div>
							<h4>Canvas Tote Bag MockUp</h4>
							<p>Consul latine iudicabit eu vel. Cu has animal eruditi voluptatibus. Eu volumus explicari sed. Mel mutat 
							vituperata suscipiantur et, et fabellas explicari adipiscing quo, no mucius euismod vis. Cu vim quem quod cibo.</p>
							<a href="#" class="btn" data-text="View Project">View Project</a>
						</div>
					</div>
				</div>
			</div>
			...
		</div>
		<div class="clear"></div>
	</div>
</div>

HTML structure of "Blog" section

					
<!-- Started Blog -->
<div class="section started">
	<div class="centrize full-width">
		<div class="vertical-center">
			<div class="started-content">
				<div class="h-title glitch-effect" data-text="Blog">Blog</div>
				<div class="h-subtitle typing-bread">
					<p><a href="index.html">Home</a> / <a href="blog.html">Blog</a></p>
				</div>
				<span class="typed-bread"></span>
			</div>
		</div>
	</div>
	<a href="#" class="mouse_btn"><span class="ion ion-mouse"></span></a>
</div>

<!-- Blog -->
<div class="section blog">
	<div class="content">
		<div class="title">
			<div class="title_inner">Latest Posts</div>
		</div>
		<!-- Blog items -->
		<div class="box-items">
			<!-- Blog item -->
			<div class="box-item">
				<div class="image">
					<a href="blog_inner.html">
						<img src="images/works/work1.jpg" alt="" />
						<span class="info">
							<span class="centrize full-width">
								<span class="vertical-center">
									<span class="ion ion-ios-book-outline"></span>
								</span>
							</span>
						</span>
					</a>
				</div>
				<div class="desc">
					<div class="date">14 June 2016</div>
					<a href="blog_inner.html" class="name">Designing the perfect notification UX</a>
				</div>
			</div>
			....
		</div>
		<div class="clear"></div>
	</div>
</div>

HTML structure of "Blog Post" section

					
<!-- Started Blog Post -->
<div class="section started">
	<div class="centrize full-width">
		<div class="vertical-center">
			<div class="started-content">
				<div class="date">14 June 2016</div>
				<div class="h-title blog_title">Designing the perfect notification UX</div>
				<div class="h-subtitle typing-bread">
					<p><a href="index.html">Home</a> / <a href="blog.html">Blog</a></p>
				</div>
				<span class="typed-bread"></span>
			</div>
		</div>
	</div>
	<a href="#" class="mouse_btn"><span class="ion ion-mouse"></span></a>
</div>

<!-- Blog Post -->
<div class="section blog">
	<div class="content">
		
		<!-- Blog Content -->
		<div class="single-post-text">
			<p>No dolorem blandit theophrastus eos, nam eu persecuti repudiandae, duo hinc vide aliquip et. Ex atqui voluptatibus eum, 
			cu case intellegebat eum, mea ex regione patrioque signiferumque. Pri ei solet graecis. Ea appetere referrentur vituperatoribus 
			cule, vix sanctus meliore cu. Nec in sale prima nostrud.</p>
			<p><img src="images/blog_1.jpg" alt="" /></p>
			<p>Ex audire suavitate has, ei quodsi tacimates sapientem sed, pri zril ubique ut. Te cule tation munere noluisse. Enim 
			torquatos ne pri, eum mollis salutandi corrumpit et, fugit apeirian duo ad. Ad oportere voluptatibus nec, sea ei civibus praesent. 
			At timeam expetenda inciderint has. Invidunt constituto ne per, paulo omnium quaerendum his eu, cu congue consul cetero cule. 
			Solet honestatis et eum. Euismod consulatu eos eu. Vocent facilis sensibus vel ut, quo an nihil qualisque. Mea eu nulla prompta. 
			Dicat velit at usu, malis euismod vim an, tollit discere vix in. Ne his eros dolor. Cu illud lorem putent vel. Eum in movet nostrum 
			referrentur. His ne tantas tractatos. Sit eu saperet antiopam.</p>
			<p>No dolorem blandit theophrastus eos, nam eu persecuti repudiandae, duo hinc vide aliquip et. Ex atqui voluptatibus eum, 
			cu case intellegebat eum, mea ex regione patrioque signiferumque. Pri ei solet graecis. Ea appetere referrentur vituperatoribus
			cule, vix sanctus meliore cu. Nec in sale prima nostrud.</p>
		</div>
		
		<!-- Blog Comments -->
		<div class="post-comments">
			<div class="title">
				<div class="title_inner">4 COMMENTS</div>
			</div>
			<!-- Comments Items -->
			<ul class="comments">
				<li class="post-comment">
					<div class="image">
						<img src="images/man1.jpg" alt="">
					</div>
					<div class="desc">
						<div class="name">Jesse Pitman</div>
						<p>An has alterum nominavi. Nam at elitr veritus voluptaria. Cu eum regione tacimates vituperatoribus, 
						ut mutat delenit est.</p>
					</div>
				</li>
				<li class="post-comment">
					<div class="image">
						<img src="images/man1.jpg" alt="">
					</div>
					<div class="desc">
						<div class="name">John Doe</div>
						<p>An has alterum nominavi. Nam at elitr veritus voluptaria. Cu eum regione tacimates vituperatoribus, 
						ut mutat delenit est.</p>
					</div>
				</li>
				<li class="post-comment">
					<div class="image">
						<img src="images/man1.jpg" alt="">
					</div>
					<div class="desc">
						<div class="name">James Collins</div>
						<p>An has alterum nominavi. Nam at elitr veritus voluptaria. Cu eum regione tacimates vituperatoribus, 
						ut mutat delenit est.</p>
					</div>
				</li>
				<li class="post-comment">
					<div class="image">
						<img src="images/man1.jpg" alt="">
					</div>
					<div class="desc">
						<div class="name">Alex Ferguson</div>
						<p>An has alterum nominavi. Nam at elitr veritus voluptaria. Cu eum regione tacimates vituperatoribus, 
						ut mutat delenit est.</p>
					</div>
				</li>
			</ul>
			<!-- Add Comment Form -->
			<div class="form-comment">
				<div class="title">
					<div class="title_inner">Write a comment</div>
				</div>
				<form id="comment_form" method="post">
					<div class="group-val">
						<input type="text" name="name" placeholder="Name" />
					</div>
					<div class="group-val">
						<input type="text" name="email" placeholder="Email" />
					</div>
					<div class="group-val ct-gr">
						<textarea name="message" placeholder="Comment"></textarea>
					</div>
					<a href="#" class="btn fill" onclick="$('#comment_form').submit(); return false;" data-text="Add Comment">Add Comment</a>
				</form>
			</div>
		</div>
		
		<div class="clear"></div>
	</div>
</div>

HTML structure of "Contacts" section

					
<!-- Started Contacts -->
<div class="section started">
	<div class="centrize full-width">
		<div class="vertical-center">
			<div class="started-content">
				<div class="h-title glitch-effect" data-text="Contacts">Contacts</div>
				<div class="h-subtitle typing-bread">
					<p><a href="index.html">Home</a> / <a href="contacts.html">Contacts</a></p>
				</div>
				<span class="typed-bread"></span>
			</div>
		</div>
	</div>
	<a href="#" class="mouse_btn"><span class="ion ion-mouse"></span></a>
</div>

<!-- Contacts Info -->
<div class="section contacts">
	<div class="content">
		<div class="title">
			<div class="title_inner">Contacts</div>
		</div>
		<div class="service-items">
			<div class="service-item">
				<div class="icon"><span class="ion ion-android-phone-portrait"></span></div>
				<div class="name">Phone</div>
				<p>+ (231) 456 67 89</p>
			</div>
			<div class="service-item">
				<div class="icon"><span class="ion ion-email"></span></div>
				<div class="name">Email</div>
				<p><a href="mailto:steve-pearson@gmail.com">steve-pearson@gmail.com</a></p>
			</div>
			<div class="service-item">
				<div class="icon"><span class="ion ion-ios-location"></span></div>
				<div class="name">Address</div>
				<p>2621 W Pico Blvd, Los Angeles</p>
			</div>
		</div>
		<!-- Contact Form -->
		<div class="contact_form">
			<form id="cform" method="post">
				<div class="group-val">
					<input type="text" name="name" placeholder="Name" />
				</div>
				<div class="group-val">
					<input type="text" name="email" placeholder="Email" />
				</div>
				<div class="group-val ct-gr">
					<textarea name="message" placeholder="Message"></textarea>
				</div>
				<a href="#" class="btn fill" onclick="$('#cform').submit(); return false;" data-text="Send Message">Send Message</a>
			</form>
			<div class="alert-success">
				<p>Thanks, your message is sent successfully. We will contact you shortly!</p>
			</div>
		</div>
	</div>
</div>

Icons

In this theme are defined some of classes for icons, your can see all icons here - http://ionicons.com/.

Sourse & Credits

Scripts

Animate.css https://daneden.github.io/animate.css/
jQuery https://jquery.com/
Masonry http://masonry.desandro.com/
imagesLoaded http://imagesloaded.desandro.com/
Multiple Filter Masonry http://dynamick.github.io/multiple-filter-masonry/
jQuery Validation Plugin http://jqueryvalidation.org/
Magnific Popup http://dimsemenov.com/plugins/magnific-popup/
Typed JS http://www.mattboldt.com/demos/typed-js/

Fonts

Roboto Mono https://www.google.com/fonts/specimen/Roboto+Mono
Ionicons http://ionicons.com/

Images

Any Images or logos used in previews are not included in this item or final purchase.

Unsplash https://unsplash.com/
Graphicburger http://graphicburger.com/