Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 18, 2014 16:43
Show Gist options
  • Save anonymous/b6b0ddfe04c71c8646e4 to your computer and use it in GitHub Desktop.
Save anonymous/b6b0ddfe04c71c8646e4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Nov 18, 2014.
    128 changes: 128 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,128 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.5.1/webcomponents.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.5.1/polymer.min.js"></script>
    </head>
    <body>

    <style>
    .image-container{
    position:absolute;
    left:50px
    }
    .move{
    position:absolute;
    top:10px;
    left:-20px;
    }
    </style>

    <!-- Define element -->
    <polymer-element name="fold-over" noscript>
    <template>
    <style>
    .shadow{
    height:15px;
    width:20px;
    }
    .grid{
    background-color:#91C4A6;
    color:#fff;
    text-transform:uppercase;
    font-family: Helvetica, Arial, Sans-Serif;
    padding:5px 0px 5px 10px;
    display:block;
    float:left;
    height:16px;
    }
    </style>
    <div class="shadow">
    <svg height="15" width="20">
    <polygon points="20,05 20,20 0,15" style="fill:#6F908F;"></polygon>
    </svg>
    </div>
    <span class="grid">
    <content></content>
    </span>
    <svg height="26" width="30">
    <polygon points="0,0 30,30 0,30" style="fill:#91C4A6;"></polygon>
    </svg>
    </template>
    </polymer-element>

    <!-- Use element -->
    <div class="image-container">
    <fold-over class="move">Meow Hello World</fold-over>
    <img src="http://dummyimage.com/300x300/333333/333333">
    </div>


    <script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.5.1/webcomponents.min.js"><\/script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.5.1/polymer.min.js"><\/script>
    </head>
    <body>

    <style>
    .image-container{
    position:absolute;
    left:50px
    }
    .move{
    position:absolute;
    top:10px;
    left:-20px;
    }
    </style>

    <\!-- Define element -->
    <polymer-element name="fold-over" noscript>
    <template>
    <style>
    .shadow{
    height:15px;
    width:20px;
    }
    .grid{
    background-color:#91C4A6;
    color:#fff;
    text-transform:uppercase;
    font-family: Helvetica, Arial, Sans-Serif;
    padding:5px 0px 5px 10px;
    display:block;
    float:left;
    height:16px;
    }
    </style>
    <div class="shadow">
    <svg height="15" width="20">
    <polygon points="20,05 20,20 0,15" style="fill:#6F908F;"></polygon>
    </svg>
    </div>
    <span class="grid">
    <content></content>
    </span>
    <svg height="26" width="30">
    <polygon points="0,0 30,30 0,30" style="fill:#91C4A6;"></polygon>
    </svg>
    </template>
    </polymer-element>

    <\!-- Use element -->
    <div class="image-container">
    <fold-over class="move">Meow Hello World</fold-over>
    <img src="http://dummyimage.com/300x300/333333/333333">
    </div>

    </body>
    </html></script>

    </body>
    </html>