Hey Oqtane Community, A footer can beautify the overall appearance and experience of your website, and on this blog, I’ll walk you through adding a footer on your Oqtane site using HTML and CSS. We'll use a pre-designed footer with several sections like "About Us," "Services," "Resources," and "Contact," along with social media icons and legal links.
Step 1: Adding the Footer HTML
First, let's add the HTML for the footer. This footer has four main columns for links, a section for social media icons, and a footer bottom with some legal information.
<!-- Footer Section -->
<footer class="stylish-footer">
<div class="footer-logo">SightSpeak AI</div>
<div class="footer-columns">
<div class="footer-column">
<h3>About Us</h3>
<ul>
<li><a href="#about">Our Story</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#careers">Careers</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Services</h3>
<ul>
<li><a href="#ai-solutions">AI Solutions</a></li>
<li><a href="#consulting">Consulting</a></li>
<li><a href="#support">Support</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Resources</h3>
<ul>
<li><a href="#blog">Blog</a></li>
<li><a href="#case-studies">Case Studies</a></li>
<li><a href="#faqs">FAQs</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Contact</h3>
<ul>
<li><a href="#contact-us">Contact Us</a></li>
<li><a href="#support">Support Center</a></li>
<li><a href="#location">Our Locations</a></li>
</ul>
</div>
</div>
<div class="social-links">
<a href="https://www.facebook.com" target="_blank" class="bi bi-facebook"></a>
<a href="https://www.twitter.com" target="_blank" class="bi bi-twitter"></a>
<a href="https://www.linkedin.com" target="_blank" class="bi bi-linkedin"></a>
<a href="https://www.instagram.com" target="_blank" class="bi bi-instagram"></a>
</div>
<div class="footer-bottom">
<p>© 2024 SightSpeak AI. All Rights Reserved.</p>
<div class="footer-links">
<a href="#privacy-policy">Privacy Policy</a>
<a href="#terms-of-service">Terms of Service</a>
</div>
</div>
</footer>
Explanation of HTML Structure:
<footer class="stylish-footer">: This is the main footer container that uses the class stylish-footer for styling.
Logo Section: Inside the footer, we have a <div> element with the class footer-logo that holds the site name "SightSpeak AI."
Footer Columns: The footer contains four columns under the footer-columns class. Each column has a heading (<h3>) and an unordered list (<ul>) of links.
Social Links: Below the columns, we have social media links styled with icon classes like bi bi-facebook and others for Twitter, LinkedIn, and Instagram.
Footer Bottom: At the bottom of the footer, there’s a copyright message and two links for Privacy Policy and Terms of Service.
Step 2: Adding the CSS
Next, let's apply some CSS to style the footer. Add the following CSS to your stylesheet or directly in your Oqtane module.
<style>
/* Footer */
.stylish-footer {
background-color: #ec9937 !important; /* Ensure this color applies */
color: #fff;
padding: 20px;
}
.footer-logo {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.footer-columns {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
}
.footer-column {
flex: 1;
min-width: 150px;
margin-bottom: 20px;
}
.footer-column h3 {
font-size: 18px;
margin-bottom: 10px;
}
.footer-column ul {
list-style: none;
padding: 0;
}
.footer-column ul li {
margin-bottom: 8px;
}
.footer-column ul li a {
color: #fff;
text-decoration: none;
}
.footer-column ul li a:hover {
text-decoration: underline;
}
.social-links {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.social-links a {
font-size: 24px;
margin: 0 10px;
color: #fff;
}
.footer-bottom {
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding-top: 10px;
margin-top: 20px;
}
.footer-links a {
margin: 0 10px;
color: #fff;
text-decoration: none;
}
.footer-links a:hover {
text-decoration: underline;
}
</style>
Explanation of the CSS:
.stylish-footer: The overall footer container is given a background color of orange (#ec9937) and white text color (#fff). Padding adds some space inside the footer.
.footer-logo: The logo text is styled to be bold and larger than normal text with a bottom margin for spacing.
.footer-columns: Flexbox is used to lay out the columns, ensuring they wrap on smaller screens. Each column has a minimum width of 150px to prevent them from getting too small on small screens.
.footer-column h3: The headings inside each column are made larger (18px) and given some space at the bottom.
.footer-column ul: This removes bullet points and sets proper spacing for the list of links.
.social-links: Social media icons are centered horizontally and spaced apart with a 10px margin.
.footer-bottom: The bottom of the footer has a light border, centered text, and spaced-out links for privacy and terms.
Step 3: Implementing in Oqtane
To add this footer to your Oqtane website:
Open Oqtane: Log in to your Oqtane application.
Navigate to the Page: Go to the page where you want to add the footer.
Add HTML Text Module: Add an HTML Text module to the bottom of the page.
Paste the Code: Insert the HTML code into the module.
Save and Apply the CSS: Add the CSS either in the site's global styles or within the module's CSS section to apply the styles.
Conclusion:
By following these steps, you've successfully added a stylish and functional footer to your Oqtane website. This footer is not only responsive but also easy to customize to suit your branding. Thank for reading, Stay tuned for such interesting blogs in future with SightSpeak AI.