Skip to content

Instantly share code, notes, and snippets.

@quezo

quezo/index.html

Created June 13, 2016 19:25
Show Gist options
  • Save quezo/9bf15bc3d09dce981c7356231f5fb655 to your computer and use it in GitHub Desktop.
Save quezo/9bf15bc3d09dce981c7356231f5fb655 to your computer and use it in GitHub Desktop.
Download ZIP
wmHtg
Raw
index.html
<div class="cp-ribbon-wrapper">
<div class="cp-ribbon">Fork me on <span class="cp-c">C<div alt="f216" class="genericon genericon-codepen"></div>d</span>ePen</div>
</div>
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
.cp-ribbon {
font-family: "HelveticaNeue-CondensedBold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
position: relative;
background-color: #2C2D2E;
color: white;
text-align: center;
font-size: 18px;
text-shadow: grey 0px 1px 0px;
transform: rotate(-45deg);
padding: 9px 1px;
left: -55px;
top: 48px;
width: 250px;
box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.3);
letter-spacing: 0.1em;
}
.cp-ribbon-wrapper {
width: 300px;
height: 180px;
overflow: hidden;
position: absolute;
top: 6px;
left: 3px;
}
cp-c {
letter-spacing: -4px !important;
}
Raw
styles
<link href="http://s.cdpn.io/2/genericons_1.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment