Colour Palette

by Hugo Carneiro

HTML

<div class="holder">
  <div>
    <h1>
      This is a heading
    </h1>
    <p>
      This is a paragraph
    </p>
    <button>
      This is a primary button
    </button>
    <button>
      This is a secondary button
    </button>
  </div>
  <div>
    <h1>
      This is a heading
    </h1>
    <p>
      This is a paragraph
    </p>
    <button>
      This is a button
    </button>
  </div>
  <div>
    <h1>
      This is a heading
    </h1>
    <p>
      This is a paragraph
    </p>
    <button>
      This is a button
    </button>
  </div>
  <div>
    <h1>
      This is a heading
    </h1>
    <p>
      This is a paragraph
    </p>
    <button>
      This is a button
    </button>
  </div>
  <div>
    <h1>
      This is a heading
    </h1>
    <p>
      This is a paragraph
    </p>
    <button>
      This is a button
    </button>
  </div>
  <div>
    <h1>
      This is a heading
    </h1>
    <p>
      This is a paragraph
    </p>
    <button>
      This is a button
    </button>
  </div>
</div>

CSS

.holder {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.holder div {
  flex-grow: 1;
  width: 25%;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 20px;
}

.holder div button {
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
}

.holder div:nth-child(1) h1 {
  color: blue;
}
.holder div:nth-child(1) p {
  color: #999;
}
.holder div:nth-child(1) button {
  background-color: #568BED;
  color: #fff;
}

.holder div:nth-child(2) h1 {
  color: red;
}
.holder div:nth-child(2) p {
  color: #ccc;
}
.holder div:nth-child(2) button {
  background-color: #E8585C;
  color: #fff;
}

.holder div:nth-child(3) h1 {
  color: orange;
}
.holder div:nth-child(3) p {
  color: #333;
}
.holder div:nth-child(3) button {
  background-color: #FFBE92;
  color: #333;
}

.holder div:nth-child(4) h1 {
  color: #9C6438;
}
.holder div:nth-child(4) p {
  color: #C2BB99;
}
.holder div:nth-child(4) button {
  background-color: #D2BF77;
  color: #333;
}

.holder div:nth-child(5) h1 {
  color: #6DA747;
}
.holder div:nth-child(5) p {
  color: #AACEA9;
}
.holder div:nth-child(5) button {
  background-color: #8DDF87;
  color: #EEFDF0;
}

.holder div:nth-child(6) h1 {
  color: #9447A6;
}
.holder div:nth-child(6) p {
  color: #CDA9C6;
}
.holder div:nth-child(6) button {
  background-color: #DF87D1;
  color: #FCEEF7;
}