Codepen include - footer

In this example below you will see how to do a Codepen include - footer with some HTML / CSS and Javascript

Not worth viewing. Just the footer include I use across Codepen's.

Thumbnail
This awesome code was written by 2kool2, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 2kool2 ©
  • HTML
  • CSS
  • JavaScript
    
<footer class=myStuff>
  <style>
    body{padding-bottom:3.75rem}
    @media (min-width:26.25em){
      body{padding-bottom:2.25rem}
    }
    @media (min-width:37.5em){
      body{padding-bottom:1.5rem}
    }
    .myStuff{z-index:10;font:100 16px/1.5 sans-serif;text-align:center;color:#fff;background-color:hsla(269,19%,20%,.9);position:fixed;width:100vw;left:0;bottom:0;margin:0;padding:.125em}
    .myStuff_lnk,.myStuff_lnk:visited{text-decoration-skip: ink;color:hsla(211,100%,72%,1);background-color:transparent;text-decoration-color:hsla(211,100%,72%,.5);transition:all .3s ease-out;white-space:nowrap}
    .myStuff_lnk:focus,.myStuff_lnk:hover{color:#fff;text-decoration-color:currentcolor}
    .myStuff_hire{display:block}
    @media(min-width:37.5em){
      .myStuff_hire{display:initial;padding-right:.5rem}
    }
  </style>

  <strong class=myStuff_hire>Available for hire:</strong>
  <a class=myStuff_lnk target=linkedin title="[LinkedIn - new window]" href="https://www.linkedin.com/in/mikefoskett">Mike Foskett</a> &nbsp; 
  <a class=myStuff_lnk target=popularpens title="[new window]" href="https://codepen.io/2kool2/pens/popular/?grid_type=list#">Popular pens</a> &nbsp; 
  <a class=myStuff_lnk target=latestpens title="[new window]" href="https://codepen.io/2kool2/pens/public/?grid_type=list#">Latest pens</a> &nbsp; 
  <a class=myStuff_lnk target=webSemantics title="[new window]" href="https://websemantics.uk/">webSemantics</a>
</footer>

/*Downloaded from https://www.codeseek.co/2kool2/codepen-include-footer-mKeeGM */
    


/*Downloaded from https://www.codeseek.co/2kool2/codepen-include-footer-mKeeGM */
    

Comments