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 mastersj19

HTML

<div class="container">

  <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 border-radius=25px>
    <br>
    <select id="filter-type">
      <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 id="filter-type">
      <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 id="filter-type">
      <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...

CSS

#nav-bar {
  text-align: right;
  font-family: arial;
  color: #0077cc
 }
 
#search-select {
  text-align: left;
  font-family: arial;
  color: #cc5500;
  padding: 10px;
  border-radius: 25px;
 }
 
}
 
 #filter-type {
   text-align: center;
   font-family: arial;
   color: #0077cc;
   padding: 2px;
   border-radius: 25px
   
 }
 
#sort-results { 
  padding: 2px;
  font-family: arial;
  color: #cc5500
 }

#result-sort {
  color: #cc5500;
  font-family: arial;
  display: inline
 }

#result-count {
  display: inline
  text-align: right;
  font-family: arial;
  float: right;
 }
  
.catalog-part {
  margin: 10px; 
  padding: 0px 5px;
  float: left;
  border-style: solid; 
  border-color: #808285; 
  border-radius: 25px;
  border-width: 5px;
  width: 150px; 
  height: 200px; 
  line-height: 200px; 
  display: inline;
}

.catalog-part:hover {
  border-width: 10px;
  background-color: yellow
}

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