From Prototype to HTML

by mastersj19

HTML

<div class="container">

  <div id="nav-bar" style="text-align:center;">
    Home | Parts | Search
  </div>
  <div id="search-select" style="padding: 2px; text-align:center;">
    SEARCH
    <input type="text" name="parts-search" placeholder="Acme Coolerator Sniggler" size=30>
    <br>
    <select>
      <option value="None">Manufacturer</option>
      <option value="Acme">Acme</option>
      <option value="Bacme">Bacme</option>
      <option value="Cacme">Cacme</option>
      <option value="Dacme">Dacme</option>
    </select>
    <select>
      <option value="None">Model</option>
      <option value="Acme">TooCool</option>
      <option value="Bacme">TooHot</option>
      <option value="Cacme">JustRight</option>
      <option value="Dacme">Coolerator</option>
    </select>
    <select>
      <option value="None">Type</option>
      <option value="Acme">Sniggler</option>
      <option value="Bacme">Wiggler</option>
      <option value="Cacme">Jiggler</option>
      <option value="Dacme">Tiggler</option>
    </select>
  </div>
  <div id="sort-results" style="padding: 2px;">
    <div style="display: inline;">
    <br>
      Sort By
      <select>
        <option value="None">Popularity</option>
        <option value="Acme">Price</option>
        <option value="Bacme">Manufacturer</option>
      </select>
    </div>
    <div style="display:inline; text-align: right; float: right;">
      12 Results
    </div>
    <div>
        <div class="catalog-part" style="margin: 2px; 
  padding: 0px 5px;
  float: left;
  border-style: solid; 
  border-color: #808285;
  border-radius: 25px;
  border-width: 1px;
  width: 150px; 
  height: 200px; 
  line-height: 200px; 
  display: inline;">
          <img style="vertical-align: middle;" src="https://www.alexandercowan.com/wp-content/uploads/2017/12/PCB-board-150px.png" alt="PCB board"></div>
        <div class="catalog-part" style="margin: 2px; 
  padding: 0px 5px;
  float: left;
  border-style: solid; 
  border-color: #808285; 
 ...