Lee-Example

by David Kyle

HTML

<!-- With CSS -->
<section class="header" title="header 1" id="header-section">
  <div class="liner">
    <h1 role="hading" aria-level="1">
      Seed Catalog
    </h1>
  </div>
</section>

<!-- Without CSS -->
<section class="other-header" title="header 2" id="other-section">
  <div class="other-liner">
    <h1 role="hading" aria-level="1">
      Seed Catalog
    </h1>
  </div>
</section>

CSS

body {
  padding: .1rem;
  margin: 0px;
}
#header-section {
  background-color: rgba(30, 30, 30, .8);
  color: rgb(80, 80, 80);
  font-family: Verdana, arial, sans-serif;
  font-size: small;
  margin: 0px;
  padding: .1rem;
  height: 200px;
}

.liner {
  margin: 0px .1rem;
  box-shadow: inset 0px 0px 22px rgba(50, 50, 50, .7);
  border: solid 1px rgb(50, 50, 50, .4);
  border-radius: .3rem;
  padding: .3rem;
  text-align: center;
  background-color: rgba(120, 120, 200);
  transition: all 0.3s ease-in-out;
}

.liner h1 {
  color: black;
}

.liner:hover {
  background-color: rgba(160, 160, 230);
  transition: all 0.3s ease-in-out;
}