JSFiddle

  • Highcharts Demo

    author(s): Torstein Hønsi

    $(function () {
    
        /**
         * This plugin extends Highcharts in two ways:
         * - Use HTML5 canvas instead of SVG for rendering of the heatmap squares ...
  • Highcharts Demo

    author(s): Torstein Hønsi

    $(function () {
    
        /**
         * This plugin extends Highcharts in two ways:
         * - Use HTML5 canvas instead of SVG for rendering of the heatmap squares ...
  • Guru Meditation

    AMIGAAAAA!!

    <html>
        
        <head>
            <title>Guru Meditation!</title>
       </head>
        
        <body bgcolor="000000" textcolor="ff0000"> 
    	<center><a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/d/db/Guru_meditation.gif"></a></center><br>
        </body>
    
    </html>
  • 404 BSOD #5 is the latest revision

    Bluescreen html

    <html>
        
        <head>
            <title>- ooops! -</title>
            <!-- <link rel="stylesheet" href="404.css" type="text/css" media="all" />--></head>
        
        <body>
    <span class="neg">ERROR 404</span>
    
            <p>The page is missing or never was written. You can wait and see if it becomes available ...</p></body></html>
  • Orangeroom.tv live stream #1 is the latest revision

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

    <iframe width="720" height="446" src="http://www.ustream.tv/embed/17816957?v=3&amp;wmode=direct" scrolling="no" frameborder="0" style="border: 0px none transparent;">    </iframe>
    <br /><a href="http://www.ustream.tv" style="font-size: 12px; line-height: 20px; font-weight: normal; text-align: left;" target="_blank">OrangeRoom.TV Live  Stream</a>
  • JEMWEBDESIGN #2 is the latest revision

    JEMWEBDESIGN DIAMOND

    <title>JEMWEBDESIGN</title>
    <body>
        <div id="wrapper">
            <div id="text">JEMWEBDESIGN.NL</div>
            <div id="outline" class="centering">
                <div id="diamond" class="base">
                    <svg id="defs">
                        <defs>
                            <polygon points="32.5,79 48.5,49 79,32 114,32 143,50 159.5,79 159.5,113.5 142,143 112.5,159.5 79,159.5 50,143 32.5,112.5 " id="t" fill="url(#grad_top)"></polygon>
                            <polygon points="0,54 0,3 45,12" id="m2" fill="url(#grad_a)"></polygon>
                            <polygon points="45,12 46,46 0,54" id="m1" fill="url(#grad_a2)"></polygon>
                            <polygon points="144,54 0.5,29 144,3" id="b" fill="url(#grad_b)"></polygon>
                            <polygon points="144,54 0.5,29 144,3" id="s" fill="url(#grad_s)"></polygon>
                            <lineargradient id="grad_top" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="192" y2="192">
                                <stop offset="0" class="grad_top_1"></stop>
                                <stop offset="1" class="grad_top_2"></stop>
                            </lineargradient>
                            <lineargradient id="grad_a" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="100">
                                <stop offset="0.1" style="stop-color:#FFFFFF; stop-opacity:0.5"></stop>
                                <stop offset="1" style="stop-color:#27344C"></stop>
                                <stop offset="0" style="stop-color:#B3C0D2"></stop>
                            </lineargradient>
                            <lineargradient id="grad_a2" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="100">
                                <stop offset="0" style="stop-color:#B3C0D2"></stop>
                                <stop offset="0.5" style="stop-color:#FFFFFF;stop-opacity:0.1"></stop>
                                <stop offset="1" style="stop-color:#27344C"></stop>
                            </lineargradient>
                            <lineargradient id="grad_b" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="50" y2="90">
                                <stop offset="0" class="grad_b1"></stop>
                                <stop offset="0.5" class="grad_b2"></stop>
                                <stop offset="1" class="grad_b3"></stop>
                            </lineargradient>
                            <lineargradient id="grad_s" gradientUnits="userSpaceOnUse">
                                <stop offset="0" class="grad_s1"></stop>
                                <stop offset="0.5" class="grad_s2"></stop>
                                <stop offset="1" class="grad_s3"></stop>
                            </lineargradient>
                        </defs>
                    </svg>
                    <svg id="top" width="192px" height="192px">
                        <use xlink:href="#t"></use>
                    </svg>
                    <div class="faces">
                        <div id="a1">
                            <div class="face1">
                                <svg class="m" width="45px" height="57px">
                                    <use xlink:href="#m1"></use>
                                    <use xlink:href="#m2"></use>
                                </svg>
                                <svg class="b" width="144px" height="54px">
                                    <use xlink:href="#b"></use>
                                </svg>
                                <svg class="s" width="144px" height="54px">
                                    <use xlink:href="#s"></use>
                                </svg>
                            </div>
                            <div class="face2">
                                <svg class="m" width="45px" height="57px">
                                    <use xlink:href="#m1"></use>
                                    <use xlink:href="#m2"></use>
                                </svg>
                                <svg class="b" width="144px" height="54px">
                                    <use xlink:href="#b"></use>
                                </svg>
                                <svg class="s" width="144px" height="54px">
                                    <use xlink:href="#s"></use>
                                </svg>
                            </div>
                        </div>
                        <div id="a2" class="anim">
                            <div class="face1">
                                <svg class="m" width="45px" height="57px">
                                    <use xlink:href="#m1"></use>
                                    <use xlink:href="#m2"></use>
                                </svg>
                                <svg class="b" width="144px" height="54px">
                                    <use xlink:href="#b"></use>
                                </svg>
                                <svg class="s" width="144px" height="54px">
                                    <use xlink:href="#s"></use>
                                </svg>
                            </div>
                            <div class="face2">
                                <svg class="m" width="45px" height="57px">
                                    <use xlink:href="#m1"></use>
                                    <use xlink:href="#m2"></use>
                                </svg>
                                <svg class="b" width="144px" height="54px">
                                    <use xlink:href="#b"></use>
                                </svg>
                                <svg class="s" width="144px" height="54px">
                                    <use xlink:href="#s"></use>
                                </svg>
                            </div>
                        </div>
                        <div id="a3" class="anim">
                            <div class="face1">
                                <svg class="m" width="45px" height="57px">
                                    <use xlink:href="#m1"></use>
                                    <use xlink:href="#m2"></use>
                                </svg>
                                <svg class="b" width="144px" height="54px">
                                    <use xlink:href="#b"></use>
                                </svg>
                                <svg class="s" width="144px" height="54px">
                                    <use xlink:href="#s"></use>
                                </svg>
                            </div>
                            <div class="face2">
                                <svg class="m" width="45px" height="57px">
                                    <use xlink:href="#m1"></use>
                                    <use xlink:href="#m2"></use>
                                </svg>
                                <svg class="b" width="144px" height="54px">
                                    <use xlink:href="#b"></use>
                                </svg>
                                <svg class="s" width="144px" height="54px">
                                    <use xlink:href="#s"></use>
                                </svg>
                            </div>
                        </div>
                        <div id="a4" class="anim">
                            <div class="face1">
                                <svg class="m" width="45px" height="57px">
                                    <use xlink:href="#m1"></use>
                                    <use xlink:href="#m2"></use>
                                </svg>
                                <svg class="b" width="144px" height="54px">
                                    <use xlink:href="#b"></use>
                                </svg>
                                <svg class="s" width="144px" height="54px">
                                    <use xlink:href="#s"></use>
                                </svg>
                            </div>
                            <div class="face2">
                                <svg class="m" width="45px" height="57px">
                                    <use xlink:href="#m1"></use>
                                    <use xlink:href="#m2"></use>
                                </svg>
                                <svg class="b" width="144px" height="54px">
                                    <use xlink:href="#b"></use>
                                </svg>
                                <svg class="s" width="144px" height="54px">
                                    <use xlink:href="#s"></use>
                                </svg>
                            </div>
                        </div>
                        <div id="a5" class="anim">
                            <div class="face1">
                                <svg class="m" width="45px" height="57px">
                                    <use xlink:href="#m1"></use>
                                    <use xlink:href="#m2"></use>
                                </svg>
                                <svg class="b" width="144px" height="54px">
                                    <use xlink:href="#b"></use>
                                </svg>
                                <svg class="s" width="144px" height="54px">
                                    <use xlink:href="#s"></use>
                                </svg>
                            </div>
                            <div class="face2">
                                <svg class="m" width="45px" height="57px">
                                    <use xlink:href="#m1"></use>
                                    <use xlink:href="#m2"></use>
                                </svg>
                                <svg class="b" width="144px" height="54px">
                                    <use xlink:href="#b"></use>
                                </svg>
                                <svg class="s" width="144px" height="54px">
                                    <use xlink:href="#s"></use>
                                </svg>
                            </div>
                        </div>
                        <div id="a6" class="anim">
                            <div class="face1">
                                <svg class="m" width="45px" height="57px">
                                    <use xlink:href="#m1"></use>
                                    <use xlink:href="#m2"></use>
                                </svg>
                                <svg class="b" width="144px" height="54px">
                                    <use xlink:href="#b"></use>
                                </svg>
                                <svg class="s" width="144px" height="54px">
                                    <use xlink:href="#s"></use>
                                </svg>
                            </div>
                            <div class="face2">
                                <svg class="m" width="45px" height="57px">
                                    <use xlink:href="#m1"></use>
                                    <use xlink:href="#m2"></use>
                                </svg>
                                <svg class="b" width="144px" height="54px">
                                    <use xlink:href="#b"></use>
                                </svg>
                                <svg class="s" width="144px" height="54px">
                                    <use xlink:href="#s"></use>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    
    </html>
  • Flyer Template

    Flyer Template CSS

    <img style="position: absolute;" src="http://podiumazijnfabriek.nl/azijn.png">
    <div class="flyer">
        <div class="artpic" style="top: 310px; left: 100px; ">
            <img src="http://podiumazijnfabriek.nl/poster.png" style="width:520px;height:300px">
        </div>
        <div class="day" style="top: 180px; left: 25px;">DONDERDAG</div>
        <div class="date" style="top: 210px; left: 27px;">3 APR</div>
        <div class="title" style="top: 100px; left: 230px;">repetitie den bosch zingt</div>
        <div class="date" style="top: 620px; left: 540px;">20:00</div>
        <div class="day" style="top: 630px; left: 655px;">uur</div>
        <div class="info" style="top: 680px; left: 70px;">aanvang: 20:00 uur</div>
        <div class="info" style="top: 720px; left: 70px;">entree: 12,50 euro</div>
    </div>
  • Flyer Template #6 is the latest revision

    Flyer Template CSS

    
    <img style="position: absolute;opacity: 0.4;filter: alpha(opacity=40);" src="http://podiumazijnfabriek.nl/set/2.png" width="700px" height="auto">
    <img style="position: absolute;opacity: 0.4;filter: alpha(opacity=40);" src="http://podiumazijnfabriek.nl/set/1.png" width="700px" height="auto">
    <img style="position: absolute;opacity: 0.4;filter: alpha(opacity=40);" src="http://podiumazijnfabriek.nl/set/4.png" width="700px" height="auto">
    <img style="position: absolute;opacity: 0.4;filter: alpha(opacity=40);" src="http://podiumazijnfabriek.nl/set/5.png" width="700px" height="auto">
    <img style="position: absolute;opacity: 0.4;filter: alpha(opacity=40);" src="http://podiumazijnfabriek.nl/set/0.png" width="700px" height="auto">
       
    <div class="flyer">
        <div class="artpic" style="top: 400px; left: 10px; ">
            <img src="http://www.writerscentre.com.au/wp-content/uploads/2013/12/Writing-Picture-Books-grid.jpg" style="width:400px;height: 300px;">
        </div>
        <div class="day" style="top: 180px; left: 7px;">DONDERDAG</div>
        <div class="datex" style="top: 220px; left: 18px;">3 APR</div>
        <div class="time" style="top: 280px; left: 65px;">21:30</div>
        <div class="title" style="top: 50px; left: 185px;">TRIO LA BAMBA</div>
        <div class="place" style="top: 52px; left: 130px;">PODIUM AZIJNFABRIEK</div>
        <div class="place" style="top: 310px; left: 400px;">MET:</div>
        <div class="met" style="top: 340px; left: 400px;">NICK VD SCHOOT
            <br>NICK VD SCHOOT
            <br>NICK VD SCHOOT ...</div></div>
  • Flyer Template

    Flyer Template CSS

    <img style="position: absolute;" src="http://podiumazijnfabriek.nl/azijn.png">
    <div class="flyer">
        <div class="artpic" style="top: 310px; left: 100px; ">
            <img src="http://podiumazijnfabriek.nl/poster.png" style="width:520px;height:300px">
        </div>
        <div class="day" style="top: 180px; left: 25px;">DONDERDAG</div>
        <div class="date" style="top: 210px; left: 27px;">3 APR</div>
        <div class="title" style="top: 100px; left: 230px;">repetitie den bosch zingt</div>
        <div class="date" style="top: 620px; left: 540px;">20:00</div>
        <div class="day" style="top: 630px; left: 655px;">uur</div>
        <div class="info" style="top: 680px; left: 70px;">aanvang: 20:00 uur</div>
        <div class="info" style="top: 720px; left: 70px;">entree: 12,50 euro</div>
    </div>
  • use-css-sprites-to-beautify-your-wordpress-post-dates

    Ever wonder how to super style your blog’s post date? I am going to show you how to do this using CSS sprites in about 18 minutes. Editorial Note: This post is geared toward theme designers. Prior knowledge of CSS and WordPress is recommended. What you will need: A graphics program (I use Adobe Photoshop CS4) A simple text editor What you will accomplish in this tutorial: The dates on your blog’s posts will be super styled using CSS Sprites Let’s get started… Step #1 Fire up your graphics program. You can download a PSD or PNG template to help with the layout of all of the dates in our Sprite. Step #2 Basically you want to create a grid using months, days, and years. As you can see, my grid has the months in one column then the days in two columns and finally the years vertically in a column. Once you get your dates on the “grid” you can save the file. Hint: Make sure your text is equally spaced from top to bottom and from left to right. This makes the math easier when each date has the same white space. Step #3 On to the coding… Don’t worry it’s really easy, especially if you are using my PNG or have used the PSD file (It includes guidelines to keep your “grid” nice and neat plus you can then cut and paste the CSS code in this step directly into your themes’ stylesheet without any math.) The CSS is as follows: /*Date Sprite */ .postdate { position: relative; width: 66px; height: 60px; float: left; } .month, .day, .year { position: absolute; text-indent: -1000em; background-image: url(images/date_img.png); background-repeat: no-repeat; } .month { top: 10px; left: 0; width: 33px; height: 30px;} .day { top: 30px; left: 0; width: 33px; height: 30px;} .year { bottom: 0; right: 13px; width: 20px; height: 60px;} .m-01 { background-position: 0 0px;} .m-02 { background-position: 0 -30px;} .m-03 { background-position: 0 -62px;} .m-04 { background-position: 0 -94px;} .m-05 { background-position: 0 -125px;} .m-06 { background-position: 0 -155px;} .m-07 { background-position: 0 -185px;} .m-08 { background-position: 0 -217px;} .m-09 { background-position: 0 -248px;} .m-10 { background-position: 0 -279px;} .m-11 { background-position: 0 -310px;} .m-12 { background-position: 0 -341px;} .d-01 { background-position: -51px 0;} .d-02 { background-position: -51px -27px;} .d-03 { background-position: -51px -57px;} .d-04 { background-position: -51px -91px;} .d-05 { background-position: -51px -122px;} .d-06 { background-position: -51px -151px;} .d-07 { background-position: -51px -185px;} .d-08 { background-position: -51px -214px;} .d-09 { background-position: -51px -249px;} .d-10 { background-position: -51px -275px;} .d-11 { background-position: -51px -309px;} .d-12 { background-position: -51px -338px;} .d-13 { background-position: -51px -373px;} .d-14 { background-position: -51px -404px;} .d-15 { background-position: -51px -436px;} .d-16 { background-position: -51px -462px;} .d-17 { background-position: -100px -0px;} .d-18 { background-position: -100px -27px;} .d-19 { background-position: -100px -57px;} .d-20 { background-position: -100px -91px;} .d-21 { background-position: -100px -122px;} .d-22 { background-position: -100px -151px;} .d-23 { background-position: -100px -185px;} .d-24 { background-position: -100px -214px;} .d-25 { background-position: -100px -249px;} .d-26 { background-position: -100px -275px;} .d-27 { background-position: -100px -309px;} .d-28 { background-position: -100px -338px;} .d-29 { background-position: -100px -373px;} .d-30 { background-position: -100px -404px;} .d-31 { background-position: -100px -436;} .y-2009 { background-position: -150px 0;} .y-2010 { background-position: -150px -60px;} .y-2011 { background-position: -150px -120px;} .y-2012 { background-position: -150px -180;} .y-2013 { background-position: -150px -240px;} .y-2014 { background-position: -150px -300px;} Explanation: .postdate – Sets the width and height of the entire date. In this case we are going to make our date fit into a box 66px by 60px. .month, .day, .year – Sets the width and height of the individual elements that make up our whole date Sprite. Our months and days are 33px wide by 30px high. The years are 33px wide by 60px high. When you put these elements together they make a box 66px wide by 60px high. It also attaches the graphic we made in step #1 so we can position it for each individual element in the Sprite. .m-01 through .m-12 – You guessed it! These are our months. This part of the CSS positions our graphic to display the months. As you can see I set the image to move on an X Y axis based on where it appears on the image. The easiest way to figure out where the top left corner (0,0) of each month, day, or year is on the larger image is to open up Photoshop and select the Marquee tool. Select from the top left down and over to the right to just above the top left corner of you month, day or year and note where your pointer is using the info panel’s stats. .d-01 through .d-31 – Is used for exactly the same thing as .m-01 – .m-12 except their used for the days rather than the months. .y-2009 through .y-2014 – Same as above only we use them for the years. Step #4 Open up the loop in WordPress. The loop in WordPress is the page(s) that display(s) your blog posts. This is usually the index.php page. Dates show up on other pages too but this tutorial only replaces the dates in the main loop. If you got to this section of the tutorial you are intelligent enough to seek and replace the other instances of dates in your theme in other files such as single.php, page.php, archives.php etc. Search for something along this line in your loop: <?php the_time('F jS, Y') ?> Replace with these lines: <div class="postdate"> <div class="month m-<?php the_time(‘m’) ?>"><?php the_time(‘M’) ?></div> <div class="day d-<?php the_time(‘d’) ?>"><?php the_time(‘d’) ?></div> <div class="year y-<?php the_time(‘Y’) ?>"><?php the_time(‘Y’) ?></div> </div> Step #5 Upload your image, CSS, and your themes’ loop (index.php). Hit refresh on your blog (make sure you are on the page that posts are shown on) and Voila! You just super styled your dates using CSS sprites. Beautify Your WordPress Dates with CSS Sprites

    <img style="position: absolute;" src="http://datastore01.rediff.com/h450-w670/thumb/69586A645B6D2A2E3131/ckez1n08svw8f3en.D.0.Sidharth-Malhotra-Student-of-the-Year-Photo.jpg">
        
    <div class="postdate">
    <div class="month m-02"><?php the_time(‘M’) ?></div>
    <div class="day d-21"><?php the_time(‘d’) ?></div>
    <div class="year y-2014"><?php the_time(‘Y’) ?></div>
    </div>
    
      <!--
    Search for something along this line in your loop:
    <?php the_time('F jS, Y') ?>
    Replace with these lines:
    <div class="postdate">
    <div class="month m-<?php the_time(‘m’) ?>"><?php the_time(‘M’) ?></div>
    <div class="day d-<?php the_time(‘d’) ?>"><?php the_time(‘d’) ?></div>
    <div class="year y-<?php the_time(‘Y’) ?>"><?php the_time(‘Y’) ?></div>
    </div>
    
    tutorial:
    http://www.wpbeginner.com/wp-themes/use-css-sprites-to-beautify-your-wordpress-post-dates/
        -->