Skip to content

Instantly share code, notes, and snippets.

@joellesenne

joellesenne/index.html

Last active September 4, 2020 12:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joellesenne/362517fa6815850acf77127ebe9c7868 to your computer and use it in GitHub Desktop.
Save joellesenne/362517fa6815850acf77127ebe9c7868 to your computer and use it in GitHub Desktop.
Download ZIP
Twitter Corner
Raw
index.html
<!-- Twitter Corner -->
<a href="https://your-twitter-account" class="twitter-corner" aria-label="View Twitter Account"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#1da1f2; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M249.8 250L0 .2V0h250v250h-.2z"/><path d="M230.09 41.82a37.77 37.77 0 0 1-10.85 3 19 19 0 0 0 8.31-10.45 37.82 37.82 0 0 1-12 4.58 18.91 18.91 0 0 0-32.19 17.23L166 91.49a37.91 37.91 0 0 1-23.46 8.09 38.42 38.42 0 0 1-4.51-.26 53.48 53.48 0 0 0 29 8.49c34.75 0 53.76-28.79 53.76-53.76q0-1.23-.06-2.44a38.39 38.39 0 0 0 9.36-9.79z" fill="currentColor" class="bird-body"/><path d="M145.41 36.63a18.91 18.91 0 0 0 5.85 25.22 18.82 18.82 0 0 1-8.56-2.36v.24a18.91 18.91 0 0 0 15.16 18.53 18.93 18.93 0 0 1-8.53.32A18.91 18.91 0 0 0 167 91.7l17.38-35.33a53.64 53.64 0 0 1-38.97-19.74z" fill="currentColor" class="bird-wing"/></svg></a><style>.twitter-corner:hover .bird-wing{animation: fly .4s linear; transform-origin: right center;}@keyframes fly{0%{transform: translateX(0);}50%{transform: rotateY(-180deg) translateX(-50%) translateY(10%) rotateZ(-50deg);}100%{transform: translateX(0);}}</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment