123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
                <!-- Navbar -->

  <a id="menu-toggle" href="#" class="btn btn-default btn-lg toggle"><i class="fa fa-bars"></i></a>
  <nav id="sidebar-wrapper">
    <ul class="sidebar-nav">
      <a id="menu-close" href="#" class="btn btn-default btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
      <li class="sidebar-brand">
        <a href="#home"  onclick = $("#menu-close").click();>Daniel Barr</a>
      </li>
      <li>
        <a href="#home" onclick = $("#menu-close").click();>Home</a>
      </li>
      <li>
        <a href="#about" onclick = $("#menu-close").click();>About</a>
      </li>
      <li>
        <a href="#portfolio" onclick = $("#menu-close").click();>Portfolio</a>
      </li>
      <li>
        <a href="#contact" onclick = $("#menu-close").click();>Contact</a>
      </li>
    </ul>
  </nav>

  <!-- Navbar End -->

  <!-- Header -->

  <a name="home"></a>
  <header class="header">
    <div class="container text-vertical-center">
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <h1>Daniel Barr</h1>
          <h3>“Life's true gift is the capacity to enjoy enjoyment.” </h3>
          <br>
          <ul class="list-inline">
            <li>
              <a href="https://www.facebook.com/staxed" class="btn btn-default btn-lg"><i class="fa fa-facebook fa-fw"></i> <span class="network-name">Facebook</span></a>
            </li>
            <li>
              <a href="https://twitter.com/DanBBarr" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
            </li>
            <li>
              <a href="https://github.com/Staxed" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
            </li>
            <li>
              <a href="https://www.linkedin.com/in/daniel-barr-67291331" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </header>

  <!-- Header End -->

  <!-- About -->

  <a name="about"></a>
  <section class="about ">
    <div class="container text-vertical-center">
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <div class="container-fluid">
            <h1 class="text-center">Who am I?</h1>
            <p class="lead text-center">I am a creative graphic designer and experienced web developer focused on modern eye catching designs and ease of use.  One of my main areas of interest and experience is in the social aspect of the web, community forums, social media, blogging, etc.</p>
            <div class="row stylish-panel">
              <div class="col-md-4">
                <div>
                  <img src="https://s13.postimg.org/dlg137th3/design_200.jpg" alt="Texto Alternativo" class="img-circle img-thumbnail">
                  <h2>Graphic Designer</h2>
                  <p>I have been doing graphics design for as long as I can remember.  From simple logos, stationary and banners, to full magazine layouts and complete website redesigns.  I can do it all!  If you are in need of any type of graphics, I'm your man.</p>
                </div>
              </div>
              <div class="col-md-4">
                <div>
                  <img src="https://s15.postimg.org/j4dxjd6pn/development_200.jpg" alt="Texto Alternativo" class="img-circle img-thumbnail">
                  <h2>Web Developer</h2>
                  <p>While my main area of expertise is community site development (forums, blogs, content management systems, etc), I am also well versed in HTML and CSS.  I am also in the process of increasing my skills with JavaScript, Ruby, and PHP.</p>
                </div>
              </div>
              <div class="col-md-4">
                <div>
                  <img src="https://s10.postimg.org/75z9szdsp/community_200.jpg" alt="Texto Alternativo" class="img-circle img-thumbnail">
                  <h2>Technology Expert</h2>
                  <p>I end up being the "Tech Geek" pretty much anywhere I go.  Software or Hardware makes no difference to me.  I can setup scripted web applications, secure a server, or build a PC from scratch.  I am also skilled in many desktop applications.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- About End -->

  <!-- Portfolio -->

  <a name="portfolio" data-speed="6" data-type="background"></a>
  <section id="portfolio" class="portfolio">
    <div class="container text-vertical-center">
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <h2>Portfolio</h2>
        <ul class="navigation">
            <li class="active"><a href=#>All</a></li>
            <li><a href=#>Web Design</a></li>
            <li><a href=#>Logo Design</a></li>
            <li><a href=#>Development</a></li>
            <li><a href=#>Other</a></li>
        </ul><!-- end portfolio-nav -->
                <!-- PORTFOLIO IMAGES -->
        <div class="portfolio-box">
            <ul class="row">
                <li class="active span3">
                    <a href="#project1" data-toggle="pill"><img src="https://staxed.github.io/img/portfolio/sheldon-web-thumb.jpg" alt="Sheldon Cooper Tribute Page Thumbnail" /></a>
                </li>
                <li class="span3">
                    <a href="#project2" data-toggle="pill"><img src="https://staxed.github.io/img/portfolio/sheldon-web-thumb.jpg" alt="Sheldon Cooper Tribute Page Thumbnail" /></a>
                </li>
                <li class="span3">
                    <a href="#project3" data-toggle="pill"><img src="https://staxed.github.io/img/portfolio/sheldon-web-thumb.jpg" alt="Sheldon Cooper Tribute Page Thumbnail" /></a>
                </li>
                <li class="span3">
                    <a href="#project4" data-toggle="pill"><img src="https://staxed.github.io/img/portfolio/sheldon-web-thumb.jpg" alt="Sheldon Cooper Tribute Page Thumbnail" /></a>
                </li>
                <li class="span3">
                    <a href="#project5" data-toggle="pill"><img src="https://staxed.github.io/img/portfolio/sheldon-web-thumb.jpg" alt="Sheldon Cooper Tribute Page Thumbnail" /></a>
                </li>
                <li class="span3">
                    <a href="#project6" data-toggle="pill"><img src="https://staxed.github.io/img/portfolio/sheldon-web-thumb.jpg" alt="Sheldon Cooper Tribute Page Thumbnail" /></a>
                </li>
                <li class="span3">
                    <a href="#project7" data-toggle="pill"><img src="https://staxed.github.io/img/portfolio/sheldon-web-thumb.jpg" alt="Sheldon Cooper Tribute Page Thumbnail" /></a>
                </li>
                <li class="span3">
                    <a href="#project8" data-toggle="pill"><img src="https://staxed.github.io/img/portfolio/sheldon-web-thumb.jpg" alt="Sheldon Cooper Tribute Page Thumbnail" /></a>
                </li>
            </ul>
            <!-- SINGLE PROJECT DETAILS -->
            <div class="tab-content">
 
            </div><!-- end tab-content -->
        </div><!-- end portfolio-box -->
        </div>
      </div>
    </div>
  </section>

  <!-- Portfolio End -->

  <!-- Contact -->

  <a name="contact"></a>
  <section class="contact">
    <div class="container ">
      <div class="row">
        <div class="col-md-10 col-md-offset-1 text-vertical-center">
          <p>There are a few ways to get in contact with me, please feel free to choose the one that is easiest for you!</p>
          <br>
          <ul class="list-inline">
            <li>
              <a href="mailto:daniel.b.barr@gmail.com" class="btn btn-default btn-lg"><i class="fa fa-envelope fa-fw"></i> <span class="network-name">Email Me</span></a>
            </li>
            <li>
              <a href="https://www.facebook.com/staxed" class="btn btn-default btn-lg"><i class="fa fa-facebook fa-fw"></i> <span class="network-name">Facebook</span></a>
            </li>            
            <li>
              <a href="https://twitter.com/DanBBarr" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
            </li>
            <li>
              <a href="https://github.com/Staxed" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
            </li>
            <li>
              <a href="https://www.linkedin.com/in/daniel-barr-67291331" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>  

  <!-- Contact End -->

  <!-- Footer -->

  <footer class="footer">
    <div class="container">
      <hr>
      <div class="row">
        <div class="col-md-6 text-left-align">
          <a href="#home">Home</a> | <a href="#about">About</a> | <a href="#portfolio">Portfolio</a> | <a href="#contact">Contact</a>
        </div>
        <div class="col-md-6 text-right-align">
          <p>scrivened and ciphered by <a href="https://github.com/Staxed" target="_blank">Daniel Barr</a></p>
        </div>
      </div>
    </div>
  </footer>

  <!-- Footer End -->

  <!-- Custom Nav JavaScript -->

  <script>
    // Closes the sidebar menu
    $("#menu-close").click(function(e) {
      e.preventDefault();
      $("#sidebar-wrapper").toggleClass("active");
    });
    // Opens the sidebar menu
    $("#menu-toggle").click(function(e) {
      e.preventDefault();
      $("#sidebar-wrapper").toggleClass("active");
    });
    // Scrolls to the selected menu item on the page
    $(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;
          }
        }
      });
    });
  </script>

  <!-- Custom Nav JavaScript End -->

  <script>
  $(document).ready(function(){
   // cache the window object
   $window = $(window);
 
   $('section[data-type="background"]').each(function(){
     // declare the variable to affect the defined data-type
     var $scroll = $(this);
                     
      $(window).scroll(function() {
        // HTML5 proves useful for helping with creating JS functions!
        // also, negative value because we're scrolling upwards                            
        var yPos = -($window.scrollTop() / $scroll.data('speed'));
         
        // background position
        var coords = '50% '+ yPos + 'px';
 
        // move the background
        $scroll.css({ backgroundPosition: coords });   
      }); // end window scroll
   });  // end section function
}); // close out script

/* Create HTML5 element for IE */
document.createElement("section");
</script>

            
          
!
            
              html,
body {
  height: 100%;
}

/* Navbar */
#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  right: 0;
  width: 250px;
  height: 100%;
  margin-right: -250px;
  overflow-y: auto;
  background: #222;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-nav li {
  text-indent: 20px;
  line-height: 40px;
}

.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #999;
}

.sidebar-nav li a:hover {
  text-decoration: none;
  color: #fff;
  background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
  height: 55px;
  font-size: 18px;
  line-height: 55px;
}

.sidebar-nav > .sidebar-brand a {
  color: #999;
}

.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;
}

#menu-toggle {
  z-index: 1;
  position: fixed;
  top: 0;
  right: 0;
}

#sidebar-wrapper.active {
  right: 250px;
  width: 250px;
  -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

.toggle {
    margin: 5px 5px 0 0;
}
/* Navbar End */

.header {
  padding: 100px 0;
  display: table;
  width: 100%;
  height: 100%;
  color: #FFF;
  background-image: url("https://s27.postimg.org/778hbrnc3/escalator.jpg");
  background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
  
}

.header h1, h3 {
  text-shadow: black 3px 4px 5px;
}

.text-vertical-center {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.text-vertical-center h1 {
  margin: 0;
  padding: 0;
  font-size: 4.5em;
  font-weight: 700;
}

.header h1 {
  font-size: 7.5em;
}

@media only screen and (max-width: 500px) {
  .header h1 {
    font-size: 4em;
  }
}

.network-name {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
}

.about {
  padding: 50px;
  display: table;
  height: 250px;
  width: 100%;
}

.portfolio {
  padding: 50px;
  display: table;
  height: 400px;
  width: 100%;
  background-color: black;
  background: url("https://s15.postimg.org/jzeo6gn5n/writing.jpg") no-repeat center center fixed;
  background-size: cover;
}

.contact {
  padding: 50px 0 10px 0;
}

.footer {
  padding: 10px 0;
}

.text-right-align {
  text-align: right;
}

.text-left-align {
  text-align: left;
}

/* Stylish About Me */
.stylish-panel {
  padding: 20px 0;
  text-align: center;
}
.stylish-panel > div > div{
  padding: 10px;
}

.stylish-panel > div:hover img {
  border-radius: 50%;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}
/* Stylish About Me End */

.navigation {
  float: right;
  list-style: none;
  margin-top: 78px;
}

  .navigation li {
    float: left;
    margin-right: 50px;
    line-height: 1em;
  }

  .navigation li:last-child {
    margin-right: 0;
  }

    .navigation li a {
      color: #f5f7f8;
      font-size: 15px;
      text-transform: uppercase;
      text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
      line-height: 1em; /*reset the line-height for the list tag and the a tag*/
    }

    .navigation li a:hover {
      text-decoration: none;
    }

    .navigation li.active {
      border-bottom: 2px solid #deeef2;
      padding-bottom: 9px; /* push down the bottom border */
    }

    .navigation li.active a {
      border-bottom: 1px solid #428ca1;
      padding-bottom: 9px; /* push down the bottom border */
    }

  #portfolio h2 {
    color: #f5f7f8;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
    margin-bottom: 12px;
    float: left;
  }

  #portfolio .navigation {
    margin-top: 10px;
  }

  #portfolio .navigation li a {
    text-transform: none;
  }

  #portfolio .navigation li.active,
  #portfolio .navigation li.active a {
    padding-bottom: 5px;
  }

.portfolio-box {
  padding: 30px;
  width: 1000px;
  overflow: hidden;
  margin-left: -31px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

  .portfolio-box ul {
    list-style: none;
    background: none;
    border: none;
  }

    .portfolio-box ul li {
      margin-bottom: 20px;
    }

#portfolio h3 {margin-bottom: 12px;}
            
          
!
            
              $(document).ready(function(){
   // cache the window object
   $window = $(window);
 
   $('section[data-type="background"]').each(function(){
     // declare the variable to affect the defined data-type
     var $scroll = $(this);
                     
      $(window).scroll(function() {
        // HTML5 proves useful for helping with creating JS functions!
        // also, negative value because we're scrolling upwards                            
        var yPos = -($window.scrollTop() / $scroll.data('speed'));
         
        // background position
        var coords = '50% '+ yPos + 'px';
 
        // move the background
        $scroll.css({ backgroundPosition: coords });   
      }); // end window scroll
   });  // end section function
}); // close out script

/* Create HTML5 element for IE */
document.createElement("section");
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console