<footer>
  <div class="row">
    <div class="foo-left">
      <div>
        <h3><img src="https://flarumtr.com/assets/logo-pvyc3f4x.png"></img></h3>
        <p>FlarumTR; Flarum kurulumu, eklenti kurulum ve ayarları hakkında içeriklerin paylaşıldığı resmi bir topluluktur.</p>
        <button class="Button Button Social"><span class="Button-label"><a href="#contact"><i class="fas fa-envelope"></i></a></span></button>
        <button class="Button Button Social"><span class="Button-label"><a href="#contact"><i class="fab fa-facebook"></i></a></span></button>
        <button class="Button Button Social"><span class="Button-label"><a href="#contact"><i class="fab fa-instagram"></i></a></span></button>
        <button class="Button Button Social"><span class="Button-label"><a href="#contact"><i class="fab fa-twitter"></i></a></span></button>
      </div>
    </div>
    <div class="foo-mid">
      <div>
        <h3><i class="fas fa-balance-scale"></i> Legal</h3>
        <ul>
          <li><a href="#">Example Link</a></li>
          <li><a href="#">Example Link</a></li>
          <li><a href="#">Example Link</a></li>
          <li><a href="#">Example Link</a></li>
          <li><a href="#">Example Link</a></li>
          <li><a href="#">Example Link</a></li>
        </ul>
      </div>
    </div>
    <div class="foo-mid">
      <div>
        <h3><i class="fas fa-link"></i> Links</h3>
        <ul>
          <li><a href="#" target="_blank">Example Link</a></li>
          <li><a href="#" target="_blank">Example Link</a></li>
          <li><a href="#" target="_blank">Example Link</a></li>
          <li><a href="#" target="_blank">Example Link</a></li>
          <li><a href="#" target="_blank">Example Link</a></li>
          <li><a href="#">Example Link</a></li>
        </ul>
      </div>
    </div>

    <div class="foo-mid">
      <div>
        <h3><i class="fas fa-star"></i> About Us</h3>
        <ul>
          <li><a href="#" target="_blank">Example Link</a></li>
          <li><a href="#" target="_blank">Example Link</a></li>
          <li><a href="#" target="_blank">Example Link</a></li>
          <li><a href="#" target="_blank">Example Link</a></li>
          <li><a href="#">Example Link</a></li>
          <li><a href="#">Example Link</a></li>
        </ul>
      </div>
    </div>

    <div class="foo-mid">
      <div>
        <h3><i class="fas fa-address-card"></i> Other</h3>
        <ul>
          <li><a href="#" target="_blank">Example Link</a></li>
          <li><a href="#" target="_blank">Example Link</a></li>
          <li><a href="#" target="_blank">Example Link</a></li>
          <li><a href="#" target="_blank">Example Link</a></li>
          <li><a href="#">Example Link</a></li>
          <li><a href="#">Example Link</a></li>
        </ul>
      </div>
    </div>

  </div>
  <div class="foo-bottom">
    <p>© 2024, All Rights Reserved</p>
  </div>
</footer>
footer {
  background-color: var(--button-bg);
  padding: 15px 0 0;
}

footer h3 {
  color: var(--muted-color);
}

footer h3 img {
  max-width: 75%;
  width: 200px;
}

footer button a {
  color: var(--button-primary-color);
}

footer button a:hover,
footer button a:active {
  color: var(--button-color);
}

footer a {
  color: var(--muted-color);
}

footer a:hover {
  color: var(--primary-color);
}

footer p {
  color: var(--discussion-title-color);
}

footer ul {
  padding-left: 0;
  list-style: none;
}

footer .row {
  max-width: 1070px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  text-align: center;
}

footer .row div {
  margin: 0 auto;
  padding: 0 5px;
}

.foo-left {
  width: 100%;
}

.foo-mid {
  width: 50%;
}

.foo-bottom {
  background: var(--muted-color);
  padding: 10px;
  margin-top: 15px;
  text-align: center;
}

body when (@config-dark-mode = true) {
  .foo-bottom {
    background: var(--button-color);
  }
}

.foo-bottom p {
  color: var(--body-bg-light);
}

footer .Social {
  background-color: var(--button-color);
}

footer .Social i{
  color: var(--body-bg-light);
}

footer .Social:hover,
footer .Social:active,
footer .Social:focus {
  background-color: var(--muted-color-light);
}

@media (min-width: 768px) {
  .foo-left {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .foo-mid {
    flex: 0 0 17.5%;
    max-width: 17.5%;
  }
}

.App {
  padding-bottom: 0;
}

External CSS

  1. https://discuss.flarum.org/assets/forum-dark.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.