... header area ...
<div id="content">
<section id="section-main">
content here...
</section>
<section id="section-about">
content here...
</section>
<section id="section-services">
content here...
</section>
</div>
... footer area ...
Note: You can rename or delete all sections except 'section-main' because it used for the main function.
For a simple two column layout, create a .row and add the appropriate number of .col-md-* columns. As this is a 12-column grid, each .col-md-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).
Please read more for Bootstrap grid system here: https://getbootstrap.com/docs/4.5/layout/grid/
<div class="row">
<div class="col-md-6"> this is 1/2 columns </div>
<div class="col-md-6"> this is 1/2 columns </div>
</div> <div class="row">
<div class="col-md-4"> this is 1/3 columns </div>
<div class="col-md-8"> this is 2/3 columns </div>
</div> <div class="row">
<div class="col-md-3"> this is 1/4 columns </div>
<div class="col-md-9"> this is 3/4 columns </div>
</div>
For each template page, look at line 30 below
<link id="colors" href="css/colors/scheme-01.css" rel="stylesheet" type="text/css">
Then replace scheme-01.css with another value. You can choose one of below: scheme-01.css, scheme-02.css, scheme-03.css, scheme-04.css.
All premade color on this template can be found inside folder css/colors/.
Select an object that you want to animate. As example you want create animate for H1 element. You can see below:
<h1 class="wow fadeIn" data-wow-delay=".2s" data-wow-duration=".5s">Animate Text</h1>
Open any page that has a countdown. Look code at the bottom of the page source code:
<!-- Countdown
================================================== -->
<script>
jQuery(document).ready(function() {
$(function () {
$('#defaultCountdown').countdown({until: new Date(2021, 2-1, 10, 8)}); // year, month (value-1), date, hour
});
});
</script>
Change value 'Date(2021, 2-1, 10, 8)' with new date (year, month (value-1), date, hour).
To make custom background color without touching css file, you can use code data-bgcolor="#hex-color" within your div/section tag. See sample below:
<section data-bgcolor="#333333">
my section content...
</section>
To make custom background image without touching css file, you can use code data-bgimage="url(your-image-url)" within your div/section tag. See sample below:
<section data-bgimage="url(images/background/bg-1.jpg)">
my section content...
</section>
First create custom background for your section/div, you can use code data-bgimage="url(your-image-url)" within your div/section tag. See sample below:
<section data-bgimage="url(images/background/bg-1.jpg)">
my section content...
</section>
Add attribute data-stellar-background-ratio for images speed.
<section data-bgimage="url(images/background/bg-1.jpg)" data-stellar-background-ratio=".2"> my section content... </section>