Style Guide

Footer 

<div class="footer">
    <div class="footer-content">
        <div class="copyright-wrap">
            <a class="" href="#"> © BlueBox Technology Fund - 2022 </a>
            <a class="linkedin-icon" href="#">
                <img src="/images/linkedin-brands.svg" alt="linkedin" />
            </a>
        </div>
        <div class="footer-link">
            <a class="" href="#"> Imprimt </a>
            <a class="" href="#"> Legal mentions </a>
            <a class="btn btn-outline" href="#"> Contact us </a>
        </div>
    </div>
</div>
 
<div class="footer">
  <div class="footer-content">
    <div class="copyright-wrap">
      <a class="" href="{{copyrightLink}}"> {{copyrightText}} </a>
       <a class="linkedin-icon" href="{{linkedinUrl}}">
        <img src="{{linkedinImg}}" alt="linkedin"/>
      </a>
    </div>
    <div class="footer-link">
      {% for item in footerLinks %}
        <a class="" href="{{item.link}}"> {{item.title}}</a>
      {% endfor %}
      <a class="btn btn-outline" href="{{btnlink}}"> {{btnText}} </a>
    </div>
  </div>
</div>
 
{
  "copyrightText": "© BlueBox Technology Fund - 2022",
  "copyrightLink": "#",
  "linkedinImg": "/images/linkedin-brands.svg",
  "linkedinUrl": "#",
  "btnText": "Contact us",
  "btnlink": "#",
  "footerLinks": [
    {
      "title": " Imprimt ",
      "link": "#"
    },
    {
      "title": " Legal mentions ",
      "link": "#"
    }
  ]
}
  • Content: 
    import $ from "jquery";

$(document).ready(function () {
  $(".footer-link").each(function () {
    $(this)
      .find(".btn-outline")
      .removeAttr("type");
  });
});
  • URL: /components/raw/footer/footer.js
  • Filesystem Path: components/02-layout/footer/footer.js
  • Size: 173 Bytes
  • Content: 
    .footer {
  background-color: #29235c;
  padding: 47px 65px;

  @include media-breakpoint-down(xl) {
    padding: 35px;
  }
  @include media-breakpoint-down(md) {
    padding: 53px 34px;
  }

  .footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    @include media-breakpoint-down(md) {
      align-items: flex-start;
      flex-direction: column-reverse;
    }
    .copyright-wrap {
      display: flex;
      align-items: baseline;
      a {
        font-size: 14px;
        font-family: "OpenSans-Regular";
        line-height: 23px;
        color: #fff;
        text-decoration: none;
        &:hover {
          color: $secondary;
        }
        @include media-breakpoint-down(md) {
          opacity: 0.5;
        }
      }
      .linkedin-icon {
        margin-left: 20px;
        transition: all 0.5s ease-in-out;
        &:hover {
          img {
            transition: all 0.5s ease-in-out;
            transform: scale(1.1);
          }
        }
        img {
          margin-top: -3px;
        }
      }
    }
    .footer-link {
      @include media-breakpoint-down(md) {
        width: 100%;
      }
      a {
        font-size: 14px;
        font-family: "OpenSans-Regular";
        line-height: 32px;
        color: #fff;
        text-decoration: none;
        margin-right: 52px;
        border-radius: 0;
        &:last-child {
          margin-right: 0;
        }
        &:hover {
          color: $secondary;
        }
        @include media-breakpoint-down(xl) {
          margin-right: 25px;
        }
        @include media-breakpoint-down(md) {
          display: flex;
          flex-direction: column;
          margin-right: 0;
          margin-bottom: 30px;
          font-size: 15px;
          &:last-child {
            margin-bottom: 50px;
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 768px) {
  .footer-wrapper {
    padding-top: 0px !important;
    background-color: transparent;
  }
}
  • URL: /components/raw/footer/footer.scss
  • Filesystem Path: components/02-layout/footer/footer.scss
  • Size: 2 KB

There are no notes for this item.