Set width: full 320 480 640 768 1024 1920 custom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer with company info, site links and social media links</title>
<meta name="description" content="A footer with company information, site links and social media links.">
<style>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
}
p {
line-height: 130%;
}
footer {
display: flex;
padding: 1em;
background-color: #eaeaea;
border-top: 1px solid #ccc;
position: relative;
}
footer>div {
padding: 0 1em;
}
footer>div + div {
margin-left: 1em;
}
footer>div.wide {
flex: 1;
}
footer>div:last-child {
margin-left: auto;
}
footer address {
font-style: normal;
}
footer>div>p span {
display: inline-block;
width: 4em;
}
footer .map-link a {
display: flex;
font-size: .9em;
align-items: center;
color: inherit;
}
footer .map-link a svg {
height: 22px;
width: auto;
display: block;
margin-right: .4em;
}
footer .social {
display: flex;
gap: .75em;
}
footer .social svg {
width: auto;
height: 40px;
display: block;
}
footer form {
display: flex;
max-width: 400px;
gap: .5em;
}
footer form input, footer form button {
padding: 6px 10px;
}
footer form input {
flex: 1;
}
@media screen and (max-width: 1023px) {
footer {
flex-direction: column;
padding-bottom: 2em;
}
footer>div + div {
margin-left: 0;
margin-top: 1em;
}
footer>div:last-child {
margin-left: 0;
}
}
@media screen and (max-width: 479px) {
footer form {
flex-direction: column;
}
footer>div>p {
line-height: 150%;
}
footer>div>p span {
display: block;
width: 100%;
}
}
</style>
</head>
<body>
<div class="wrap">
<footer>
<div>
<h3>Company Name</h3>
<address>
<p>
123 Street Name<br />
City, State, Zip<br />
Country
</p>
</address>
<p class="map-link">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" />
</svg>
Show on Map
</a>
</p>
<p><span>Phone:</span> <a href="tel:+1234567890">123-456-7890</a><br />
<span>Email:</span> <a href="mailto:info@example.com">info@example.com</a></p>
</div>
<div>
<h3>Links</h3>
<p>
<a href="">About us</a><br />
<a href="">Services</a><br />
<a href="">Careers</a><br />
<a href="">Support</a><br />
<a href="">Contact us</a><br />
<a href="">Privacy policy</a><br />
<a href="">Terms of Use</a>
</p>
</div>
<div class="wide">
<h3>Newsletter</h3>
<p>Subscribe to our newsletter to get the latest news and updates.</p>
<form action="">
<input type="email" name="email" id="email" placeholder="Enter your email address">
<button type="submit">Sign Me Up</button>
</form>
</div>
<div>
<h3>Follow us</h3>
<div class="social">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="#231f20" stroke-width="0"/><path fill="#fff" fill-rule="evenodd" stroke-width="0" d="m40.6,87.7h13.6v-31.5h10.1l2-12.7h-12.1v-9.6c0-3.6,3.4-5.6,6.7-5.6h5.9v-10.5l-10.5-.5c-10.1-.6-15.7,7.3-15.7,16.7v9.5h-11.5v12.7h11.5v31.5Z"/></svg>
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="#231f20" stroke-width="0"/><path fill="#fff" fill-rule="evenodd" stroke-width="0" d="m35.3,18.1h29.4c9.4,0,17.2,7.8,17.2,17.2v29.3c0,9.4-7.8,17.2-17.2,17.2h-29.4c-9.4,0-17.2-7.8-17.2-17.2v-29.3c0-9.4,7.8-17.2,17.2-17.2h0Zm31.9,11.1h0c2,0,3.7,1.7,3.7,3.7h0c0,2-1.7,3.7-3.7,3.7h0c-2.1,0-3.7-1.7-3.7-3.7h0c0-2,1.5-3.7,3.7-3.7h0Zm-17.2,3.4h.2c9.4,0,17.4,7.9,17.4,17.4h0c0,9.6-7.9,17.4-17.4,17.4h-.2c-9.4,0-17.2-7.8-17.2-17.4h0c0-9.4,7.8-17.4,17.2-17.4h0Zm0,5.9h.2c6.2,0,11.4,5.2,11.4,11.4h0c0,6.4-5.2,11.6-11.4,11.6h-.2c-6.2,0-11.4-5.2-11.4-11.6h0c0-6.2,5.2-11.4,11.4-11.4h0Zm-14.5-14.9h29.1c6.6,0,11.9,5.3,11.9,11.9v29c0,6.6-5.3,11.9-11.9,11.9h-29.1c-6.6,0-11.9-5.3-11.9-11.9v-29c0-6.6,5.3-11.9,11.9-11.9h0Z"/></svg> </a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0px" y="0px" version="1.1" viewBox="0 0 100 100"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#231f20}</style><circle id="XMLID_17_" cx="50" cy="50" r="50" class="st0"/><g id="XMLID_2_"><path id="XMLID_69_" fill="#fff" fill-rule="evenodd" d="M31.64,28.85c5.99-0.48,13.05-0.72,18.44-0.72l0,0l0,0c5.39,0,12.33,0.24,18.44,0.72 c7.06,0.6,10.66,1.8,11.61,8.86c0.48,3.23,0.72,7.66,0.72,12.21l0,0c0,4.55-0.24,9.1-0.72,12.21c-0.96,7.18-4.55,8.26-11.61,8.86 c-6.11,0.6-13.05,0.72-18.44,0.72l0,0l0,0c-5.39,0-12.45-0.12-18.44-0.72c-7.06-0.6-10.78-1.68-11.73-8.86 c-0.36-3.11-0.6-7.66-0.6-12.21l0,0c0-4.55,0.24-8.98,0.6-12.21C20.86,30.64,24.58,29.44,31.64,28.85L31.64,28.85z" clip-rule="evenodd"/><path id="XMLID_68_" d="M43.85 40.7 59.9 49.92 43.85 59.26z" class="st0"/></g></svg>
</a>
</p>
</div>
</footer>
</div>
</body>
</html>