Colors are variables defined in the :root pseudo-element (line 69). You can define a new color inside this element like this :
--mycolor: #ff0000;
Then define a new class and use it like this :
.myColor {
color: var(--mycolor)
}
Use the following classes to use the colors:
.color
.dark
.white
This template uses Flexbox for positionning:
To position your div, first of all, add the flex class to your parent div. Your code should look like this :
<div class="flex">
<!--Content-->
</div>
Center a div inside another div. Your code should be like this:
<div class="flex flexCenter">
<div><!--Content--></div>
</div>
Instead of having a flow left to right, your divs have a flow top to bottom. Your code will be :
<div class="flex flexColumn">
<div><!--Content--></div>
</div>
Aligns all the child elements to the left:
<div class="flex flexStart">
<div><!--Content--></div>
</div>
Combined to .flexColumn, it aligns all the child elements to the top:
<div class="flex flexColumn flexStart">
<div><!--Content--></div>
</div>
Aligns all the child elements to the right:
<div class="flex flexEnd">
<div><!--Content--></div>
</div>
Combined to .flexColumn, aligns all the child elements to the bottom:
<div class="flex flexColumn flexEnd">
<div><!--Content--></div>
</div>
By default, the elements inside a flex element will never wrap, it means that it will always remain on one line. To avoid that, you can use the .flexWrap class:
<div class="flex flexWrap">
<div><!--Content--></div>
</div>
More information here : flex.wrap
Vertically center any content:
<div class="flex flexVerticalAlign">
<div>Content</div>
</div>
Use this class to center a text inside a div:
<div class="text-center">
<p>Your text centered</p>
</div>
Use this classes to add padding to your sections :
.section-10: Use this class to add 10px all around your section. You can change the number up to 80 (.section80 will give you a padding of 80px)
<section class="section-10">
Content
</section>
.section-lr-10: Use this class to add 10px on the left and on the right of your section. You can change the number up to 80 (.section-lr-80 will give you a padding of 80px)
<section class="section-lr-10">
Content
</section>
Use this classes to add margin. You can change the number from 0 to 80 to change the size of the margin.
.margin-10
: Margin of 10px all around the div.mt-10
: Margin of 10px above the div.mb-10
: Margin of 10px under the div.ml-10
: Margin of 10px on the left of the div.mr-10
: Margin of 10px on the right of the divUse this classes to add padding. You can change the number from 0 to 80 to change the size of the padding.
.padding-10
: Padding of 10px all around the div.pt-10
: Padding of 10px above the div.pb-10
: Padding of 10px under the div.pl-10
: Padding of 10px on the left of the div.pr-10
: Padding of 10px on the right of the divThe icons used on this Template are from Line Icons. If you want to use more icons, please visit : https://lineicons.com/icons/. Here is an example of the different styles :
<i class="lni lni-arrow-right-circle">
<i class="lni medium lni-arrow-right-circle">
<i class="lni large lni-arrow-right-circle">
<i class="lni colored lni-arrow-right-circle">
<i class="lni colored medium lni-arrow-right-circle">
<i class="lni colored large lni-arrow-right-circle">
Code:
<div class="btns">
<button type="button" class="btn">Primary button</button>
<button type="button" class="btn outline">Secondary button</button>
</div>
Code:
<div class="pb-20 titleBorderLeft">
<h1>H1 with border</h1>
</div>
Code:
<div class="titleBorder text-center pb-20">
<h1>H1 with border</h1>
</div>