eServicesCustomerReportingProduceUsage_Mockup

by clayshannon

HTML

<img src="pic_mountain.jpg" alt="Mountain View" 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 class="ext-box" style="float: left; width: 960px;">
   <label>Unit:</label>
   <select>
  <option>All Selected</option>
  <option value="saab">Clapton</option>
  <option value="mercedes">Bruce</option>
  <option value="audi">Baker</option>
</select>
   <label>Category:</label>
   <select>
  <option>All Selected</option>
  <option value="saab">Gallagher</option>
  <option value="mercedes">McAvoy</option>
  <option value="audi">D'Ath</option>
</select>
   <label>Class:</label>
      <select>
  <option>All Selected</option>
  <option value="saab">Emerson</option>
  <option value="mercedes">Lake</option>
  <option value="audi">Palmer</option>
</select>
   <br/>
   <br/>
   <label>Customers:</label>
      <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>
   <label>Item:</label>
   <select>
  <option>All Selected</option>
  <option value="saab">Lennon</option>
  <option value="mercedes">McCartney</option>
  <option value="audi">Harrison</option>
  <option value="audi">Starr</option>
</select>
   <label>Dates:</label>
<input type="date">
   <br/>
<input type="date">
   <br/>
   <br/>
<hr/>
 </div>
 
 <br style="clear: left;" />
</div>

CSS

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

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

.bold {
  font-weight: bold;
}

div.ext-box { display: table; }
div.int-box { display: table-cell; vertical-align: middle; }