safety-pin.html

<!-- Stand against bigotry and hate. -->
<!-- This was illustration is free to share and use. -->

<style>
  #safety-pin-day-one {
    position:  fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    z-index:  200;
  }
  #safety-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 184px;
    height: 64px;
    transform: translate(-50%,-50%);
  }

  #day-one {
    position: absolute;
    top: 58%;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
  }
</style>
<div id="safety-pin-day-one">
  <a href="https://action.aclu.org/secure/protect-rights-freedoms-we-believe-6?s_src=UNV160001HERO&ms=web_hero" title="Stand against bigotry." itemprop="url">
    <svg id="safety-pin" viewBox="0 0 184 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#959791" d="M16.815 60.698h136.07v-6.943H16.815z"/><path stroke="#4B5147" d="M16.815 60.698h136.07v-6.943H16.815z"/><path d="M18.136 53.202c-5.6 0-10.14-4.54-10.14-10.141 0-5.6 4.54-10.14 10.14-10.14 5.6 0 10.141 4.54 10.141 10.14 0 5.6-4.54 10.14-10.14 10.14m-3.068-27.683C6.877 27.358.5 34.367.5 43.06c0 9.74 7.896 17.636 17.636 17.636 9.74 0 17.636-7.895 17.636-17.636 0-6.506-3.533-12.175-8.776-15.232 60.57-23.133 125.888 4.297 125.888 4.297v-8.608c-82.403-30.263-137.815 2-137.815 2" fill="#959791"/><path d="M18.136 53.202c-5.6 0-10.14-4.54-10.14-10.141 0-5.6 4.54-10.14 10.14-10.14 5.6 0 10.141 4.54 10.141 10.14 0 5.6-4.54 10.14-10.14 10.14zM15.07 25.518C6.877 27.358.5 34.367.5 43.06c0 9.74 7.896 17.636 17.636 17.636 9.74 0 17.636-7.895 17.636-17.636 0-6.506-3.533-12.175-8.776-15.232 60.57-23.133 125.888 4.297 125.888 4.297v-8.608c-82.403-30.263-137.815 2-137.815 2z" stroke="#4B5147"/><path d="M160.052 17.528c-13.168 1.643-12.738 3.893-14.366 7.213-.349 3.813-.5 9.097 2.865 12.18h2.715c1.282-3.62 4.726-6.219 8.786-6.219a9.328 9.328 0 0 1 0 18.655c-5.15 0-8.613-4.248-9.328-9.328h-2.42c-2.792 6.955-2.013 11.4-2.285 20.563 3.85 3.08 8.795 2.146 14.033 1.94 12.417-.492 22.501-10.076 22.501-22.503s-10.17-24.04-22.5-22.5" fill="#959791"/><path d="M160.052 17.528c-13.168 1.643-12.738 3.893-14.366 7.213-.349 3.813-.5 9.097 2.865 12.18h2.715c1.282-3.62 4.726-6.219 8.786-6.219a9.328 9.328 0 0 1 0 18.655c-5.15 0-8.613-4.248-9.328-9.328h-2.42c-2.792 6.955-2.013 11.4-2.285 20.563 3.85 3.08 8.795 2.146 14.033 1.94 12.417-.492 22.501-10.076 22.501-22.503s-10.17-24.04-22.5-22.5z" stroke="#4B5147"/><path fill="#FEFEFE" d="M99.356 24.255H63.444l1-17.875 35.346.57z"/><path d="M59.148 1.421s12 7.667 0 29.5M104.985 1.421s-12.67 12.833 0 30.5" stroke="#4B5147"/></g></svg>

    <span id="day-one">#Day1</span>
  </a>
</div>