JSFiddle

  • proverbs #2 is the latest revision

    upon hover

        <div class="columnContainer">
            <section></section>
            <section></section>
            <section>It is an honor for a man to keep aloof from strife, but every fool will be quarreling.</section>
            <section></section>
            <section></section>
        </div>
  • fade in upon scroll #1 is the latest revision

    jQuery 1.9.1, HTML, CSS, JavaScript, jQuery UI 1.9.2

    $(document).scroll(function () {
        var y = $(this).scrollTop();
        if (y > 800) {
            $('.bottomMenu').fadeIn();
        } else {
            $('.bottomMenu').fadeOut();
        }
    
    });
  • Slick slider demo #1 is the latest revision

    http://community.sitepoint.com/t/how-to-make-a-mutliple-items-slider/194539/

    $('.slider').slick({
        slidesToShow: 3,
        slidesToScroll: 3,
        dots: true,
        infinite: true,
        cssEase: 'linear'
    });
  • Long Page Initial Setup

    No-Library (pure JS), HTML, CSS, JavaScript

    <header>
     <p>
     Logo
     </p>
      <nav>
        <li>Menu Item</li>
      </nav>
    </header>
    <main>
    
    <!-- Welcome Section -->
    <section class="welcome"><p>
      <span id="hi">Hi</span> I'm</p> 
      <h1>Chris Drinkut</h1>
      <p>A digital marketer and web developer living in York, PA.</p>
      <p>Allow me ...</p></section></!--></main>
  • Style Guide Starter

    No-Library (pure JS), HTML, CSS, JavaScript

    
    
    <header>
    <h1>Style Guide</h1>
    </header>
    
    <main>
    
    <h2>Grid</h2>
    <section>
    <article class="col"><p><strong>Full Column</strong> of text.</article></section>
    
    <section>
    <article class="col-half"><p><strong>Half Column</strong> of text.</p></article><article class="col-half"><p>
    <strong>Half Column</strong> of text.</article>
    </section>
    
    <section>
    <article class="col-third"><p><strong>Third Column</strong> of text.</article><article class="col-third"><p><strong>Third ...</strong></p></article></section></main>
  • AA Hover Setup Reveresed

    adsfjk

    
    <section class="featured-details">
    
    <div class="featured-details-link">
      <a href="''">here ya go</a>
      </div>
      
    <div class="featured-item">
      <a href="''" class="learn-more">here ya go</a>
      </div>
    </section>
  • Scroll To Stick

    No-Library (pure JS), HTML, CSS, JavaScript

    $( document ).ready(function() {   
    
        // Resize hero image to size of viewport minus header and subnav
        $(window).bind("resize", function() {
          var windowHeight ...
  • Stick div at top after scrolling example #2 is the latest revision

    An example for fiddling.

    function sticky_relocate() {
        var window_top = $(window).scrollTop();
        var div_top = $('#sticky-anchor').offset().top;
        if (window_top > div_top) {
            $('#sticky').addClass('stick');
            $('#sticky-anchor').height($('#sticky ...
  • test fiddle

    html text embed

    <p>I will display &#9824;</p>
    
    &#9969;
    &#9730;
    &#9733;
    &#9734;
    &#9776;
  • Underline on Hover Smooth Transition

    Here's a transition on hover demo.

    <h1>
    Underline Transition 
    </h1>
    <h3>
    @ .15s and 'all'
    </h3>
    <a href="chrisdrinkut.com">Chris Drinkut's Website</a>