JSFiddle

  • Polygon SVG #6 is the latest revision

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

    <div class="shape1">
    <svg width="200px" height="160px" xmlns="http://www.w3.org/2000/svg">
    <polygon id="arrow1" points="80 10, 120 10, 120 150, 80 150, 70 140, 70 20" ></polygon>
    </div>
    <div class="shape2">
    <svg width="200px" height="160px" xmlns="http://www.w3.org/2000/svg">
    <polygon id="arrow2" points="80 10, 120 10, 120 150, 80 150, 70 140, 70 20" ></polygon>
    </div>
  • Animated Circular Progress Indicator

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

    <div class="loader"></div>
  • Hide/Show Search #4 is the latest revision

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

    <div id="wrap-search">
      <form action="" autocomplete="on">
      <input id="search" name="search" type="text" placeholder="What're we looking for ?"><input id="search_submit" value="" type="submit">
      </form>
    </div>
  • Bullet List #1 is the latest revision

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

    <div class="boxbottom">
    <div class="howitworks box">
      <ul>
        <li>
          <div class="title">Lorem ipsum dolor sit amet</div>
          <div class="desc">Lorem ipsum dolor sit amet, ex nec ipsum nobis aliquip, ad atqui nihil veniam duo ...</div></li></ul></div></div>
  • Quick Links

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

    <div class="quicklinks">
    <ul>
      <li><a href="#">How it works</a></li>
      <li><a href="#">Testimonials</a></li>
      <li><a href="#">Resources</a></li>
      <li><a href="#">FAQs</a></li>
      <li><a href="#">Support</a></li>
      <li><a href="#" class="btn">Get Started</a></li>
    </ul>
    </div>
  • Categories Boxes

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

    <figure class="icon-boxes">
        <a href="#" target="_blank">
        <img src="http://leapscout2016.meerakrishnan.com/wp-content/uploads/2016/06/icon-dev.png" alt="" /><span><br />Web Developers</span>
            <dl>
                <dt>Front-End Programmer<br />Back-End Programmer<br /><br />... and more</dt>
            </dl>
        </a>    
    </figure>    
    
    
  • Categories Boxes #3 is the latest revision

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

    <figure class="about">
        <a href="http://meerakrishnan.com/wp-content/uploads/2013/05/Resume-Meera-Krishnan.pdf" target="_blank">
            <img src="http://meerakrishnan.com/wp-content/uploads/2015/10/icon-resume.png" alt="" />
    
            <dl>
                <dt>Download<br />Resume</dt>
            </dl>
        </a>    
    </figure>    
    
    <figure class="about">
        <a href="http://meerakrishnan.com/wp-content/uploads/2013/05/Pricing-Guide-List.pdf" target="_blank">
            <img src="http://meerakrishnan.com/wp-content/uploads/2015/10/icon-price.png" alt="" />
    
            <dl>
                <dt>Download<br />Pricing Guide</dt>
            </dl>
        </a>    
    </figure>    
    
    
    
    <figure class="about">
        <a href="http://meerakrishnan.com/wp-content/uploads/2013/05/Working-with-a-Designer.pdf" target="_blank">
            <img src="http://meerakrishnan.com/wp-content/uploads/2015/10/icon-guide.png" alt="" />
    
            <dl>
                <dt>Download<br />Working Guide</dt>
            </dl>
        </a>    
    </figure>    
    
    
    
  • Show Div on Click #4 is the latest revision

    jQuery Compat (edge), HTML, CSS, JavaScript

       
    $(document).ready(function() {
            $('#feature-shape').click(function() {
                    $('#feature-shape-mouseover').toggle("slide");
            });
    });
  • Responsive Calendar revised #3 is the latest revision

    jQuery 2.1.3, HTML, CSS, JavaScript

    function HideAllShowOne(d) {
        // Between the quotation marks, list the id values of each div.
    
        var IDvaluesOfEachDiv = "cal1 cal2";
    
        //-------------------------------------------------------------
        IDvaluesOfEachDiv = IDvaluesOfEachDiv ...
  • Responsive Calendar with Tab #1 is the latest revision

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

    <div class="main">
        <input id="tab1" type="radio" name="tabs" checked>
        <label for="tab1">April 2016</label>
        <input id="tab2" type="radio" name="tabs">
        <label for="tab2">September 2016</label>
        <div class="content">
            <div id="content1">
                <div id="calendar-wrap">
                    <div id="calendar">
                        <ul class="weekdays">
                            <li>Sunday</li>
                            <li>Monday</li>
                            <li>Tuesday</li>
                            <li>Wednesday</li>
                            <li>Thursday</li>
                            <li>Friday</li>
                            <li>Saturday</li>
                        </ul>
                        <!-- Days from previous month -->
                        <ul class="days">
                            <li class="day other-month">
                                <div class="date">27</div>
                            </li>
                            <li class="day other-month">
                                <div class="date">28</div>
                            </li>
                            <li class="day other-month">
                                <div class="date">29</div>
                            </li>
                            <li class="day other-month">
                                <div class="date">30</div>
                            </li>
                            <li class="day other-month">
                                <div class="date">31</div>
                            </li>
                            <!-- Days in current month -->
                            <li class="day">
                                <div class="date">1</div>
                            </li>
                            <li class="day">
                                <div class="date">2</div>
                            </li>
                        </ul>
                        <!-- Row #2 -->
                        <ul class="days">
                            <li class="day">
                                <div class="date">3</div>
                            </li>
                            <li class="day">
                                <div class="date">4 ...</div></li></ul></!--></!--></div></div></div></div></div>