Color Scheme

by mtenschert

HTML

<body>
  <div class="dark-pri"></div>
  <div class="dark-qua"></div>
  <div class="dark-sec"></div>
  <div class="bright-pri border-pri"></div>
  <div class="dark-ter"></div>
  
  <br /><br /><br />
  
  <div class="dark-pri">
    <p class="bright-font-pri">Normaler Fließtext in dunklen Hintergründen. Normaler Fließtext in dunklen Hintergründen.</p>
  </div>
  <div class="dark-pri">
        <p class="bright-font-sec">NAVIGATION BUTTONS</p>
  </div>
  <div class="dark-qua">
        <p class="bright-font-pri">Normaler Fließtext in dunklen Hintergründen. Normaler Fließtext in dunklen Hintergründen.</p>
  </div>
  <div class="dark-sec">
        <p class="bright-font-pri">HEADLINE</p>
  </div>
  <div class="bright-pri border-pri">
              <p class="dark-font-sec"><strong>HEADLINE</strong></p>
              <p class="dark-font-ter"><strong>HEADLINE</strong></p>
              <p class="dark-font-pri"><strong>HEADLINE</strong></p>
              <p class="dark-font-pri">Normaler Fließtext in hellen Hintergründen. Normaler Fließtext in hellen Hintergründen.</p>
  </div>
    <div class="bright-sec">
              <p class="dark-font-sec"><strong>HEADLINE</strong></p>
              <p class="dark-font-ter"><strong>HEADLINE</strong></p>
              <p class="dark-font-pri"><strong>HEADLINE</strong></p>
              <p class="dark-font-pri">Pay in your own currency! ALPINRESORTS.com will carry the cost of exchanging your currency. Rates are updated every day.</p>
  </div>
</body>

CSS

/* general background */
body {
  background: white;
  color: #212529;
  font-size: 14px;
  font-family: "arial";
  padding-bottom: 20px;
}

p {
  padding: 10px;
}

div {
  width: 100%;
  min-height: 10px;
  margin-bottom: 10px;
}

/* dark background primary color */
.dark-pri {
  background: #a21d0e;
}

/* dark background secondary colour */
.dark-sec {
  background: #09505d;
}

/* dark background tertiary colour */
.dark-ter {
  background: #706f6f;
}

/* dark background quaternary color */
.dark-qua {
  background: #bc3b25;
}

/* primary bright background */
.bright-pri {
  background: white;
}

/* secondary bright background */
.bright-sec {
  background: #e6edee;
}

/* primary font on dark background */
.bright-font-pri {
  color: white;
}

/* secondary font on dark background */
.bright-font-sec {
  color: #f8b2aa;
}

/* primary font on bright background */
.dark-font-pri {
  color: #212529;
}

/* secondary font on bright background */
.dark-font-sec {
  color: #b83122;
}

/* tertiary font on bright background */
.dark-font-ter {
  color: #09505d;
}

/* border primary */
.border-pri {
  border: 1px solid #e4e4e4;
}