JSFiddle

  • Spanking New Site October 2016

    General Homepage Setup

    <nav>
      <section class="logo">CMD</section>
      <ul>
        <li>About</li>
            <li>Writing</li>
                <li>Web Dev</li>
      </ul>
    </nav>
    
    <header>
      <h1>
    All things have promise.
    </h1>
      <h2>
    It's how we handle them that counts.
    </h2>
    </header>
    
    <main>
     <hr>
      <article class="features">
        <section class="writing"><img src="">
          <h3>Writing</h3>
          <p>FEATURED ARTICLE ...</p></section></article></main>
  • overlay example

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

    <div class="image-container">
        <img src="http://lorempixel.com/200/300" />
        <div class="after">This is some content</div>
    </div>
  • middle ING

    new site starter - 10/1/16

    <nav>
      <ul>
        <li class="get-left nab">left</li>
        <li class="get-right nab">right</li>
      </ul>
    </nav>
    <header>
      <div class="one-of-two green">
        <h1 class="get-right">CHRIS</h1></div>
      <div class="one-of-two blue">
        <h1>
    DRINKUT</h1></div>
    </header>
    
    <section>
      <h2>Writing</h2>
      <h2>Web Development</h2>
      <h2>About</h2>
      <h2>Stories</h2>
    </section>
    
  • simple toggle w/ image swap #1 is the latest revision

    jQuery 1.7.2, HTML, CSS, JavaScript

    $(document).ready(function(){
      var $content = $(".content").hide();
      $(".toggle").on("click", function(e){
        $(this).toggleClass("expanded");
        $content.slideToggle();
      });
    });
  • Home Starter/ Nested toggle w/ jQuery Ui

    Content that expands upon click inside other content that expands upon click.

    $(document).ready(function(){
        $("button").click(function(){
            $("#more-content").slideToggle(1200,"easeOutBounce");
        });
    });
    
    $(document).ready(function(){
        $(".way").click(function(){
            $(".now").toggle();
        });
    });
    
    
    
  • site setup blog pages

    retry at the three column layout

    <nav class="nav-down">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/articles">Blog</a></li>
        <li><i class="fa fa-flask" aria-hidden="true"></i> <a href="/demos">Lab</a></li>
      </ul>
    </nav>
    
    <header>
      <div class="center" id="name">
        <h2>Chris Drinkut</h2>
        <p>Momentary Zeitgeist</p>
      </div>
    </header>
    
    <main class="content-wrap">
    
      <aside class="social-shares">
        sadf
      </aside>
      <aside class="related">
        asdf
      </aside>
    
    
      <article class="blog-wrap page-content">
        <h2>
         Titleof the blopg post ;yakjhdflj yeah! 
         </h2>
        <p class="lead">
          more text and all abou ...</p></article></main>
  • blog template page

    page template for next site interior page.

    <main>
      
      <aside>First aside</aside>
      
      <article>
        <h2>
        Article Title and Words About The Subject Matter Below
        </h2>
        
        <p>
        orem Ipsum is simply dummy text of the printing ...</p></article></main>
  • Modular Tiles

    spaces, exploring modular options

    
    
    <h1>
    Take it up a notch.
    </h1>
    
    <main>
      <section></section>
        <section></section>
          <section></section>
          <aside></aside>
          <div>
          
          </div>
    </main>
  • slide in

    jquery toggle setup

    $(document).ready(function() {
      $('#open').click(function() {
    	 $('#login form').slideToggle('easeOutBounce');
    	 $(this).toggleClass('close'); 
      }); // end click
    }); // end ready
  • site starter

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

      <nav>
        <ul>
        <li>about</li>
        <li>projects</li>
        <li>blog</li>
        <li>home</li>
        </ul>
      </nav>
    
    <header>
      <h1>
      Chris Drinkut
      </h1>
      <p>Hi, I'm Chris. I strategize dream-up, develop, and analyze web-based projects for the ...</p></header>