Skip to content

Instantly share code, notes, and snippets.

@dermatologist

dermatologist/1.html

Forked from 0532/1.html
Created May 16, 2021 01: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 dermatologist/0ae3e177fba6b8760f3f62d39aa94098 to your computer and use it in GitHub Desktop.
Save dermatologist/0ae3e177fba6b8760f3f62d39aa94098 to your computer and use it in GitHub Desktop.
Download ZIP
github button 'star' 'fork' 'fellow' and 'fork me on github'
Raw
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="gh-fork-ribbon.css">
<link rel="stylesheet" href="style.css" />
<style>
.right .github-fork-ribbon {
background-color: #333;
}
</style>
</head>
<body>
<!-- TOP RIGHT RIBBON: START COPYING HERE -->
<div class="github-fork-ribbon-wrapper right">
<div class="github-fork-ribbon">
<a href="https://github.com/0532/resume">Fork me on GitHub</a>
</div>
</div>
<div>
<iframe src="https://ghbtns.com/github-btn.html?user=0532&repo=0532.github.io&type=star&count=none&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=0532&repo=0532.github.io&type=star&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>
</div>
<div>
<iframe src="https://ghbtns.com/github-btn.html?user=0532&repo=0532.github.io&type=fork&count=true&size=large" frameborder="0" scrolling="0" width="158px" height="30px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=twbs&repo=0532.github.io&type=fork&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>
</div>
<div>
<iframe src="https://ghbtns.com/github-btn.html?user=0532&type=follow&count=true&size=large" frameborder="0" scrolling="0" width="220px" height="30px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=0532&type=follow&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>
</div>
</body>
</html>
Raw
gh-fork-ribbon.css
/*!
* "Fork me on GitHub" CSS ribbon v0.1.1 | MIT License
* https://github.com/simonwhitaker/github-fork-ribbon-css
*/
/* Left will inherit from right (so we don't need to duplicate code) */
.github-fork-ribbon {
/* The right and left classes determine the side we attach our banner to */
position: absolute;
/* Add a bit of padding to give some substance outside the "stitching" */
padding: 2px 0;
/* Set the base colour */
background-color: #a00;
/* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
/* Add a drop shadow */
-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
/* Set the font */
font: 700 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
z-index: 9999;
pointer-events: auto;
}
.github-fork-ribbon a,
.github-fork-ribbon a:hover {
/* Set the text properties */
color: #fff;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
text-align: center;
/* Set the geometry. If you fiddle with these you'll also need
to tweak the top and right values in .github-fork-ribbon. */
width: 200px;
line-height: 20px;
/* Set the layout properties */
display: inline-block;
padding: 2px 0;
/* Add "stitching" effect */
border-width: 1px 0;
border-style: dotted;
border-color: #fff;
border-color: rgba(255, 255, 255, 0.7);
}
.github-fork-ribbon-wrapper {
width: 150px;
height: 150px;
position: absolute;
overflow: hidden;
top: 0;
z-index: 9999;
pointer-events: none;
}
.github-fork-ribbon-wrapper.right {
right: 0;
}
.github-fork-ribbon-wrapper.right .github-fork-ribbon {
top: 42px;
right: -43px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment