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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

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.

+ 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.

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

              
                <header id="home" class="header-section">
      <nav class="navbar">
         <div class="nav-wrapper">
            <a href="#home" class="nav-icon"><i class="fa fa-home fa-2x" aria-hidden="true"></i></a>
            <a class="menu-toggle"><i class="menu-icon fa fa-bars fa-2x" aria-hidden="true"></i></a>
            <ul class="nav-links mobile-menu">
               <li class="link-item"><a href="#about-me">About Me</a></li>
               <li class="link-item"><a href="#skills">Skills</a></li>
               <li class="link-item"><a href="#projects">Projects</a></li>
               <li class="link-item"><a href="#contact">Contact</a></li>
            </ul>


         </div>
      </nav>

      <div class="title-container">
         <h1 class="title-name">Vincent <span class="blue">Yan</span></h1>
         <p class="title-job"><span class="blue">Front-End</span> Developer</p>
      </div>
      <a href="#" class="projects-arrow js-scroll-projects"><i class="fa fa-angle-down fa-4x" aria-hidden="true"></i></a>
   </header>

   <div class="header-border"></div>
   <section id="about-me" class="about-section">
      <div class="section-container">
         <h2 class="section-title">About me</h2>
         <img class="section-img" src="build/img/pic.jpg" alt="">
         <p>
            Hello! I am a front-end developer residing in Portland, OR. I recently graduated from Udacity's Front-End Nanodegree program where I learned a wide range of best practices in web  development. I am also going through the Free Code Camp curriculum to sharpen my skills. I love learning new technologies that allow me to build bigger and more complex web apps.</p> 
         <p>In my spare time, I love playing video games, reading, finding new local places to eat at and now I am learning how to cook.</p>
      </div>

   </section>
   <section id="skills" class="skills-section">
      <div class="section-container">
         <h2 class="section-title">SkillSet</h2>
         <div class="icon-row">
            <img class="tool-icon" src="build/img/html.png" alt="">
            <img class="tool-icon" src="build/img/css.png" alt="">
            <img class="tool-icon" src="build/img/javascript.png" alt="">
         </div>
         <div class="icon-row">
            <img class="tool-icon" src="build/img/jquery.png" alt="">
            <img class="tool-icon" src="build/img/sass.png" alt="">
            <img class="tool-icon" src="build/img/react.png" alt="">
         </div>
         <p>My toolset goes beyond the basic front-end trinity of HTML, CSS and Javascript. I use Git for version control as well as front-end frameworks and libraries such as Bootstrap and jQuery. Currently, I am learning React and recently started using Gulp as a task runner. Now I use Sass to write CSS files. I always strive to create web experiences that are not just functional but also look good across all devices.</p>
      </div>

   </section>
   <section id="projects" class="project-section js-projects-section">
      <div class="section-container">
         <h2 class="section-title">Projects</h2>
         <div class="project-div">
            <a href="https://envincebal.github.io/markdown-previewer/" target="_blank">
               <img class="project-img" src="build/img/markdown.png" alt="">
            </a>
            <h2 class="project-title"><strong>Markdown Previewer</strong></h2>

            <a href="https://envincebal.github.io/markdown-previewer/" target="_blank"><i class="fa fa-laptop fa-3x" aria-hidden="true"></i></a>
            <a href="https://github.com/envincebal/markdown-previewer" target="_blank"><i class="fa fa-github fa-3x" aria-hidden="true"></i></a>

            <p>Watch Github-style markdown  render in real time as you type.</p>
            <ul class="tech-list">
               <li>HTML / CSS</li>
               <li>Javascript</li>
               <li>Bootstrap</li>
               <li>React</li>
               <li>Sass</li>
            </ul>

         </div>
         <hr>
         <div class="project-div">
            <a href="https://envincebal.github.io/twitch-app/" target="_blank"> 
               <img class="project-img" src="build/img/twitch.png" alt="">
            </a>
            <h2 class="project-title"><strong>Twitch.tv App</strong></h2>

            <a href="https://envincebal.github.io/twitch-app/" target="_blank"><i class="fa fa-laptop fa-3x" aria-hidden="true"></i></a>
            <a href="https://github.com/envincebal/twitch-app" target="_blank"><i class="fa fa-github fa-3x" aria-hidden="true"></i></a>
            <p>See who is online and what they are currently playing on Twitch.tv!</p>
            <ul class="tech-list">
               <li>HTML / CSS</li>
               <li>Javascript</li>
               <li>jQuery</li>
               <li>API</li>
            </ul>
         </div>
         <hr>
         <div class="project-div">
            <a href="https://envincebal.github.io/pomodoro-clock/" target="_blank">
               <img class="project-img" src="build/img/pomodoro-clock.png" alt="">
            </a>
            <h2 class="project-title"><strong>Pomodoro Clock</strong></h2>

            <a href="https://envincebal.github.io/pomodoro-clock/" target="_blank">
					<i class="fa fa-laptop fa-3x" aria-hidden="true"></i>
				</a>
            <a href="https://github.com/envincebal/pomodoro-clock" target="_blank">
					<i class="fa fa-github fa-3x" aria-hidden="true"></i>
				</a>

            <p>Increase your productivity and stay on task with this pomodoro clock!</p>
            <ul class="tech-list">
               <li>HTML / CSS</li>
               <li>Javascript</li>
            </ul>
         </div>
         <hr>
         <div class="project-div">

            <a href="https://envincebal.github.io/calculator/" target="_blank">
               <img class="project-img" src="build/img/calculator.png" alt="">
            </a>
            <h2 class="project-title"><strong>Javascript Calculator</strong></h2>
            <a href="https://envincebal.github.io/calculator/" target="_blank"><i class="fa fa-laptop fa-3x" aria-hidden="true"></i></a>
            <a href="https://github.com/envincebal/calculator" target="_blank">
					<i class="fa fa-github fa-3x" aria-hidden="true"></i>
				</a>

            <p>It is a calculator app....used to calculate things. Enough said.</p>
            <ul class="tech-list">
               <li>HTML / CSS</li>
               <li>Javascript</li>
            </ul>
         </div> 
         <hr>
         <div class="project-div">
            <a href="https://envincebal.github.io/wikipedia-app/" target="_blank">
               <img class="project-img" src="build/img/wikipedia.png" alt="">
            </a>
            <h2 class="project-title"><strong>Wikipedia Previewer</strong></h2>

            <a href="https://envincebal.github.io/wikipedia-app/" target="_blank">
					<i class="fa fa-laptop fa-3x" aria-hidden="true"></i>
				</a>
            <a href="https://github.com/envincebal/wikipedia-app" target="_blank">
					<i class="fa fa-github fa-3x" aria-hidden="true"></i>
				</a>

            <p>Check out all the cool articles with this Wikipedia viewer!</p>
            <ul class="tech-list">
               <li>HTML / CSS</li>
               <li>Javascript</li>
               <li>jQuery</li>
               <li>Bootstrap</li>
               <li>API</li>
            </ul>
         </div>
         <hr>
         <div class="project-div">
            <a href="https://envincebal.github.io/weather-app/" target="_blank">
               <img class="project-img" src="build/img/weather.png" alt="">
            </a>
            <h2 class="project-title"><strong>Local Weather</strong></h2>
            <a href="https://envincebal.github.io/weather-app/" target="_blank">
					<i class="fa fa-laptop fa-3x" aria-hidden="true"></i>
				</a>
            <a href="https://github.com/envincebal/weather-app" target="_blank"><i class="fa fa-github fa-3x" aria-hidden="true"></i></a>

            <p>Is it raining, sunny or snowing? Find out using this handy weather app.</p> 
            <ul class="tech-list">
               <li>HTML / CSS</li>
               <li>Javascript</li>
               <li>jQuery</li>
               <li>API</li>
            </ul>  
         </div>
      </div>
   </section>
   <section id="contact" class="contact-section">
      <div class="section-container">
         <h2 class="section-title">Contact Me</h2>
         <p>Want to connect? Send me an email!</p>

         <div class="form">  
            <form method="POST" action="https://formspree.io/vincentyan1@gmail.com">
               <div class="form-group">
                  <input type="text" name="name" class="form-control input-name" placeholder="Name" required>
               </div>
               <div class="form-group">
                  <input type="email" name="_replyto" class="form-control input-email" placeholder="Email" required>
               </div>
               <div class="form-group">
                  <textarea class="form-control input-textarea" name="message" placeholder="Message" rows="8" required></textarea>
               </div>
               <button class="form-submit">Submit</button>
            </form>
         </div>
         <br> 
         <br>
         <h2>- or -</h2>
         <br>
         <p>Follow me on social media!</p>
         <a href="https://twitter.com/vince_yan1" target="_blank"><i class="twitter-icon fa fa-twitter fa-3x" aria-hidden="true"></i></a>
         <a href="https://github.com/envincebal" target="_blank"><i class="github-icon fa fa-github-alt fa-3x" aria-hidden="true"></i>
            <a href="https://www.linkedin.com/in/vincent-yan/" target="_blank"><i class="linkedin-icon fa fa-linkedin-square fa-3x" aria-hidden="true"></i></a>


      </div>
   </section>
   <div class="footer-border"></div>
   <footer>
      <h4>Copyright © 2017 by Vincent Yan. All rights reserved.</h4>
   </footer>
              
            
!

CSS

              
                 /*** GENERAL CSS RULES ***/

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
 }

 html,
 body {
    font-family: "Lato", sans-serif;
    text-rendering: optimizeLegibility;
 }

 a:link {
    text-decoration: none;
 }

 li {
    list-style-type: none;
    font-size: 18px;
 }

 p {
    margin: 20px 0;
    font-size: 18px;
    line-height: 25px;
 }

 hr {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    border-top: 2px solid rgba(0, 0, 0, .5);
 } 

 /*** ***/

 /* REUSABLE COMPONENTS */

 $mainBlue: #5682C5;
 $mainRed: #f44b4b;

 section {
    padding: 60px 10px;
 }

 section:nth-child(even) {
    background-color: #F6F6F6;
 }

 .section-container {
    text-align: center;
    margin: 0 auto;
    max-width: 700px;
 }

 .section-title {
    margin: 0 auto 20px auto;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 30px;
    padding: 10px;
 }

 .section-title:after {
    display: block;
    height: 3px;
    width: 100px;
    background-color: $mainRed;
    content: " ";
    margin: 10px auto 0 auto;
 }

 .section-img {
    border: 2px solid #fff;
    border-radius: 100%;
    width: 175px;
 }

 /******/

 body {

    /*** HEADER RULES ***/
    .header-section { 
       height: 100vh;
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://github.com/envincebal/my_portfolio/blob/gh-pages/build/img/macbook.jpg?raw=true"); 
       background-position: center;     
       background-repeat: no-repeat; 
       background-size: cover;
       background-attachment: fixed;
       color: #fff;

       .navbar {  
          min-height: 55px;
          width: 100%;
          transition: all 1s ease-in-out;

          .nav-wrapper {
             max-width: 1104px;
             margin: 0 auto;

             .nav-icon {
                color: #fff;
                margin-top: 12px;
                margin-left: 5%;
                float: left;
                transition: color 0.5s ease;

                @media (max-width: 1160px) {
                   padding-left: 2%;
                }
             }

             .nav-icon:hover {
                color: $mainBlue;
             }

             .nav-links {
                float: right;
                margin-top: 15px; 
                font-weight: 300;

                @media (max-width: 780px) {
                   display: none;
                   width: 100%;
                   text-align: center;
                }

                .link-item {
                   margin: 0 20px;
                   display: inline-block;
                   transition: color 0.5s ease;
                   font-size: 18px; 

                   @media (max-width: 780px) {
                      margin: 15px 0 15px 0;
                      display: block;
							 text-transform: uppercase;
                   }
                }

                .link-item a:link,
                .link-item a:visited {
                   color: #fff;
                   transition: color 0.5s ease; 
                }
					 
                .link-item a:hover {
                   color: $mainBlue;
                }
             }

             .menu-icon {
                display: none;
                float: right;
                margin-top: 12px;
                margin-right: 5%;
                cursor: pointer;

                @media (max-width: 780px) {
                   display: inline-block;
                }
             }
				 
             .close-icon {
                float: right;
                margin-top: 12px;
                margin-right: 5%;
                cursor: pointer;

             }
          }
       }

       .nav-sticky {
          position: fixed;
          background-color: rgba(0, 0, 0, 0.7);
          box-shadow: 0px -2px 5px 4px rgba(0, 0, 0, 0.7);
       }

       .title-container {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          text-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
          text-align: center;
          text-transform: uppercase;
          width: 100%;

          .blue {
             color: $mainBlue;
          }

          .title-name {
             font-size: 4.25rem;

             @media (max-width: 500px) {
                font-size: 2.5rem;
             }
          }

          .title-job {
             font-size: 2rem;
             font-weight: 300;

             @media (max-width: 500px) {
                font-size: 1.25rem;
             }
          }
       }

       .projects-arrow {
          position: absolute;
          bottom: 3%; 
          left: 49%;        
			
			 @media (max-width: 680px) {
                left: 45%;  
             }
          .fa-angle-down {
             animation: pulse 1s infinite alternate; 
          }

          @keyframes pulse {
             0% {
                color: #fff;
             }

             100% {
                color: $mainRed;
             }
          }
       }
    }

    .header-border {
       border-top: 3px solid $mainBlue;
    }

    /******/
    /*** SKILLS RULES ***/
    .skills-section {

       .icon-row {
          display: inline-block;

          @media (max-width: 500px) {
             display: inline;
          }

          .tool-icon {
             width: 100px;
             margin: 0 5px;
          }
       }
    }

    /******/
    /*** PROJECT SECTION RULES ***/
    .project-section {

       .project-div {
          padding: 30px 0;

          .project-img {
             max-width: 500px;
             width: 100%;
             box-shadow: 0px 0px 14px -1px rgba(0, 0, 0, 1);
             transition: all 0.5s ease;
          }

          .project-img:hover {
             box-shadow: 0px 0px 30px 1px rgba(0, 0, 0, 1);
          }

          .project-title {
             margin: 20px 0;
             text-transform: uppercase;

          }

          .fa {
             margin: 0 30px;
             color: #000;
             transition: color 0.5s ease;
          }

          .fa:hover {
             color: $mainBlue;
          }

          .tech-list li {
             border: 2px solid $mainBlue;
             background-color: $mainBlue;
             color: #fff;
             padding: 5px;
             margin: 5px;
             display: inline-block;
          }
       }
    }
    /******/
    /*** CONTACT SECTION RULES ***/
    .contact-section {

       .form {
          width: 100%;

          .form-control {
             width: 100%;
             margin-bottom: 20px;
             padding: 5px;
             font-size: 20px;
             border-radius: 5px;
             border: 1px solid #000;
          }

          .input-name,
          .input-email {
             height: 40px;
          }

          .form-submit {
             background-color: #fff;
             border: 2px solid $mainRed;
             border-radius: 5px;
             font-size: 18px;
             padding: 10px 20px;
             transition: all 0.5s ease;
          }

          .form-submit:hover {
             color: #fff;
             background-color: $mainRed;
          }
       }

       .twitter-icon,
       .github-icon,
       .linkedin-icon {
          margin: 0 20px;
          color: #000;
          transition: color .5s ease;
       }

       .twitter-icon:hover {
          color: #4899F0;
       }
       .github-icon:hover {
          color: #9C00AE;
       }

       .linkedin-icon:hover {
          color: #3171B3;
       }
    }

    .footer-border {
       border-bottom: 3px solid $mainRed;
    }

    /******/
    /*** FOOTER RULES ***/
    footer {
       background-color: $mainBlue;
       padding: 20px;
       text-align: center;
       color: #fff;
    }
 }

              
            
!

JS

              
                $(document).ready(function() {
  /* For the sticky nav */
  $(".header-border").waypoint(
    function(direction) {
      if (direction === "down") {
        $(".navbar").addClass("nav-sticky");
      } else {
        $(".navbar").removeClass("nav-sticky");
      }
    },
    {
      offset: "50px"
    }
  );

  /* Scroll on arrow icon */

  $(".projects-arrow").click(function() {
    $("html, body").animate(
      {
        scrollTop: $(".project-section").offset().top
      },
      1000
    );
  });

  /* Navigation scroll */

  $(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
      if (
        location.pathname.replace(/^\//, "") ==
          this.pathname.replace(/^\//, "") &&
        location.hostname == this.hostname
      ) {
        var target = $(this.hash);
        target = target.length
          ? target
          : $("[name=" + this.hash.slice(1) + "]");
        if (target.length) {
          $("html, body").animate(
            {
              scrollTop: target.offset().top
            },
            1000
          );
          return false;
        }
      }
    });
  });

  /* Mobile navigation */
  $(".menu-icon").click(function() {
    var nav = $(".mobile-menu");
    var icon = $(".menu-icon");

    nav.slideToggle(200);

    if (icon.hasClass("fa-bars")) {
      icon.addClass("fa-times");
      icon.removeClass("fa-bars");
    } else {
      icon.addClass("fa-bars");
      icon.removeClass("fa-times");
    }
  });

  /* Displays nav bar again when view is resized to desktop view */
  $(window).resize(function() {
    var w = $(window).width();
    var menu = $("nav ul");
    if (w > 1000 && menu.is(":hidden")) {
      menu.removeAttr("style");
    }
  });
});
$(document).ready(function() {
  /* For the sticky nav */
  $(".header-border").waypoint(
    function(direction) {
      if (direction === "down") {
        $(".navbar").addClass("nav-sticky");
      } else {
        $(".navbar").removeClass("nav-sticky");
      }
    },
    {
      offset: "50px"
    }
  );

  /* Scroll on arrow icon */

  $(".projects-arrow").click(function() {
    $("html, body").animate(
      {
        scrollTop: $(".project-section").offset().top
      },
      1000
    );
  });

  /* Navigation scroll */

  $(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
      if (
        location.pathname.replace(/^\//, "") ==
          this.pathname.replace(/^\//, "") &&
        location.hostname == this.hostname
      ) {
        var target = $(this.hash);
        target = target.length
          ? target
          : $("[name=" + this.hash.slice(1) + "]");
        if (target.length) {
          $("html, body").animate(
            {
              scrollTop: target.offset().top
            },
            1000
          );
          return false;
        }
      }
    });
  });

  /* Mobile navigation */
  $(".menu-toggle").click(function() {
    var nav = $(".mobile-menu");
    var icon = $(".menu-toggle");

    nav.slideToggle(200);

    if (icon.hasClass("fa-bars")) {
      icon.addClass("fa-times");
      icon.removeClass("fa-bars");
    } else {
      icon.addClass("fa-bars");
      icon.removeClass("fa-times");
    }
  });

  /* Displays nav bar again when view is resized to desktop view */
  $(window).resize(function() {
    var w = $(window).width();
    var menu = $("nav ul");
    if (w > 1000 && menu.is(":hidden")) {
      menu.removeAttr("style");
    }
  });
});

              
            
!
999px

Console