A Pen by Zhye

Thumbnail
This awesome code was written by Zhye, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Zhye ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Zhye</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <center>
    <div class="hdnb">
      <div class="hdnbb">if you wanna get in trouble, babe</div>
      <div class="hdns">
        <span>i am your man</span>

      </div>
      <div class="hdni"></div>
      <div class="hdna"><a href="link" class="hdnl1">file</a><br />
        <a href="link" class="hdnl2">relations</a><br />
        <a href="link" class="hdnl3">mp</a></div>

    </div>

</center>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Zhye/a-pen-by-zhye-LjqvJW */
.hdnb {
  height: 40px;
  width: 298px;
  padding: 10px 5px;
  background-image: url(https://68.media.tumblr.com/36b05ad09f2c2220d740cbdc63ead4d5/tumblr_no0343el151szv8bco1_400.gif);
  background-position: -47px -105px;
}

.hdnbb {
  font-family: caveat brush;
  font-size: 25px;
  color: #efefef;
}

.hdns {
  font-family: 'libre barcode 39 text';
  font-size: 28px;
  height: 15px;
  overflow: hidden;
  word-spacing: 20px;
  letter-spacing: 4px;
  color: #efefef;
  margin-top: 5px;
}

.hdns span {
  position: relative;
  top: -13px;
}

.hdni {
  width: 150px;
  height: 98px;
  background: url(http://i.imgur.com/Xh0uAgR.gif);
  background-size: 300%;
  background-position: -180px -125px;
  overflow: hidden;
  filter: sepia(100%) saturate(1000%) hue-rotate(170deg);
}

.hdna {
  position: relative;
  left: 15px;
      top: -15px;
}

.hdni, .hdna {
  margin-top: 8px;
  display: inline-block;
}

.hdna a {
  color: #0bceff;
}

.hdnl1, .hdnl2, .hdnl3, .hdnl4 {
  margin: 6px;
  text-decoration: none;
  display: block;
  font-family: Source Code Pro;
  font-weight: 200;
  text-transform: uppercase;
  font-size: 11px;
  width: 110px;
}

.hdnl1:hover, .hdnl2:hover, .hdnl3:hover, .hdnl4:hover {
  text-decoration: line-through;
  text-shadow: 1px 0px 0px red, -1px 0px 0px cyan;
  color: cyan;
}

.hdnl1:after, .hdnl2:after, .hdnl3:after, .hdnl4:after {
  content: " }";

  transition: 0.5s;
}

.hdnl1:hover:after, .hdnl2:hover:after, .hdnl3:hover:after, .hdnl4:hover:after {
  padding-left: 9px;
}

.hdnl1:before, .hdnl2:before, .hdnl3:before, .hdnl4:before {
  content: "{ ";
  position: relative;
  transition: 0.5s;
}

.hdnl1:hover:before,
.hdnl2:hover:before,
.hdnl3:hover:before,
.hdnl4:hover:before {
  padding-right: 9px;
}
/*fonts*/
/* vietnamese */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: local('Anton Regular'),
    local('Anton-Regular'),
    url(https://fonts.gstatic.com/s/anton/v8/9Yb_jZb3zvMIiuTm_VeFqA.woff2)
      format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: local('Anton Regular'),
    local('Anton-Regular'),
    url(https://fonts.gstatic.com/s/anton/v8/KgPSGrLwjoSLN4ZBWvXSfQ.woff2)
      format('woff2');
  unicode-range: U+0100-024F,
    U+1E00-1EFF,
    U+20A0-20AB,
    U+20AD-20CF,
    U+2C60-2C7F,
    U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: local('Anton Regular'),
    local('Anton-Regular'),
    url(https://fonts.gstatic.com/s/anton/v8/o-91-t7-bPc7W26HmS2N4Q.woff2)
      format('woff2');
  unicode-range: U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02C6,
    U+02DA,
    U+02DC,
    U+2000-206F,
    U+2074,
    U+20AC,
    U+2212,
    U+2215;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat Brush';
  font-style: normal;
  font-weight: 400;
  src: local('Caveat Brush'),
    local('CaveatBrush-Regular'),
    url(https://fonts.gstatic.com/s/caveatbrush/v2/_d7bgsk3hfC4DXnUEeYKsz0LW-43aMEzIO6XUTLjad8.woff2)
      format('woff2');
  unicode-range: U+0100-024F,
    U+1E00-1EFF,
    U+20A0-20AB,
    U+20AD-20CF,
    U+2C60-2C7F,
    U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat Brush';
  font-style: normal;
  font-weight: 400;
  src: local('Caveat Brush'),
    local('CaveatBrush-Regular'),
    url(https://fonts.gstatic.com/s/caveatbrush/v2/_d7bgsk3hfC4DXnUEeYKs-gdm0LZdjqr5-oayXSOefg.woff2)
      format('woff2');
  unicode-range: U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02C6,
    U+02DA,
    U+02DC,
    U+2000-206F,
    U+2074,
    U+20AC,
    U+2212,
    U+2215;
}
/* latin */
@font-face {
  font-family: 'Libre Barcode 39 Text';
  font-style: normal;
  font-weight: 400;
  src: local('Libre Barcode 39 Text Regular'),
    local('LibreBarcode39Text-Regular'),
    url(https://fonts.gstatic.com/s/librebarcode39text/v3/O4inMvtTcDsw_GI-nhT1ngA9s1DpUaeSeqfKrIEfYns.woff2)
      format('woff2');
  unicode-range: U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02C6,
    U+02DA,
    U+02DC,
    U+2000-206F,
    U+2074,
    U+20AC,
    U+2212,
    U+2215;
}
/* latin-ext */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 200;
  src: local('Source Code Pro ExtraLight'),
    local('SourceCodePro-ExtraLight'),
    url(https://fonts.gstatic.com/s/sourcecodepro/v6/leqv3v-yTsJNC7nFznSMqZCDkYQxybH_Rl7Qv7ee2N4.woff2)
      format('woff2');
  unicode-range: U+0100-024F,
    U+1E00-1EFF,
    U+20A0-20AB,
    U+20AD-20CF,
    U+2C60-2C7F,
    U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 200;
  src: local('Source Code Pro ExtraLight'),
    local('SourceCodePro-ExtraLight'),
    url(https://fonts.gstatic.com/s/sourcecodepro/v6/leqv3v-yTsJNC7nFznSMqSVh0V6fR69OLaFLklYbiSk.woff2)
      format('woff2');
  unicode-range: U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02C6,
    U+02DA,
    U+02DC,
    U+2000-206F,
    U+2074,
    U+20AC,
    U+2212,
    U+2215;
}
/* latin-ext */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Code Pro Light'),
    local('SourceCodePro-Light'),
    url(https://fonts.gstatic.com/s/sourcecodepro/v6/leqv3v-yTsJNC7nFznSMqTRVvBvQIc1z78c__uoBcyI.woff2)
      format('woff2');
  unicode-range: U+0100-024F,
    U+1E00-1EFF,
    U+20A0-20AB,
    U+20AD-20CF,
    U+2C60-2C7F,
    U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Code Pro Light'),
    local('SourceCodePro-Light'),
    url(https://fonts.gstatic.com/s/sourcecodepro/v6/leqv3v-yTsJNC7nFznSMqeode0-EuMkY--TSyExeINg.woff2)
      format('woff2');
  unicode-range: U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02C6,
    U+02DA,
    U+02DC,
    U+2000-206F,
    U+2074,
    U+20AC,
    U+2212,
    U+2215;
}

Comments