Last active
March 10, 2021 05:20
-
-
Save levelsio/9c531122e557da6282458bbc2a8e2aff to your computer and use it in GitHub Desktop.
Maker Link (aka the @levelsio by link)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Maker Link by @levelsio --> | |
| <!-- MIT License --> | |
| <style> | |
| body { | |
| background:#333; | |
| } | |
| .levelsio-by { | |
| font-family:"Helvetica Neue",sans-serif; | |
| right:0; | |
| bottom:0; | |
| position:fixed; | |
| z-index:100; | |
| border-top-left-radius: 5px; | |
| padding: 6px; | |
| border-top:1px solid #efefef; | |
| border-left:1px solid #efefef; | |
| background:#fff; | |
| color:#6f6f6f; | |
| text-decoration:none; | |
| } | |
| .levelsio-by:hover { | |
| background:#fff; | |
| color:rgb(255, 71, 66); /* change to your main brand color */ | |
| } | |
| .levelsio-by img { | |
| border-radius:100%; | |
| width:22px; | |
| vertical-align:middle; | |
| } | |
| .levelsio-by p { | |
| margin:0; | |
| vertical-align:middle; | |
| display:inline; | |
| margin-left:7px; | |
| font-weight:500; | |
| font-size:14px; | |
| } | |
| </style> | |
| <a target="_blank" rel="noopener" class="levelsio-by" href="https://levels.io/"><img src="https://levels.io/levelsio.png" /><p>by levelsio</p></a> |
Working CodePen showing it off - https://codepen.io/dancej/pen/JZKPGE
Created a JavaScript library that lets you customize and add your own Maker Link to your websites! 🎉
📣 Introducing: maker-link.js
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Had to create it in React with Styled Components => https://gist.github.com/stephenfjohnson/2ea0d2aae7e9d0a88696c41d64b4d1a9