HTML5/CSS3-Bootstrap Template Documentation
The template is based on Bootstrap 4 the world's most popular front-end component library for developing responsive, mobile-first projects on the web.
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
Create a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding, then create .row and add columns with appropriate device name (xs, sm, md, lg) and grid number (2, 4, 6, 12).
For full documentation, please visit Bootstrap 4 site: https://getbootstrap.com/docs/4.1/getting-started/download/
<section id="" class="">
<div class="container">
...
...
</div>
</section>
Well organized and labeled CSS files is one of my priorities.
These are the CSS file you're be using in the template:
jQuery - is a Javascript library that greatly reduces the amount of code that you must write.
For more information, please visit http://www.jquery.com/
The initialization of the elements, libs and features is made by the file custom.js, in the js folder.
Some of the sections have backgrounds image and to change those backgrounds:
1. Simply open style.css find that section class name, change background image by change the link of image directory
OR
2. In that image directory keep your image as same name as like us.
3. Few section has background overlay low opacity color. Follow the below code, please.
style.css:
.page-header-content {
position: relative;
background: url(../images/header-bg.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.banner_1 {
background: url(../images/bg-1.jpg);
background-position: center;
background-size: cover;
}
etc...
<div class="slide_1">
<div class="owl-carousel slider_carousel_1">
<div class="item">
<div class="slider_item" style="background-image:url('images/slider/bg_1.jpg')">
<div class="slider-inner">
<div class="slider-details">
<span class="slider-tag">landscape</span>
<h1 class="slide_heading">
<span class="sub_heading">Incredible</span> <br>
<span class="default_heading">Iceland</span>
</h1>
<div class="button_group">
<a href="#" class="button effect_5 fade_white_button" data-text="Read More"><span>See Details</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="slider_item" style="background-image:url('images/slider/bg_2.jpg')">
<div class="slider-inner">
<div class="slider-details">
<span class="slider-tag">landscape</span>
<h1 class="slide_heading">
<span class="sub_heading">Incredible</span> <br>
<span class="default_heading">Iceland</span>
</h1>
<div class="button_group">
<a href="#" class="button effect_2 fade_white_button" data-text="Read More"><span>See Details</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="slider_item" style="background-image:url('images/slider/bg_3.jpg')">
<div class="slider-inner">
<div class="slider-details">
<span class="slider-tag">landscape</span>
<h1 class="slide_heading">
<span class="sub_heading">Incredible</span> <br>
<span class="default_heading">Iceland</span>
</h1>
<div class="button_group">
<a href="#" class="button effect_3 fade_white_button" data-text="Read More"><span>See Details</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slider-counter"></div>
</div>
Here just showing code for slider type 1. Like this has also another 3 types of slider.
You can add more slide by following this coding pattern. Then change Image.
N.B.: Slider control option API in custom.js. And you can add/remove/edit api by following owl carousel, mention at bellow.
See portfolio coding pattern in html file
<section class="portfolio-grid pt-0"> [use "portfolio-grid" for grid and "portfolio-masonry" for masonry portfolio.]
<div class="button-group filters-button-group">
<button class="button is-checked" data-filter="*">All works <sup class="filter-count"></sup></button>
<button class="button" data-filter=".webdesign">Web Design <sup class="filter-count"></sup></button>
<button class="button" data-filter=".illustrator">Illustrator <sup class="filter-count"></sup></button>
<button class="button" data-filter=".branding">Branding <sup class="filter-count"></sup></button>
<button class="button" data-filter=".photography">Photography <sup class="filter-count"></sup></button>
</div>
<div class="grid grid-5 gutter-5 clearfix"> [use "grid" class for grid portfolio and "grid masonry" class for masonry portfolio. In the same tagline, use "grid-1,2,3,4,5" class for column and "gutter-0,5,10,15,20,25,30" class (as pixel) for column gap.]
<div class="grid-sizer"></div>
<div class="grid-item webdesign">
<div class="thumb">
<img class="item_image" src="images/portfolio/masonry/1.jpg" alt=""/>
<div class="works-info">
<div class="label-text">
<h4>Beauty of nature in life</h4>
<h6>Nature & Life</h6>
</div>
</div>
</div>
</div>
<div class="grid-item branding">
<div class="thumb">
<img class="item_image" src="images/portfolio/masonry/2.jpg" alt=""/>
<div class="works-info">
<div class="label-text">
<h4>Beauty of nature in life</h4>
<h6>Nature & Life</h6>
</div>
</div>
</div>
</div>
------------
------------
</div>
</section>
Blog 1: There is "blog-list" class as parent class name in blog section
<div class="blog-list">
<article class="blog_post">
<div class="post_img">
<img src="images/blog/1.jpg" alt="img"/>
</div>
<div class="post-content">
<div class="post_content_blog">
<div class="post_header">
<h6>category</h6>
<h2>Adventures for northern lights</h2>
</div>
<div class="post_intro">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="post_footer">
<ul class="post_meta">
<li><i class="ion-ios-chatbubbles"></i> Comments: 5</li>
<li><i class="ion-md-alarm"></i> Date: 25 Jan 2019</li>
</ul>
<div class="button_group">
<a href="#" class="button light_button effect_5" data-text="Details"><span>Read More</span></a>
</div>
</div>
</div>
</article>
</div>
Blog 2: There are "blog-grid" class as parent class name in blog section
Blog Page Layout: There are three types Blog style in our template. Main content in 8 column, and sidebar is in 4 column.
Add contact form HTML in this page.
Google Map: Google Map API key in contact.html file at bottom in script tag. Change API here. And Lattitude/Longitude in custom.js file.
Open style.css in any text editor from css folder. And see imported Google font link.
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,300italic,400,600,700|Mukta:400,500,600,700,800|Playfair+Display');
We are using Google font and other open source font. You can change here font link that you want. Then need to change font-family at that div / tag/ section class in style.css file.
Google Font Link
Font
Awesome and IonIcons are @font-face icon sets that you can change color and size using CSS. We also use some custom icons on this template. you can easily replace that icons with font awsome or elegant icons.
If you need more information about these icon sets, please visit this sites:
http://fontawesome.io/icons/
IonIcons
These font css file in this directory: css\fonts\font-awesome\css\font-awesome.css
and
css\fonts\ionicons\css\ionicon.css
Use icon class name from above css files.
HTML Markup:
<i class="fa fa-facebook"><i>
<i class="ion-ios-leaf"><i>You can use another icon you like. Then keep font in fonts family. And keep icon font css in css folder like ionicon.css and font-awesome.css
Then use font in HTML as per using method of that font.
Created on: 27/03/2020