rabbi logo

<!----------------------------------- HTML -->

<a class="rabbi-logo__link" href="http://www.rabbi.co.il" target="_blank" rel="noopener noreferrer">
  <i class="rabbi-logo__icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 37.8" width="18px">
      <g class="r">
        <path d="M17.9,16.6c3.2-1.4,5.3-3.9,5.3-7.9V8.7c0-2.5-0.8-4.5-2.3-5.9C19.2,1,16,0,12.1, 0H0v25.4h15.4H24L17.9,16.6z M15.6,9.2c0,1.9-1.4,3-3.8,3H7.7V6.1h4.1C14.1,6.1,15.6,7.1,15.6,9.2L15.6,9.2z"></path>
      </g>
      <g>
        <polygon points="7.7,37.8 15.3,25.4 7.7,13.1 7.7,13.1 7.7,13.1 7.7,13.1 7.7,13.1 7.7,13.1 7.7,13.1 7.7,13.1 0,25.4 7.7,37.8 7.7,37.8 7.7,37.8 7.7,37.8 7.7,37.8 7.7,37.8 7.7,37.8" style="fill: rgb(69, 198, 231)">
        </polygon>
        <polygon points="0,25.4 7.7,25.4 7.7,37.8" style="fill: rgb(1, 1, 1)"></polygon>
        <polygon points="15.3,25.4 7.7,37.8 7.7,25.4" style="fill: rgb(13, 192, 222)"></polygon>
        <polygon points="0,25.4 7.7,25.4 7.7,13.1" style="fill: rgb(3, 154, 206)"></polygon>
        <polygon points="15.3,25.4 7.7,13.1 7.7,25.4" style="fill: rgb(100, 197, 182)"></polygon>
        <polygon points="3.1,25.4 7.7,25.4 7.7,37.8" style="fill: rgb(3, 154, 206)"></polygon>
        <polygon points="12.2,25.4 7.7,37.8 7.7,25.4" style="fill: rgb(69, 198, 231)"></polygon>
        <polygon points="3.1,25.4 7.7,25.4 7.7,13.1" style="fill: rgb(69, 198, 231)"></polygon>
        <polygon points="12.2,25.4 7.7,13.1 7.7,25.4" style="fill: rgb(255, 255, 255)"></polygon>
      </g>
    </svg>
  </i>
  <div class="rabbi-logo__text">
    Powered by<br>Rabbi Agency
  </div>
</a>

<!----------------------------------- CSS -->

.rabbi-logo {
  position: relative;
  width: 20px;
  height: 28px;
  overflow: hidden;
  transition: 0.25s ease;
}

.rabbi-logo__link {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 28px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  text-decoration: none;
}

.rabbi-logo__text {
  font-size: 10px;
  line-height: 11px;
  margin-left: 7px;
  margin-top: -1px;
}

.rabbi-logo__icon {
  display: inline-block;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .rabbi-logo__icon {
    width: 20px;
    height: 32.69841px;
  }
}

@media screen and (min-width: 1024px) {
  .rabbi-logo:hover {
    width: 90px;
  }
}

.rabbi-logo.dark a {
  color: black;
}

.rabbi-logo.dark .r {
  fill: black;
}

.rabbi-logo.light a {
  color: white;
}

.rabbi-logo.light .r {
  fill: white;
}