ProtoStub for PH: Static: HVAC Part Detail Page

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="top-bar">
  <ul class="nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">Parts</a></li>
    <li><a href="#">Search</a></li>
    <li><a href="#">Help</a></li>
  </ul>
  <div id="search-box">
    <input type="text" name="parts-search" placeholder="Mfg., Model, or Part Number" size=30>
  </div>
</div>

<div id="part-info">
  <img src="http://drive.google.com/uc?export=view&id=1CiYgF8q-OP6CJDvUnvLWe-GbcvxYiTBH" alt="PCB board" style="width:300px;">
  <h2>Acme TooCool Board</h2> <button type="button" id='order-btn'>Add to Cart</button><button type="button" id='order-btn'>Checkout</button>
  <h3> Availability: Same Day</h3>
  <h3> Part #: GR1688</h3>
  <h3> Orders (90 day): 87</h3>
  <h3> Price: $12.33</h3>
  <p>This part is compatible with the following models: X series, Y, Series, Z Series. It comes packaged with a single ziggler wire, but no other ancillary connectors.</p>
</div>

CSS

.top-bar,
#search-box,
.nav-list li,
.nav-list a {
  background-color: #002D45;
  font-family: Proxima Nova, helvetica neue, helvetica, sans-serif;
  font-weight: bold;
  font-size: 110%;
  color: #ffffff;
}

.top-bar {
  color: #FFFFFF;
  height: 40px;
  margin: 0px;
  padding: 10px;
  display: flex;
  align-items: center;
}

.nav-list {
  list-style-type: none;
  padding: 0;
  display: inline;
}

.nav-list li {
  float: left;
}

.nav-list a {
  display: inline;
  padding: 8px;
  text-decoration: none;
}

#search-box {
  margin-left: auto;
  margin-right: 0;
  padding: 10px;
}

p {
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  line-height: 1;
  overflow: scroll;
}

#part-info {
  margin: 15px;
  padding: 0px 5px;
}

#part-info img {
  float: left;
  padding: 5px;
}

#part-info h2 {
  display: inline;
}

#part-info button {
  display: inline;
  font-size: 20px;
  margin-left: 5px;
}

#part-info h3 {
  margin: 0px;
}

JavaScript

console.log(localStorage.getItem("pn"));