designer

designer.html

<link rel="import" href="../polymer/polymer.html">

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

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      div {
        color: white;
      }
      #container {
        box-sizing: border-box;
        width: 660px;
        height: 530px;
        padding: 20px;
        background-color: white;
      }
      #header {
        box-sizing: border-box;
        width: 620px;
        height: 80px;
        padding: 30px;
        font-size: 20px;
        overflow: hidden;
        background-color: rgb(230, 125, 99);
      }
      #right-panel {
        box-sizing: border-box;
        width: 285px;
        height: 450px;
        display: inline-block;
        vertical-align: top;
        margin: 0px;
        padding: 0px 30px;
        background-color: rgb(93, 93, 95);
      }
      #left-panel {
        box-sizing: border-box;
        width: 330px;
        height: 450px;
        display: inline-block;
        vertical-align: top;
        margin: 0px;
        background-color: rgb(243, 243, 244);
      }
      #left-panel .top {
        height: 260px;
        padding: 33px;
      }
      #left-panel > .top > .row > .cell {
        color: rgb(119, 120, 122);
        display: inline-block;
        padding: 10px;
      }
      #left-panel > .top > .row > .cell1 {
        width: 72px;
      }
      #left-panel > .top > .row > .cell2 {
        width: 50px;
      }
      #left-panel > .top > .row > .cell3 {
        width: 60px;
      }
      #left-panel .bottom {
        height: 190px;
        background-color: rgb(189, 190, 192);
        padding: 33px;
      }
      #left-panel > .bottom > .row > .cell {
        color: white;
        display: inline-block;
      }
      #left-panel > .bottom > .row > .cell1 {
        width: 60px;
      }
      #left-panel > .bottom > .row > .cell2 {
        width: 60px;
      }
      input {
        margin-top: 20px;
        box-sizing: border-box;
        width: 225px;
        height: 25px;
        border: 1px solid transparent;
        border-radius: 8px;
        padding-left: 12px;
        background-color: rgb(79, 79, 80);
      }
      input:active, input:hover {
        border-color: rgb(230, 125, 99);
      }
      .city-and-state input {
        display: inline-block;
        width: 100px;
      }
      .city-and-state input:first-child {
        width: 120px;
        margin-right: 5px;
      }
      .city-and-state input:last-child {
        width: 95px;
      }
      .expdate-and-cvv input {
        display: inline-block;
        width: 100px;
      }
      .expdate-and-cvv input:first-child {
        width: 135px;
        margin-right: 5px;
      }
      .expdate-and-cvv input:last-child {
        width: 80px;
      }
      hr {
        margin-top: 15px;
        margin-bottom: 15px;
        border: 1px solid rgb(79, 79, 80);
      }
    </style>
    <div id="container">
      <div id="header">
        Cruiser snowmobile Tour: Fresh Tracks
      </div>
      <div id="right-panel">
        <input id="input" placeholder="Email">
        <input placeholder="Name">
        <input placeholder="Phone">
        <input placeholder="Street">
        <div class="city-and-state">
          <input placeholder="City">
          <input placeholder="State">
        </div>
        <input placeholder="Country">
        <hr id="hr"></hr>
        <input placeholder="Card #">
        <div class="expdate-and-cvv">
          <input id="input1" placeholder="Exp date">
          <input placeholder="CVV">
        </div>
      </div>
      <div id="left-panel">
        <div id="div1" class="top">
          <div id="div" class="title">
               April 15, 2015  
              </div>
          <div class="date-picker">
            
          </div>
          <div class="row">
            <div id="div3" class="cell cell1">Adults:</div>
            <div class="cell cell2">1</div>
            <div id="div2" class="cell cell3">50$ / ticket</div>
          </div>
          <div class="row">
            <div class="cell cell1">Under 18:</div>
            <div class="cell cell2">1</div>
            <div class="cell cell3">50$ / ticket</div>
          </div>
          <div class="row">
            <div class="cell cell1">Under 10:</div>
            <div class="cell cell2">1</div>
            <div class="cell cell3">50$ / ticket</div>
          </div>
        </div>
        <div id="div4" class="bottom">
          <div class="row">
            <div class="cell cell1">Subtotal</div>
            <div class="cell cell2">$49.99</div>
          </div>
          <div class="row">
            <div class="cell cell1">Taxes</div>
            <div class="cell cell2">$5.00</div>
          </div>
          <div class="row">
            <div class="cell cell1">Total</div>
            <div class="cell cell2">$49.99</div>
          </div>
          <div class="row">
            <div class="cell cell1">
              <span class="check"></span>
              <span class="text">I agree to the terms Terms & Conditions</span>
            </div>
            <div class="cell cell2">
              <div class="btn">
                <span class="text">Checkout</span>
                <span class="arrow"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>

  <script>

    Polymer({
      
    });

  </script>

</polymer-element>