A footer typically contains links, copyright information, and other secondary navigation elements at the bottom of a webpage.
<footer class="c-footer">
<div class="c-footer__newsletter">
<h2>Join Our Newsletter</h2>
<div class="c-footer__newsletter-form">
<form action="#" method="GET">
<input type="email" placeholder="Enter your email..." />
<button type="submit" class="c-footer__newsletter-submit">Subscribe</button>
</form>
</div>
</div>
<div class="c-footer__grid">
<div class="c-footer__grid-left">
<p class="c-footer__mission-statement">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad minima ipsam dolor odio alias aperiam aliquid ut facere velit eos libero tenetur cumque itaque, laudantium beatae!</p>
<a href="#" class="c-footer__logo">Logo</a>
</div>
<div class="c-footer__grid-right">
<nav class="c-footer__navigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</nav>
<div class="c-footer__contact">
<ul>
<li>Address</li>
<li>Phone Number</li>
<li>Social Media</li>
</ul>
</div>
</div>
</div>
<div class="c-footer__legal">
<a href="#">Privacy Policy</a>
<p>© 2024 Company Name | All Rights Reserved</p>
</div>
</footer>
.c-footer {
padding: 20px;
border: 1px solid #a0aec0;
border-radius: 5px;
}
.c-footer__newsletter {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #a0aec0;
padding-bottom: 15px;
margin-bottom: 20px;
}
.c-footer__newsletter input[type="email"] {
padding: 10px 30px;
border-radius: 20px;
}
.c-footer__newsletter button[type="submit"] {
padding: 10px 20px;
border-radius: 20px;
cursor: pointer;
}
.c-footer__grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: 40px;
}
.c-footer__grid-left {
grid-column: span 6;
}
.c-footer__mission-statement {
font-size: 14px;
}
.c-footer__logo {
display: inline-flex;
margin-top: 20px;
color: #ffffff;
}
.c-footer__logo:hover {
color: #ff3c26;
}
.c-footer__grid-right {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
grid-column: span 6;
}
.c-footer__navigation ul {
display: flex;
flex-wrap: wrap;
}
.c-footer__navigation li {
width: 50%;
list-style: none;
}
.c-footer__navigation li a {
color: #ffffff;
}
.c-footer__navigation li a:hover {
color: #ff3c26;
}
.c-footer__contact li {
list-style: none;
}
.c-footer__legal {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #a0aec0;
padding-top: 15px;
margin-top: 20px;
}
.c-footer__legal a {
color: #ffffff;
}
.c-footer__legal a:hover {
color: #ff3c26;
}
.c-footer__statement p {
font-size: 14px;
}
.c-footer {
padding: 20px;
border: 1px solid #a0aec0;
border-radius: 5px;
&__newsletter {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #a0aec0;
padding-bottom: 15px;
margin-bottom: 20px;
input[type="email"] {
padding: 10px 30px;
border-radius: 20px;
}
button[type="submit"] {
padding: 10px 20px;
border-radius: 20px;
cursor: pointer;
}
}
&__grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: 40px;
}
&__grid-left {
grid-column: span 6;
}
&__mission-statement {
font-size: 14px;
}
&__logo {
display: inline-flex;
margin-top: 20px;
color: #ffffff;
&:hover {
color: #ff3c26;
}
}
&__grid-right {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
grid-column: span 6;
}
&__navigation {
ul {
display: flex;
flex-wrap: wrap;
}
li {
width: 50%;
list-style: none;
a {
color: #ffffff;
&:hover {
color: #ff3c26;
}
}
}
}
&__contact {
li {
list-style: none;
}
}
&__legal {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #a0aec0;
padding-top: 15px;
margin-top: 20px;
a {
color: #ffffff;
&:hover {
color: #ff3c26;
}
}
}
&__statement {
p {
font-size: 14px;
}
}
}