layouts/partials/footer.html

<footer>
  <div class="footer-container">
    <div class="footer-container-left">
      <div class="footer-container-left-title">{{ T "footer_left_title" }}</div>
      <div class="footer-container-left-des">
        {{ T "footer_left_notice" }}
      </div>
      <div>
        <button class="contact-btn qr-container" onmouseover="showQRCode('wechat-qr')" onmouseout="hideQRCode('wechat-qr')">{{ T "footer_left_wechat" }}
          <div class="qr-code" id="wechat-qr" style="display:none;">
            <img src="https://img.alicdn.com/imgextra/i2/O1CN010ygTmZ1tp9a2Zii3b_!!6000000005950-0-tps-258-258.jpg" alt="WeChat QR Code">
          </div>
        </button>
        <button class="contact-btn qr-container" onmouseover="showQRCode('dingding-qr')" onmouseout="hideQRCode('dingding-qr')">{{ T "footer_left_ding" }}
          <div class="qr-code" id="dingding-qr" style="display:none;">
            <img src="https://img.alicdn.com/imgextra/i4/O1CN01buuadT274Lj33QZWQ_!!6000000007743-0-tps-1170-1477.jpg" alt="DingTalk QR Code">
          </div>
        </button>
        <button class="contact-btn"><a href="https://github.com/apache/dubbo/">GITHUB</a></button>
      </div>
    </div>
    <div class="footer-container-right">
      <ul>
        <li>{{ T "footer_right_title1" }}</li>
        <li><a href="{{ T "footer_right_link_overview" }}">{{ T "footer_right_overview" }}</a></li>
        <li><a href="{{ T "footer_right_link_quickstart" }}">{{ T "footer_right_quickstart" }}</a></li>
        <li><a href="{{ T "footer_right_link_developer" }}">{{ T "footer_right_developer" }}</a></li>
      </ul>
      <ul>
        <li>{{ T "footer_right_title2" }}</li>
        <li><a href="{{ T "footer_right_link_community" }}">{{ T "footer_right_community" }}</a></li>
      </ul>
    </div>
  </div>

  <div style="width:85.125rem;height:0px;border: 1px solid #DDDEE4;margin-bottom: 32px;"></div>
  <div class="footer-registration">
    © 2024 The Apache Software Foundation. Apache Dubbo, Dubbo, Apache, the Apache feather logo, and the Apache Dubbo
    project logo are either registered trademarks or trademarks of The Apache Software Foundation in the United States
    and other countries. {{ T "footer_bottom_tip" }}
  </div>
</footer>



<style>
  footer {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .footer-container {
    background-color: #EBECEF;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 36px;
    padding-bottom: 36px;
    display: inline-block;
    margin-bottom: 40px;
    @media only screen and (min-width: 1100px) {
      display: flex;
      height: 289px;
      width: 85.125rem;
      padding-left: 40px;
      padding-right: 0px;
    }
  }

  .footer-container-left {
    width: 100%;
    @media only screen and (min-width: 1100px) {
      width: 672px;
    }
  }
  .footer-container-left-title{
    font-size: 16px;
    line-height: 24px;
    color: #2E3038;
    margin-bottom: 16px;
    @media only screen and (min-width: 768px) {
      font-size: 28px;
      line-height: 36px;
    }
  }
  .footer-container-left-des{
    font-size: 12px;
    line-height: 24px;
    color: #A3A6B3;
    margin-bottom: 20px;
    @media only screen and (min-width: 768px) {
      margin-bottom: 96px;
      font-size: 16px;
    }
  }

  .contact-btn {
    width: auto;
    min-width: 100px;
    height: 40px;
    padding: 0 10px;
    border-radius: 24px;
    background: #F4F4F6;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: #818598;
    border: none;
    margin-right: 4px;
    margin-bottom: 20px;
    @media only screen and (min-width: 768px) {
      margin-right: 22px;
      margin-bottom: 0px;
    }
  }
  .contact-btn a{
    color: #818598;
    text-decoration: none;
  }

  .footer-container-right {
    display: flex;
    margin-left: 0px;
    margin-top: 20px;
    @media only screen and (min-width: 1100px) {
      margin-left: 154px;
      margin-top: 0px;
    }
  }

  .footer-container-right>ul {
    list-style-type: none;
    margin-right: 100px;
    padding-left: 0px;
  }

  .footer-container-right ul li {
    font-size: 12px;
    font-weight: normal;
    line-height: 20px;
    color: #2E3038;
    margin-bottom: 16px;
    @media only screen and (min-width: 768px) {
      font-size: 14px;
    }
  }

  .footer-container-right ul li a{
    color: #2E3038;
    text-decoration: none;
  }

  .footer-container-right ul li:first-child {
    color: #A3A6B3;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 20px;
    @media only screen and (min-width: 768px) {
      margin-bottom: 49px;
    }
  }

  .footer-registration {
    width: 920px;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    color: #A3A6B3;
    margin-bottom: 32px;
  }

  .qr-container { 
    position: relative;
  }
  .qr-code {
    position: absolute;
    background: white;
    border: 1px solid #DDDEE4;
    padding: 10px;
    border-radius: 8px;
    z-index: 10;
    bottom: 40px;
    left: -10px;
  }
  .qr-code img {
    width: 100px;
    height: 100px;
  }
</style>
<script>
  function showQRCode(id) {
    document.getElementById(id).style.display = 'block';
  }

  function hideQRCode(id) {
    document.getElementById(id).style.display = 'none';
  }
</script>