Making HTML Manageable (HinH Prototype 2)

This supports a software dev. class for businesspeople that you can find here: https://www.alexandercowan.com/making-html-manageable And a case you can find here: https://www.alexandercowan.com/making-html-manageable

by Alex Cowan

HTML

<div class="container">

<!-- Hi- I'm a comment in HTML. -->

  <div id="nav-bar">
    Home | Parts | Search
  </div>
  <div id="search-select">
    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">
    <div id="result-sort">
      Sort By
      <select>
        <option value="None">Popularity</option>
        <option value="Acme">Price</option>
        <option value="Bacme">Manufacturer</option>
      </select>
    </div>
    <div id="result-count">
      12 Results
    </div>
    <div>
      <div class="catalog-part">
        <img src="https://www.alexandercowan.com/wp-content/uploads/2017/12/PCB-board-150px.png" alt="PCB board"></div>
      <div class="catalog-part">
        <img src="https://www.alexandercowan.com/wp-content/uploads/2017/12/hvac-fan-photo-2-post-150px.png" alt="PCB board"></div>
      <div class="catalog-part">
        <img src="https://www.alexandercowan.com/wp-content/uploads/2017/12/hvac-board-4-post-150px.png" alt="PCB board 2"></div>
      <div class="catalog-part">
        <img src="https://www.alexandercowan.com/wp-content/uploads/2017/12/hvac-metal-part-post-150px.png" alt="PCB board"></div>
    </div>
 ...

CSS

#nav-bar {
  text-align: center;
}

#search-select {
  padding: 2px;
}

/* Hi- I'm a comment in CSS */

#sort-results {
  border-style: solid;
  border-width: 1px;
  border-color: #808285;
  padding: 2px;
}

#result-sort {
  display: inline;
}

#result-count {
  display: inline;
  text-align: right;
  float: right;
}

.catalog-part {
  margin: 2px;
  padding: 0px 5px;
  float: left;
  border-style: solid;
  border-color: #808285;
  border-width: 1px;
  width: 150px;
  height: 200px;
  line-height: 200px;
  display: inline;
}

.catalog-part img {
  vertical-align: middle;
}