Cvio - Resume/CV Template

by: beshleyua

Thank you for your purchase. If you have any questions, mail me to - beshleyua@gmail.com

File structure

After unpacking archive, you'll see this structure:

						
main/
│ 
├──doc/
├──template/	
│──│──css/
│──│──│──animate.css
│──│──│──basic.css
│──│──│──layout.css
│──│──│──brands.css
│──│──│──fontawesome.css
│──│──│──jarallax.css
│──│──│──magnific-popup.css
│──│──│──solid.css
│──│──│──swiper.css
│──│──│──theme-colors/
│──│──webfonts/
│──│──images/
│──│──js/
│──│──│──scripts.js
│──│──│──imagesloaded.pkgd.js
│──│──│──jquery.min.js
│──│──│──jquery.validate.js
│──│──│──magnific-popup.js
│──│──│──isotope.pkgd.js
│──│──│──jarallax.js
│──│──│──jarallax-element.js
│──│──│──jarallax-video.js
│──│──│──grained.js
│──│──│──swiper.js
│──│──│──simpleParallax.js
│──│──│──typed.js
│──│──less/
│──│──│──basic.scss
│──│──│──layout.scss
│──│──│──settings.scss
│──│──mailer/
│──│──│──feedback.php
│──│──│──form_setting.php
│──│──contacts.html
│──│──contacts_creative.html
│──│──contacts_image.html
│──│──index.html
│──│──index_creative.html
│──│──index_image.html
│──│──index_personal.html
│──│──index_slider.html
│──│──index_video.html
│──│──resume.html
│──│──resume_creative.html
│──│──resume_image.html
│──│──work_single.html
│──│──work_single_creative.html
│──│──work_single_image.html
│──│──works.html
│──│──works_creative.html

css - all CSS for pages
- basic.css - CSS for basic styles
- layout.css - CSS for template layout
scss - all SCSS for pages
- settings.less - SCSS for setting template
- basic.less - SCSS for basic styles
- layout.less - SCSS for template layout
js - all JS for pages
- scripts.js - Main JS for template

Settings

.SCSS Edit

For editing styling, colors, sizes of the template you can use following settings, folder "/style/_settings.scss". You need to compile the .sсss files to "/css" folder. You can use the "Koala" program.

Name	Value	Description
Colors setting for template elements
$default_bg	#101010	Background color
$extra_bg	#1E1E1E	Background extra color
$lines_color	rgba(255,255,255,0.07)	Lines color
$default_color	#aaa	Default color
$extra_color	#777	Extra color
$light_color	#eee	Light color
$white_color	#fff	White color
$active_color	#4bffa5	Template color
$error_color	red	Error field color
Fonts setting for template
$default_font	'Roboto'	Default font for template
Sizes setting for template
$large_size	24px	Large Size
$default_size	16px	Default Size
$small_size	14px	Small Size
$default_icon_size	36px	Default icons size
$line_height	1.5	Default Line-height for text

Theme Colors

To change the theme color of the template, just add a line to the "head": <link rel="stylesheet" href="css/theme-colors/green.css" /> - (green.css, blue.css, orange.css, etc.)

All Theme Colors:

						
│──│──css/theme-colors/green.css
│──│──css/theme-colors/blue.css
│──│──css/theme-colors/red.css
│──│──css/theme-colors/orange.css
│──│──css/theme-colors/yellow.css
│──│──css/theme-colors/brown.css
│──│──css/theme-colors/purple.css
│──│──css/theme-colors/green_light.css
│──│──css/theme-colors/yellow_light.css
│──│──css/theme-colors/beige.css

Grained On/Off

To on/off the Grained effect of the template, just add a class "grained-off" to the "body" tag: <body class="grained-off" >

Lines On/Off

To on/off the Vertical Lines of the template, just add a class "lines-off" to the "body" tag: <body class="lines-off" >

Include of fonts

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

					
<link href="https://fonts.googleapis.com/cssfamily=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

Next step is to set the $default_font option with using settings table.

Edit Icons

In this template are defined some of classes for icons, see all icons here - https://fontawesome.com/icons?d=gallery&s=brands,solid&m=free, use search and select icons.

Copy icon class (for example "fas fa-code") and add to tag in html file like this:

					
<span class="fas fa-code"></span>

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 / Home Page

					

<!doctype html>
<html lang="en-US">
<head>

	<!-- Meta -->
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	<meta name="description" content="CV & Resume Template" />
	<meta name="keywords" content="vcard, resposnive, resume, personal, card, cv, cvio, portfolio" />
	<meta name="author" content="beshleyua" />

	<!-- Title -->
	<title>Cvio - Resume/CV Template</title>

	<!-- Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap&subset=cyrillic" rel="stylesheet">

	<!-- Styles -->
	<link rel="stylesheet" href="css/basic.css" />
	<link rel="stylesheet" href="css/layout.css" />
	<link rel="stylesheet" href="css/magnific-popup.css" />
	<link rel="stylesheet" href="css/animate.css" />
	<link rel="stylesheet" href="css/jarallax.css" />
	<link rel="stylesheet" href="css/swiper.css" />
	<link rel="stylesheet" href="css/fontawesome.css" />
	<link rel="stylesheet" href="css/brands.css" />
	<link rel="stylesheet" href="css/solid.css" />

	<!-- Theme Colors
	<link rel="stylesheet" href="css/theme-colors/blue.css" />
	<link rel="stylesheet" href="css/theme-colors/green.css" />
	<link rel="stylesheet" href="css/theme-colors/orange.css" />
	<link rel="stylesheet" href="css/theme-colors/pink.css" />
	<link rel="stylesheet" href="css/theme-colors/purple.css" />
	<link rel="stylesheet" href="css/theme-colors/red.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]-->

	<link rel="shortcut icon" href="images/favicons/favicon.ico">

</head>

<body class="home">

	<!-- Preloader -->
	<div class="preloader">
		<div class="centrize full-width">
			<div class="vertical-center">
				<div class="spinner">
					<div class="double-bounce1"></div>
					<div class="double-bounce2"></div>
				</div>
			</div>
		</div>
	</div>
	
	<!-- Container -->
	<div class="container">

		<!-- Cursor -->
		<div class="cursor-follower"></div>
	
		<!-- Header -->
		<header class="header">
			<div class="head-top">

				<!-- menu button -->
				<a href="#" class="menu-btn"><span></span></a>

				<!-- logo -->
				<div class="logo hover-masks-logo">
					<a href="#">
						<span class="mask-lnk">Alejandro <strong>Abeyta</strong></span>
						<span class="mask-lnk mask-lnk-hover">Download <strong>CV</strong></span>
					</a>
				</div>
				
				<!-- top menu -->						
				<div class="top-menu hover-masks">
					<div class="top-menu-nav">	
						<div class="menu-topmenu-container">
							<ul class="menu">
								<li class="menu-item menu-item-has-children current-menu-item">
									<a href="index.html">Home</a>
									<ul class="sub-menu">
										<li class="menu-item current-menu-item"><a href="index.html">Home Default</a></li>
										<li class="menu-item"><a href="index_creative.html">Home Creative</a></li>
										<li class="menu-item"><a href="index_slider.html">Home Slider</a></li>
										<li class="menu-item"><a href="index_personal.html">Home Personal</a></li>
										<li class="menu-item"><a href="index_image.html">Home Image</a></li>
										<li class="menu-item"><a href="index_video.html">Home Video</a></li>
									</ul>
								</li>
								<li class="menu-item menu-item-has-children">
									<a href="resume.html">Resume</a>
									<ul class="sub-menu">
										<li class="menu-item"><a href="resume.html">Resume Default</a></li>
										<li class="menu-item"><a href="resume_image.html">Resume Image</a></li>
										<li class="menu-item"><a href="resume_creative.html">Resume Creative</a></li>
									</ul>
								</li>
								<li class="menu-item menu-item-has-children">
									<a href="works.html">Works</a>
									<ul class="sub-menu">
										<li class="menu-item"><a href="works.html">Works Default</a></li>
										<li class="menu-item"><a href="works_creative.html">Works Creative</a></li>
										<li class="menu-item"><a href="work_single.html">Work Single</a></li>
										<li class="menu-item"><a href="work_single_image.html">Work Single Image</a></li>
										<li class="menu-item"><a href="work_single_creative.html">Work Single Creative</a></li>
									</ul>
								</li>
								<li class="menu-item menu-item-has-children">
									<a href="contacts.html">Contact</a>
									<ul class="sub-menu">
										<li class="menu-item"><a href="contacts.html">Contact Default</a></li>
										<li class="menu-item"><a href="contacts_image.html">Contact Image</a></li>
										<li class="menu-item"><a href="contacts_creative.html">Contact Creative</a></li>
									</ul>
								</li>
							</ul>
						</div>
					</div>
				</div>

			</div>
		</header>
		
		<!-- Wrapper -->
		<div class="wrapper">	

			<!-- Section Started -->
			<div class="section started" id="section-started">

				

			</div>

		</div>
		
		<!-- Footer -->
		<footer class="footer">
			<div class="copy">
				<p>E: alejandroa@gmail.com</p>
				<p>T: +1 (234) 567 80 98</p>
			</div>
			<div class="soc-box">
				<div class="follow-label">Follow Me</div>
				<div class="soc">
					<a target="_blank" href="https://www.pinterest.com/">
						<span class="icon fab fa-pinterest"></span>
					</a>
					<a target="_blank" href="https://www.instagram.com/">
						<span class="icon fab fa-instagram"></span>
					</a>
					<a target="_blank" href="https://dribbble.com/">
						<span class="icon fab fa-dribbble"></span>
					</a>
				</div>
			</div>
			<div class="clear"></div>
		</footer>

		<!-- Lines -->
		<div class="lines">
			<div class="content">
				<div class="line-col"></div>
				<div class="line-col"></div>
				<div class="line-col"></div>
				<div class="line-col"></div>
				<div class="line-col"></div>
			</div>
		</div>
		
	</div>

	<!-- Scripts -->
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.validate.js"></script>
	<script src="js/jarallax.js"></script>
	<script src="js/magnific-popup.js"></script>
	<script src="js/simpleParallax.js"></script>
	<script src="js/typed.js"></script>
	<script src="js/jarallax.js"></script>
	<script src="js/jarallax-video.js"></script>
	<script src="js/jarallax-element.js"></script>
	<script src="js/imagesloaded.pkgd.js"></script>
	<script src="js/isotope.pkgd.js"></script>
	<script src="js/swiper.js"></script>
	<script src="js/grained.js"></script>
	<script src="js/scripts.js"></script>

</body>
</html>

HTML structure of "Resume" page sections

					
<!-- Section Started -->
<div class="section started section-title" id="section-started">

	<!-- background -->
	<div class="video-bg">
		<div class="video-bg-mask"></div>
		<div class="video-bg-texture" id="grained_container"></div>
	</div>

	<!-- started content -->
	<div class="centrize full-width">
		<div class="vertical-center">
			<div class="started-content">
				<h1 class="h-title">Resume</h1>
				<div class="h-subtitles">
					<div class="h-subtitle typing-bread">
						<p class="breadcrumbs">
							<a href="index.html">Home</a> / Resume
						</p>
					</div>
					<span class="typed-bread"></span>
				</div>
			</div>
		</div>
	</div>

	<!-- mosue button -->
	<a href="#" class="mouse_btn" style="display: none;"><span class="icon fas fa-chevron-down"></span></a>

</div>

<!-- Section About -->
<div class="section about" id="section-about">
	<div class="content content-box">

		<!-- image -->
		<div class="image">
			<img src="images/man2.jpg" alt="" />
		</div>

		<!-- desc -->
		<div class="desc">
			<p>Hello! I’m Daniel Curry. Web designer from USA, California, San Francisco. I have rich experience in web site design and building, also I am good at wordpress. I love to talk with you about our unique.</p>
			<div class="info-list">
				<ul>
					<li><strong>Age:</strong> 24</li>
					<li><strong>Residence:</strong> USA</li>
					<li><strong>Freelance:</strong> Available</li>
					<li><strong>Address:</strong> San Francisco</li>
					<li><strong>Phone:</strong> +1 256 254 84 56</li>
					<li><strong>E-mail:</strong> alejandroa@gmail.com</li>
				</ul>
			</div>
			<div class="bts">
				<a href="#" class="btn hover-animated">
					<span class="circle"></span>
					<span class="lnk">Download CV</span>
				</a>
			</div>
		</div>

		<div class="clear"></div>
	</div>
</div>

<!-- Section Service -->
<div class="section service" id="section-services">
	<div class="content">

		<!-- title -->
		<div class="title">
			<div class="title_inner">Services</div>
		</div>

		<!-- service items -->
		<div class="service-items">

			<div class="service-col">
				<div class="service-item content-box">
					<div class="icon"><span class="fas fa-code"></span></div>
					<div class="name">Web Development</div>
					<div class="text">Modern and mobile-ready website that will help you reach all of your marketing.</div>
				</div>
			</div>
			
			<div class="service-col">
				<div class="service-item content-box">
					<div class="icon"><span class="fas fa-music"></span></div>
					<div class="name">Music Writing</div>
					<div class="text">Music copying, writing, creating, transcription, arranging and services.</div>
				</div>
			</div>

			<div class="service-col">
				<div class="service-item content-box">
					<div class="icon"><span class="fas fa-ad"></span></div>
					<div class="name">Advetising</div>
					<div class="text">Advertising services include television, radio, print, mail, and web apps.</div>
				</div>
			</div>

			<div class="service-col">
				<div class="service-item content-box">
					<div class="icon"><span class="fas fa-gamepad"></span></div>
					<div class="name">Game Development</div>
					<div class="text">Developing memorable and unique mobile android, ios and video games.</div>
				</div>
			</div>

			<div class="service-col">
				<div class="service-item content-box">
					<div class="icon"><span class="fas fa-camera"></span></div>
					<div class="name">Photography</div>
					<div class="text">Our in-house photography services team made up of professional photographers.</div>
				</div>
			</div>

			<div class="service-col">
				<div class="service-item content-box">
					<div class="icon"><span class="fas fa-mobile-alt"></span></div>
					<div class="name">Android Application</div>
					<div class="text">Games, playing music, handle network transactions, interacting content etc.</div>
				</div>
			</div>

		</div>

		<div class="clear"></div>
	</div>
</div>

<!-- Section Resume -->
<div class="section resume" id="section-history">
	<div class="content">
		<div class="cols">

			<div class="col col-md">

				<!-- title -->
				<div class="title">
					<div class="title_inner">Experience</div>
				</div>
				
				<!-- resume items -->
				<div class="resume-items">
					
					<div class="resume-item content-box active">
						<div class="date">2013 - Present</div>
						<div class="name">Art Director - Facebook Inc.</div>
						<div class="text">Collaborate with creative and development teams on the execution of ideas.</div>
					</div>

					<div class="resume-item content-box">
						<div class="date">2011 - 2012</div>
						<div class="name">Front-End Developer - Google Inc.</div>
						<div class="text">Monitored technical aspects of the front-end delivery for projects.</div>
					</div>

					<div class="resume-item content-box">
						<div class="date">2009 - 2010</div>
						<div class="name">Senior Developer - ABC Inc.</div>
						<div class="text">Optimize your website and apps performance using latest technology.</div>
					</div>

				</div>

			</div>
			
			<div class="col col-md">

				<!-- title -->
				<div class="title">
					<div class="title_inner">Education</div>
				</div>
				
				<!-- resume items -->
				<div class="resume-items">

					<div class="resume-item content-box">
						<div class="date">2006 - 2008</div>
						<div class="name">Art University - New York</div>
						<div class="text">Bachelors Degree in Computer Science ABC Technical Institute, Jefferson, Missouri.</div>
					</div>

					<div class="resume-item content-box">
						<div class="date">2005 - 2006</div>
						<div class="name">Programming Course - Paris</div>
						<div class="text">Coursework - Git, WordPress, Javascript, iOS, Android, CSS, and JavaScript.</div>
					</div>

					<div class="resume-item content-box">
						<div class="date">2004 - 2005</div>
						<div class="name">Web Design Course - London</div>
						<div class="text">Converted Photoshop layouts to web pages using HTML, CSS, and JavaScript.</div>
					</div>

				</div>
			</div>

		</div>
	</div>
</div>

<!-- Section Design Skills -->
<div class="section skills" id="section-skills">
	<div class="content">

		<!-- title -->
		<div class="title">
			<div class="title_inner">Design Skills</div>
		</div>

		<!-- skills items -->
		<div class="skills percent content-box">
			<ul>
				<li> 
					<div class="name">Web Design</div>
					<div class="progress ">
						<div class="percentage" style="width: 90%;">
							<span class="percent">90%</span>
						</div>
					</div>
				</li>
				<li> 
					<div class="name">Illustrations</div>
					<div class="progress ">
						<div class="percentage" style="width: 70%;">
							<span class="percent">70%</span>
						</div>
					</div>
				</li>
				<li> 
					<div class="name">Photoshop</div>
					<div class="progress ">
						<div class="percentage" style="width: 95%;">
							<span class="percent">95%</span>
						</div>
					</div>
				</li>
				<li>
					<div class="name">Graphic Design</div>
					<div class="progress ">
						<div class="percentage" style="width: 85%;">
							<span class="percent">85%</span>
						</div>
					</div>
				</li>
			</ul>
		</div>

	</div>
</div>

<!-- Section Languages Skills -->
<div class="section skills" id="section-skills-lang">
	<div class="content">

		<!-- title -->
		<div class="title">
			<div class="title_inner">Languages Skills</div>
		</div>

		<!-- skills items -->
		<div class="skills dotted content-box">
			<ul>
				<li> 
					<div class="name">English</div>
					<div class="progress">
						<div class="percentage" style="width: 90%;">
							<span class="percent">90%</span>
						</div>
					</div>
				</li>
				<li> 
					<div class="name">German</div>
					<div class="progress">
						<div class="percentage" style="width: 70%;">
							<span class="percent">70%</span>
						</div>
					</div>
				</li>
				<li> 
					<div class="name">Italian</div>
					<div class="progress">
						<div class="percentage" style="width: 55%;">
							<span class="percent">55%</span>
						</div>
					</div>
				</li>
				<li> 
					<div class="name">French</div>
					<div class="progress">
						<div class="percentage" style="width: 85%;">
							<span class="percent">85%</span>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>

</div>

<!-- Section Coding Skills -->
<div class="section skills" id="section-skills-code">
	<div class="content">
		
		<!-- title -->
		<div class="title">
			<div class="title_inner">Coding Skills</div>
		</div>

		<!-- skills items -->
		<div class="skills circles content-box">
			<ul>
				<li> 
					<div class="name">WordPress</div>
					<div class="progress p90"> <!-- p90 = 90% circle fill color -->
						<div class="percentage">
							<span class="percent">90%</span>
						</div>
						<span>90%</span>
					</div>
				</li>
				<li> 
					<div class="name">PHP / MYSQL</div>
					<div class="progress p75"> <!-- p75 = 75% circle fill color -->
						<div class="percentage">
							<span class="percent">75%</span>
						</div>
						<span>75%</span>
					</div>
				</li>
				<li> 
					<div class="name">Angular / JavaScript</div>
					<div class="progress p85"> <!-- p85 = 85% circle fill color -->
						<div class="percentage">
							<span class="percent">85%</span>
						</div>
						<span>85%</span>
					</div>
				</li>
				<li> 
					<div class="name">HTML / CSS</div>
					<div class="progress p95"> <!-- p95 = 95% circle fill color -->
						<div class="percentage">
							<span class="percent">95%</span>
						</div>
						<span>95%</span>
					</div>
				</li>
			</ul>
		</div>

	</div>
</div>

<!-- Section Knowladge Skills -->
<div class="section skills" id="section-skills-know">
	<div class="content">

		<!-- title -->
		<div class="title">
			<div class="title_inner">Knowledge</div>
		</div>

		<!-- skills -->
		<div class="skills list content-box">
			<ul>
				<li> 
					<div class="name">Website hosting</div>
				</li>
				<li> 
					<div class="name">iOS and android apps</div>
				</li>
				<li> 
					<div class="name">Create logo design</div>
				</li>
				<li> 
					<div class="name">Design for print</div>
				</li>
				<li> 
					<div class="name">Modern and mobile-ready</div>
				</li>
				<li> 
					<div class="name">Advertising services include</div>
				</li>
				<li> 
					<div class="name">Graphics and animations</div>
				</li>
				<li> 
					<div class="name">Search engine marketing</div>
				</li>
			</ul>
		</div>

	</div>
</div>

<!-- Section Interests -->
<div class="section service" id="section-interests">
	<div class="content">

		<!-- title -->
		<div class="title">
			<div class="title_inner">Interests</div>
		</div>

		<!-- interests items -->
		<div class="service-items">

			<div class="service-col">
				<div class="service-item content-box">
					<div class="icon"><span class="fas fa-baseball-ball"></span></div>
					<div class="name">Basketball</div>
					<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
				</div>
			</div>

			<div class="service-col">
				<div class="service-item content-box">
					<div class="icon"><span class="fas fa-campground"></span></div>
					<div class="name">Camping</div>
					<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
				</div>
			</div>

			<div class="service-col">
				<div class="service-item content-box">
					<div class="icon"><span class="fas fa-chess-knight"></span></div>
					<div class="name">Chess</div>
					<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
				</div>
			</div>

			<div class="service-col">
				<div class="service-item content-box">
					<div class="icon"><span class="fas fa-headphones"></span></div>
					<div class="name">Music</div>
					<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
				</div>
			</div>

		</div>

		<div class="clear"></div>
	</div>
</div>

<!-- Section Clients -->
<div class="section clients" id="section-clients">
	<div class="content">

		<!-- title -->
		<div class="title">
			<div class="title_inner">Clients</div>
		</div>

		<!-- clients items -->
		<div class="content-box">
			<div class="clients-items">

				<div class="clients-col">
					<div class="clients-item">
						<a target="_blank" href="#">
							<img src="images/client1.png" alt="" />
						</a>
					</div>
				</div>

				<div class="clients-col">
					<div class="clients-item">
						<a target="_blank" href="#">
							<img src="images/client3.png" alt="" />
						</a>
					</div>
				</div>

				<div class="clients-col">
					<div class="clients-item">
						<a target="_blank" href="#">
							<img src="images/client2.png" alt="" />
						</a>
					</div>
				</div>

				<div class="clients-col">
					<div class="clients-item">
						<a target="_blank" href="#">
							<img src="images/client4.png" alt="" />
						</a>
					</div>
				</div>

			</div>
		</div>
		
		<div class="clear"></div>
	</div>
</div>

HTML structure of "Works" page sections

					
<!-- Section Started -->
<div class="section started section-title" id="section-started">

	<!-- background -->
	<div class="video-bg">
		<div class="video-bg-mask"></div>
		<div class="video-bg-texture" id="grained_container"></div>
	</div>

	<!-- started content -->
	<div class="centrize full-width">
		<div class="vertical-center">
			<div class="started-content">
				<h1 class="h-title">Works</h1>
				<div class="h-subtitles">
					<div class="h-subtitle typing-bread">
						<p class="breadcrumbs">
							<a href="index.html">Home</a> / Works
						</p>
					</div>
					<span class="typed-bread"></span>
				</div>
			</div>
		</div>
	</div>

	<!-- mosue button -->
	<a href="#" class="mouse_btn" style="display: none;"><span class="icon fas fa-chevron-down"></span></a>

</div>

<!-- Works -->
<div class="section works" id="section-portfolio">
	<div class="content">
	
		<!-- portfolio filter -->
		<div class="filter-menu content-box">
			<div class="filters">
				<div class="btn-group">
					<label data-text="All" class="glitch-effect"><input type="radio" name="fl_radio" value=".box-item" />All</label>
				</div>
				<div class="btn-group">
					<label data-text="Video"><input type="radio" name="fl_radio" value=".f-video" />Video</label>
				</div>
				<div class="btn-group">
					<label data-text="Music"><input type="radio" name="fl_radio" value=".f-music" />Music</label>
				</div>
				<div class="btn-group">
					<label data-text="Links"><input type="radio" name="fl_radio" value=".f-links" />Links</label>
				</div>
				<div class="btn-group">
					<label data-text="Image"><input type="radio" name="fl_radio" value=".f-image" />Image</label>
				</div>
				<div class="btn-group">
					<label data-text="Gallery"><input type="radio" name="fl_radio" value=".f-gallery" />Gallery</label>
				</div>
				<div class="btn-group">
					<label data-text="Content"><input type="radio" name="fl_radio" value=".f-content" />Content</label>
				</div>
			</div>
		</div>
		
		<!-- portfolio items -->
		<div class="box-items portfolio-items">

			<div class="box-item f-gallery">
				<div class="image">
					<a href="#gallery-1" class="has-popup-gallery hover-animated">
						<img src="images/work1.jpg" class="wp-post-image" alt="" />
						<span class="info circle">
							<span class="centrize full-width">
								<span class="vertical-center">
									<span class="icon fas fa-images"></span>
									<span class="desc">
										<span class="category">Gallery</span>
										<span class="name">Shot in Iceland</span>
									</span>
								</span>
							</span>
						</span>
					</a>
					<div id="gallery-1" class="mfp-hide">
						<a href="images/work1.jpg"></a>
						<a href="images/work2.jpg"></a>
						<a href="images/work3.jpg"></a>
						<a href="images/work4.jpg"></a>
					</div>	
				</div>
			</div>

			<div class="box-item f-links"> <!-- add class "animate-to-page" if need animated transition to page and delete target="_blank" -->
				<div class="image">
					<a href="https://google.com/" class="has-popup-link hover-animated" target="_blank">
						<img src="images/work3.jpg" class="wp-post-image" alt="" />
						<span class="info circle">
							<span class="centrize full-width">
								<span class="vertical-center">
									<span class="icon fas fa-link"></span>
									<span class="desc">
										<span class="category">Links</span>
										<span class="name">Nike Red</span>
									</span>
								</span>
							</span>
						</span>
					</a>	
				</div>
			</div>

			<div class="box-item f-video">
				<div class="image">
					<a href="https://youtu.be/S4L8T2kFFck" class="has-popup-video hover-animated">
						<img src="images/work2.jpg" class="wp-post-image" alt="" />
						<span class="info circle">
							<span class="centrize full-width">
								<span class="vertical-center">
									<span class="icon fas fa-video"></span>
									<span class="desc">
										<span class="category">Video</span>
										<span class="name">Fertility of Some Plants</span>
									</span>
								</span>
							</span>
						</span>
					</a>
				</div>
			</div>

			<div class="box-item f-image">
				<div class="image">
					<a href="images/work4.jpg" class="has-popup-image hover-animated">
						<img src="images/work4.jpg" class="wp-post-image" alt="" />
						<span class="info circle">
							<span class="centrize full-width">
								<span class="vertical-center">
									<span class="icon fas fa-image"></span>
									<span class="desc">
										<span class="category">Image</span>
										<span class="name">Inspiration in Cap Haitian</span>
									</span>
								</span>
							</span>
						</span>
					</a>
				</div>
			</div>

			<div class="box-item f-image">
				<div class="image">
					<a href="images/work7.jpg" class="has-popup-image hover-animated">
						<img src="images/work7.jpg" class="wp-post-image" alt="" />
						<span class="info circle">
							<span class="centrize full-width">
								<span class="vertical-center">
									<span class="icon fas fa-image"></span>
									<span class="desc">
										<span class="category">Image</span>
										<span class="name">Water and Shore</span>
									</span>
								</span>
							</span>
						</span>
					</a>
				</div>
			</div>

			<div class="box-item f-music">
				<div class="image">
					<a href="https://w.soundcloud.com/player/?visual=true&url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F221650664&show_artwork=true" class="has-popup-music hover-animated">
						<img src="images/work6.jpg" class="wp-post-image" alt="" />
						<span class="info circle">
							<span class="centrize full-width">
								<span class="vertical-center">
									<span class="icon fas fa-music"></span>
									<span class="desc">
										<span class="category">Music</span>
										<span class="name">Dark Bike</span>
									</span>
								</span>
							</span>
						</span>
					</a>
				</div>
			</div>

			<div class="box-item f-gallery">
				<div class="image">
					<a href="#gallery-2" class="has-popup-gallery hover-animated">
						<img src="images/work5.jpg" class="wp-post-image" alt="" />
						<span class="info circle">
							<span class="centrize full-width">
								<span class="vertical-center">
									<span class="icon fas fa-images"></span>
									<span class="desc">
										<span class="category">Gallery</span>
										<span class="name">Undulating Space</span>
									</span>
								</span>
							</span>
						</span>
					</a>
					<div id="gallery-2" class="mfp-hide">
						<a href="images/work5.jpg"></a>
						<a href="images/work1.jpg"></a>
						<a href="images/work2.jpg"></a>
						<a href="images/work3.jpg"></a>
					</div>
				</div>
			</div>

			<div class="box-item f-content">
				<div class="image">
					<a href="#popup-1" class="has-popup-media hover-animated">
						<img src="images/work8.jpg" class="wp-post-image" alt="" />
						<span class="info circle">
							<span class="centrize full-width">
								<span class="vertical-center">
									<span class="icon fas fa-plus"></span>
									<span class="desc">
										<span class="category">Content</span>
										<span class="name">Curved Ceiling Ribs</span>
									</span>
								</span>
							</span>
						</span>
					</a>
				</div>
				<div id="popup-1" class="popup-box mfp-fade mfp-hide">
					<div class="content">
						<div class="image" style="background-image: url(images/work8.jpg);"></div>
						<div class="desc single-post-text">
							<div class="category">Content</div>
							<h4>Hand holding pyramid painting</h4>
							<p>
								Now there is more fashion. There is no so-called trends. Now chase after anything not necessary — nor for fashionable color nor the shape, nor for style. Think about the content that you want to invest in a created object, and only then will form. The thing is your spirit. A spirit unlike forms hard copy.
							</p>
							<ul>
								<li>Now there is more fashion. There is no so-called trends.</li>
								<li>Now chase after anything not necessary — nor for fashionable color nor the shape, nor for style.</li>
								<li>Think about the content that you want to invest in a created object, and only then will form.</li>
								<li>The thing is your spirit. A spirit unlike forms hard copy.</li>
							</ul>
							<p>
								Now there is more fashion. There is no so-called trends. Now chase after anything not necessary — nor for fashionable color nor the shape, nor for style. Think about the content that you want to invest in a created object, and only then will form. The thing is your spirit. A spirit unlike forms hard copy.
							</p>
							<a href="works_single_1.html" class="btn hover-animated">
								<span class="circle"></span>
								<span class="lnk">View Project</span>
							</a>
						</div>
					</div>
				</div>
			</div>

		</div>

		<div class="clear"></div>
	</div>
</div>

HTML structure of "Works Single" page sections

					
<!-- Section Started -->
<div class="section started section-title" id="section-started">

	<!-- background -->
	<div class="video-bg">
		<div class="video-bg-mask"></div>
		<div class="video-bg-texture" id="grained_container"></div>
	</div>

	<!-- started content -->
	<div class="centrize full-width">
		<div class="vertical-center">
			<div class="started-content">
				<h1 class="h-title">Shot in Iceland</h1>
				<div class="h-subtitles">
					<div class="h-subtitle typing-bread">
						<p class="breadcrumbs">
							<a href="index.html">Home</a> / <a href="works.html">Works</a> / Shot in Iceland
						</p>
					</div>
					<span class="typed-bread"></span>
				</div>
			</div>
		</div>
	</div>

	<!-- mosue button -->
	<a href="#" class="mouse_btn" style="display: none;"><span class="icon fas fa-chevron-down"></span></a>

</div>

<!-- Work Single -->
<div class="section blog">
	<div class="content content-box">
		<div class="single-post-text">

			<!-- portfolio content -->
			<div class="portfolio-info portfolio-cols">
				<div class="description-col">
					
					<!-- title -->
					<div class="title">
						<div class="title_inner">Description</div>
					</div>

					<!-- text -->
					<div class="">
						<p>
							Now there is more fashion. There is no so-called trends. Now chase after anything not necessary — nor for fashionable color nor the shape, nor for style. Think about the content that you want to invest in a created object, and only then will form. The thing is your spirit. A spirit unlike forms hard copy.
						</p>
						<p>
							Here choose yourself like that, without any looking back, do your personal, home, small fashion, and all will be well.
						</p>
						<p>
							My job is simple and sophisticated, so it is possible to describe and simple, and flowery language. I love the feel and sophistication of its superiority. I like people with a keen mind and at the same time easy to talk to. These qualities can be combined perfectly natural. However, things like people look miserable, if these properties are connected to them artificially.
						</p>

						<!-- gallery -->
						<div class="gallery-item">
							<p>
								<a href="images/work1.jpg">
									<img src="images/work1.jpg" alt="" />
								</a>
							</p>
							<p>
								<a href="images/work2.jpg">
									<img src="images/work2.jpg" alt="" />
								</a>
							</p>
							<p>
								<a href="images/work3.jpg">
									<img src="images/work3.jpg" alt="" />
								</a>
							</p>
						</div>

					</div>

				</div>
				<div class="details-col">

					<!-- title -->
					<div class="title">
						<div class="title_inner">Details</div>
					</div>

					<!-- details -->
					<ul class="details-list">
						<li><strong>Categories:</strong> Gallery</li>
						<li><strong>Date:</strong> 10 July 2019</li>
						<li><strong>Client:</strong> Envato</li>
						<li><strong>Live Preview:</strong> <a href="https://google.com/" target="_blank">www.envato.com</a></li>
					</ul>

				</div>
			</div>

		</div>
		<div class="clear"></div>
	</div>
</div>

HTML structure of "Contacts" page sections

					  
<!-- Section Started -->
<div class="section started section-title" id="section-started">

	<!-- background -->
	<div class="video-bg">
		<div class="video-bg-mask"></div>
		<div class="video-bg-texture" id="grained_container"></div>
	</div>

	<!-- started content -->
	<div class="centrize full-width">
		<div class="vertical-center">
			<div class="started-content">
				<h1 class="h-title">Contacts</h1>
				<div class="h-subtitles">
					<div class="h-subtitle typing-bread">
						<p class="breadcrumbs">
							<a href="index.html">Home</a> / Contacts
						</p>
					</div>
					<span class="typed-bread"></span>
				</div>
			</div>
		</div>
	</div>

	<!-- mosue button -->
	<a href="#" class="mouse_btn" style="display: none;"><span class="icon fas fa-chevron-down"></span></a>

</div>

<!-- Section Contacts Info -->
<div class="section contacts" id="section-contacts-info">
	<div class="content">

		<!-- title -->
		<div class="title">
			<div class="title_inner">Contacts Info</div>
		</div>

		<!-- contacts items -->
		<div class="service-items">

			<div class="service-col">
				<div class="service-item content-box">
					<div class="icon"><span class="fas fa-phone"></span></div>
					<div class="name">Phone</div>
					<div class="text">+ (231) 456 67 89</div>
				</div>
			</div>
			
			<div class="service-col">
				<div class="service-item content-box">
					<div class="icon"><span class="fas fa-envelope"></span></div>
					<div class="name">Email</div>
					<div class="text"><a href="mailto:steve-pearson@gmail.com">steve-pearson@gmail.com</a></div>
				</div>
			</div>

			<div class="service-col">
				<div class="service-item content-box">
					<div class="icon"><span class="fas fa-map-marker-alt"></span></div>
					<div class="name">Address</div>
					<div class="text">2621 W Pico Blvd, Los Angeles</div>
				</div>
			</div>

			<div class="service-col">
				<div class="service-item content-box">
					<div class="icon"><span class="fas fa-user-tie"></span></div>
					<div class="name">Freelance Available</div>
					<div class="text">I am available for Freelance hire</div>
				</div>
			</div>

		</div>

		<div class="clear"></div>
	</div>
</div>

<!-- Section Contacts Form -->
<div class="section contacts" id="section-contacts">
	<div class="content">

		<!-- title -->
		<div class="title">
			<div class="title_inner">Contacts Form</div>
		</div>

		<!-- form -->
		<div class="contact_form content-box">
			<form id="cform" method="post">
				<div class="group-val">
						<input type="text" name="name" placeholder="Name" />
				</div>
				<div class="group-val">
					<input type="email" name="email" placeholder="Email" />
				</div>
				<div class="group-val ct-gr">
					<textarea name="message" placeholder="Message"></textarea>
				</div>
				<div class="group-bts">
					<button type="submit" class="btn hover-animated">
						<span class="circle"></span>
						<span class="lnk">Send Message</span>
					</button>
				</div>
			</form>
			<div class="alert-success">
				<p>Thanks, your message is sent successfully.</p>
			</div>
		</div>

	</div>
	<div class="clear"></div>
</div>

Icons

In this template are defined some of classes for icons, your can see all icons here - https://fontawesome.com/icons?d=gallery&s=brands,solid&m=free

Sourse & Credits

Scripts

Animate.css https://daneden.github.io/animate.css/
jQuery https://jquery.com/
Isotope https://isotope.metafizzy.co/
imagesLoaded http://imagesloaded.desandro.com/
jQuery Validation Plugin http://jqueryvalidation.org/
Magnific Popup http://dimsemenov.com/plugins/magnific-popup/
Swiper https://swiperjs.com/
SimpleParallax https://simpleparallax.com/
Jarallax.js https://github.com/nk-o/jarallax
Typed.js https://mattboldt.com
Grained.js https://github.com/sarathsaleem/grained

Fonts

Roboto https://fonts.google.com/specimen/Roboto
FontAwesome - https://fontawesome.com/icons?d=gallery&s=brands,solid&m=free

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/