Footer is a section of our page that is generally used as an additional navigation for the website. The container footer can contain links, buttons, company information, copyright and many other elements.
We use the grid system to create the content of our footer and other components.
The default footer takes the background color based on the background of the body of your website,
ie if your site has the color body (Blue) the footer takes a slightly stronger tone of the same blue.
You can also add colors from our palette.
<footer class="e-footer">
<div class="e-container"><!-- Or e-container-fluid -->
<div class="e-section"><!-- Optional -->
<div class="e-cols">
<div class="e-col-5">
<h4>Footer Content</h4>
<p class="look">Your text...</p>
</div>
<div class="e-col">
<h5>Services</h5>
<ul>
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
</ul>
</div>
<div class="e-col">
<h5>Products</h5>
<ol>
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
</ol>
</div>
</div>
</div>
</div>
<div class="e-footer-bar">
<p>© 2019 Copyright: <a class="link"> eFrolicss</a></p>
</div>
</footer>The footer-bar is an element of the footer container, used for copyrights, buttons, breadcrumb, among other components.
<div class="e-footer-bar">
<p>© 2019 Copyright: <a class="link"> eFrolicss</a></p>
<div class="e-buttons">
<a class="e-btn circle small primary"><i class="fab fa-facebook-f"></i></a>
<a class="e-btn circle small sky"><i class="fab fa-twitter"></i></a>
<a class="e-btn circle small danger"><i class="fab fa-google"></i></a>
</div>
</div><div class="e-footer-bar centered">
Your content...
</div><div class="e-footer-bar align-end">
Your content...
</div><div class="e-footer-bar between">
Your content...
</div> <!-- Your color -->
<div class="e-footer-bar primary">
Your content...
</div> <footer class="e-footer primary">
<div class="e-container-fluid">
<div class="e-cols">
<div class="e-col">
<h5>Links</h5>
<ul>
<li><a class="link">Link 1</a></li>
<li><a class="link">Link 2</a></li>
</ul>
</div>
<div class="e-col">
<h5>Links</h5>
<ul>
<li><a class="link">Link 1</a></li>
<li><a class="link">Link 2</a></li>
</ul>
</div>
<div class="e-col">
<h5>Links</h5>
<ol>
<li><a class="link">Link 1</a></li>
<li><a class="link">Link 2</a></li>
</ol>
</div>
<div class="e-col">
<h5>Links</h5>
<ol>
<li><a class="link">Link 1</a></li>
<li><a class="link">Link 2</a></li>
</ol>
</div>
</div>
</div>
<div class="e-footer-bar between">
<p>© 2019 Copyright: <a class="link"> eFrolicss</a></p>
<div class="e-buttons">
<a class="e-btn circle small transparent"><i class="fab fa-facebook-f"></i></a>
<a class="e-btn circle small transparent"><i class="fab fa-twitter"></i></a>
<a class="e-btn circle small transparent"><i class="fab fa-google"></i></a>
</div>
</div>
</footer>
<div class="e-footer-bar purple-gradient between">
<h4>Logo</h4>
<div class="e-buttons">
<a class="e-btn circle small primary"><i class="fab fa-facebook-f"></i></a>
<a class="e-btn circle small sky"><i class="fab fa-twitter"></i></a>
<a class="e-btn circle small danger"><i class="fab fa-google"></i></a>
</div>
</div>
<footer class="e-footer dark">
<div class="e-container-fluid">
<div class="e-section">
<div class="e-cols">
<div class="e-col-5">
<h4>Footer Content</h4>
<p class="look">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="e-col">
<h5>Services</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
</ul>
</div>
<div class="e-col">
<h5>Products</h5>
<ol>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
</ol>
</div>
<div class="e-col">
<h5>Products</h5>
<ol>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
</ol>
</div>
</div>
</div>
<div class="e-section">
<div class="e-container centered">
<hr>
<h3>Newsletter
<span class="e-tag transparent static">Releases</span>
<span class="e-tag transparent static">Features</span>
<span class="e-tag transparent static">stay in the loop!</span> </h3>
<div class="e-col-12 centered">
<a href="#" class="e-btn rounded purple-gradient"> Subscribe now!</a>
</div>
<hr>
</div>
</div>
</div>
<div class="e-footer-bar between">
<p>© 2019 Copyright: <a class="link"> eFrolicss</a></p>
<nav class="e-breadcrumb" aria-label="breadcrumb">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="active"><a aria-current="page">Support</a></li>
</ul>
</nav>
</div>
</footer><footer class="e-footer warning">
<div class="e-container-fluid">
<div class="e-cols">
<div class="e-col-4">
<h4>Footer Content</h4>
<p>Your text...</p>
</div>
<div class="e-col">
<h5>Links</h5>
<ul>
<li><a class="link">Link 1</a></li>
</ul>
</div>
<div class="e-col">
<h5>Links</h5>
<ul>
<li><a class="link">Link 1</a></li>
</ul>
</div>
<div class="e-col">
<h5>Links</h5>
<ol>
<li><a class="link">Link 1</a></li>
</ol>
</div>
<div class="e-col no-mobile">
<h5 class="text-center">Links</h5>
<div class="e-buttons centered">
<a class="e-btn circle small inverted primary"><i class="fab fa-facebook-f"></i></a>
</div>
<div class="e-buttons centered">
<a class="e-btn circle small inverted sky"><i class="fab fa-twitter"></i></a>
</div>
<div class="e-buttons centered">
<a class="e-btn circle small inverted danger"><i class="fab fa-google"></i></a>
</div>
</div>
</div>
</div>
<div class="e-footer-bar between">
<p>© 2019 Copyright: <a class="link"> eFrolicss</a></p>
<div class="e-buttons no-desktop">
<a class="e-btn circle small inverted primary"><i class="fab fa-facebook-f"></i></a>
<a class="e-btn circle small inverted sky"><i class="fab fa-twitter"></i></a>
<a class="e-btn circle small inverted danger"><i class="fab fa-google"></i></a>
</div>
</div>
</footer> <footer class="e-footer success">
<div class="e-cols">
<div class="e-col">
<nav class="e-breadcrumb" aria-label="breadcrumb">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</div>
<div class="e-col-12">
<div class="e-buttons centered">
<a class="e-btn circle inverted primary"><i class="fab fa-facebook-f"></i></a>
<a class="e-btn circle inverted sky"><i class="fab fa-twitter"></i></a>
<a class="e-btn circle inverted danger"><i class="fab fa-google"></i></a>
<a class="e-btn circle inverted dark"><i class="fab fa-github"></i></a>
<a class="e-btn circle inverted primary"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="e-footer-bar centered">
<p>© 2019 Copyright: <a class="link"> eFrolicss</a></p>
</div>
</footer> <footer class="e-footer primary">
<div class="e-container">
<div class="e-section">
<div class="e-cols">
<div class="e-col">
<h5>Services</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
</ul>
</div>
<div class="e-col">
<h5>Services</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
</ul>
</div>
<div class="e-col">
<h5>Services</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
</ul>
</div>
<div class="e-col">
<h5>Products</h5>
<ol>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
</ol>
</div>
<div class="e-col">
<h5>Products</h5>
<ol>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
</ol>
</div>
</div>
</div>
<div class="e-section">
<div class="e-container centered">
<hr>
<h3>Newsletter
<span class="e-tag danger static">Releases</span>
<span class="e-tag success static">Features</span>
</h3>
<div class="e-col-12 centered">
<button class="e-btn plus transparent"> Subscribe now!</button>
</div>
<hr>
</div>
</div>
<div class="e-section">
<div class="e-container centered">
<div class="e-buttons centered">
<a class="e-btn circle inverted small primary"><i class="fab fa-facebook-f"></i></a>
<a class="e-btn circle inverted small sky"><i class="fab fa-twitter"></i></a>
<a class="e-btn circle inverted small danger"><i class="fab fa-google"></i></a>
</div>
</div>
</div>
</div>
<div class="e-footer-bar between">
<p>© 2019 Copyright: <a class="link"> eFrolicss</a></p>
<nav class="e-breadcrumb" aria-label="breadcrumb">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="active"><a aria-current="page">Support</a></li>
</ul>
</nav>
</div>
</footer>If you are using our framework in a product that generates income,
you can also help its maintenance if you wish, if you frequently help in your company
or personal developments consider making a recurring donation.
If you want to see your company's logo on this site it's time to be a serious Sponsor.
