JSFiddle

  • :after

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

    <!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/::after -->
    
    <span class="ribbon">Notice where the orange box is.</span>
  • Responsive iframe

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

    <h1>Responsive iframe</h1>
    
    <div class="videoWrapper">
        <iframe src="//www.youtube.com/embed/RmbazOYH-pY" allowfullscreen></iframe>
    </div>
    
  • Image turn dark

    Image turn darker when hover

    <div class="image">
        <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
    </div>
  • Horizontal center and vertical fontawesome

    In a red div, in a ul, with no indent before li

    <div>
      <ul>
        <li><i class="fa fa-globe fa-3x "></i></li>
        <li><i class="fa fa-play-circle fa-3x"></i></li>
        <li><i class="fa fa-bathtub fa-3x"></i></li>
        <li><i class="fa fa-battery-3 fa-3x"></i></li>
        <li><i class="fa fa-database fa-3x"></i></li>
        <li><i class="fa fa-facebook fa-3x"></i></li>
        <li><i class="fa fa-fighter-jet fa-3x"></i></li>
      </ul>
    </div>
    
  • Horizontal center fontawesome #4 is the latest revision

    In a red div, in a ul, with no indent before li

    <div>
      <ul>
        <li><i class="fa fa-globe fa-2x"></i></li>
        <li><i class="fa fa-play-circle fa-2x"></i></li>
        <li><i class="fa fa-bathtub fa-2x"></i></li>
        <li><i class="fa fa-battery-3 fa-2x"></i></li>
        <li><i class="fa fa-database fa-2x"></i></li>
        <li><i class="fa fa-facebook fa-2x"></i></li>
        <li><i class="fa fa-fighter-jet fa-2x"></i></li>
      </ul>
    </div>
    
  • Place Autocomplete Address Form #2 is the latest revision

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

    // This example displays an address form, using the autocomplete feature
    // of the Google Places API to help users fill in ...
  • Place Autocomplete Address Form #7 is the latest revision

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

    // This example displays an address form, using the autocomplete feature
    // of the Google Places API to help users fill in ...
  • First letter rotated

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

    <div class="center">
      <div class="h1 relative padding">
        <span class="rotate float-left">A</span>
        <span class="float-left bold">ldo</span>
      </div>
    </div>
    
  • Horizontal center fontawesome

    In a red div, in a ul, with no indent before li

    <div>
      <ul>
        <li><i class="fa fa-globe fa-2x"></i></li>
        <li><i class="fa fa-play-circle fa-2x"></i></li>
        <li><i class="fa fa-bathtub fa-2x"></i></li>
        <li><i class="fa fa-battery-3 fa-2x"></i></li>
        <li><i class="fa fa-database fa-2x"></i></li>
        <li><i class="fa fa-facebook fa-2x"></i></li>
        <li><i class="fa fa-fighter-jet fa-2x"></i></li>
      </ul>
    </div>
    
  • Sortable Table

    http://www.kryogenix.org/code/browser/sorttable/

    $(document).ready(function() {
      // add class to table
      $("table").addClass("table table-striped sortable");
    
      // delete width
      $("td").attr({
        "width": ""
      });
    
    
      // change all <td> in ...</td>