Follow the steps below to get started with SeoLab - Digital Marketing Agency, Social Media, SEO Template :
Package/SeoLab Folder to find all the Templates FilesSeoLab HTML/assets - Stylesheets, JavaScript, Fonts etc Folder SeoLab HTML/assets/images - Images Folder SeoLab HTML/index.html - Index File/HomepageSeoLab has follows a simple coding structure. here is the sample:
<!DOCTYPE html> <html lang=&qoute;en&qoute;> <head> <meta charset=&qoute;utf-8&qoute;> <meta http-equiv=&qoute;X-UA-Compatible&qoute; content=&qoute;IE=edge&qoute;> <meta name=&qoute;viewport&qoute; content=&qoute;width=device-width, initial-scale=1&qoute;> <title>SEOLAB</title> <link rel=&qoute;stylesheet&qoute; type=&qoute;text/css&qoute; href=&qoute;assets/css/bootstrap.min.css&qoute;> <link rel=&qoute;stylesheet&qoute; type=&qoute;text/css&qoute; href=&qoute;assets/css/swiper.min.css&qoute;> <link rel=&qoute;stylesheet&qoute; type=&qoute;text/css&qoute; href=&qoute;assets/css/font-awesome.min.css&qoute;> <link rel=&qoute;stylesheet&qoute; type=&qoute;text/css&qoute; href=&qoute;assets/css/lightcase.css&qoute;> <link rel=&qoute;stylesheet&qoute; type=&qoute;text/css&qoute; href=&qoute;assets/css/quick-view.css&qoute;> <link rel=&qoute;stylesheet&qoute; type=&qoute;text/css&qoute; href=&qoute;assets/css/flexslider.css&qoute;> <link rel=&qoute;stylesheet&qoute; type=&qoute;text/css&qoute; href=&qoute;assets/css/style.css&qoute;> <link rel=&qoute;stylesheet&qoute; type=&qoute;text/css&qoute; href=&qoute;assets/css/rtl.css&qoute;> </head> <body id=&qoute;scroll-top&qoute;> <div class=&qoute;wrapper&qoute;> <div class=&qoute;all-content&qoute;> <header> <div class=&qoute;header-top hidden-xs&qoute;> <div class=&qoute;container&qoute;> <div class=&qoute;header-top-left&qoute;> <ul> <li><i class=&qoute;fa fa-envelope-o&qoute; aria-hidden=&qoute;true&qoute;> </i> <a href=&qoute;contact.html&qoute;>email@labartisan.com</a></li> <li><i class=&qoute;fa fa-clock-o&qoute; aria-hidden=&qoute;true&qoute;></i> <p>open: mon - fri 09:00-07:00</p></li> </ul> </div> <div class=&qoute;header-top-right&qoute;> <i class=&qoute;fa fa-cog&qoute; aria-hidden=&qoute;true&qoute;></i><a href=&qoute;#&qoute;>free seo analysis</a> </div> </div><!-- container --> </div> <div class=&qoute;main-menu&qoute;> <div class=&qoute;container&qoute;> <div class=&qoute;desktop-menu&qoute;> <a href=&qoute;index.html&qoute; class=&qoute;menu-logo&qoute;><img src=&qoute;assets/images/logo.png&qoute; alt=&qoute;logo&qoute;></a> <div class=&qoute;menu-list&qoute;> <ul> <li class=&qoute;has-sub-menu&qoute;> --------------------------------- ---------------------------------- <!-- start banner section --> <section class=&qoute;banner&qoute;> <div class=&qoute;swiper-container banner-slider&qoute;> <div class=&qoute;swiper-wrapper&qoute;> <div class=&qoute;swiper-slide&qoute;> <div class=&qoute;banner-item one&qoute;> <div class=&qoute;banner-content&qoute;> <h3>our popular service for</h3> <h1>search engine optimization</h1> <h4>discover more about our seo expertise!</h4> <ul> <li><a href=&qoute;#&qoute; class=&qoute;button&qoute;>Get Started</a></li> <li><a href=&qoute;#&qoute; class=&qoute;button&qoute;>Learn More</a></li> </ul> <img src=&qoute;assets/images/banner/01.png&qoute; alt=&qoute;banner image&qoute;> </div> </div> </div> <div class=&qoute;swiper-slide&qoute;> <div class=&qoute;banner-item bi-two&qoute;> <div class=&qoute;banner-content&qoute;> <h3>our popular service for</h3> <h1>search engine optimization</h1> <h4>discover more about our seo expertise!</h4> <ul> <li><a href=&qoute;#&qoute; class=&qoute;button&qoute;>Get Started</a></li> <li><a href=&qoute;#&qoute; class=&qoute;button&qoute;>Learn More</a></li> </ul> <img src=&qoute;assets/images/banner/02.png&qoute; alt=&qoute;banner image&qoute;> </div> </div> </div> <div class=&qoute;swiper-slide&qoute;> ------------------------------ ------------------------------ <!-- start service section --> <section class=&qoute;service-section&qoute;> <div class=&qoute;container&qoute;> <div class=&qoute;service-list&qoute;> <div class=&qoute;row&qoute;> <div class=&qoute;col-md-4 col-sm-4 col-xs-12&qoute;> <div class=&qoute;service-item&qoute;> <div class=&qoute;service-thumb&qoute;> <img src=&qoute;assets/images/service/01.png&qoute; alt=&qoute;service&qoute;> </div> <div class=&qoute;service-content&qoute;> <h5><a href=&qoute;service-single.html&qoute;>search engine optimization</a></h5> <ul> <li> <i class=&qoute;fa fa-check-square-o&qoute; aria-hidden=&qoute;true&qoute;></i> <p>html code cleanup</p> </li> <li> <i class=&qoute;fa fa-check-square-o&qoute; aria-hidden=&qoute;true&qoute;></i> <p>internal link structuring</p> </li> <li> <i class=&qoute;fa fa-check-square-o&qoute; aria-hidden=&qoute;true&qoute;></i> <p>website content writing</p> </li> <li> <i class=&qoute;fa fa-check-square-o&qoute; aria-hidden=&qoute;true&qoute;></i> <p>content optimization</p> </li> </ul> <a href=&qoute;service-single.html&qoute; class=&qoute;button button-sm&qoute;>read more</a> </div> </div> </div> -------------------------------- -------------------------------- <!-- Start footer section --> <footer> <div class=&qoute;footer-top section-padding&qoute;> <div class=&qoute;container&qoute;> <div class=&qoute;row&qoute;> <div class=&qoute;col-md-3 col-sm-6 col-xs-12&qoute;> <div class=&qoute;widget-item&qoute;> <h4 class=&qoute;widget-title&qoute;>contact us</h4> <div class=&qoute;wg-contact&qoute;> <p>Distly enable team driven and services through extensive is wasrt relatonships platforms with interactive and content. Enthusiastically scale effective.</p> <ul> <li> <i class=&qoute;fa fa-home&qoute; aria-hidden=&qoute;true&qoute;></i> <p>New chokoya road,usa.</p> </li> <li> <i class=&qoute;fa fa-phone&qoute; aria-hidden=&qoute;true&qoute;></i> <p>+8802 923 970 232</p> </li> <li> <i class=&qoute;fa fa-envelope-o&qoute; aria-hidden=&qoute;true&qoute;></i> <p>contact@admin labartisan</p> </li> <li> <i class=&qoute;fa fa-globe&qoute; aria-hidden=&qoute;true&qoute;></i> <p>gmail@admin labartisan</p> </li> </ul> </div> </div> </div> <div class=&qoute;col-md-3 col-sm-6 col-xs-12&qoute;> <!-- All Plugin file --> <script type="text/javascript&qoute; src=&qoute;assets/js/plugins.js&qoute;></script> <script type=&qoute;text/javascript&qoute; src=&qoute;assets/js/function.js&qoute;></script> <script type=&qoute;text/javascript&qoute; src=&qoute;assets/js/layout.js&qoute;></script> </body> </html>
We are using here SASS 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 normalize.scss 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
SASS Included the Below Files
/* Theme Name: SeoLab - Digital Marketing Agency, Social Media, SEO Template Theme URI: http://codexcoder.com/ Author: codexcoder Author URI: http://codexcoder.com/ Description: SeoLab is a responsive, Digital Marketing Agency, Social Media, SEO 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: Digital Marketing Agency, Social Media, SEO Template. */
-----------------------------------------------*/
/* 01 -
----------------------------------------------*/
/*
1.0 - Normalize
*/
html {
font-family: 'Poppins', sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
font-family: 'Poppins', 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;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
color: #696969;
-webkit-transition: .25s;
-moz-transition: .25s;
-ms-transition: .25s;
-o-transition: .25s;
transition: .25s;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: 700;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 0;
}
hr {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
code,
kbd,
pre,
samp {
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
select {
text-transform: none;
}
button {
overflow: visible;
}
button,
input,
select,
textarea {
max-width: 100%;
}
/*
---------------------------------------------*/
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
----------------------------------------------*/
//Home Page map
var mapOptions = {
center: new google.maps.LatLng(49.817492,15.472962),
zoom: 10,
styles: styleArray,
scrollwheel: false,
backgroundColor: 'transparent',
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("contact-map"),
mapOptions);
var myLatlng = new google.maps.LatLng(49.817492,15.472962);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: 'assets/images/map-icon.png'
});
Edit Latitude and Longitude accordingly as your requirements see the line
center: [lat: 49.817492, 15.472962],
and
latLng: [lat: 49.817492, 15.472962], icon: 'images/map-icon.png'