Design 'GitHub Ribbons ' by CSS
- add
<link rel="stylesheet" href="path of forkMeOnGitHub.css">in yourHTMLfile head. - add
<span>tag with Id name isforkMeOnGitHub. - add
<a>tag in<span>tag with href which is you GitHub Link and content isFork me on GitHub.
or
npm install fork-me-on-github.css
import "fork-me-on-github.css";Just like the this:
<head>
<link rel="stylesheet" href="path/to/fork-me-on-github.css">
</head>
<body>
<!-- default theme -->
<span class="fork-me-on-github">
<a href="https://github.com/lamborshea/lamborshea">Fork me on GitHub</a>
</span>
<!-- red theme -->
<span class="fork-me-on-github-red">
<a href="https://github.com/lamborshea/lamborshea">Fork me on GitHub</a>
</span>
<!-- blue theme -->
<span class="fork-me-on-github-blue">
<a href="https://github.com/lamborshea/lamborshea">Fork me on GitHub</a>
</span>
<!-- yellow theme -->
<span class="fork-me-on-github-yellow">
<a href="https://github.com/lamborshea/lamborshea">Fork me on GitHub</a>
</span>
<!-- white theme -->
<span class="fork-me-on-github-white">
<a href="https://github.com/lamborshea/lamborshea">Fork me on GitHub</a>
</span>
</body>default theme
red theme
blue theme
yellow theme
white theme
- Designed by CSS entirely.
- Responsive: when screen width is lower than 768px, the
Fork me on GitHubribbon won't display.
- add position options class "left/right".
- add theme "red green yellow gray'.