Follow the steps below to get started with Resume HTML Template :
Package/Gentleman Folder to find all the Templates FilesGentleman HTML/assets - Stylesheets, JavaScript, Fonts etc Folder Gentleman HTML/assets/images - Images Folder Gentleman HTML/index.html - Index File/HomepageGentleman has follows a simple coding structure. here is the sample:
<body class=&qout;top_padding&qout;> <!-- Preloader start here --> <div class=&qout;preloader&qout;> <div class=&qout;loader&qout;> <div class=&qout;ld-child&qout;></div> <div class=&qout;ld-child ld-child2&qout;></div> </div> </div> <!-- Preloader end here --> <header id=&qout;header&qout;> <nav class=&qout;header_menu&qout;> <div class=&qout;container&qout;> <!-- Brand and toggle get grouped for better mobile display --> <div class=&qout;navbar-header&qout;> <button type=&qout;button&qout; class=&qout;navbar-toggle collapsed&qout; data-toggle=&qout;collapse&qout; data-target=&qout;#bs-example-navbar-collapse-1&qout; aria-expanded=&qout;false&qout;> <span class=&qout;sr-only&qout;>Toggle navigation</span> ---------------------------------- ---------------------------------- </button> <a class=&qout;navbar-brand&qout; href=&qout;#&qout;><img src=&qout;assets/images/logo.png&qout; alt=&qout;logo&qout; class=&qout;img-responsive&qout;></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class=&qout;collapse navbar-collapse&qout; id=&qout;bs-example-navbar-collapse-1&qout;> <ul class=&qout;active_menu nav navbar-nav&qout;> <li class=&qout;active&qout;><a class=&qout;page-scroll&qout; href=&qout;#header&qout;>Home</a></li> <li><a class=&qout;page-scroll&qout; href=&qout;#about&qout;>About Me</a></li> -------------------------------- -------------------------------- </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav><!--header menu--> </header> <!-- Header end here --> <!-- banner section start here --> <section id=&qout;banner&qout; class=&qout;banner&qout;> <div class=&qout;container&qout;> <div class=&qout;banner_content&qout;> <h4>Hi There! I am</h4> <h2>Alex Mohon</h2> <p>Professional Graphic Designer</p> <ul class=&qout;banner_social&qout;> <li><a href=&qout;#&qout;><i class=&qout;fa fa-facebook&qout; aria-hidden=&qout;true&qout;></i></a></li> -------------------------------- ------------------------------ </ul> </div><!--banner content--> </div><!--container--> </section> <!-- banner section end here --> <!-- About section start here --> <section id=&qout;about&qout; class=&qout;about padding_140&qout;> <div class=&qout;container&qout;> <div class=&qout;row&qout;> <div class=&qout;col-md-6 col-sm-12 col-xs-12&qout;> ------------------------------------- ------------------------------------- <!-- Resume section start here --> <section id=&qout;resume&qout; class=&qout;resume padding_140 bg_border&qout;> <div class=&qout;container&qout;> <div class=&qout;section_header&qout;> <h2 class=&qout;wow fadeInUp&qout; data-wow-duration=&qout;1s&qout;>Resume</h2> <p class=&qout;wow fadeInUp&qout; data-wow-duration=&qout;1.5s&qout;><em>You can know who i am and what is my Hobbies. I hope it will help you for our Friendshiop. </em></p> </div><!-- section header --> <div class=&qout;resume_items wow fadeInUp&qout; data-wow-duration=&qout;2s&qout;> <div class=&qout;row&qout;> <div class=&qout;col-md-6 col-sm-12 col-xs-12&qout;> <h3>Educational Experience</h3> <div class=&qout;experiences left&qout;> <!-- Portfolio section start here --> <section id=&qout;portfolio&qout; class=&qout;portfolio padding_140&qout;> <div class=&qout;container&qout;> <div class=&qout;section_header&qout;> <h2 class=&qout;wow fadeInUp&qout; data-wow-duration=&qout;1s&qout;>Portfolio</h2> </div><!-- section header --> <ul class=&qout;portfolio_menu wow fadeInUp&qout;> <li class=&qout;active&qout; data-filter=&qout;*&qout;>All Items</li> <li data-filter=&qout;.design&qout;>Design</li> <li data-filter=&qout;.photography&qout;>Photography</li> <li data-filter=&qout;.illustration&qout;>Illustration</li> <li data-filter=&qout;.vector&qout;>Vector</li> </ul> <div class=&qout;portfolio_items wow fadeInUp&qout; data-wow-duration=&qout;1.5s&qout;> <div class=&qout;portfolio_item design illustration&qout;> <div class=&qout;pos_rel&qout;> ------------------------------- ------------------------------- <!-- Footer section start here --> <footer> <p>© copyright Silent 2016. All Right Reserved by CodexCoder.</p> </footer> <!-- Footer section end here --> <!-- jQuery --> <script src=&qout;assets/js/jquery-3.1.1.min.js&qout; type=&qout;text/javascript&qout;></script> <script src=&qout;assets/js/bootstrap.min.js&qout; type=&qout;text/javascript&qout;></script> <script type=&qout;text/javascript&qout; src=&qout;http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js&qout;></script> <!-- Isotop --> <script src=&qout;assets/js/bootstrap-progressbar.js&qout;></script> <!-- Isotop --> <script src=&qout;assets/js/isotope.pkgd.min.js&qout;></script> ---------------------------------- -------------------------------- ---------------------------------- </body> </html>
We are using several CSS files in this Template. LabArtisan Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
CSS Fiile Included
/* Theme Name: Gentleman Resume HTML Template Theme URI: http://codexcoder.com/ Author: codexcoder Author URI: http://codexcoder.com/ Description: Gentleman Resume HTML Template Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: html, template, resume, biodata */ /*--------------------------------------------- Table of CONTENT ----------------------------------------------- 01. Default CSS 02. Animation 03. Section Header 04. Header 05. Header Two 06. Banner Section 07. About Section 08. Resume Section 09. Portfolio Section 10. Services Section 11. Blog Section 12. Blog Single 13. Pricing Section 14. Client Section 15. Contact Section 16. Footer 17. Pre-loader -----------------------------------------------*/
/* 01 - Default CSS
----------------------------------------------*/
/*
1.0 - Normalize
*/
html {
font-family: 'Lato', sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
font-family: 'Lato', sans-serif;
font-size: 15px; /* base font size 15px= 1em*/
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
/*=================================
Header Section
==================================*/
.header-top {
padding:22px 0;
overflow: hidden;
}
.logo {
float:left;
}
.header-top-right {
float:right;
}
.header-top-right ul li {
float: left;
margin-left: 50px;
}
.header-top-right ul li img {
float: left;
margin-right: 10px;
}
.header-top-right ul li .header-top-contact{
float:left;
}
.header-top-right ul li h4 {
font-size:14px;
color:#62a0d1;
margin-bottom: 5px;
}
.header-top-right ul li h5 {
font-weight: 400;
font-size:14px;
}
----------------------------------
----------------------------------
/* 02 - Animation
----------------------------------------------*/
@-webkit-keyframes gt_animation{
0%{
transform: scale(1);
}
25%{
transform: scale(1.15);
}
50%{
transform: scale(1.15);
}
75%{
transform: scale(1.15);
}
100%{
transform: scale(1);
}
}
@keyframes gt_animation{
0%{
transform: scale(1);
}
40%{
transform: scale(1.15);
}
50%{
transform: scale(1.15);
}
---------------------------
---------------------------
/*
---------------------------------------------*/
We have attached Google Map and Contact form on the contact us pages.
To customize Google Map, go to the bottom of contact.html and find the code block below
/* Google map
----------------------------------------------*/
var styleArray = [
{
"elementType": "geometry",
"stylers": [
{
"color": "#EDEDED"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
--------------------------
--------------------------
var mapOptions = {
center: new google.maps.LatLng(23.739296,90.3870653),
zoom: 12,
styles: styleArray,
scrollwheel: false,
backgroundColor: 'transparent',
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var myLatlng = new google.maps.LatLng(23.739296,90.3870653);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: 'assets/images/map.png'
});
Edit Latitude and Longitude accordingly as your requirements see the line
center: [lat: 23.739296, 90.3870653],
and
latLng: [lat: 23.739296, 90.3870653], icon: 'images/map-location.png'