Nilson - Personal Portfolio Template
- Created: 20-11-2019
- Last Update: 24-12-2019
- Author: ThemesHolder
- Email: themeholder.net@gmail.com
Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form. Thank You so much!
NOTE: All images used here are just for preview purpose only & they are not included in main file.
Getting Started
How to change header logo
First open main file in web code editor. (Such as Notepad++, Brackets etc.)
Then open index.html file and edit this link. For example we provide an image.
How to change favicon image
Find this section in index.html file. Then edit menu title...
For example we provide an image.
How to change Header Button text
Find this section in index.html file. Then edit menu title...
For example we provide an image.
How to change menu title
Find this section in index.html file. Then edit menu title...
For example we provide an image.
How to change Hero image
Find this section in index.html file. Then change image.
For example we provide an image.
How to change About Area Author Image
Find this section in index.html file. Then change image.
For example we provide an image.
How to change Service icon
Find this section in index.html file. Then change image.
For example we provide an image.
How to change Portfolios image
Find this section in index.html file. Then change image.
For example we provide an image.
How to change Testimonial image
Find this section in index.html file. Then change image.
For example we provide an image.
How to change Blog image
Find this section in index.html file. Then change image.
For example we provide an image.
HTML Templates:
- index.html - Home 1
- offcanvasmenu.html - Home Off-Canvas Menu
- index2.html - Home 2
- index3.html - Home 3
- index4.html - Home 4
- index5.html - Home 5
- index6.html - Home 6
- blog.html - Blog
- single-blog.html - Single Blog
HTML Structure
Introduction
Header Markup
<!-- Hero Area Start-->
<div class="hero-area" data-scroll-index="0">
<div class="hero-wrapper">
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="hero-content">
<h1>I AM</h1>
<h3>Mike Nilson</h3>
<ul class="hero-social">
<li><a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li><a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li><a href="#"><i class="fa fa-linkedin"></i></a>
</li>
<li><a href="#"><i class="fa fa-instagram"></i></a>
</li>
<li><a href="#"><i class="fa fa-pinterest"></i></a>
</li>
</ul>
</div>
<div class="scroll_down">
<a href="#bio" class="scroll" data-scroll-nav="1"> <i class="text-white"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Hero Area End!-->
</embed>
Footer Markup
<!-- Footer Area Start-->
<footer class="section-padding" data-scroll-index="6">
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="get-touch-title">
<h2>Get in touch</h2>
<p>Although I'm not currently looking for freelance opportunities, my inbox is always open. Whether for a potential project</p>
<div class="hire-btn footer"> <a href="#" class="hello">say hello to me</a>
</div>
</div>
<div class="foter-bottom">
<div class="footer-logo">
<a href="index.html">
<img src="assets/img/logo.png" alt="">
</a>
</div>
<div class="footer-copyright">
<p>2019 Copyright Nilson. All Rights Reserved</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer Area End!-->
Middle Feature Markup
<!-- About Area-->
<div class="about-area section-padding" data-scroll-index="2">
<div class="about-wrapper">
<div class="about-owner-img">
<img src="assets/img/about-owner.jpg" alt="">
</div>
<div class="container">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6">
<div class="section-title">
<h2>About me <b>.</b></h2>
<p>Hello! I'm Nilson, a software engineer based in Boston, MA who enjoys building things that live on the internet. I develop exceptional websites and web apps that provide intuitive, pixel-perfect user interfaces with efficient and modern backends.</p>
</div>
<div class="about-tabs">
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#skills"><i class="fa fa-rocket" aria-hidden="true"></i> Skills</a>
</li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#experience"><i class="fa fa-external-link" aria-hidden="true"></i>
Experiece</a>
</li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#graduation"><i class="fa fa-graduation-cap" aria-hidden="true"></i>
Graduation</a>
</li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#awwards"><i class="fa fa-trophy" aria-hidden="true"></i>
awwards</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Skill Start-->
<div id="skills" class="container tab-pane active">
<br>
<div class="progress-wrapper">
<div class="skill-wrapper">
<div class="skill-title">javascript</div>
<div class="skillbar" data-percent="95%">
<div class="progress-fill-bar" style="width: 85%;">
<div class="skill-percent-count-wrap"><span class="skill-percent-count">85</span>%</div>
</div>
</div>
</div>
</div>
<div class="progress-wrapper">
<div class="skill-wrapper">
<div class="skill-title">photoshop</div>
<div class="skillbar" data-percent="95%">
<div class="progress-fill-bar" style="width: 70%;">
<div class="skill-percent-count-wrap"><span class="skill-percent-count">70</span>%</div>
</div>
</div>
</div>
</div>
<div class="progress-wrapper">
<div class="skill-wrapper">
<div class="skill-title">wordpress</div>
<div class="skillbar" data-percent="95%">
<div class="progress-fill-bar" style="width: 95%;">
<div class="skill-percent-count-wrap"><span class="skill-percent-count">95</span>%</div>
</div>
</div>
</div>
</div>
<div class="progress-wrapper">
<div class="skill-wrapper">
<div class="skill-title">Marketing</div>
<div class="skillbar" data-percent="95%">
<div class="progress-fill-bar" style="width: 90%;">
<div class="skill-percent-count-wrap"><span class="skill-percent-count">90</span>%</div>
</div>
</div>
</div>
</div>
</div>
<!-- Skill End -->
<!-- Experience Start -->
<div id="experience" class="container tab-pane fade">
<br>
<div class="experience-box">
<div class="single-experience">
<h2>UI/UX Designer</h2>
<h5>2012-2013</h5>
<p>A software engineer based in Boston, MA who enjoys building things that live on the internet.</p>
</div>
<div class="single-experience">
<h2>Web Development</h2>
<h5>2013-2014</h5>
<p>A software engineer based in Boston, MA who enjoys building things that live on the internet.</p>
</div>
</div>
</div>
<!-- Experience End -->
<!-- Graduation Start -->
<div id="graduation" class="container tab-pane fade">
<br>
<div class="experience-box grafuation">
<div class="single-experience">
<h2>BA Hons(University of Dhaka</h2>
<h5>2012-2013</h5>
<p>A software engineer based in Boston, MA who enjoys building things that live on the internet.</p>
</div>
<div class="single-experience">
<h2>Masters (University of Dhaka</h2>
<h5>2013-2014</h5>
<p>A software engineer based in Boston, MA who enjoys building things that live on the internet.</p>
</div>
</div>
</div>
<!-- Graduation End -->
<!-- Awwards Start -->
<div id="awwards" class="container tab-pane fade">
<br>
<div class="award-logo">
<div class="single-logo">
<img src="assets/img/award-logo5.png" alt="">
</div>
<div class="single-logo">
<img src="assets/img/award-logo4.png" alt="">
</div>
<div class="single-logo">
<img src="assets/img/award-logo2.png" alt="">
</div>
<div class="single-logo">
<img src="assets/img/award-logo3.png" alt="">
</div>
<div class="single-logo">
<img src="assets/img/award-logo1.png" alt="">
</div>
</div>
</div>
<!-- Awwards End -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End About Area-->
CSS
Css files
JavaScript
Creadits
Thanks for purchasing a our item, I really appreciate it! Once again thank you for for purchasing one of our template. Please Mark 5 Review!