Hendrix - Personal Portfolio 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/		
│──│──default(blue, green, pink, purple, red)/
│──│──│──css/
│──│──│──│──animate.css
│──│──│──│──basic.css
│──│──│──│──layout.css
│──│──│──│──blogs.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
│──│──│──│──masonry-filter.js
│──│──│──│──jquery.mb.YTPlayer.js
│──│──│──│──typed.js
│──│──│──│──particles.js
│──│──│──│──particles-setting.js
│──│──│──less/
│──│──│──│──basic.less
│──│──│──│──layout.less
│──│──│──│──blogs.less
│──│──│──│──setting.less
│──│──│──index.html
│──│──│──index-particles.html
│──│──│──index-video.html
│──│──│──blog.html
│──│──│──blog-inner.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
    • blogs.css - CSS for template blog
  • less - all LESS for pages
    • setting.less - LESS for setting template
    • basic.less - LESS for basic styles
    • layout.less - LESS for template layout
    • blogs.less - LESS for template blog
  • 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
    • masonry-filter.js - Masonry Plugin for "Portfolio" filter
    • jquery.mb.YTPlayer.js - Plugin for Youtube Video Background
    • typed.js - Plugin for typing text
    • particles.js - Plugin for Particles Background
    • particles-setting.js - Plugin for setting Particles

Settings

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

Name Value Description
Colors setting for template elements
@default-color #898989 Default color
@extra-color #999999 Extra color
@dark-color #292929 Dark color
@light-color #f9f9f9 Light color
@white-color #fff White color
@extra-white-color rgba(0,0,0,0.1) Extra White color
@active-color #ede574 template color
@error-color red Error field color
Fonts setting for template
@default-font 'Poppins' Default font for template
@extra2-font 'Kaushan Script' Extra font 2 for template
@icons-font 'Ionicons' Icons font for template
Sizes setting for template
@large-size 24px Large Size
@default-size 15px Default Size
@small-size 13px Small Size
@extra-small-size 12px Extra Small Size
@title-size 100px Title Size
@subtitle-size 16px Subtitle Size
@h1-size 44px H1 Size
@h2-size 38px H2 Size
@h3-size 34px H3 Size
@h4-size 30px H4 Size
@h5-size 26px H5 Size
@h6-size 22px H6 Size
@default-icon-size 24px Default icons size
@extra-icon-size 18px Extra icons size
@default-letter-spacing 0.02em Default Letter Spacing
@extra-letter-spacing -0.045em Extra Letter Spacing
@line-height 28px Default Line-height for text
@extra-line-height 22px Extra Line-height for text
Color template
@active-color #fdd912 Default template color
@active-color #7b8ffd Blue template color
@active-color #78af48 Green template color
@active-color #ff5e94 Pink template color
@active-color #c446da Purple template color
@active-color #f16363 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=Kaushan+Script%7CPoppins: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, @extra-font and @extra2-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>Hendrix - Personal Portfolio 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" />
	
	<!-- Load Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Kaushan+Script%7CPoppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
	
	<!-- CSS -->
	<link rel="stylesheet" href="css/basic.css" />
	<link rel="stylesheet" href="css/layout.css" />
	<link rel="stylesheet" href="css/blogs.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]-->
	
	<!-- Favicon -->
	<link rel="shortcut icon" href="images/favicons/favicon.ico">
	
</head>

<body>
	
	<!-- Page -->
	<div class="page">

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

		<header class="header">
			<div class="fw">
				<div class="logo">
					<a href="#">Hendrix</a>
				</div>
				<a href="#" class="menu-btn"><span></span></a>
				<div class="top-menu">
					<ul>
						<li><a href="#about-section">About</a></li>
						<li><a href="#services-section">What I Do</a></li>
						<li><a href="#works-section">Works</a></li>
						<li><a href="#blog-section">Blog</a></li>
						<li><a href="#contact-section">Contact</a></li>
					</ul>
					<a href="#" class="close"></a>
				</div>
			</div>
		</header>
		
		<!-- Container -->
		<div class="container">

			...

			<!-- Footer -->
			<footer class="align-center">
				<div class="socials">
					<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 class="copy">© 2016 Hendrix. all rights reserved.</div>
			</footer>
			
		</div>

	</div>
	
	<!-- jQuery Scripts -->
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.validate.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/jquery.nicescroll.js"></script>
	<script src="js/magnific-popup.js"></script>
	<script src="js/jquery.mb.YTPlayer.js"></script>
	<script src="js/particles.js"></script>
	<script src="js/typed.js"></script>
	
	<!-- Main Scripts -->
	<script src="js/main.js"></script>
	
</body>
</html>

HTML structure of "Started" section

					
<!-- Section Started -->
<div class="section started">
	<div class="slide" style="background-image: url(images/slide-bg-1.jpg);"></div>
	<div class="centrize full-width">
		<div class="vertical-center">
			<div class="st-title align-center">
				<div class="typing-title">
					<p>Developer</p>
					<p>Photographer</p>
					<p>Coder</p>
					<p>Blogger</p>
					<p>Freelancer</p>
				</div>
				<span class="typed-title"></span>
			</div>
			<div class="socials">
				<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>
	<a href="#" class="mouse-btn"><i class="icon ion ion-chevron-down"></i></a>
</div>

HTML structure of "About" section

					
<!-- Section About -->
<div class="section about align-left" id="about-section">
	<div class="fw">
		<div class="row">
			<div class="col col-m-12 col-t-4 col-d-4">
				<div class="profile">
					<img src="images/profile.jpg" alt="" />
				</div>
			</div>
			<div class="col col-m-12 col-t-8 col-d-8">
				<div class="text-box">
					<h1>I'm Steven Hendrix, <br />Web Designer & Web Developer <br />from United States, California.</h1>
					<p>
						I have rich experience in web site design & building and customization. Also I am good at html, css, javascript, wordpress, php, jquery, bootstrap. I love to talk with you about our unique approach. Feel free to contact me writing an email with your project idea.
					</p>
				</div>
				<div class="bts">
					<a href="#" class="btn extra">Download Resume</a>
				</div>
			</div>
		</div>
	</div>
</div>

HTML structure of "Service" section

					
<!-- Section Services -->
<div class="section services gray align-left" id="services-section">
	<div class="fw">
		<div class="titles">
			<div class="title">What I Do</div>
		</div>
		<div class="row">
			<div class="col col-m-12 col-t-6 col-d-4">
				<div class="service-item">
					<div class="circle"><i class="icon ion ion-ios-browsers-outline"></i></div>
					<div class="name">UI/UX Design</div>
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
				</div>
			</div>
			<div class="col col-m-12 col-t-6 col-d-4">
				<div class="service-item">
					<div class="circle"><i class="icon ion ion-ios-lightbulb-outline"></i></div>
					<div class="name">Brand Identity</div>
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
				</div>
			</div>
			<div class="col col-m-12 col-t-6 col-d-4">
				<div class="service-item">
					<div class="circle"><i class="icon ion ion-ios-color-wand-outline"></i></div>
					<div class="name">Web Design</div>
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
				</div>
			</div>
			<div class="col col-m-12 col-t-6 col-d-4">
				<div class="service-item">
					<div class="circle"><i class="icon ion ion-social-android-outline"></i></div>
					<div class="name">Mobile Apps</div>
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
				</div>
			</div>
			<div class="col col-m-12 col-t-6 col-d-4">
				<div class="service-item">
					<div class="circle"><i class="icon ion ion-ios-analytics-outline"></i></div>
					<div class="name">Analytics</div>
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
				</div>
			</div>
			<div class="col col-m-12 col-t-6 col-d-4">
				<div class="service-item">
					<div class="circle"><i class="icon ion ion-ios-camera-outline"></i></div>
					<div class="name">Photography</div>
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
				</div>
			</div>
		</div>
	</div>
</div>

HTML structure of "Portfolio" section

					
<!-- Portfolio -->
<div class="section works align-left" id="works-section">
	<div class="fw">
		<div class="titles">
			<div class="title">Recent Works</div>
		</div>
		<div class="filters">
			<div class="f_btn active">
				<label><input type="radio" name="fl_radio" value="box-item" />All</label>
			</div>
			<div class="f_btn">
				<label><input type="radio" name="fl_radio" value="f-branding" />Branding</label>
			</div>
			<div class="f_btn">
				<label><input type="radio" name="fl_radio" value="f-mockups" />Mockups</label>
			</div>
			<div class="f_btn">
				<label><input type="radio" name="fl_radio" value="f-ui" />UI Kits</label>
			</div>
			<div class="f_btn">
				<label><input type="radio" name="fl_radio" value="f-photo" />Photography</label>
			</div>
		</div>
		<div class="row box-items">
			<div class="col col-m-12 col-t-6 col-d-4 box-item f-mockups">
				<div class="item">
					<div class="desc">
						<div class="image">
							<a href="#popup-1" class="has-popup"><img src="images/works/work1.jpg" alt="" /></a>
						</div>
					</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">
							<div class="category">Mockups</div>
							<h4>Shopping Bag PSD 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 class="col col-m-12 col-t-6 col-d-4 box-item f-branding">
				<div class="item">
					<div class="desc">
						<div class="image">
							<a href="#popup-2" class="has-popup"><img src="images/works/work2.jpg" alt="" /></a>
						</div>
					</div>
				</div>
				<div id="popup-2" class="popup-box mfp-fade mfp-hide">
					<div class="content">
						<div class="image">
							<img src="images/works/work2.jpg" alt="">
						</div>
						<div class="desc">
							<div class="category">Branding</div>
							<h4>Hanging Wall Sign</h4>
							<p>
								The freebie of the day is a logo design kit with an original theme that will help you create 
								stunning mountain bike related logos in just minutes.
							</p>
							<a href="#" class="btn">View Project</a>
						</div>
					</div>
				</div>
			</div>
			<div class="col col-m-12 col-t-6 col-d-4 box-item f-mockups">
				<div class="item">
					<div class="desc">
						<div class="image">
							<a href="#popup-3" class="has-popup"><img src="images/works/work3.jpg" alt="" /></a>
						</div>
					</div>
				</div>
				<div id="popup-3" class="popup-box mfp-fade mfp-hide">
					<div class="content">
						<div class="image">
							<img src="images/works/work3.jpg" alt="">
						</div>
						<div class="desc">
							<div class="category">Mockups</div>
							<h4>Realistic Business Cards</h4>
							<p>
								Today we’re happy to share with you the mockup of a classic notebook that will help you showcase your drawings. Today we’re happy to share with you the mockup of a classic notebook that will help.
							</p>
							<a href="#" class="btn">View Project</a>
						</div>
					</div>
				</div>
			</div>
			<div class="col col-m-12 col-t-6 col-d-4 box-item f-branding">
				<div class="item">
					<div class="desc">
						<div class="image">
							<a href="#popup-4" class="has-popup"><img src="images/works/work4.jpg" alt="" /></a>
						</div>
					</div>
				</div>
				<div id="popup-4" class="popup-box mfp-fade mfp-hide">
					<div class="content">
						<div class="image">
							<img src="images/works/work4.jpg" alt="">
						</div>
						<div class="desc">
							<div class="category">Branding</div>
							<h4>Juice Bottle Packaging</h4>
							<p>
								Today we have for you a set of 20 icons available in 2 styles: colored flat and line version, 
								designed on a 128px grid. These polished icons come in multiple formats so you can easily include them in your projects.
							</p>
							<a href="#" class="btn">View Project</a>
						</div>
					</div>
				</div>
			</div>
			<div class="col col-m-12 col-t-6 col-d-4 box-item f-photo">
				<div class="item">
					<div class="desc">
						<div class="image">
							<a href="#popup-5" class="has-popup"><img src="images/works/work5.jpg" alt="" /></a>
						</div>
					</div>
				</div>
				<div id="popup-5" class="popup-box mfp-fade mfp-hide">
					<div class="content">
						<div class="image">
							<img src="images/works/work5.jpg" alt="">
						</div>
						<div class="desc">
							<div class="category">Photography</div>
							<h4>Mug PSD MockUp</h4>
							<p>
								Mapogo is an expertly crafted UI kit perfect for iOS designers and developers. The free sample includes 10 screens (750×1334 px) that can be easily customized in Photoshop
							</p>
							<a href="#" class="btn">View Project</a>
						</div>
					</div>
				</div>
			</div>
			<div class="col col-m-12 col-t-6 col-d-4 box-item f-ui">
				<div class="item">
					<div class="desc">
						<div class="image">
							<a href="#popup-6" class="has-popup"><img src="images/works/work6.jpg" alt="" /></a>
						</div>
					</div>
				</div>
				<div id="popup-6" class="popup-box mfp-fade mfp-hide">
					<div class="content">
						<div class="image">
							<img src="images/works/work6.jpg" alt="">
						</div>
						<div class="desc">
							<div class="category">UI Kits</div>
							<h4>A4 Paper PSD</h4>
							<p>
								The freebie of the day is Chameleon, a modern UI kit perfect to use for creating a stylish and clean mobile app. This kit includes 10 screens from various categories that can be easily edited.
							</p>
							<a href="#" class="btn">View Project</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="clear"></div>
	</div>
</div>

HTML structure of "Contacts" section

					
<!-- Section Contacts -->
<div class="section contacts align-left" id="contact-section">
	<div class="fw">
		<div class="titles">
			<div class="title">Contact Me</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">
						<div class="value">
							<input type="text" name="name" placeholder="Name *" />
						</div>
					</div>
					<div class="col col-m-12 col-t-6 col-d-6">
						<div class="value">
							<input type="tel" name="tel" placeholder="Phone *" />
						</div>
					</div>
					<div class="col col-m-12 col-t-6 col-d-6">
						<div class="value">
							<input type="text" name="email" placeholder="Email *" />
						</div>
					</div>
					<div class="col col-m-12 col-t-6 col-d-6">
						<div class="value">
							<input type="text" name="subject" placeholder="Subject *" />
						</div>
					</div>
					<div class="col col-m-12 col-t-12 col-d-12">
						<div class="value">
							<textarea name="message" placeholder="Message"></textarea>
						</div>
					</div>
					<div class="col col-m-12 col-t-12 col-d-12">
						<a href="#" class="btn" onclick="$('#cform').submit(); return false;">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.