Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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.

+ add another resource

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

              
                <a name="top"></a>
<!-- Page Header/Navigation -->
<header>
  <nav class="top-nav clearfix">
    <a id="nav-toggle"><i class="fa fa-bars" aria-hidden="true"></i></a>
    <ul class="nav-container">
      <a href="#top"><li class="logo"><h5>art.carvajal</h5></li></a>
      <a href="#top"><li>home</li></a>
      <a href="#tools"><li>tools</li></a>
      <a href="#works"><li>works</li></a>
      <a href="#about"><li>about</li></a>
      <a href="#contact"><li>contact</li></a>
    </ul>
  </nav>
</header>
<!-- Page Splash -->
<div class="page-header-splash">
  <div class="header-item main-item">
    <div class="splash-inner">
      <h1 class="alternate-colors-light"><span>art</span><span id="flipper">.</span><span>carvajal</span></h1>
      <p class="alternate-colors-light"><span>modern</span> <span>design</span></p>
      <p class="alternate-colors-light"><span>effective</span> <span>branding</span></p>
      <p class="alternate-colors-light"><span>rapid</span> <span>development</span></p>
      <a class="button" href="#contact">Contact Art Now</a>
    </div>
  </div>
</div>
<div class="page-body">
  <!-- Main Navigation -->
  <nav class="main-nav sub-container">
    <h1>Explore</h1>
    <ul>
      <a href="#top"><li><div class="nav-option">Home</div></li></a>
      <a href="#tools"><li><div class="nav-option">Tools</div></li></a>
      <a href="#works"><li><div class="nav-option">Works</div></li></a>
      <a href="#about"><li><div class="nav-option">About</div></li></a>
      <a href="#contact"><li><div class="nav-option">Contact</div></li></a>
    </ul>
  </nav>
  <!-- Tools and Applications -->
  <a name="tools"></a>
  <div class="splash tools-splash">
    <div class="splash-inner">
      <h1 class="alternate-colors"><span>brilliant design</span><span>from the</span><span>bleeding edge</span></h1>
    </div>
    <div class="see-more">
      <p>tools of the trade</p>
      <p><i class="fa fa-arrow-down" aria-hidden="true"></i></p>
    </div>
  </div>
  <section class="langs-and-apps sub-container">
    <a name="tools"></a>
    <div class="langs list-container">
      <h2 class="list-heading">Fluent In</h2>
      <ul>
        <li><i class="fa fa-html5" aria-hidden="true"></i>HTML5</li>
        <li><i class="fa fa-css3" aria-hidden="true"></i>CSS3</li>
        <li><i class="fa fa-shield" aria-hidden="true"></i>JavaScript (ES6)</li>
        <li><i class="fa fa-cogs" aria-hidden="true"></i>PHP</li>
        <li><i class="fa fa-database" aria-hidden="true"></i>MySQL</li>
      </ul>
    </div><!--
--><div class="apps list-container">
    <h2 class="list-heading">Guru With</h2>
    <ul>
      <li><i class="fa fa-paint-brush" aria-hidden="true"></i>GIMP</li>
      <li><i class="fa fa-object-ungroup" aria-hidden="true"></i>InkScape</li>
      <li><i class="fa fa-file-image-o" aria-hidden="true"></i>IrfanView/RIOT</li>
      <li><i class="fa fa-code-fork" aria-hidden="true"></i>GIT/GitHub/Bash</li>
      <li><i class="fa fa-sitemap" aria-hidden="true"></i>Node.js/npm</li>
    </ul>
    </div>
    <div class="additional">
      <h3>Prior Explorations In</h3>
      <ul>
        <li>Bootstrap</li>
        <li>Wordpress</li>
        <li>jQuery</li>
        <li>Angular</li>
        <li>React</li>
        <li>Foundation</li>
        <li>Ruby/Rails</li>
        <li>Python</li>
        <li>GameMaker</li>
        <li>Unity</li>
        <li>C#</li>
        <li>C++</li>
      </ul>
    </div>
  </section>
  <!-- Works -->
  <a name="works"></a>
  <div class="splash works-splash">
    <div class="splash-inner">
      <h1 class="alternate-colors-light"><span>form,</span><span>meet</span><span>function</span></h1>
    </div>
    <div class="see-more">
      <p>works of Art</p>
      <p><i class="fa fa-arrow-down" aria-hidden="true"></i></p>
    </div>
  </div>
  <section class="works sub-container">
    <div class="work">
      <a href="https://glasselephantpro.com" target="_blank">
        <div class="work-image" style="background-image: url('http://ajcjazz.com/portfolio_images/glasselephantpro.jpg')"></div>
      </a><!--
      --><div class="work-text">
        <div class="work-header">
          <h2>Glass Elephant Pro</h2>
          <h5>Ground-up website build, brand development</h5>
        </div>
        <ul>
          <li>Crafted lightweight JavaScript solution for FAQ and Equipment page navigation</li>
          <li>Assisted client with site migration and hosting solutions</li>
          <li>Visit <a href="https://glasselephantpro.com" target="_blank">glasselephantpro.com</a></li>
        </ul>
      <div class="work-footer">
        <ul>
        </ul>
      </div>
      </div>
    </div>
    <div class="work">
      <a href="http://jazzinaustin.com" target="_blank">
        <div class="work-image" style="background-image: url('http://ajcjazz.com/portfolio_images/jazzinaustin.jpg')"></div>    
      </a><!--
      --><div class="work-text">
        <div class="work-header">
          <h2>Jazz In Austin</h2>
          <h5>Consultation / Debugging</h5>
        </div>
        <ul>
          <li>Revamped outdated stylesheet with modern design elements</li>
          <li>Assisted lead developer in back-end debugging</li>
          <li>Visit <a href="http://jazzinaustin.com" target="_blank">jazzinaustin.com</a></li>
        </ul>
      </div>
    </div>
    <div class="work">
      <a href="https://candydecluemusic.com" target="_blank">
        <div class="work-image" style="background-image: url('http://ajcjazz.com/portfolio_images/candydecluemusic.jpg')"></div>
      </a><!--
      --><div class="work-text">
        <div class="work-header">
          <h2>Candy DeClue Music</h2>
          <h5>Ground-Up Website Build</h5>
        </div>
        <ul>
          <li>Crafted custom calendar management system in JavaScript/PHP/MySQL</li>
          <li>Using JavaScript, addressed viewport-height bug targeting iOS 7.x</li>
          <li>Visit <a href="https://candydecluemusic.com" target="_blank">candydecluemusic.com</a></li>
        </ul>
      </div>
    </div>
    <div class="work">
      <a href="https://codepen.io/acarva1" target="_blank">
        <div class="work-image codepen" style="background-image: url('http://ajcjazz.com/portfolio_images/codepen.jpg');"></div>
      </a><!--
      --><div class="work-text">
        <div class="work-header">
          <h2>CodePen</h2>
          <h5>HTML5 Canvas Experiments</h5>
        </div>
        <ul>
          <li>Wide array of code experiments, especially with HTML5 <code>canvas</code></li>
          <li><a href="https://codepen.io/acarva1/pen/gpGKxa?editors=0010" target="_blank"> View Art's sandbox for <code>globalCompositeOperation</code>s on HTML canvas</a></li>
          <li><a href="https://codepen.io/acarva1/pen/QNvVVQ" target="_blank">Check out the MineCraft Multiple Command Compiler</a></li>
          <li><a href="https://codepen.io/acarva1/pen/jPLgbO" target="_blank">Play with a simulation of Faraday's Lines of Force</a></li>
        </ul>
      </div>
    </div>
  </section>
  <!-- About -->
  <a name="about"></a>
  <div class="splash about-splash">
    <div class="splash-inner">
      <h1 class="alternate-colors-light"><span>pleased</span><span>to</span><span>meet you</span></h1>
    </div>
    <div class="see-more">
      <p>about Art</p>
      <p><i class="fa fa-arrow-down" aria-hidden="true"></i></p>
    </div>
  </div>
  <section class="about sub-container">
    <div class="about-content">
      <div class="about-text">
        <p>I'm a web developer currently living in Austin, producing sites and customer-facing web solutions for clients on a freelance basis. I also occasionally work as a web design consultant.</p>
        <p>I'm a fanatic about code and design--one of those that can stay up through the wee hours getting things pixel-perfect.</p>
        <p>When I'm not digging through web code, you're likely to find me behind either a game controller or a guitar.</p>
      </div>
    </div>
  </section>
  <!-- Contact -->
  <a name="contact"></a>
  <div class="splash contact-splash">
    <div class="splash-inner">
      <h1 class="alternate-colors-light"><span>make</span><span>a</span><span>connection</span></h1>
    </div>
    <div class="see-more">
      <p>reach out</p>
      <p><i class="fa fa-arrow-down" aria-hidden="true"></i></p>
    </div>
  </div>
  <section class="contact sub-container">
    <div class="contact-text">
      <p>Drop me a line on your favorite social site</p>
      <ul>
        <a title="CodePen: acarva1" href="https://codepen.io/acarva1/" target="_blank"><li><i class="fa fa-codepen" aria-hidden="true"></i></li></a>
        <a title="GitHub: acarva1" href="https://github.com/acarva1" target="_blank"><li><i class="fa fa-github" aria-hidden="true"></i></li></a>
        <a title="Twitter: @art_carvajal" href="https://twitter.com/art_carvajal" target="_blank"><li><i class="fa fa-twitter" aria-hidden="true"></i></li></a>
        <a title="LinkedIn: Art Carvajal" href="https://www.linkedin.com/in/artcarvajal/" target="_blank"><li><i class="fa fa-linkedin-square" aria-hidden="true"></i></li></a>
        <a title="FreeCodeCamp.org: acarva1" href="https://www.freecodecamp.org/acarva1" target="_blank"><li><i class="fa fa-free-code-camp" aria-hidden="true"></i></li></a>
        <a title="Email Art" href="mailto:art.carvajal@yahoo.com" target="_blank"><li><i class="fa fa-envelope" aria-hidden="true"></i></li></a>
      </ul>
    </div>
  </section>
  <!-- Footer -->
  <footer class="clearfix sub-container">
    <div class="footer-section">
      <ul>
        <li><a href="#top">Home</a></li>
        <li><a href="#tools">Tools</a></li>
        <li><a href="#works">Works</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--
    --><div class="footer-section">
      <p>Tools, Works, and Contact splash images courtesy of <a href="https://unsplash.com">Unsplash.com</a></p>
      <p>Tools splash photo by <a href="https://unsplash.com/@gitfo?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Gerrie van der Walt">Gerrie van der Walt</a></p>
      <p>Works splash photo by <a href="https://unsplash.com/@sebamantel?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Sebastian Mantel">Sebastian Mantel</a></p>
      <p>Contact splash photo by <a href="https://unsplash.com/@chris_legs?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Chris Leggat">Chris Leggat</a></p>
    </div><!--
    --><div class="footer-section">
      <p>Content and design Copyright &copy 2017 <a href="mailto:art.carvajal@yahoo.com">Art Carvajal</a></p>
    </div>
  </footer>
</div>
              
            
!

CSS

              
                @function colors($ctx: 'main') {
  @if $ctx == 'main' { @return mediumslateblue; }
  @if $ctx == 'main-light' { @return lighten(mediumslateblue, 10%); }
  @else if $ctx == 'link' { @return slategray; }
  @else if $ctx == 'light' { @return #f0f0f0; }
  @else if $ctx == 'medium-light' { @return #b8b8b8; }
  @else if $ctx == 'medium' { @return #8a8a8a; }
  @else if $ctx == 'dark' { @return #333; }
}

@mixin font_family() { font-family: "Montserrat", "Calibri", "Arial", sans-serif; }
@mixin display_fonts() { @include font-family(); font-weight: 700; }
@mixin body_fonts() { @include font-family(); font-weight: 300; }
@mixin button($type, $ctx) {
  @if $type == 'solid' {
    color: white;
    background-color: colors($ctx);
  }
  @else if $type == 'hollow' {
    @font_color($ctx);
    background-color: white;
  }
  display: inline-block;
  border: 2px solid colors($ctx);
  border-radius: 8px;
  padding: 8px;
  margin: 15px;
}
  
* { box-sizing: border-box; position: relative; }

h1, h2, h3, h4, h5, button { @include display_fonts(); }

p, a, li { @include body_fonts(); }

p, li { line-height: 1.4em; }

a { text-decoration: none; color: colors('link'); transition: 0.1s linear all; }

a:hover { color: colors('main-light'); transition: 0.1s linear all; }

ul { list-style: none; }

ul, li { padding: 0; }

img { max-width: 100%; height: auto; }

html { font-size: 24px; }

body {
  color: colors('dark');
  overflow-x: hidden;
  text-align: center;
}

.button {
  @include button('solid', 'main');
  &:hover { @include button('solid','main-light');}
}

.alternate-colors {
  color: colors('light');
  & > *:nth-of-type(2n) {
    color: colors('dark');
  }
}
.alternate-colors-light {
  color: colors('light');
  & > *:nth-of-type(2n) {
    color: colors('medium');
  }
}

.top-nav {
  z-index: 100;
  width: 100%;
  position: fixed;
  top: 0;
  color: colors('light');
  background-color: colors('dark');
  #nav-toggle {
    cursor: pointer;
  }
  ul, .logo h5 {
    margin: 0;
  }
  li, #nav-toggle {
    height: 38px;
    line-height: 38px;
    display: block;
  }
  .nav-container {
    display: none;
  }
}

/* Splashes */ 
/* all splash styles are defined here, vs. near their related content, for ease of access */
.splash {
  width: 100%;
  min-height: 480px;
  height: 100vh;
  width: 100%;
  color: colors('light');
  display: table;
  .splash-inner {
    background-color: rgba(0,0,0,0.4);
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
    h1 span {
      display: block;
    }
  }
}

/* see-more */
.splash .see-more {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  z-index: 25;
  text-align: center;
  color: colors('light');
  padding: 20px;
  p {
    margin: 5px auto;
    i {
      @keyframes fadeInOut { from {opacity: 1} to {opacity: 0.2} }
      text-shadow: 1px 1px 18px rgba(255,255,255,0.6),
                   -1px 1px 18px rgba(255,255,255,0.6),
                   1px -1px 18px rgba(255,255,255,0.6),
                   -1px -1px 18px rgba(255,255,255,0.6);
      animation: 1.66s linear 0s infinite alternate fadeInOut;
    }
  }
}

.tools-splash {
  background: url('https://images.unsplash.com/photo-1502119176771-c007eb5feb6e') no-repeat center 60%/cover;
}
.works-splash {
  /* alternate bgs 
  background: url('https://images.unsplash.com/photo-1495467894491-aff044482626') no-repeat center 60%/cover;
  background: url('https://images.unsplash.com/photo-1495511623436-ba44aaee07cf') no-repeat center 60%/cover;*/
  background: url('https://images.unsplash.com/photo-1466786784937-3e682c802b14') no-repeat center 60%/cover;
  .splash-inner {
    background-color: rgba(0,0,0,0.6);
  }
}
.about-splash {
  background: url('https://ajcjazz.com/portfolio_images/art_pic_large.jpg') no-repeat center 20%/cover;
  .splash-inner {
    background-color: rgba(0,0,0,0.6);
  }
}
.contact-splash {
  background: url('https://images.unsplash.com/photo-1446102892025-3900145fd2a7') no-repeat center 60%/cover;
}

/* Page sub-containers */
.sub-container {
  padding: 100px 0;
}

/* Main page splash */

.page-header-splash {
  margin-top: 38px;
  min-height: 480px;
  height: 100vh;
  background: url('http://ajcjazz.com/images/splash_contact.jpg') no-repeat center/cover;
  h1, h4 {
    margin: 0;
    padding: 5px;
  }
  h4 {
    color: colors('light');
  }
  .header-item.main-item {
    width: 100%;
    height: 100%;
    display: table;
    .splash-inner {
      display: table-cell;
      vertical-align: middle;
      background-color: rgba(0,0,0,0.6);
      color: colors('light');
    }
  }
}

/* Main Nav */
.main-nav {
  h1 {
    margin-top: 0;
  }
  ul {
    max-width: 1400px;
    margin: 0 auto;
  }
  li {
    width: 90%;
    max-width: 360px;
    @include button('hollow', 'link');
  }
  a:hover li {
    @include button('solid', 'link');
  }
}

/* Tools */
.langs-and-apps {
  background-color: colors('light');
  color: colors('medium');
  li {
    @include button('hollow', 'medium');
    display: inline-block;
    padding: 8px;
    width: 90%;
    max-width: 400px;
    text-align: left;
    margin-bottom: 15px;
    &:hover {
      color: colors('dark');
    }
    i {
      padding-top: 3px;
      text-align: center;
      float: left;
      width: 50px;
    }
  }
  .additional li {
    margin: 5px;
    font-size: 90%;
    width: unset;
  }
}

/* Works */
.works {
  padding: 0;
}
.work {
  background-color: colors('light');
  color: colors('medium');
  display: block;
  min-height: 766px;
  overflow: hidden;
  &:first-child {
    margin-top: 0;
  }
  &:last-child {
    margin-bottom: 0;
  }
  .work-header h5 {
    font-style: italic;
    font-weight: normal;
  }
  .work-image {
    width: 100%;
    min-height: 320px;
    background-size: cover;
    border-bottom: thin solid colors('medium');
    a {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .work-text ul {
    a {
      text-decoration: underline;
    }
    padding: 5px;
    font-size: 80%;
    li {
      margin-bottom: 1.2em;
    }
  }
}

/* About */
.about .sub-container {
  padding: 0;
}
.about-content {
  width: 100%;
  max-width: 755px;
  margin: 0 auto;
  min-height: 480px;
  height: 100vh;
  display: table;
  .about-text {
    display: table-cell;
    vertical-align: middle;
    font-size: 90%;
    padding: 5px;
    text-align: left;
    p:first-child::before, p:last-child::after {
      position: absolute;
      color: colors('light');
      z-index: -1;
      font-size: 8em;
      font-family: "Times New Roman", serif;
    }
    p:first-child::before {
      content: "\201C";
      top: 0px;
      left: -15px;
    }
    p:last-child::after {
      content: "\201D";
      bottom: -15px;
      right: -15px;
    }
  }
}

/* Contact */
.contact {
  padding-left: 20px;
  padding-right: 20px;
  .contact-text {
    a {
      width: 68px;
      height: 68px;
      display: inline-block;
      border-radius: 50%;
      text-align: center;
      color: colors('medium');
      &:hover {
        background-color: white;
        color: colors('main');
      }
      i {
        font-size: 2em;
      }
    }
  }
}

/* Footer */
footer {
  &.sub-container {
    padding: 50px 0;
  }
  text-align: left;
  font-size: 65%;
  background-color: colors('dark');
  color: colors('medium');
  .footer-section {
    width: 100%;
    padding: 40px;
    display: inline-block;
  }
  ul li {
    a { text-decoration: underline; }
    margin-bottom: 8px;
  }
}

.clearfix::after {
  content: " ";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

@media (min-width: 666px) {
  footer .footer-section {
    float: left;
    width: 45%;
  }
}

@media (min-width: 884px) {
  .langs-and-apps li {
    text-align: center;
    i {
      float: none;
    }
  }
}

@media (min-width: 980px) {
  footer {
    .footer-section {
      width: 33%;
    }
  }
}

@media (min-width: 1024px) {
  .splash h1, .page-header-splash h1 {
    font-size: 300%;
  }
  .page-header-splash {
    margin-top: 0;
  }
  .top-nav {
    position: relative;
    display: block !important;
    #nav-toggle {
      display: none;
    }
    .nav-container {
      display: block !important;
      background: colors('dark');
    }
    li {
      padding: 0 15px;
      float: right;
    }
    li.logo {
      float: left;
    }
  }
  .work {
    margin: 0;
    padding: 0;
    max-width: unset;
    width: 100%;
    .work-image, .work-text {
      float: left;
    }
    &:nth-child(2n+1) {
      .work-image, .work-text {
        float: right;
      }
    }
    .work-image {
      border-bottom: none;
      background-position: center top;
      &.codepen {
        background-position: left bottom;
      }
    }
    .work-image, .work-image a {
      width: 50%;
      height: 766px;
    }
    .work-text {
      width: 50%;
      padding: 0 0 0 28px;
      ul li {
        text-align: left;
      }
    }
  }
}


@media (min-width: 1600px) {
  .splash h1, .page-header-splash h1 {
    font-size: 400%;
  }
}
              
            
!

JS

              
                $(document).ready(function(){
  /* back to top button functionality--may not use
  let btt = $("#back-to-top");
  btt.css("display", "none");
  $(window).scroll(function(){
    if (window.scrollY) { btt.fadeIn(); }
    else { btt.fadeOut(); }
  });*/
  /* expand or collapse the nav when the user clicks/taps the nav menu */
  /* also, collapse the nav if the user clicks anywhere on the page */
  $(window).click(function(e){
    let el = e.target;
    let navToggle = document.getElementById('nav-toggle');
    let navToggleI = navToggle.querySelector('i');
    if (el == navToggle || el == navToggleI) {
      $(".top-nav .nav-container").css('display') == 'none' ?
        $(".top-nav .nav-container").slideDown() :
        $(".top-nav .nav-container").slideUp();
    }
    else {
      if ($(".top-nav .nav-container").css('display') !== 'none') {
        $(".top-nav .nav-container").slideUp();
      }
    }
  })
});

              
            
!
999px

Console