banner-direct-single.svg

<svg viewBox="0 0 1040 200" xmlns="http://www.w3.org/2000/svg">
  <style>
@namespace svg url(http://www.w3.org/2000/svg);

svg {
  font-family: Helvetica, Arial, sans-serif;
  text-rendering: geometricPrecision;
}
svg|a:link, svg|a:visited {
  cursor: pointer;
}
.flag-blue {
  fill: #0057b7;
}
.flag-yellow {
  fill: #ffd700;
}
.message {
  fill: white;
  font-size: 20px;
}
.call {
  fill: black;
  font-size: 32px;
}
.mobile-only {
  display: none;
}
.arrow {
  font-size: 24px;
}

@media (max-width: 770px) {
  svg a > .message {
    display: none;
  }
  svg a > .mobile-only {
    display: inherit;
  }
  .message {
    font-size: 29px;
  }
  .call {
    font-size: 36px;
  }
}
  </style>

  <a href="https://stand-with-ukraine.pp.ua">
    <rect x="0" y="0" width="100%" height="100%" class="flag-yellow"/>
    <rect x="0" y="0" width="100%" height="110px" class="flag-blue"/>

    <text x="0" y="25" class="message">
      <tspan x="25" dy="0.45em">This project was created by a developer from Ukraine.</tspan>
      <tspan x="25" dy="1.3em">Russia has invaded Ukraine and already killed tens of thousands of civilians, with many more raped or tortured.</tspan>
      <tspan x="25" dy="1.3em">The death toll keeps climbing. It's a <tspan font-weight="bold">genocide</tspan>. We need your help. Let's fight back against the Russian regime.</tspan>
    </text>
    <text x="0" y="25" class="message mobile-only">
      <tspan x="25" dy=".7em">Russia has invaded Ukraine and already killed tens of thousands of civilians,</tspan>
      <tspan x="25" dy="1.2em">with many more raped or tortured. It's a <tspan font-weight="bold">genocide</tspan>. We need your help.</tspan>
    </text>

    <text x="50%" y="78.5%" dominant-baseline="middle" text-anchor="middle" class="call">
      Help Ukraine Now <tspan dominant-baseline="middle" class="arrow">➔</tspan>
    </text>
  </a>

</svg>