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

<!DOCTYPE html>
<html>
<div class="body">

  <link href="CSS" type="text/css" rel="stylesheet">

<!-- UPDATE: Add login in top right -->
  <div id="login-container">
    <img id="login-avatar" src="https://drive.google.com/uc?id=1ahYnFL5OxYpVpzDie73Qx09GA1g6gT3b" alt="User Image">
  </div>
  
  <div id ="login-text">
    Sign in | Create account
  </div>
  
  <br>
<!-- Update ends here -->
  
  <div id="logo">
  Yeoman
  </div>
  <br>
  
  <div id="nav-bar">
    Home | Parts | Search | <a href="https://www.alexandercowan.com/contact/">Support</a>
    
   
  </div>
  <div id="search">
  <br>
    SEARCH
    <input type="text" name="parts-search" placeholder="Acme Coolerator Sniggler" size=30>
    <br>
    </div>  
  <div id="select">
    <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>
    <br>
    <br>
  </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>
 
  <br>
  <div class="house">
  <img src="https://drive.google.com/uc?id=1WlukynOeSqRGr0OLgQqZaYXk24XJ0gtz" alt="House">
  <button class="btn">Like</button>
 ...

CSS

/* UPDATE: Add login in top right --> */
.body {font-family: "trebuchet ms"}

#login-container {
  text-align: right;
}

#login-avatar {
  width: 10%;
  cursor: pointer;
  vertical-align: bottom;
}

#login-text {
  text-align: right;
  cursor: pointer;
}
/* Update ends here */

#logo {
  text-align: center;
  font-family: "trebuchet ms";
font-weight: bold;
font-size: 30px;
  color: #1FB35B;
  
  }


#nav-bar {
  text-align: center;
  font-family: "Lucida Sans";
  
 }
 
#search {
  padding: 2px;
  text-align: left;
 }
 
#select {
  padding: 2px;
  text-align: left;
 } 
 
#sort-results {
  border-style: solid;
  border-width: 1px;
  border-color: #808285; 
  padding: 5px;
 
 }

#result-sort {
  display: inline
 }

#result-count {
  display: inline;
  text-align: right; 
  float: right;
 }
  
/* Container needed to position the button. Adjust the width as needed */
.house {
  position: relative;
  width: 25%;
  display: inline;
  padding: 5px 10px;
}

/* Make the image responsive */
.house img {
  
  height: 200px;
  width: auto;
  border: solid;
  border-radius: 5px;
  border-width: 2px;
 
  
}

/* Style the button and place it in the top right of the house/image */
.house .btn {
  position: absolute;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 12px;
  padding: 5px 8px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  margin-top: 20px;
  margin-left: -40px;
}

.house .btn:hover {
  background-color: #3389ee;
}