designer

designer.html

<link href="../paper-button/paper-button.html" rel="import">

<polymer-element name="my-element">

  <template>
    <style>    
      #design_host {
        box-sizing: border-box;
        position: static;
      }
      #toolbar {
        box-sizing: border-box;
        height: 15%;
        position: relative;
        color: rgb(255, 255, 255);
        background-color: rgb(0, 187, 211);
      }
      #section {
        margin: 0px auto;
        box-sizing: border-box;
        width: 535px;
        height: 545px;
        position: absolute;
        background-color: rgb(255, 255, 255);
        border-radius: 4px;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.094), 0px 0px 3px rgba(0, 0, 0, 0.094);
        font-family: "Open Sans",sans-serif;
        left: 0px;
        top: 0px;
      }
      #div1 {
        box-sizing: border-box;
        position: relative;
        height: 200px;
        background-color: rgb(43, 118, 174);
        color: rgb(255, 255, 255);
        font-size: 32px;
        font-weight: 500;
      }
      #section1 {
        background-color: rgb(255, 255, 255);
        font-size: 16px;
        padding: 2px;
      }
      #span {
        position: relative;
        top: 112px;
        background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.4);
      }
      .first {
        border-right: 1px solid rgb(157, 157, 157);
        border-bottom: 1px solid rgb(157, 157, 157);
      }
      .third {
          border-right: 1px solid rgb(157, 157, 157);
        border-bottom: 1px solid rgb(157, 157, 157);
         position: relative;
        left: 10%;
      }
      .second {
        border-right: 1px solid rgb(157, 157, 157);
        border-bottom: 1px solid rgb(157, 157, 157);
         position: relative;
        left: 5%;
      }
      .fourth {
         border-right: 1px solid rgb(157, 157, 157);
        border-bottom: 1px solid rgb(157, 157, 157);
       
      }
      .fifth {
         border-right: 1px solid rgb(157, 157, 157);
        border-bottom: 1px solid rgb(157, 157, 157);
        position: relative;
        left: 5%;
      }
      .sixth {
         border-right: 1px solid rgb(157, 157, 157);
        border-bottom: 1px solid rgb(157, 157, 157);
        position: relative;
        left: 10%;
      }
      .paper_button {
        margin: -15px;
        width: 33%;
        min-height: 30%;
        word-break: break-all;
      }
      img {
        width: 100%;
        height: 100%;
      }
      #section1 {
        margin-top: -120px;
        position: relative;
        top: 30%;
      }
    </style>
    <section id="section" vertical layout>
      <div id="div1" hero>
        <span id="span">How to fall in love with your partner quickly</span>
      </div>
      <section id="section1" flex hero>
        <paper-button id="paper_button" class="paper_button first">
          <img src="http://cdn.playbuzz.com/cdn/52f2d281-c0bd-4753-86c0-f208b791683a/18f3eefb-9739-44da-99e8-b767467eb6e4_338_224.jpg" width="156" height="103" naturalwidth="338" naturalheight="224" complete hspace="0" vspace="0" x="9" y="11" id="img"></img>
        </paper-button>
        <paper-button id="paper_button1" class="paper_button second">
          <img src="http://cdn.playbuzz.com/cdn/52f2d281-c0bd-4753-86c0-f208b791683a/18f3eefb-9739-44da-99e8-b767467eb6e4_338_224.jpg" width="156" height="103" naturalwidth="338" naturalheight="224" complete hspace="0" vspace="0" x="9" y="11" id="img1"></img>
        </paper-button>
        <paper-button id="paper_button1" class="paper_button third">
          <img src="http://cdn.playbuzz.com/cdn/52f2d281-c0bd-4753-86c0-f208b791683a/18f3eefb-9739-44da-99e8-b767467eb6e4_338_224.jpg" width="156" height="103" naturalwidth="338" naturalheight="224" complete hspace="0" vspace="0" x="9" y="11" id="img1"></img>
        </paper-button>
        <br></br>
       
        <paper-button id="paper_button2" class="paper_button fourth">
          <img src="http://cdn.playbuzz.com/cdn/52f2d281-c0bd-4753-86c0-f208b791683a/18f3eefb-9739-44da-99e8-b767467eb6e4_338_224.jpg" width="157" height="104" naturalwidth="338" naturalheight="224" complete hspace="0" vspace="0" x="9" y="11" id="img2"></img>
        </paper-button>
        <paper-button id="paper_button3" class="paper_button fifth">
          <img src="http://cdn.playbuzz.com/cdn/52f2d281-c0bd-4753-86c0-f208b791683a/18f3eefb-9739-44da-99e8-b767467eb6e4_338_224.jpg" width="157" height="104" naturalwidth="338" naturalheight="224" complete hspace="0" vspace="0" x="9" y="11" id="img3"></img>
        </paper-button>
        <paper-button id="paper_button3" class="paper_button sixth">
          <img src="http://cdn.playbuzz.com/cdn/52f2d281-c0bd-4753-86c0-f208b791683a/18f3eefb-9739-44da-99e8-b767467eb6e4_338_224.jpg" width="157" height="104" naturalwidth="338" naturalheight="224" complete hspace="0" vspace="0" x="9" y="11" id="img3"></img>
        </paper-button>
      </section>
    </section>
  </template>

  <script>

    Polymer({
      
    });

  </script>

</polymer-element>