Style Guide for Yeoman

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 src="https://www.alexandercowan.com/wp-content/uploads/2017/12/hvac-metal-part-post-150px.png" alt="PCB...

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;
}