site-footer

Summary

A centered, bordered footer card with a stacked email + phone + socials cluster, sitting above a copyright bar with a back-to-top pill on the right. The card uses an asymmetric border (15px on the bottom) so it reads as a "drawer" anchored to the page edge.

HTML structure (minimal)

<div class="footer">
  <div class="main-container">
    <div class="inner-footer">
      <a href="mailto:test@gmail.com" class="mail-link">info@darkyn-template.io</a>
      <a href="tel:+5(123)456-78-90" class="phone-link">+5 (123) 456-78-90</a>
      <div class="socials">
        <a href="#" target="_blank" class="social-link">
          <div class="social-text">X</div>
          <img src="images/arrow-down-right.png" class="social-arrow" alt="">
        </a>
        <a href="#" target="_blank" class="social-link">
          <div class="social-text">linkedin</div>
          <img src="images/arrow-down-right.png" class="social-arrow" alt="">
        </a>
        <a href="#" target="_blank" class="social-link">
          <div class="social-text">facebook</div>
          <img src="images/arrow-down-right.png" class="social-arrow" alt="">
        </a>
        <a href="#" target="_blank" class="social-link">
          <div class="social-text">instagram</div>
          <img src="images/arrow-down-right.png" class="social-arrow" alt="">
        </a>
        <a href="#" class="social-link last-social">
          <div class="social-text">youtube</div>
          <img src="images/arrow-down-right.png" class="social-arrow" alt="">
        </a>
      </div>
    </div>
    <div class="copyright">
      <div class="copyright-text">
        Darkyn © 2024 Made by <a href="#" target="_blank" class="copyright-text">Max Themes</a>
      </div>
      <div class="right-copyright">
        <a href="#home" class="backtotop"><img src="images/back-top_1back-top.png" alt=""></a>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.footer { margin-top: 50px; }
.inner-footer {
  border-style: solid;
  border-width: 1px 1px 15px;        // heavy bottom edge
  border-color: var(--border-color);
  border-radius: 5px;
  text-align: center;
  padding: 110px 0;
}
.mail-link  { color: #fff; font-size: 36px; text-decoration: none; }
.phone-link {
  color: #fff;
  font-family: Clashdisplay, sans-serif;
  font-size: 60px;
  font-weight: 400;
  line-height: 50px;
  margin: 30px 0;
  display: block;
}
.socials    { display: flex; justify-content: center; }
.social-link {
  display: flex; align-items: center;
  margin-right: 20px;
  color: var(--white); text-decoration: none;
}
.social-link.last-social { margin-right: 0; }
.copyright {
  display: flex; justify-content: space-between; align-items: center;
  padding: 30px 0;
}
.backtotop {
  border: 1px solid var(--border-color);
  border-radius: 5px;
  width: 80px; height: 40px;
  display: flex; align-items: center; justify-content: center;
}

Animation logic

// IX2 entrance for mail (data-w-id="darkyn02"), phone ("darkyn03"),
// socials row ("darkyn04"), and copyright ("darkyn05" / "darkyn06").
// Each is a simple opacity+translateY reveal.

Notable details

• The 1px 1px 15px border on .inner-footer is the standout choice — a thicker bottom edge makes the footer card feel grounded without a fill.
• Phone number is the largest typographic element on the page (60px Clash Display) — treats the contact info itself as a hero, which fits a small-studio feel.
• Each social link has an inline diagonal arrow next to its label rather than a brand glyph — keeps the platform palette out of the design.

Use when

• Studio sites where contact info IS the call to action (no form, no scheduler).
• Footers that need to feel like a closing statement rather than a map of links.

Caveats

• No newsletter form, no link columns, no localization switch — if you need any of those, this footer is a starting point, not a finished one.