Responsive Website Footer with Wave & Newsletter

62 0 Navigation CodeExpert Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

<footer class="ft">
  <svg class="wave" viewBox="0 0 1440 120" preserveAspectRatio="none"><path d="M0,64 C240,120 480,0 720,48 C960,96 1200,24 1440,64 L1440,120 L0,120 Z"/></svg>
  <div class="inner">
    <div class="col about">
      <a class="brand" href="#">◢ Orbit<span>.</span></a>
      <p>We design and build fast, beautiful websites for growing brands.</p>
      <div class="social">
        <a href="#" aria-label="Facebook">f</a><a href="#" aria-label="X">𝕏</a><a href="#" aria-label="Instagram">◎</a><a href="#" aria-label="LinkedIn">in</a><a href="#" aria-label="YouTube">▶</a>
      </div>
    </div>
    <div class="col links"><h4>Company <span>+</span></h4><ul><li><a href="#">About us</a></li><li><a href="#">Careers</a></li><li><a href="#">Press</a></li><li><a href="#">Blog</a></li></ul></div>
    <div class="col links"><h4>Services <span>+</span></h4><ul><li><a href="#">Web design</a></li><li><a href="#">E-commerce</a></li><li><a href="#">SEO</a></li><li><a href="#">Branding</a></li></ul></div>
    <div class="col links"><h4>Support <span>+</span></h4><ul><li><a href="#">Help center</a></li><li><a href="#">Contact</a></li><li><a href="#">Privacy policy</a></li><li><a href="#">Terms</a></li></ul></div>
    <div class="col news">
      <h4>Newsletter</h4>
      <p>Get tips and updates once a month.</p>
      <form id="nl"><input type="email" required placeholder="Your email"><button>Subscribe</button></form>
      <small id="nlmsg"></small>
    </div>
  </div>
  <div class="bottom">
    <span>© <b id="yr"></b> Orbit Studio. All rights reserved.</span>
    <button id="top" aria-label="Back to top">↑</button>
  </div>
</footer>

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Segoe UI", system-ui, sans-serif; background: #f5f7fb; color: #222; }
.spacer { min-height: 90vh; display: grid; place-content: center; text-align: center; gap: 8px; }
.ft { position: relative; background: #12163a; color: #c9cde6; margin-top: 80px; }
.wave { position: absolute; top: -79px; left: 0; width: 100%; height: 80px; fill: #12163a; }
.inner { max-width: 1180px; margin: 0 auto; padding: 50px 24px 30px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.6fr; gap: 32px; }
.brand { color: #fff; text-decoration: none; font-size: 1.6rem; font-weight: 800; }
.brand span { color: #ff6b6b; }
.about p, .news p { margin: 14px 0; line-height: 1.6; font-size: .93rem; }
.social { display: flex; gap: 10px; }
.social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; text-decoration: none; background: rgba(255,255,255,.08); font-weight: 700; transition: .25s; }
.social a:hover { background: #ff6b6b; transform: translateY(-4px); }
h4 { color: #fff; font-size: 1.05rem; margin-bottom: 16px; position: relative; display: flex; justify-content: space-between; }
h4::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 28px; height: 3px; background: #ff6b6b; border-radius: 3px; }
h4 span { display: none; }
.links ul { list-style: none; }
.links li { margin: 10px 0; }
.links a { color: #c9cde6; text-decoration: none; transition: .2s; display: inline-block; }
.links a:hover { color: #fff; transform: translateX(5px); }
#nl { display: flex; background: rgba(255,255,255,.08); border-radius: 99px; padding: 4px; }
#nl input { flex: 1; min-width: 0; border: 0; background: none; padding: 10px 14px; color: #fff; outline: none; }
#nl button { border: 0; border-radius: 99px; padding: 10px 18px; background: #ff6b6b; color: #fff; font-weight: 700; cursor: pointer; }
#nlmsg { display: block; margin-top: 8px; color: #8ff0b5; min-height: 1em; }
.bottom { border-top: 1px solid rgba(255,255,255,.08); max-width: 1180px; margin: 0 auto; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; font-size: .88rem; }
#top { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #ff6b6b; color: #fff; font-size: 1.1rem; cursor: pointer; }

@media (max-width: 900px) { .inner { grid-template-columns: 1fr 1fr; } .about, .news { grid-column: span 2; } }
@media (max-width: 560px) {
  .inner { grid-template-columns: 1fr; gap: 18px; }
  .about, .news { grid-column: auto; }
  .links h4 { cursor: pointer; margin-bottom: 0; padding: 8px 0; }
  .links h4 span { display: inline; transition: transform .3s; }
  .links ul { max-height: 0; overflow: hidden; transition: max-height .35s; }
  .links.open ul { max-height: 220px; }
  .links.open h4 span { transform: rotate(45deg); }
}

Comments 0

…

Responsive Website Footer with Wave & Newsletter

Recommended

Comments 0