Skip to content

Instantly share code, notes, and snippets.

@funkybunch
Last active September 8, 2020 00:43
Show Gist options
  • Save funkybunch/4dade486d657db4a6b890b06f269c607 to your computer and use it in GitHub Desktop.
Save funkybunch/4dade486d657db4a6b890b06f269c607 to your computer and use it in GitHub Desktop.
Voter Registration Banner
<div class="banner">
<div class="main-container">
<img src="icon-vote-color.svg" alt="Register to Vote Icon" height="40" width="40" />
<p>Have you registered to vote? Register now and make an impact in the U.S. 2020 Election. <a href="https://www.vote.org/register-to-vote/" target="_blank">Register to vote now!</a></p>
</div>
</div>
Display the source blob
Display the rendered blob
Raw
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.cls-1{fill:#1054ff;}.cls-2{fill:#fff;}.cls-3{fill:#d30000;}.cls-4{fill:none;stroke:#d30000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:10px;}</style></defs><path class="cls-1" d="M416,224V64A64.06,64.06,0,0,0,352,0H64A64.06,64.06,0,0,0,0,64V224a64.06,64.06,0,0,0,64,64v54.2A9.7,9.7,0,0,0,79.5,350l82.8-62.1H352A63.91,63.91,0,0,0,416,224Z"/><path class="cls-2" d="M142.1,122.75l-26.79-3.91-12-24.34a5.87,5.87,0,0,0-10.53,0l-12,24.34L54,122.75a5.87,5.87,0,0,0-3.24,10l19.4,18.92-4.6,26.74a5.86,5.86,0,0,0,8.51,6.18l24-12.62,24,12.62a5.87,5.87,0,0,0,8.52-6.18L126,151.69l19.4-18.92A5.88,5.88,0,0,0,142.1,122.75Z"/><path class="cls-2" d="M252.05,122.75l-26.8-3.91-12-24.34a5.87,5.87,0,0,0-10.53,0l-12,24.34L164,122.75a5.87,5.87,0,0,0-3.25,10l19.41,18.92-4.61,26.74a5.87,5.87,0,0,0,8.52,6.18L208,172l24,12.62a5.86,5.86,0,0,0,8.51-6.18l-4.57-26.74,19.4-18.92A5.88,5.88,0,0,0,252.05,122.75Z"/><path class="cls-2" d="M362,122.75l-26.79-3.91-12-24.34a5.87,5.87,0,0,0-10.53,0l-12,24.34-26.79,3.91a5.87,5.87,0,0,0-3.25,10l19.41,18.92-4.6,26.74a5.86,5.86,0,0,0,8.51,6.18l24-12.62,24,12.62a5.86,5.86,0,0,0,8.51-6.18l-4.57-26.74,19.4-18.92A5.88,5.88,0,0,0,362,122.75Z"/><path class="cls-2" d="M171.43,450.51V460c0,2.6,2.55,4.73,5.68,4.73H468.48c3.14,0,5.68-2.13,5.68-4.73v-9.46c0-2.6-2.54-4.73-5.68-4.73H177.11C174,445.78,171.43,447.91,171.43,450.51Z"/><path class="cls-2" d="M493.08,398.48H471.24V417.4h21.84v75.68H152.51V417.4h21.84V398.48H152.51a18.9,18.9,0,0,0-18.92,18.92v75.68A18.91,18.91,0,0,0,152.51,512H493.08A18.9,18.9,0,0,0,512,493.08V417.4A18.89,18.89,0,0,0,493.08,398.48Z"/><rect class="cls-2" x="203.19" y="259.47" width="236.89" height="186.3"/><path class="cls-3" d="M209.27,266H436.32V445.78h18.92V265.15c0-9.93-8.46-18-18.92-18h-227c-10.46,0-18.92,8.1-18.92,18V445.78h18.92Z"/><path class="cls-3" d="M290.06,286.66a2.35,2.35,0,0,0-1.71-.69,2.53,2.53,0,0,0-1.7.69l-32,32.09-14.48-14.51a2.34,2.34,0,0,0-1.7-.68,2.48,2.48,0,0,0-1.7.68l-3.38,3.37a2.41,2.41,0,0,0,0,3.38l19.55,19.55a2.34,2.34,0,0,0,1.71.68,2.47,2.47,0,0,0,1.7-.68l37.16-37.16a2.41,2.41,0,0,0,0-3.38l-3.4-3.34Z"/><path class="cls-3" d="M290.06,352a2.39,2.39,0,0,0-1.71-.68,2.57,2.57,0,0,0-1.7.68l-32,32.09-14.48-14.51a2.38,2.38,0,0,0-1.7-.68,2.53,2.53,0,0,0-1.7.68L233.34,373a2.4,2.4,0,0,0,0,3.37l19.55,19.55a2.35,2.35,0,0,0,1.71.69,2.48,2.48,0,0,0,1.7-.69l37.16-37.16a2.4,2.4,0,0,0,0-3.37l-3.4-3.35Z"/><line class="cls-4" x1="322.8" y1="301.6" x2="409.23" y2="301.6"/><line class="cls-4" x1="322.8" y1="366.93" x2="409.23" y2="366.93"/><line class="cls-4" x1="322.8" y1="432.82" x2="409.23" y2="432.82"/><line class="cls-4" x1="322.8" y1="321.6" x2="409.23" y2="321.6"/><line class="cls-4" x1="322.8" y1="386.93" x2="409.23" y2="386.93"/><path class="cls-3" d="M293.46,421.23l-3.4-3.34a2.35,2.35,0,0,0-1.71-.69,2.53,2.53,0,0,0-1.7.69l-27.87,27.89h13.5l21.18-21.18A2.4,2.4,0,0,0,293.46,421.23Z"/><path class="cls-3" d="M236.91,445.78h13.5l-10.29-10.31a2.35,2.35,0,0,0-1.7-.69,2.5,2.5,0,0,0-1.7.69l-3.38,3.37a2.4,2.4,0,0,0,0,3.37Z"/></svg>
.banner {
background-color: #000;
}
.banner .main-container {
margin: 12px;
padding-top: 0;
padding-bottom: 0;
}
.banner {
position: relative;
}
.banner img {
position: absolute;
display: inline-block;
width: 40px;
height: 40px;
}
.banner p {
display: inline-block;
font-size: 16px;
color: #fff;
margin-bottom: 0;
margin-left: 60px;
padding-bottom: 0;
}
.banner p a {
color: #88c7e4;
}
.banner p a:hover {
color: #319fd1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment