Coffe roasting site with focus on color spectrum

Coffee site Demo

• Some terminology:

font color is called foreground and use css's color property

background color uses css's background-color property

H in hsl is hue which measure of degrees of the color circle ranging from 0 to 360 (red = 0°; green = 120°; blue = 240°)

To change the lightness - change l of hsl
To update the saturation - change s of hsl

More info on hsl

• When parent container has position: relative, the children elements with position: absolute are positioned relative to its parent's container.

Demo:

<div class="notice">
  <p>Don't close me!!</p>
  <img src="images/abs-pos-close.png" class="close" alt="close">
</div>

.notice {
  position: relative;
}

.close {
  // close button is position relative to its parent
  //   container .notice
  position: absolute;
  left: 0;
  top: 0;
}

In-dept explanation positioning