eServicesCustomerReportingProduceUsage_Mockup

by clayshannon

HTML

<img src="pic_mountain.jpg" alt="Replace with image" style="width:1200px;height:48px;">
<h2 class="greenbackwhitefore">eServices</h2>
<h3 class="whitebackorangefore">CUSTOMER REPORTING - PRODUCT USAGE</h3>
<div style="width: 1200px;">
  <div style="float: left; width: 200px;">
    <label class="bold">Product Usage</label>
    <br/>
    <br/>
    <label>Impact Report</label>
    <br/>
    <br/>
    <label>Escalator Impact</label>
    <br/>
    <br/>
    <label>Price Variance</label>
  </div>

  <div style="float: left; width: 40px;"></div>

  <div style="float: left; width: 960px;">
    <table style="width:60%">
      <tr>
        <td>
          <label>Unit:</label>
        </td>
        <td>
          <select>
        <option>All Selected</option>
        <option value="saab">Clapton</option>
        <option value="mercedes">Bruce</option>
        <option value="audi">Baker</option>
      </select>
        </td>
        <td>
      <label>Category:</label>    
        </td>
        <td>
      <select>
        <option>All Selected</option>
        <option value="saab">Gallagher</option>
        <option value="mercedes">McAvoy</option>
        <option value="audi">D'Ath</option>
      </select>
        </td>
        <td>
      <label>Class:</label>
        </td>
        <td>
      <select>
        <option>All Selected</option>
        <option value="saab">Emerson</option>
        <option value="mercedes">Lake</option>
        <option value="audi">Palmer</option>
      </select>
        </td>      
      </tr>
<tr>
    <td>
<label>Customers:</label>
    </td>
    <td>
      <select>
        <option>All Selected</option>
        <option value="saab">Palmer</option>
        <option value="mercedes">Dobson</option>
        <option value="audi">Cuellar</option>
        <option value="audi">McNally</option>
      </select>
    </td> 
    <td>
      <label>Item:</label>
    </td>
    <td>
      <select>
        <option>All Selected</option>
        <option...

CSS

.greenbackwhitefore {
  background-color: green;
  color: white;
  font-family: Candara, Georgia, serif;
  margin-top: -0.1cm;
}

.darkgreenbackground {
  background-color: darkgreen;
}

.whitebackorangefore {
  background-color: white;
  color: orange;
  font-family: Georgia, Candara, serif;
  margin-top: -0.4cm;
}

.whitefont {
  color: white;
  font-family: Georgia, Candara, serif;
}

.righthoralign {
    text-align: right;
}

.paddedbutton {
  margin: 8px;
}

.bold {
  font-weight: bold;
}