CREATING FOOTER
FOOTER.EJS
<footer>
<div class="f-info">
<div class="f-info-socials">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-square-instagram"></i>
<i class="fa-brands fa-linkedin"></i>
</div>
<div class="f-info-brand">©WnaderLust Private Ltd</div>
<div class="f-info-links">
<a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
</div>
</div>
</footer>
IN BOILERPLATE.EJS
<body>
<%- include("../includes/navbar.ejs") %>
<div class="container"><%- body %></div>
<%- include("../includes/footer.ejs") %>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
</body>
STYLE.CSS
/* FOOTER */
.f-info-links a {
text-decoration: none;
margin: 0.5rem;
color: #222222;
}
.f-info-links a:hover {
text-decoration: underline;
}
.f-info-links,
.f-info-socials,
.f-info-brand {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
.f-info-socials i {
font-size: 1.3rem;
margin-right: 1rem;
}
.f-info {
text-align: center;
height: 8rem;
background-color: #ebebeb;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: space-evenly;
}
Comments
Post a Comment