Noisee - Personal/CV/Resume HTML 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/
├──template_colors/		
│──│──blue(yellow, green, pink, purple, red)/
│──│──│──css/
│──│──│──│──animate.css
│──│──│──│──basic.css
│──│──│──│──layout.css
│──│──│──│──ionicons.css
│──│──│──│──magnific-popup.css
│──│──│──fonts/
│──│──│──images/
│──│──│──js/
│──│──│──│──main.js
│──│──│──│──imagesloaded.pkgd.js
│──│──│──│──jquery.min.js
│──│──│──│──jquery.validate.js
│──│──│──│──magnific-popup.js
│──│──│──│──masonry.pkgd.js
│──│──│──│──jquery.mb.YTPlayer.js
│──│──│──│──grained.js
│──│──│──│──jquery.hover3d.js
│──│──│──│──particles.js
│──│──│──│──particles-setting.js
│──│──│──│──scrollreveal.js
│──│──│──less/
│──│──│──│──basic.less
│──│──│──│──layout.less
│──│──│──│──setting.less
│──│──│──index.html
│──│──│──index-particles.html
│──│──│──index-video.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
    • basic.css - CSS for basic styles
    • layout.css - CSS for template layout
  • less - all LESS for pages
    • setting.less - LESS for setting template
    • basic.less - LESS for basic styles
    • layout.less - LESS for template layout
  • js - all JS for pages
    • main.js - Main JS for template
    • 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" items
    • grained.js - Plugin for noise background effects
    • jquery.mb.YTPlayer.js - Plugin for Youtube Video Background
    • jquery.hover3d.js - 3D Hover Plugin
    • particles.js - Plugin for Particles Background
    • particles-setting.js - Plugin for setting Particles
    • scrollreveal.js - Plugin for animate blocks on scroll

Settings

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

Name Value Description
Colors setting for template elements
@default-color #868686 Default color
@extra-color #969696 Extra color
@dark-color #262626 Dark color
@light-color #f6f6f6 Light color
@white-color #fff White color
@extra-white-color #fff Extra White color
@active-color #304fff template color
@error-color red Error field color
Fonts setting for template
@default-font 'Hind' Default font for template
@extra-font 'Source Sans Pro' Extra font for template
@icons-font 'Ionicons' Icons font for template
Sizes setting for template
@large-size 18px Large Size
@default-size 16px Default Size
@small-size 14px Small Size
@extra-small-size 12px Extra Small Size
@title-size 36px Title Size
@subtitle-size 16px Subtitle Size
@h1-size 40px H1 Size
@h2-size 36px H2 Size
@h3-size 32px H3 Size
@h4-size 28px H4 Size
@h5-size 24px H5 Size
@h6-size 19px H6 Size
@default-icon-size 20px Default icons size
@extra-icon-size 16px Extra icons size
@default-letter-spacing 0.015em Default Letter Spacing
@extra-letter-spacing 0.03em Extra Letter Spacing
@line-height 28px Default Line-height for text
Colors template
@active-color #304fff Blue template color
@active-color #689f38 Green template color
@active-color #ffe164 Yellow template color
@active-color #ff4181 Pink template color
@active-color #9C27B0 Purple template color
@active-color #ed3b3b Red template 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=Hind:300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i" rel="stylesheet">

Next step is to set the @default-font and @extra-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 lang="en">
<head>
	
	<!-- Basic -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>mCard - Material vCard/CV/Resume HTML 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:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic" rel="stylesheet">
	
	<!-- CSS -->
	<link rel="stylesheet" href="css/basic.css" />
	<link rel="stylesheet" href="css/layout.css" />
	<link rel="stylesheet" href="css/ionicons.css" />
	<link rel="stylesheet" href="css/owl.carousel.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]-->
	
	<!-- Favicon -->
	<link rel="shortcut icon" href="images/favicons/favicon.ico">
	
</head>

<body>
	
	<!-- Page -->
	<div class="page" id="home-section">

		<!-- 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>

		<!-- Started Background -->
		<div class="started-bg">
			<div id="particles-bg" class="slide" style="background-image: url(images/particles-bg.jpg);"></div>
		</div>

		<!-- Header -->
		<header>
			<div class="top-menu">
				<ul>
					<li class="active">
						<a class="btn_animated" href="#home-section"><span class="circle">Home</span></a>
					</li>
					<li>
						<a class="btn_animated" href="#about-section"><span class="circle">About</span></a>
					</li>
					<li>
						<a class="btn_animated" href="#skills-section"><span class="circle">Skills</span></a>
					</li>
					<li>
						<a class="btn_animated" href="#experience-section"><span class="circle">Experience</span></a>
					</li>
					<li>
						<a class="btn_animated" href="#service-section"><span class="circle">Services</span></a>
					</li>
					<li>
						<a class="btn_animated" href="#education-section"><span class="circle">Education</span></a>
					</li>
					<li>
						<a class="btn_animated" href="#works-section"><span class="circle">Portfolio</span></a>
					</li>
					<li>
						<a class="btn_animated" href="#clients-section"><span class="circle">Clients</span></a>
					</li>
					<li>
						<a class="btn_animated" href="#pricing-section"><span class="circle">Pricing</span></a>
					</li>
					<li>
						<a class="btn_animated" href="#blog-section"><span class="circle">Blog</span></a>
					</li>
					<li>
						<a class="btn_animated" href="#contact-section"><span class="circle">Contact Me</span></a>
					</li>
				</ul>
				<a href="#" class="menu-btn"><span></span></a>
			</div>
		</header>
		
		<!-- Container -->
		<div class="container">

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

			<!-- Footer -->
			<footer>
				<div class="copy">© 2016 mCard. All rights reserved.</div>
			</footer>
			
		</div>

	</div>
	
	<!-- jQuery Scripts -->
    <script src="js/jquery.min.js"></script>
	<script src="js/owl.carousel.min.js"></script>
	<script src="js/jquery.validate.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>
	<script src="js/scrollreveal.js"></script>
	<script src="js/jquery.mb.YTPlayer.js"></script>
	<script src="js/particles.js"></script>
	<script src="js/particles-setting.js"></script>

	<!-- Google map api -->
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	
	<!-- Main Scripts -->
	<script src="js/main.js"></script>
	
</body>
</html>

HTML structure of "Started" section

					
<!-- Section Started -->
<div class="section started">
	<div id="particles-bg" class="slide" style="background-image: url(images/slide-bg-1.jpg);"></div>
	<div class="st-box align-center">
		<div class="st-title">Hi, I'm John Brodie</div>
		<div class="st-subtitle">ux/ui designer & front-end developer</div>
		<div class="st-soc">
			<a target="blank" href="https://www.facebook.com"><i class="icon ion ion-social-facebook"></i></a>
			<a target="blank" href="https://github.com"><i class="icon ion ion-social-github"></i></a>
			<a target="blank" href="https://twitter.com"><i class="icon ion ion-social-twitter"></i></a>
			<a target="blank" href="https://www.youtube.com"><i class="icon ion ion-social-youtube"></i></a>
			<a target="blank" href="https://plus.google.com"><i class="icon ion ion-social-googleplus"></i></a>
		</div>
	</div>
</div>

HTML structure of "About" section

					
<!-- Section About -->
<div class="section about" id="about-section">
	<div class="fw">
		<div class="row">
			<div class="col col-m-12 col-t-6 col-d-6 animated">
				<div class="profile-image image-3d">
					<div class="image-3d-card">
						<img src="images/man.jpg" alt="" />
					</div>
				</div>
			</div>
			<div class="col col-m-12 col-t-6 col-d-6 animated">
				<div class="text-box">
					<h2>let me introduce myself<span class="point"></span></h2>
					<p>
						Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Sed ut perspiciatis unde omnis iste natus error.
					</p>
					<p>
						Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
					</p>
				</div>
				<div class="bts animated">
					<a href="#" class="btn"><i class="icon ion ion-android-download"></i>Download Resume</a>
					<a href="#" class="btn extra">Hire Me</a>
				</div>
			</div>
		</div>
	</div>
</div>

HTML structure of "Service" section

					
<!-- Section Service -->
<div class="section service" id="service-section">
	<div class="fw">
		<div class="titles align-left animated">
			<div class="title">what i do<span class="point"></span></div>
			<div class="subtitle">ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
		</div>
		<div class="row">
			<div class="col col-m-12 col-t-4 col-d-4 animated">
				<div class="service-item">
					<div class="name">ui/ux design</div>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod iaculis lobortis.
					</p>
				</div>
			</div>
			...
		</div>
		<div class="row">
			<div class="col col-m-12 col-t-4 col-d-4 animated">
				<div class="service-item">
					<div class="name">brand identity</div>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod iaculis lobortis.
					</p>
				</div>
			</div>
			...
		</div>
	</div>
</div>

HTML structure of "Portfolio" section

					
<!-- Section Portfolio -->
<div class="section works" id="works-section">
	<div class="fw">
		<div class="titles align-left animated">
			<div class="title">recent works<span class="point"></span></div>
			<div class="subtitle">ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
		</div>
		<div class="row box-items">
			<div class="col col-m-12 col-t-6 col-d-6 box-item animated">
				<div class="image image-3d">
					<div class="image-3d-card">
						<a href="#popup-1" class="has-popup"><img src="images/works/work1.jpg" alt="" /></a>
					</div>
				</div>
				<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">
							<h4>Realistic Business Cards MockUp</h4>
							<p>
								Here’s a new b-cards mock-up with several business cards scattered across the scene. The PSD file allows you to easily. Here’s a new b-cards mock-up with several business cards scattered across the scene.
							</p>
							<a href="#" class="btn">View Project</a>
						</div>
					</div>
				</div>
			</div>
			...
		</div>
		<div class="bts align-center animated">
			<a href="#" class="btn"><i class="icon ion ion-android-refresh"></i>Load more</a>
		</div>
	</div>
</div>

HTML structure of "Quotes" section

					
<!-- Section Quotes -->
<div class="section quotes" id="service-quotes">
	<div class="fw">
		<div class="q-titles align-center animated">
			<div class="subtitle">ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
			<div class="title">are you ready to start your project now?</div>
			<div class="bts">
				<a href="#" class="btn"><i class="icon ion ion-android-create"></i>Get Quotes</a>
			</div>
		</div>
	</div>
</div>

HTML structure of "Contacts" section

					
<!-- Section Contacts -->
<div class="section contacts" id="contact-section">
	<div class="fw">
		<div class="titles align-left animated">
			<div class="title">contact me<span class="point"></span></div>
			<div class="subtitle">ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
		</div>
		<div class="contact-form">
			<form id="cform" method="post">
				<div class="row">
					<div class="col col-m-12 col-t-6 col-d-6 animated">
						<div class="value">
							<input type="text" name="name" placeholder="name *" />
						</div>
					</div>
					<div class="col col-m-12 col-t-6 col-d-6 animated">
						<div class="value">
							<input type="tel" name="tel" placeholder="phone *" />
						</div>
					</div>
					<div class="col col-m-12 col-t-6 col-d-6 animated">
						<div class="value">
							<input type="text" name="email" placeholder="email *" />
						</div>
					</div>
					<div class="col col-m-12 col-t-6 col-d-6 animated">
						<div class="value">
							<input type="text" name="subject" placeholder="subject *" />
						</div>
					</div>
					<div class="col col-m-12 col-t-12 col-d-12 animated">
						<div class="value">
							<textarea name="message" placeholder="message"></textarea>
						</div>
					</div>
					<div class="col col-m-12 col-t-12 col-d-12 animated">
						<a href="#" class="btn" onclick="$('#cform').submit(); return false;"><i class="icon ion ion-android-send"></i>Send Message</a>
					</div>
				</div>
			</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 template are defined some of classes for icons, your can see all icons here - http://ionicons.com/.

Sourse & Credits

Scripts

Fonts

Images and Videos

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