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">
    <div class="top-logo">
      <img src="https://drive.google.com/uc?id=1KiK_basAjNitJ33U_rJzZVYRWKFZzPAZ" alt="Yeoman Logo" size>
    </div>
    <div class="top-menu">
      <a href = "#top">Home</a> | <a href = "#top"> Parts</a> | Search | <a href = "mailto: [email protected]">Help</a>
    </div>
  </div>
  <hr>
<div class="body">
  
  
  <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>
    <br>
    <div class="search-results">
        <div class="catalog-part">
          <img src="https://www.alexandercowan.com/wp-content/uploads/2017/12/PCB-board-150px.png" alt="PCB board">
          <div class="overlay">
            <div class="text"> <p>
            Acme #GR168887 orders $12.30 Same Day (More)
            </p> </div>
          </div>
      </div>
        <div class="catalog-part">
 ...

CSS

#nav-bar {
  text-align: center;
 }
 
.body{
  font-family: "Lucida Sans";
}
.top-logo img{
  vertical-align: middle;
  display: block;
  max-width:200px;
  max-height:95px;
  width: auto;
  height: auto;
  float:left;
 }
 
.top-menu{
   text-align: right;
   padding-top: 25px;
   padding-bottom: 10px;
 }
 
.top-menu a:hover {
  color: #cc5500;
}
 
#search-select {
  padding-top: 10px;
  font-size: 15px;
  line-height:25px;
  padding-bottom:10px;
 }
 
#sort-results {
  padding-bottom: 15px;
  font-size: 13px; 
 }

#result-sort {
  display: inline;
 }

#result-count {
  display: inline
  text-align: right; 
  float: right;
 }
 
.search-results {
  padding-top:5px;
}
  
.catalog-part {
  margin: 2px; 
  padding: 0px 5px;
  position:relative;
  float: left;
  border-radius:10px;
  border-style: solid; 
  border-color: #808285; 
  border-width: 1px;
  width: 150px; 
  height: 200px; 
  line-height: 200px; 
  display: inline;
  align-self:center;
}

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

.catalog-part:hover .overlay {
  opacity: 0.8;
}

.overlay {
  background-color: #D1D3D4;
  position: absolute;
  left: 0;
  top: 0;
  width:100%;
  height:100%;
  border-radius:10px;
  z-index: 999;
  opacity: 0;
  transition: .1s ease;
}

.text {
  position: absolute; 
  width: 100%; 
  height: 100%;
  display: table;
  line-height: normal;
}

.text p {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
  padding: 5px;
  margin: auto;
  width: 50%;
}