Style Guide

Footer Rating Element Globes 

<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="star" viewBox="0 0 28 28" preserveAspectRatio="xMaxYMax meet">
        <title>
            Star Rating
        </title>
        <path class="star" d="M13.996,22.501 L22.649,27.997 L20.352,17.637 L27.996,10.667 L17.930,9.768 L13.996,-0.003 L10.063,9.768 L-0.003,10.667 L7.641,17.637 L5.345,27.997 L13.996,22.501 Z" />
    </symbol>
</svg>

<div class="footer_rating_element">
    <div class="footerLink-content">
        <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 class="footerStar-content">
        <div class="starRating-wrap">
            <div class="textWrap">
                <img class="footer-mor-logo" src="/images/footer-mor-logo.png" alt="footer-img" />
                <p class="rate-us">
                    rate us
                </p>
            </div>
            <div class="rating">
                <img class="img-fluid" src="/images/globes.png" alt="globes" />
            </div>
        </div>

        <div class="copyright-wrap">
            <p class="">
                © BlueBox Technology Fund - 2022
            </p>
        </div>
    </div>
</div>
 
<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="star" viewBox="0 0 28 28" preserveAspectRatio="xMaxYMax meet">
    <title>
      Star Rating
    </title>
    <path class="star"
      d="M13.996,22.501 L22.649,27.997 L20.352,17.637 L27.996,10.667 L17.930,9.768 L13.996,-0.003 L10.063,9.768 L-0.003,10.667 L7.641,17.637 L5.345,27.997 L13.996,22.501 Z" />
  </symbol>
</svg>

<div class="footer_rating_element">
  <div class="footerLink-content">
    <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 class="footerStar-content">
    <div class="starRating-wrap">
      <div class="textWrap">
        <img class="footer-mor-logo" src="{{ imgSrc }}" alt="footer-img" />
        <p class="rate-us">
          {{ rate_us }}
        </p>
      </div>
      <div class="rating">
        <img class="img-fluid" src="{{img}}" alt ="globes" />
      </div>
    </div>

    <div class="copyright-wrap">
      <p class="">
        {{ copyrightText }}
      </p>
    </div>
  </div>
</div>
 
{
  "copyrightText": "© BlueBox Technology Fund - 2022",
  "copyrightLink": "#",
  "btnText": "Contact us",
  "btnlink": "#",
  "rate_us": "rate us",
  "imgSrc": "/images/footer-mor-logo.png",
  "img": "/images/globes.png",
  "footerLinks": [
    {
      "title": " Imprimt ",
      "link": "#"
    },
    {
      "title": " Legal mentions ",
      "link": "#"
    }
  ]
}
  • Content: 
    import $ from "jquery";

$(document).ready(function() {
  const ratingElem = $('.rating input[name="star"]');

  ratingElem.change(function() {
    if (this.checked) {
      $(this)
        .parent()
        .addClass("active");
    }
  });
});
  • URL: /components/raw/footer_rating_element_globes/footer_rating_element_globes.js
  • Filesystem Path: components/02-layout/footer_rating_element_globes/footer_rating_element_globes.js
  • Size: 245 Bytes
  • Content: 
    .footer_rating_element {
  background-color: #29235c;
  padding: 47px 65px;

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

  .footerLink-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 35px;
    border-bottom: 1px solid #ffffff33;
    @include media-breakpoint-down(md) {
      align-items: flex-start;
      flex-direction: column-reverse;
      padding-bottom: 45px;
    }
    .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: 0px;
          }
        }
      }
    }
  }
  .footerStar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 35px;
    @include media-breakpoint-down(md) {
      align-items: flex-start;
      flex-direction: column;
    }
    .starRating-wrap {
      display: flex;
      align-items: center;
      @include media-breakpoint-down(md) {
        align-items: flex-start;
        flex-direction: column;
      }
      .textWrap {
        display: flex;
        align-items: center;
      }
      .footer-mor-logo {
        max-width: 100%;
        height: 27px;
        // @include media-breakpoint-down(sm) {
        //   height: 20px;
        // }
      }
      .rate-us {
        color: #fff;
        font-size: 11px;
        font-family: "OpenSans_light";
        line-height: 15px;
        margin-left: 20px;
        @include media-breakpoint-down(md) {
          font-size: 14px;
        }
      }
      p {
        margin-bottom: 0;
      }
    }
    .copyright-wrap {
      @include media-breakpoint-down(md) {
        margin-top: 35px;
      }
      p {
        font-size: 15px;
        font-family: "OpenSans-Regular";
        line-height: 23px;
        color: #fff;
        text-decoration: none;
        opacity: 0.5;
      }
    }
  }
}

.rating {
  img {
    width: 70%;
  }
}
  • URL: /components/raw/footer_rating_element_globes/footer_rating_element_globes.scss
  • Filesystem Path: components/02-layout/footer_rating_element_globes/footer_rating_element_globes.scss
  • Size: 2.6 KB
  • Handle: @footer_rating_element_globes
  • Preview:
  • Filesystem Path: components/02-layout/footer_rating_element_globes/footer_rating_element_globes.twig

There are no notes for this item.