banner-direct-team.svg

<svg viewBox="0 0 800 130" 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: #0056b3;
}
.flag-yellow {
  fill: #ffd700;
}
.message {
  fill: white;
  font-size: 18px;
}
.call {
  fill: black;
  font-size: 22px;
}
.arrow {
  font-size: 14px;
}
</style>

<defs>
  <clipPath id="round-corners"><rect width="100%" height="100%" rx="3" /></clipPath>
</defs>

  <a href="https://stand-with-ukraine.pp.ua">
    <g clip-path="url(#round-corners)">
      <rect x="0" y="0" width="100%" height="100%" class="flag-yellow"/>
      <rect x="0" y="0" width="100%" height="90px" class="flag-blue"/>
    </g>

    <text x="0" y="25" class="message">
      <tspan x="30" dy="0.2em">This project was created by a <tspan font-weight="bold">team from Ukraine</tspan>.</tspan>
      <tspan x="30" dy="1.2em">Russia invaded Ukraine, killing tens of thousands of civilians and displacing millions more.</tspan>
      <tspan x="30" dy="1.2em">It's a genocide. Please help us defend freedom, democracy and Ukraine's right to exist.</tspan>
    </text>

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

</svg>