Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                body
  // Behance icon 
  svg(xmlns="http://www.w3.org/2000/svg" style="display: none;")
    defs
      symbol(viewBox="72 2821.442 102.007 67.037" id='icon-behance')  
        path(d="M211.07,4292.1s9.574-.64,9.574-12.446-7.979-17.553-17.872-17.553H169.9v66.063h32.872s20.106.639,20.106-19.467C222.878,4308.376,223.835,4292.1,211.07,4292.1Zm-26.808-18.51h18.51s4.468,0,4.468,7.022-2.553,7.979-5.745,7.979H184.261Zm17.553,42.765H184.261V4298.8h18.51s6.7,0,6.7,8.935C209.474,4315.4,204.367,4316.035,201.814,4316.354Zm47.871-37.66c-24.255,0-24.255,25.211-24.255,25.211s-1.6,25.213,24.255,25.213c0,0,21.7,1.276,21.7-17.553h-11.17s.319,7.022-10.213,7.022c0,0-11.17.638-11.17-11.489h32.872c0,.319,3.83-28.4-22.021-28.4Zm9.893,19.787H238.835s1.277-10.213,11.17-10.213S259.579,4298.481,259.579,4298.481Zm2.553-32.553h-26.17v8.3h26.17Z" transform="translate(-97.9 -1440.658)")
  // GitHub icon 
  svg(xmlns="http://www.w3.org/2000/svg" style="display: none;")
    defs
      symbol(viewBox="373 2815.059 93.828 79.788" id='icon-github')
        path(d="M498.39,4834.7c-3.511,0-6.7,4.149-6.7,9.254s2.872,9.256,6.7,9.256c3.511,0,6.7-4.149,6.7-9.256C504.773,4838.845,501.9,4834.7,498.39,4834.7Zm22.978-23.937c.638-1.914.638-12.445-3.191-22.659,0,0-9.255.958-23.3,10.531-2.872-.956-7.979-1.275-12.766-1.275-5.106,0-9.893.319-12.766,1.275-14.042-9.573-23.3-10.531-23.3-10.531-4.149,10.214-3.83,20.745-3.192,22.659-4.787,5.107-7.659,11.17-7.659,19.788,0,36.7,30.319,37.341,37.978,37.341H491.05c7.659,0,37.978-.638,37.978-37.341A27.724,27.724,0,0,0,521.368,4810.759Zm-39.255,52.659h0c-19.468,0-34.467-2.233-34.467-21.062a15.846,15.846,0,0,1,5.425-12.128c6.383-5.744,16.915-2.872,29.042-2.872h0c12.127,0,22.659-3.191,29.042,2.872a15.849,15.849,0,0,1,5.425,12.128c0,18.829-15,21.063-34.467,21.063ZM465.838,4834.7c-3.511,0-6.7,4.149-6.7,9.254s2.872,9.256,6.7,9.256c3.511,0,6.7-4.149,6.7-9.256S469.348,4834.7,465.838,4834.7Z" transform="translate(-62.2 -1973.041)")
  // CodePen icon 
  svg(xmlns="http://www.w3.org/2000/svg" style="display: none;")
    defs
      symbol(viewBox="665 2808.531 92.921 92.918" id='icon-codepen')
        path(d="M91.54,31.428,48.177,2.52a3.1,3.1,0,0,0-3.435,0L1.379,31.428A3.1,3.1,0,0,0,0,34.005V62.913A3.1,3.1,0,0,0,1.379,65.49L44.742,94.4a3.1,3.1,0,0,0,3.438,0L91.544,65.49a3.1,3.1,0,0,0,1.378-2.577V34.005a3.1,3.1,0,0,0-1.378-2.577ZM46.458,59.193,30.361,48.46l16.1-10.732,16.1,10.732Zm3.1-26.845V10.883L84.237,34.005,68.14,44.737Zm-6.195,0L24.777,44.737,8.68,34.005,43.361,10.883ZM19.192,48.46l-13,8.666V39.794Zm5.585,3.723L43.361,64.573V86.038L8.68,62.916ZM49.556,64.573,68.14,52.183l16.1,10.732L49.556,86.038ZM73.724,48.46l13-8.666V57.127Z" transform="translate(664.999 2806.531)")
  // Twitter icon 
  svg(xmlns="http://www.w3.org/2000/svg" style="display: none;")
    defs
      symbol(viewBox="957 2818.25 93.509 75.958" id='icon-twitter')
        path(d="M123.673,5071.313v2.553c0,25.531-19.468,54.894-54.893,54.894a55.661,55.661,0,0,1-29.68-8.617,22.629,22.629,0,0,0,4.468.319,39.536,39.536,0,0,0,23.936-8.3c-8.3-.319-15.638-5.744-17.872-13.4a13.1,13.1,0,0,0,3.511.319,24.791,24.791,0,0,0,5.106-.638,19.153,19.153,0,0,1-15.319-18.83v-.319a19.384,19.384,0,0,0,8.617,2.553,19.131,19.131,0,0,1-6.064-25.531,53.623,53.623,0,0,0,39.893,20.1,18.824,18.824,0,0,1-.638-4.467,19.192,19.192,0,0,1,33.191-13.085,37.082,37.082,0,0,0,12.127-4.788,18.835,18.835,0,0,1-8.617,10.531,44.288,44.288,0,0,0,11.17-2.872,28.184,28.184,0,0,1-8.936,9.577Z" transform="translate(917.9 -2234.551)")
  // Dribble icon 
  svg(xmlns="http://www.w3.org/2000/svg" style="display: none;")
    defs
      symbol(viewBox="1249 2808.676 93.828 93.828" id='icon-dribble')
        path(d="M1007.88,4687.733a196.511,196.511,0,0,0-15-22.98,40.29,40.29,0,0,0-22.021,28.085C971.817,4692.519,988.732,4692.838,1007.88,4687.733Zm5.106,13.4c.638-.32.957-.32,1.6-.639-.957-2.234-2.234-4.467-3.191-6.7a154.282,154.282,0,0,1-41.169,5.744v1.275a39.945,39.945,0,0,0,10.213,26.808h0c-.319,0,10.851-19.466,32.553-26.487Zm-27.446,31.276h0c-.319-.319-.638-.319-.957-.639A4.589,4.589,0,0,0,985.54,4732.413Zm15-70.532Zm36.063,8.939a40.456,40.456,0,0,0-26.489-9.895,32.991,32.991,0,0,0-9.574,1.275,200.539,200.539,0,0,1,15,23.3c15.319-5.744,21.063-14.678,21.063-14.678Zm-26.489,76.911a46.914,46.914,0,1,1,46.914-46.915A46.99,46.99,0,0,1,1010.114,4747.73Zm6.7-40.21c-23.617,8.3-31.276,24.575-31.6,24.893a39,39,0,0,0,24.574,8.617,42.751,42.751,0,0,0,15.638-3.191c-.319-3.512-2.553-15.958-8.617-30.318C1017.135,4707.2,1017.135,4707.521,1016.816,4707.521Zm1.915-16.276a45.263,45.263,0,0,1,2.553,5.743l.957,1.916c13.723-1.6,27.446,1.275,28.084,1.275a39.5,39.5,0,0,0-9.255-25.212c0,.638-6.7,9.895-22.34,16.277Zm6.064,14.361a167.582,167.582,0,0,1,7.659,28.722,40.678,40.678,0,0,0,17.234-26.807c-.958-.639-12.128-4.151-24.893-1.916Z" transform="translate(285.8 -1845.226)")
  //- Main Nav List
  mixin nav-list
    ul
      li
        a(href='/')
          img.site-logo(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/logo-icon.svg" alt="ethayer.co brand icon")/ <span class="sr-only">home</span>
      li
        a(href='#about-me') about
      li
        a(href='#my-work') work
      li
        a(href='#lets-connect') contact
  // Site Wrap 
  .site-wrap    
    header(role="header")
      nav.main-nav
        //- Use
        +nav-list
      .intro
        img.media(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/profile-pic.jpg' alt='profile picture')/
        h1 Hi, I'm Eric.
        h2 I love building web sites, design systems, responsive display patterns and productive relationships.
        p I’m located outside of Denver Colorado. Give me a call or send me an email to talk about your next project or idea. I love working in all phases of the design process so I’m able to help out in multiple ways.      
    // Main 
    main(role="main")
      // My Passions
      section.passion-block
        h2#about-me my passions
        .grid.grid-4-wide
          button.rwd.info-toggle <abbr title="responsive web design">RWD</abbr>   
          button.ux.info-toggle <abbr title="user experience design">UX</abbr>
          button.ixd.info-toggle <abbr title="interaction design">I<span>x</span>D</abbr>
          button.perf.info-toggle <abbr title="web performance">Perf</abbr>
          button.ui.info-toggle <abbr title="user interface design">UI</abbr>
          button.proto.info-toggle <abbr title="prototyping">Proto</abbr>
          button.brand.info-toggle <abbr title="branding">Brand</abbr>
          button.a11y.info-toggle <abbr title="web accessibility">A11Y</abbr>      
      // Work Samples 
      section.work-samples
        h2#my-work work samples
        .grid
          // work sample
          figure
            img(srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-3000px.jpg 2x, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-2500px.jpg 2500w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-2000px.jpg 2000w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-1200px.jpg 1200w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-800px.jpg 800w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-480px.jpg 480w" alt="work sample")/
      // Redesign Video 
      section.redesign-video
        h2#my-process design process&nbsp;
          .grid
            //- redesign video
            figure.media.iframe <iframe class="lazyload" width="100%" src="https://www.youtube.com/embed/ZqlVjv8DlYI?rel=0" frameborder="0" allowfullscreen>  </iframe> <noscript><iframe width="100%" src="https://www.youtube.com/embed/ZqlVjv8DlYI?rel=0" frameborder="0" allowfullscreen></iframe></noscript>
      // Contact Block
      section.contact-block
        article
          .text
            h2#lets-connect.text-lg let's connect
            p Find me on the web or let’s talk in person. I want to hear about your next big idea, current project or next big idea. I’m always looking to meet new people with good intentions that enjoy the process of creating even more than the profit it brings us.          
          img.media(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/profile-pic.jpg' alt='profile picture')/
        .contact-links
           a.contact-link.h2(href='mailto:[email protected]') [email protected]
           a.contact-link.h2(href='tel:6199525081') 619 952 5081
      // Contact Form
      section.contact-form
        form#contact-form(action='post')
          .grid.form-group
            label.sr-only(for='name') Name
            input(id='name' name='contactName' type='text' placeholder='Name' required)/
            label.sr-only(for='email') Email
            input(id='email' name='contactEmail' type='email' placeholder='Email' required)/
            label.sr-only(for='interest') Interest
            .custom-select
              select
                option(value="interest" selected) Interest
                option(value="web design") web design
                option(value="visual design") visual design
                option(value="user experience design") user experience design
                option(value="front-end development") front-end development
                option(value="general") just sayin' hi
          .grid.form-group    
            label.sr-only(for='contact-message') Message
            textarea(id='contact-message' name='contactMessage' placeholder='Message' cols='100')
            input.submit-button(type='submit' value='send')/
      // Contact Icons
      section.grid.contact-icons
        //- Behance
        a(href='https://www.behance.net/ethayer') <svg title="behance icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-behance"></use></svg>
        //- Github
        a(href='https://github.com/ericthayer/') <svg title="github icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-github"></use></svg>
        //- CodePen
        a(href='https://codepen.io/ericthayer/') <svg title="codepen icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-codepen"></use></svg>
        //- Twitter
        a(href='https://twitter.com/_ericthayer/') <svg title="twitter icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-twitter"></use></svg>
        //- Dribble
        a(href='https://dribbble.com/ethayer/') <svg title="dribble icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-dribble"></use></svg>
    // Footer 
    footer.copyrights(role="contentinfo")
      p &copy; 2017 Eric Thayer - Created with <a href="http://www.adobe.com/products/experience-design.html">Adobe XD</a> - Designed with <a href="https://codepen.io/">CodePen</a> - <button class="btn-reset log-info-toggle">v0.2.5</button>
  // Info Block : RWD
  #rwd.info-block(aria-hidden="true")
    h3.title Responsive Web Design
    .scroll-wrap      
      p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt sit placeat illum, vero error tenetur, laudantium possimus nostrum vel soluta excepturi. Nisi blanditiis et, porro.
      //- media item
      .media.iframe <iframe class="lazyload" width="100%" src="https://www.youtube.com/embed/ElAJbhkH2lU?rel=0" frameborder="0" allowfullscreen>  </iframe> <noscript><iframe width="100%" src="https://www.youtube.com/embed/ElAJbhkH2lU?rel=0" frameborder="0" allowfullscreen></iframe></noscript>
      .media
        figure
          figcaption 
          img(srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-3000px.jpg 2x, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-2500px.jpg 2500w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-2000px.jpg 2000w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-1200px.jpg 1200w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-800px.jpg 800w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-480px.jpg 480w" alt="work sample")/
      p Iusto eligendi dolorum blanditiis repellendus officiis ea amet aliquid nostrum. Consequatur provident quod, architecto voluptatem harum a autem itaque fugiat modi rem nam quo iure assumenda consectetur quos vero ipsam incidunt quidem ad aliquid cumque quis officiis! Repellat reiciendis saepe aperiam.
      // image grid
      .grid
        //- sample
        .media
          figure
            figcaption 
            img(srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-3000px.jpg 2x, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-2500px.jpg 2500w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-2000px.jpg 2000w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-1200px.jpg 1200w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-800px.jpg 800w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-480px.jpg 480w" alt="work sample")/
        //- sample
        .media
          figure
            figcaption 
            img(srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-3000px.jpg 2x, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-2500px.jpg 2500w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-2000px.jpg 2000w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-1200px.jpg 1200w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-800px.jpg 800w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-480px.jpg 480w" alt="work sample")/
    // close window
    button.close-button <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path class="a" d="M699,837a13,13,0,1,1,13-13A13,13,0,0,1,699,837Zm0-23a10,10,0,1,0,10,10A10,10,0,0,0,699,814Zm4.5,13.5-1,1a0.48,0.48,0,0,1-.7,0l-2.9-2.9-2.9,2.9a0.48,0.48,0,0,1-.7,0l-1-1a0.48,0.48,0,0,1,0-.7l2.9-2.9-2.9-2.9a0.48,0.48,0,0,1,0-.7l1-1a0.48,0.48,0,0,1,.7,0l2.9,2.9,2.9-2.9a0.48,0.48,0,0,1,.7,0l1,1a0.48,0.48,0,0,1,0,.7l-2.9,2.9,2.9,2.9A0.48,0.48,0,0,1,703.5,827.5Z" transform="translate(-686 -811)"/></svg> <span class="sr-only">close</span>
      
  // Info Block : UX
  #ux.info-block(aria-hidden="true")
    h3.title User Experience Design
    .scroll-wrap      
      p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt sit placeat illum, vero error tenetur, laudantium possimus nostrum vel soluta excepturi. Nisi blanditiis et, porro.
      //- media item
      .media.iframe <iframe class="lazyload" width="100%" src="https://www.youtube.com/embed/ElAJbhkH2lU?rel=0" frameborder="0" allowfullscreen>  </iframe> <noscript><iframe width="100%" src="https://www.youtube.com/embed/ElAJbhkH2lU?rel=0" frameborder="0" allowfullscreen></iframe></noscript>
      .media
        figure
          figcaption 
          img(srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-3000px.jpg 2x, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-2500px.jpg 2500w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-2000px.jpg 2000w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-1200px.jpg 1200w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-800px.jpg 800w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-480px.jpg 480w" alt="work sample")/
      p Iusto eligendi dolorum blanditiis repellendus officiis ea amet aliquid nostrum. Consequatur provident quod, architecto voluptatem harum a autem itaque fugiat modi rem nam quo iure assumenda consectetur quos vero ipsam incidunt quidem ad aliquid cumque quis officiis! Repellat reiciendis saepe aperiam.
      // image grid
      .grid
        //- sample
        .media
          figure
            figcaption 
            img(srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-3000px.jpg 2x, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-2500px.jpg 2500w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-2000px.jpg 2000w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-1200px.jpg 1200w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-800px.jpg 800w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-480px.jpg 480w" alt="work sample")/
        //- sample
        .media
          figure
            figcaption 
            img(srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-3000px.jpg 2x, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-2500px.jpg 2500w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-2000px.jpg 2000w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-1200px.jpg 1200w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-800px.jpg 800w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-srcset-480px.jpg 480w" alt="work sample")/
    // close window
    button.close-button <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path class="a" d="M699,837a13,13,0,1,1,13-13A13,13,0,0,1,699,837Zm0-23a10,10,0,1,0,10,10A10,10,0,0,0,699,814Zm4.5,13.5-1,1a0.48,0.48,0,0,1-.7,0l-2.9-2.9-2.9,2.9a0.48,0.48,0,0,1-.7,0l-1-1a0.48,0.48,0,0,1,0-.7l2.9-2.9-2.9-2.9a0.48,0.48,0,0,1,0-.7l1-1a0.48,0.48,0,0,1,.7,0l2.9,2.9,2.9-2.9a0.48,0.48,0,0,1,.7,0l1,1a0.48,0.48,0,0,1,0,.7l-2.9,2.9,2.9,2.9A0.48,0.48,0,0,1,703.5,827.5Z" transform="translate(-686 -811)"/></svg> <span class="sr-only">close</span>
      
  // bg mid path
  .bg-top-path  
  // bg mid path
  .bg-mid-path
  // bg image © Eric Thayer | 18th & Wazee | Denver Colorado 
  .bg-img
  
  // build log
  #build-log.info-block.build-log(aria-hidden="true")
    h3.title Build Log
    .scroll-wrap
      //- v 0.2.5
      div.log-entry
        p.log-title <time class="date-stamp" datetime="2017-01-21">01/21/2017</time><span class="version-label"><small>v</small> 0.2.5</span>
        ul.log-notes
          li refactored JS but it's still ugly
          li played w/ <pre><code>svg</code></pre> bg image layout options... again
          li added scrollbar styles and text formatting for <pre><code>.scroll-wrap</code></pre>
      //- v 0.2.4
      div.log-entry
        p.log-title <time class="date-stamp" datetime="2017-01-20">01/20/2017</time><span class="version-label"><small>v</small> 0.2.4</span>
        ul.log-notes
          li tweaking on <pre><code>.intro > .media</code></pre> style/layout
          li small screen layout changes and fixes
          li base typography changes          
          li small screen layout fixes
          li some quick performance/a11y audits (not bad)
      //- v 0.2.3
      div.log-entry
        p.log-title <time class="date-stamp" datetime="2017-01-19">01/19/17</time><span class="version-label"><small>v</small> 0.2.3</span>
        ul.log-notes
          li added <pre><code>.redesign-video</code></pre> showing time-lapse of static design
          li modified <pre><code>.info-block</code></pre> layout & JS          
          li <pre><code>.site-wrap</code></pre> layout style changes
          li <pre><code>.intro</code></pre> layout style changes
          li played w/ <pre><code>svg</code></pre> bg images but layout still pending
      //- v 0.2.2
      div.log-entry
        p.log-title <time class="date-stamp" datetime="2017-01-08">01/08/17</time><span class="version-label"><small>v</small> 0.2.2</span>
          ul.log-notes
            li added image & new font assets
            li added <pre><code>.bg-img</code></pre> styles
            li started simple modal to use w/ <pre><code>.passion-block</code></pre>
            li modified <pre><code>.work-samples</code></pre> layout & grid      
      //- v 0.2.1
      div.log-entry
        p.log-title <time class="date-stamp" datetime="2017-01-12">01/12/17</time><span class="version-label"><small>v</small> 0.2.1</span>
        ul.log-notes
          li added <pre><code>.main-nav</code></pre> styles
          li added <pre><code>.build-log</code></pre> format
          li <pre><code>.build-log</code></pre> styles
          li <pre><code>.contact-block</code></pre> & <pre><code>.contact-form</code></pre> created 
          li flex grid fix on iOS
          li personal image layout options, using <pre><code>shape-outside</code></pre> CSS property
      //- v 0.2.0
      div.log-entry
        p.log-title <time class="date-stamp" datetime="2017-01-05">01/05/17</time><span class="version-label"><small>v</small> 0.2.0</span>
          ul.log-notes
            li inital HTML layout with Pug (header, main, footer)
            li base styles & variables set
            li <pre><code>.passion-block</code></pre> & <pre><code>.work-samples</code></pre> created
            li layout options explored     
      //- v 0.1.x
      div.log-entry
        p.log-title <time class="date-stamp" datetime="2016-10-01">10/01/16</time><span class="version-label"><small>v</small> 0.1.x</span6
        ul.log-notes
          li see <a href="http://ethayer.co/">http://ethayer.co</a> for a rough v1
    // close window
    button.close-button <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path class="a" d="M699,837a13,13,0,1,1,13-13A13,13,0,0,1,699,837Zm0-23a10,10,0,1,0,10,10A10,10,0,0,0,699,814Zm4.5,13.5-1,1a0.48,0.48,0,0,1-.7,0l-2.9-2.9-2.9,2.9a0.48,0.48,0,0,1-.7,0l-1-1a0.48,0.48,0,0,1,0-.7l2.9-2.9-2.9-2.9a0.48,0.48,0,0,1,0-.7l1-1a0.48,0.48,0,0,1,.7,0l2.9,2.9,2.9-2.9a0.48,0.48,0,0,1,.7,0l1,1a0.48,0.48,0,0,1,0,.7l-2.9,2.9,2.9,2.9A0.48,0.48,0,0,1,703.5,827.5Z" transform="translate(-686 -811)"/></svg> <span class="sr-only">close</span>
!

CSS 

              
                // fonts
$sans-serif: 'Helvetica Neue', Helvetica, sans-serif;
$WorkSans: 'Work Sans', $sans-serif;

// color variables

$blue: #389EDE;
$med-blue: mix(black, $blue, 30%);
$dark-blue: mix(black, $blue, 60%);

$purple: #639;
$med-purple: mix(black, $purple, 25%);
$dark-purple: mix(black, $purple, 50%);

// bg
$bg-grey: #383939;

// animations

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }  
}

@mixin fade-in {
  animation: fade-in 1.5s forwards ease;  
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }  
}

@mixin fade-out {
  animation: fade-out 1.5s forwards ease;  
}

// screen reader text

@mixin sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@mixin sr-only-focusable {
  &:active,
  &:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
}

.sr-only {
  @include sr-only;
}

.sr-only-focusable {
  @include sr-only-focusable;
}

// root

:root {
  font-size: calc( 1rem + (40 - 20) * ( (100vw - 400px) / ( 2000 - 400)));
  &.info-block-visible {
    overflow-y: hidden;
  }
}

// global styles

body {
  //@include fade-in;
  background-color: mix($purple, $bg-grey, 50%);
  background-size: cover;
  font-family: $WorkSans;
  color: #fff;
  line-height: 1.45;
  padding: 2em calc(1em + 5vw);
}

iframe,
img,
svg {
  max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  //color: currentColor; 	
	line-height: 1.2;
  transition: opacity .2s;
	&:empty {
  	display: none;  
	}
}

h1,.h1,
h2,.h2,
h3,.h3,
h4,.h4,
h5,.h5,
h6,.h6 {
  font-weight: 700;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  > strong, em, b {
    
  }
  &:focus {
    outline: none;
  }
}

h1, .h1 {
  font-size: 3rem;
}

h2, .h2 {
  font-size: 1.45rem;
}

.text-lg {
  font-size: 1.75rem;
}

p {
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.6333;
}

a {
  color: #fff;
  text-decoration: none;
}

abbr[title] {
  text-decoration: none;
}

nav {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    
    & > li {
      margin-bottom: 0;
    }
  }
}

@mixin btn-reset {
  background-color: transparent;
  border: none;
  margin: 0;
  padding: 0;
}

.btn-reset {
  @include btn-reset;
}

.media {
  // when iframe is used
  &.iframe {
  margin-bottom: 2rem;  
  position:relative;
	line-height: 0; 
	height:0;  
	// padding-bottom: 70% !important; // 4:3
	padding-bottom: 56.25%; // 16:9
	width:100%;
    & > figure,
    & > div,
    & > iframe {
      display: inline-block;
      position: absolute !important;
      margin: 0;
      height: 100% !important;
      width: 100%;
      top:0;
      left:0;
    }    
  }
}

.site-wrap {
  // use to center header in page
  display: flex;
  flex-direction: column;
  height: 100vh;
  // align-items: flex-end;
  
  // default
  margin-right: auto;
  margin-left: auto;
  max-width: 37.50em;
  position: relative;
  z-index: 3;
}

header, section, article {
  margin-bottom: 2rem;
}

header {
  // use this to center header on page
  // margin: auto;
}

// Background

.bg-top-path {
  display: none;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/bg-top-path.svg") no-repeat left -1em rgba(black, .5);
  background-blend-mode: overlay;
  background-size: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 110%;
  opacity: .8;
  //transform: rotateY(180deg);
  z-index: 2;
}

.bg-mid-path {
  //display: none;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/bg-mid-path.svg") no-repeat -2em top;
  background-blend-mode: overlay;
  background-size: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 200px;
  width: 120%;
  z-index: 2;
  // > 600px
  @media (min-width: 37.50em) {
    height: 100%;
    top: 65%;
  }
}

.bg-img {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/Wazze-and-18-SM.jpg") no-repeat center top fixed rgba(#639, .7);
  background-blend-mode: multiply;
  background-size: cover;
  display: block;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;  
}

// Header

.site-logo {
  opacity: .9;
  max-width: 3rem;
  width: 100%;
}

// main nav

.main-nav {
  
  margin-bottom: 3em;
  
  a {
    font-size: 1.125rem;
    font-weight: 300;
    letter-spacing: .075rem;
    text-decoration: none;
  }
  
  ul {
    margin-bottom: 0;
  }
  
  li {
    margin-bottom: .25em;
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  li:first-child {
    margin-right: auto;
    margin-left: 0;
    padding-bottom: .625em;
  }
  
  // > 480px
  @media (min-width: 30em) {
    ul {
      display: flex;
      //flex-direction: column;
      align-items: center;
      justify-content: flex-end;
    }
    li {
      margin-bottom: 0;
      margin-left: 3vw;
      &:first-child {
        padding-bottom: 0;
      }
    }
  
  }
  
}

// intro

.intro {
  //text-shadow: .25rem .25rem 0 rgba(black, .5);
  h1 {
    margin-bottom: .75rem;
  }
  h2 {
    line-height: 1.3;
  }
  .media {
    display: none;
    border-radius: 0 50%;
    margin-bottom: 1em;
    max-width: 14em;
    // clip
    //clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    //shape-outside: circle();
  }
  // > 400px
  @media (min-width: 25em) {
    //padding-top: 2.5em;
   .media {
     float: right;
     //float: left;
     margin: 2% 0 1.5em 1.25em;
     max-width: 300px;
     width: 30%; 
     // fun stuff
     shape-outside: polygon(5% -4%, 5% 50%, 9% 66%, 11% 71%, 17% 80%, 31% 88%, 57% 90%, 73% 90%, 87% 90%, 107% 90%, 107% 32%, 102% 19%, 91% 6%, 71% -4%);
    }
  }
}

// info block

.info-block {
  //display: none;
  opacity: 0;
  background-color: rgba($purple, .9);
  padding-top: 2em;
  padding-right: 1em;
  padding-bottom: 2em;
  padding-left: 2em;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  //transform: translateY(100%);
  transition: all .5s ease;
  z-index: 0;
  .title {
    border-bottom: 1px solid rgba(#FFF, .2);
    font-size: 2rem;
    margin-bottom: .5em;
    padding-right: 1em;
    padding-bottom: .25em;
  }
  p {
    margin-bottom: 2em;
  }
  &.info-block-visible {
    opacity: 1;
    z-index: 100;
  }
}

// scroll wrap

.scroll-wrap {
  height: calc(100% - 3.75em);
  overflow-y: auto;
  padding-top: .25em;
  padding-right: 1em;
  padding-bottom: .875em;
  .grid {
    //margin-right: calc(100% - .313em);
    //margin-left: calc(100% - .313em);
  }
  // scrollbars
  &::-webkit-scrollbar {
    width: 8px;
  } 

  &::-webkit-scrollbar-track {
    background: rgba(#333, 0.15);
    //box-shadow: inset 0 0 3px rgba(white, 0.15);
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(#FFF, .35);
    //outline: 1px solid rgba(black, 0.15);
    //box-shadow: inset 0 0 4px rgba(white, 0.3);  
  }  
}

// close button

.close-button {
  //background-color: rgba($dark-purple, .7);
  background-color: transparent;
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
  height: 2em;
  width: 2em;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 1em;
  right: .75em;
  text-transform: uppercase;
  z-index: 1000;
  svg {
    display: block;
    fill: rgba(#FFF, .85);
    height: 100%;
    width: 100%;
  }
}

// simple grid

.grid {  
  display: flex;
  flex-wrap: wrap;
  margin-right: -.313em;
  margin-left: -.313em;
  
  > * {
    flex-grow: 1;
    float: left;
    margin: .313em;
    width: 100%;
  }
  
  // > 320px
  @media (min-width: 20em) {    
    
    > * {
      width: 45%;  
    }
    
  }
  
  // > 600px
  @media (min-width: 37.50em) {    
    
    > * {
      width: 30%;  
    }
    
    &.grid-4-wide { 
      > * {
        width: 20%;  
      }
    }
    
  }
  
}

// Passion Block

.passion-block {
  //display: none;
  p, button {
    background: rgba($blue, .85);  
    padding: 1rem;
    text-align: center;
    font-weight: 700;
    letter-spacing: .02em;
    text-shadow: 0 0 .25em mix(black, $blue, 50%);
    text-transform: uppercase;
    span {
      text-transform: none;
    }
  }
  
}

// Work Samples

.work-samples {
  
  figure {
//     -webkit-clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
// clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
  }
  
}

// Contact Block

.contact-block  {
  
  h2 {
    margin-bottom: 1rem;
  }
  
  // profile pic
  .media {    
    border-radius: 50%;
    max-width: 10em;
    width: 100%;
  }
  
  // > 600px
  @media (min-width: 37.50em) {
  
    article {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .media {
      margin-left: 2em;      
    }
    
  }
  
}

.contact-link {
  display: inline-block;
  &:first-child {
    margin-right: 1rem;
  }
}

.contact-icons {
  align-items: center;
  text-align: center;
  justify-content: space-between;
  > * {
    max-height: 2.5em;
    max-width: 2.5em;
    width: 100%;
  }
  svg {
    fill: #fff;
    height: 2.5em;
    width: 100%;
  }
}

// Contact Form

.contact-form {
  color: #333;
  font-size: .875rem;
  label {
    @include sr-only;
  }
  input, textarea {
    border-radius: .125em;
    border: none;
  }
  input:not([type="submit"]),
  textarea,
  select {
    padding-top: .75em;
    padding-right: .75em;
    padding-bottom: .75em;
    padding-left: .75em;
  }
  textarea {
    min-height: 100px;
  }
  // < 600px
  @media (max-width: 37.50em) {
    textarea {
      min-height: 130px;
      width: 100%;
    }
  }
}

// Custom Select

.custom-select {
  background: #FFF; 
  color: #333;
  //border: 1px solid transparent;
	border-radius: .125em;
	line-height: 1.4;
  //box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  position: relative;
  display: block;

  select {
    border-radius: .125em;
    color: #a8a8a8;
    //font-size: .875rem;  
    padding-right: 2em;
    background: none;
    border: 0 solid transparent; 
    appearance: none;
    width: 100%;
    margin: 0;
    outline: none;
    &::selected {
      color: #333;
    }
  } 

  &:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1em;
    z-index: 2;
    pointer-events: none;
    display: none;
    display: block; 
  
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 7px solid #666;
    margin-top: -3px;
  }
}

.submit-button {
  background-color: $blue;
  font-weight: 700;
  color: #fff;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  text-transform: uppercase;
}

// Footer
footer {
  padding-bottom: 2em;
  p, button {
    font-size: .75rem;
  }
  p {
    margin-bottom: .5em;
      &:last-child {
      margin-bottom: 0;
    }
  }  
}

// redesign video

.redesign-video {
  margin-bottom: 0;
}

// build log

.build-log {
  background-color: rgba(#000, .9);
  //z-index: 10;
  //opacity: 1 !important;
  pre {
    //background-color: #fff;
    color: mix(white, $purple, 25%);
    display: inline;
    margin: 0;
    padding: 0 .2em;
  }
  a {
    text-decoration: underline;
  }
}

.log-entry {
  margin-bottom: 2em;
  &:last-child {
    margin-bottom: 0;
  }
}

.log-title {
  font-size: 80%;
  > * {
    padding: .313em .5em;
  }
}

.date-stamp {
  background-color: $purple;  
}

.version-label {
  background-color: mix(black, $purple, 20%);
}

.log-notes {
  font-size: .875rem;
  margin-bottom: 0;
  padding-left: 2.125em;
  li {
    line-height: 1.5;
    list-style-type: none;
    margin-bottom: .75em;
    position: relative;
    &:last-child {
      margin-bottom: 0;
    }
    &:before {
      color: #CCC;
      content: "✦";
      font-size: .75em;
      position: absolute;
      top: 5px;
      left: -1rem;
      width: 1em;
    }
  }
}

.log-info-toggle {
  text-decoration: underline;
}
!

JS 

              
                // must revise later

// global close button ???
// var closeToggle = document.querySelector(".close-button");
// closeToggle.addEventListener("click", function() {
//   document.querySelector(".info-block.info-block-visible").classList.toggle("info-block-visible").setAttribute('aria-hidden', true);
//   document.querySelector("html").classList.remove("info-block-visible");
// });

var rwdToggle = document.querySelector(".rwd.info-toggle");
var uxToggle = document.querySelector(".ux.info-toggle");
var ixdToggle = document.querySelector(".ixd.info-toggle");
var logToggle = document.querySelector(".log-info-toggle");

rwdToggle.addEventListener("click", function() {
  document.querySelector("#rwd").setAttribute('aria-hidden', false);
  document.querySelector("#rwd").classList.toggle("info-block-visible");
  document.querySelector("html").classList.remove("info-block-hidden");
  document.querySelector("html").classList.add("info-block-visible");
});

uxToggle.addEventListener("click", function() {
  document.querySelector("#ux").setAttribute('aria-hidden', false);
  document.querySelector("#ux").classList.toggle("info-block-visible");
  document.querySelector("html").classList.remove("info-block-hidden");
  document.querySelector("html").classList.add("info-block-visible");
});

ixdToggle.addEventListener("click", function() {
   document.querySelector("#ixd").setAttribute('aria-hidden', false);
  document.querySelector("#ixd").classList.toggle("info-block-visible");
  document.querySelector("html").classList.remove("info-block-hidden");
  document.querySelector("html").classList.add("info-block-visible");
});

logToggle.addEventListener("click", function() {
  document.querySelector("#build-log").setAttribute('aria-hidden', false);
  document.querySelector("#build-log").classList.toggle("info-block-visible");
  document.querySelector("html").classList.remove("info-block-hidden");
  document.querySelector("html").classList.add("info-block-visible");
});

var closeRWDBlock = document.querySelector("#rwd .close-button");
closeRWDBlock.addEventListener("click", function() {
  document.querySelector("#rwd.info-block-visible").setAttribute('aria-hidden', true);
  document.querySelector("#rwd.info-block-visible").classList.toggle("info-block-visible");
  document.querySelector("html").classList.remove("info-block-visible");
  document.querySelector("html").classList.add("info-block-hidden");
});

var closeUXBlock = document.querySelector("#ux .close-button");
closeUXBlock.addEventListener("click", function() {
  document.querySelector("#ux.info-block-visible").setAttribute('aria-hidden', true);
  document.querySelector("#ux.info-block-visible").classList.toggle("info-block-visible");
  document.querySelector("html").classList.remove("info-block-visible");
  document.querySelector("html").classList.add("info-block-hidden");
});

var closeLogBlock = document.querySelector("#build-log .close-button");
closeLogBlock.addEventListener("click", function() {
  document.querySelector("#build-log.info-block-visible").setAttribute('aria-hidden', true);
  document.querySelector("#build-log.info-block-visible").classList.toggle("info-block-visible");
  document.querySelector("html").classList.remove("info-block-visible");
  document.querySelector("html").classList.add("info-block-hidden");
});
!
999px

Console