mCard - Material vCard/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/
├──theme_colors/		
│──│──blue(orange, green, pink, purple, red)/
│──│──│──css/
│──│──│──│──animate.css
│──│──│──│──basic.css
│──│──│──│──layout.css
│──│──│──│──ionicons.css
│──│──│──│──magnific-popup.css
│──│──│──│──owl.carousel.css
│──│──│──fonts/
│──│──│──images/
│──│──│──js/
│──│──│──│──main.js
│──│──│──│──imagesloaded.pkgd.js
│──│──│──│──jquery.min.js
│──│──│──│──jquery.validate.js
│──│──│──│──magnific-popup.js
│──│──│──│──masonry.pkgd.js
│──│──│──│──masonry-filter.js
│──│──│──│──jquery.mb.YTPlayer.js
│──│──│──│──owl.carousel.min.js
│──│──│──│──particles.js
│──│──│──│──particles-setting.js
│──│──│──│──scrollreveal.js
│──│──│──less/
│──│──│──│──basic.less
│──│──│──│──layout.less
│──│──│──│──setting.less
│──│──│──index-1.html
│──│──│──index-1-particles.html
│──│──│──index-1-video.html
│──│──│──index-2.html
│──│──│──index-2-particles.html
│──│──│──index-2-video.html
│──│──│──blog.html
│──│──│──blog-page.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 theme layout
    • owl.carousel.css - CSS for owl carousel
  • less - all LESS for pages
    • setting.less - LESS for setting theme
    • basic.less - LESS for basic styles
    • layout.less - LESS for theme layout
  • js - all JS for pages
    • main.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" items
    • masonry-filter.js - Plugin for "Portfolio" filters
    • jquery.mb.YTPlayer.js - Plugin for Youtube Video Background
    • owl.carousel.min.js - Plugin for Owl Carousel
    • 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 theme you can use following settings, folder "/less/setting.less" .

Name Value Description
Colors setting for theme elements
@default-color #868686 Default color
@extra-color rgba(0,0,0,0.2) Extra color
@dark-color #363636 Dark color
@light-color #eee Light color
@white-color #fefefe White color
@active-color #304fff Theme color
@error-color red Error field color
Fonts setting for theme
@default-font 'Roboto' Default font for Theme
@icons-font 'Ionicons' Icons font for Theme
Sizes setting for theme
@large-size 17px Large Size
@default-size 16px Default Size
@small-size 14px Small Size
@extra-small-size 13px Extra Small Size
@title-size 42px Title Size
@subtitle-size 16px Subtitle Size
@h1-size 36px H1 Size
@h2-size 32px H2 Size
@h3-size 28px H3 Size
@h4-size 24px H4 Size
@h5-size 20px H5 Size
@h6-size 16px H6 Size
@large-icon-size 30px Large icons size
@default-icon-size 24px Default icons size
@extra-icon-size 21px Extra icons size
@small-icon-size 16px Small icons size
@default-letter-spacing 0.01em Default Letter Spacing
@extra-letter-spacing 0.03em Extra Letter Spacing
@line-height 25px Default Line-height for text
Colors Theme
@active-color #304fff Blue Theme color
@active-color #689f38 Green Theme color
@active-color #ef6c00 Orange Theme color
@active-color #ff4181 Pink Theme color
@active-color #9C27B0 Purple Theme color
@active-color #ed3b3b Red 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:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=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 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

					
<!-- Started -->
<div class="section started">
	<div class="st-box">
		<div class="st-bts">
			<a href="mailto:smorgan@domain.com" class="btn_animated">
				<span class="circle"><i class="icon ion ion-plus"></i></span>
			</a>
		</div>
		<div class="st-image"><img src="images/man.png" alt="" /></div>
		<div class="st-title">Steve Morgan</div>
		<div class="st-subtitle">UX/UI Designer & Front-end Developer</div>
		<div class="st-soc">
			<a target="blank" href="https://www.facebook.com/" class="btn_animated">
				<span class="circle"><i class="icon ion ion-social-facebook"></i></span>
			</a>
			<a target="blank" href="https://github.com/" class="btn_animated">
				<span class="circle"><i class="icon ion ion-social-github"></i></span>
			</a>
			<a target="blank" href="https://twitter.com/" class="btn_animated">
				<span class="circle"><i class="icon ion ion-social-twitter"></i></span>
			</a>
			<a href="skype:smorgan" class="btn_animated">
				<span class="circle"><i class="icon ion ion-social-skype"></i></span>
			</a>
			<a target="blank" href="https://plus.google.com/" class="btn_animated">
				<span class="circle"><i class="icon ion ion-social-googleplus"></i></span>
			</a>
		</div>
	</div>
</div>

HTML structure of "About" section

					
<!-- Section About -->
<div class="section about" id="about-section">
	<div class="content-box">
		<div class="row">
			<div class="col col-m-12 col-t-5 col-d-5">
				<div class="info-list">
					<ul>
						<li><strong><span>Age:</span></strong> 22 Years</li>
						<li><strong><span>Job:</span></strong> Freelancer</li>
						<li><strong><span>Citizenship:</span></strong> United States</li>
						<li><strong><span>Address:</span></strong> 358 W Jefferson St, Bensenville, IL 60112</li>
						<li><strong><span>Phone:</span></strong> <a href="tel:12562548456">+1 256 254 84 56</a></li>
						<li><strong><span>E-mail:</span></strong> <a href="mailto:smorgan@domain.com">smorgan@domain.com</a></li>
					</ul>
				</div>
			</div>
			<div class="col col-m-12 col-t-7 col-d-7">
				<div class="text-box">
					<p><strong>Hello! I’m Steve Morgan</strong></p>
					<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 sit 
						voluptatem accusantium doloremque.
					</p>
					<p>
						Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.
					</p>
				</div>
				<div class="bts">
					<a href="#" class="btn btn_animated"><span class="circle">Download CV</span></a>
					<a href="#" class="btn extra contact-btn btn_animated"><span class="circle">Contact Me</span></a>
				</div>
			</div>
		</div>
	</div>
</div>

HTML structure of "Skills" section

					
<!-- Section Skills -->
<div class="section skills" id="skills-section">
	<div class="title">Skills</div>
	<div class="row">
		<div class="col col-m-12 col-t-6 col-d-6">
			<div class="content-box animated">
				<div class="i_title">
					<div class="icon"><i class="icon ion ion-gear-b"></i></div>
					<div class="name">Professional</div>
				</div>
				<div class="skills">
					<ul>
						<li> 
							<div class="name">UI/UX Design</div>
							<div class="progress">
								<div class="percentage" style="width:78%;">
									<span class="percent"><i class="icon ion ion-ios-checkmark-empty"></i></span>
								</div>
							</div>
						</li>
						...
					</ul>
				</div>
			</div>
		</div>
		<div class="col col-m-12 col-t-6 col-d-6">
			<div class="content-box animated">
				<div class="i_title">
					<div class="icon"><i class="icon ion ion-person"></i></div>
					<div class="name">Personal</div>
				</div>
				<div class="skills">
					<ul>
						<li> 
							<div class="name">Communication</div>
							<div class="progress">
								<div class="percentage" style="width:78%;">
									<span class="percent"><i class="icon ion ion-ios-checkmark-empty"></i></span>
								</div>
							</div>
						</li>
						...
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

HTML structure of "Experience" section

					
<!-- Experience -->
<div class="section experience" id="experience-section">
	<div class="title">
		Experience
		<span class="circle"><i class="icon ion ion-ios-briefcase"></i></span>
	</div>
	<div class="cd-timeline">
		<div class="cd-timeline-block animated">
			<div class="cd-timeline-point">
				<i class="icon ion ion-ios-checkmark-empty"></i>
			</div>
			<div class="cd-timeline-content">
				<div class="content-box">
					<div class="date">2013-2016</div>
					<div class="name">Facebook Inc.</div>
					<div class="category">Art Director</div>
					<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. Lorem ipsum dolor sit amet, in quodsi.
					</p>
				</div>
			</div>
		</div>
		...
	</div>
</div>

HTML structure of "Service" section

					
<!-- Service -->
<div class="section service" id="service-section">
	<div class="title">Services</div>
	<div class="row">
		<div class="col col-m-12 col-t-6 col-d-6">
			<div class="content-box animated">
				<div class="i_title">
					<div class="icon"><i class="icon ion ion-android-color-palette"></i></div>
					<div class="name">UI/UX Design</div>
				</div>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod iaculis 
					lobortis. Vestibulum posuere molestie ipsum vel. Vestibulum venenatis vestibulum elit ultricies. Lorem ipsum dolor 
					sit amet, consectetur adipiscing elit.
				</p>
			</div>
		</div>
		<div class="col col-m-12 col-t-6 col-d-6">
			<div class="content-box animated">
				<div class="i_title">
					<div class="icon"><i class="icon ion ion-social-chrome"></i></div>
					<div class="name">Web Application</div>
				</div>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod iaculis 
					lobortis. Vestibulum posuere molestie ipsum vel. Vestibulum venenatis vestibulum elit ultricies. Lorem ipsum dolor 
					sit amet, consectetur adipiscing elit.
				</p>
			</div>
		</div>
	</div>
	...
</div>

HTML structure of "Education" section

					
<!-- Section Education -->
<div class="section education" id="education-section">
	<div class="title">
		Education
		<span class="circle"><i class="icon ion ion-university"></i></span>
	</div>
	<div class="cd-timeline">
		<div class="cd-timeline-block animated">
			<div class="cd-timeline-point">
				<i class="icon ion ion-ios-checkmark-empty"></i>
			</div>
			<div class="cd-timeline-content">
				<div class="content-box">
					<div class="date">2002-2004</div>
					<div class="name">Art University</div>
					<div class="category">New York</div>
					<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.
					</p>
				</div>
			</div>
		</div>
		...
	</div>
</div>

HTML structure of "Portfolio" section

					
<!-- Portfolio -->
<div class="section works" id="works-section">
	<div class="title">Portfolio</div>
	<div class="filter-menu">
		<div class="filters">
			<div class="btn-group">
				<div class="f_btn btn_animated active">
					<div class="circle">
						<label><input type="radio" name="fl_radio" value="box-item" />All</label>
					</div>
				</div>
				...
			</div>
		</div>
	</div>
	<div class="row box-items">
		<div class="col col-m-12 col-t-6 col-d-4 box-item f-mockup animated">
			<div class="image">
				<a href="#popup-1" class="has-popup"><img src="images/works/work1.jpg" alt="" /></a>
			</div>
			<div class="content-box">
				<div class="category">Mockups</div>
				<a href="#popup-1" class="name has-popup">Realistic Business Cards MockUp</a>
				<p>
					Here’s a new b-cards mock-up with several business cards...
				</p>
			</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">
						<div class="category">Mockups</div>
						<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 btn_animated"><span class="circle">View Project</span></a>
					</div>
				</div>
			</div>
		</div>
		...
	</div>
	<div class="clear"></div>
</div>

HTML structure of "Clients" section

					
<!-- Section Clients -->
<div class="section clients" id="clients-section">
	<div class="title">Clients</div>
	<div class="reviews-carousel animated">
		<div class="owl-carousel">
			<div class="item">
				<div class="content-box">
					<div class="reviews-item">
						<div class="image"><img src="images/clients/rev1.jpg" alt="" /></div>
						<div class="name">— Robert Chase, CEO</div>
						<p>
							"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod 
							iaculis lobortis. Vestibulum posuere molestie ipsum vel. Vestibulum venenatis vestibulum elit ultricies. 
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod 
							iaculis lobortis."
						</p>
					</div>
				</div>
			</div>
			...
		</div>
	</div>
</div>

HTML structure of "Pricing" section

					
<!-- Section Pricing -->
<div class="section pricing" id="pricing-section">
	<div class="title">Pricing</div>
	<div class="row">
		<div class="col col-m-12 col-t-6 col-d-3">
			<div class="content-box animated">
				<div class="pricing-table">
					<div class="i_title">
						<div class="icon"><i class="icon ion ion-battery-empty"></i></div>
						<div class="pt-title">Basic</div>
					</div>
					<div class="pt-amount">
						<span class="dollar">$</span>
						<span class="amount">15</span>
						<span class="period">/hr</span>
					</div>
					<div class="pt-feature-list">
						<ul>
							<li class="disable">UI/UX Design</li>
							<li>Web Development</li>
							<li class="disable">IOS Application <strong>New</strong></li>
							<li class="disable">Android Application</li>
							<li class="disable">Writing</li>
							<li class="disable">Photography <strong>New</strong></li>
						</ul>
					</div>
					<a href="#" class="btn btn_animated"><span class="circle">Buy Now</span></a>
				</div>
			</div>
		</div>
		...
	</div>
</div>

HTML structure of "Blog" section

					
<!-- Blog -->
<div class="section blog" id="blog-section">
	<div class="title">Blog</div>
	<div class="row">
		<div class="col col-m-12 col-t-6 col-d-6">
			<div class="blog_item animated">
				<div class="image">
					<a href="#"><img src="images/blog/blog1.jpg" alt="" /></a>
				</div>
				<div class="content-box">
					<div class="i_title">
						<div class="icon"><strong>27</strong> July</div>
					</div>
					<div class="category_bts">
						<a href="#" class="category">#branding</a>
						<a href="#" class="category">#ui-ux</a>
					</div>
					<a href="blog_inner.html" class="name">Music Player Design</a>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis et tortor ac tincidunt. In euismod iaculis 
						lobortis. Vestibulum posuere molestie ipsum vel...
					</p>
					<a href="#" class="btn btn_animated"><span class="circle">Read more</span></a>
				</div>
			</div>
		</div>
		...
	</div>
</div>

HTML structure of "Text" section

					
<!-- Section Text -->
<div class="section ceo_text">
	<div class="title">Text Section</div>
	<div class="content-box animated">
		<div class="text-box">
			<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 sit 
				voluptatem accusantium doloremque.
			</p>
			<p>
				Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.
			</p>
		</div>
	</div>
</div>

HTML structure of "Contacts" section

					
<!-- Section Contacts -->
<div class="section contacts" id="contact-section">
	<div class="title">Contact Me</div>
	<div class="row">
		<div class="col col-m-12 col-t-6 col-d-6">
			<div class="content-box animated">
				<div class="info-list">
					<ul>
						<li><strong><span>Address:</span></strong> 358 W Jefferson St, Bensenville, IL 60112</li>
						<li><strong><span>Phone:</span></strong> <a href="tel:12562548456">+1 256 254 84 56</a></li>
						<li><strong><span>E-mail:</span></strong> <a href="mailto:smorgan@domain.com">smorgan@domain.com</a></li>
					</ul>
				</div>
				<div class="map" id="map"></div>
			</div>
		</div>
		<div class="col col-m-12 col-t-6 col-d-6">
			<div class="content-box animated">
				<h4>Write a message:</h4>
				<div class="contact-form">
					<form id="cform" method="post">
						<div class="group-val">
							<input type="text" name="name" placeholder="Your Name" />
						</div>
						<div class="group-val">
							<input type="text" name="email" placeholder="Your Email" />
						</div>
						<div class="group-val">
							<input type="text" name="subject" placeholder="Subject" />
						</div>
						<div class="group-val ct-gr">
							<textarea name="message" placeholder="Message"></textarea>
						</div>
						<a href="#" class="btn btn_animated" onclick="$('#cform').submit(); return false;"><span class="circle">Send Message</span></a>
					</form>
					<div class="alert-success">
						<p>Thanks, your message is sent successfully. We will contact you shortly!</p>
					</div>
				</div>
			</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

Fonts

Images

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