CodePen Embed - Color Palette

<html>

<head>
  <title>Title of the document</title>

  <link rel="stylesheet" type="text/css" href="mystyle.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>


<!--Break after <head>-->

<div class="firstGroup">
  <div class="group1header">

    <p class="headText"><i class="material-icons" style="font-size:30px;color:white">airplay</i> Customer
    </p>
    <p class="additionalText">Customer specific data</p>

    <div class="textContainer1">
      <div class="red-palette">
        <i class="fa fa-empire" style="font-size:80px;color:white;"></i>
      </div>
      <p class="divText">
        Tests
      </p>
    </div>

    <div class="textContainer1">
      <div class="green-palette">
        <i class="fa fa-ra" style="font-size:80px;color:white;"></i>
        </img>
      </div>
      <p class="divText">
        Tests
      </p>
    </div>

    <div class="textContainer1">
      <div class="blue-palette">
        <i class="fa fa-file-code-o" style="font-size:80px;color:white;"></i>
        </img>

      </div>
      <p class="divText">
        Tests
      </p>
    </div>

    <div class="textContainer1">
      <div class="orange-palette">
        <i class="fa fa-area-chart" style="font-size:80px;color:white;"></i>

      </div>
      <p class="divText">
        Tests
      </p>
    </div>

    <div class="textContainer1">
      <div class="yellow-palette">
        <i class="fa fa-exchange" style="font-size:80px;color:white;"></i>
      </div>
      <p class="divText">
        Tests
      </p>
    </div>
  </div>
</div>

<!-- First section of icons-->

<div class="secondGroup">
  <div class="group1header">

    <p class="headText"><i class="material-icons" style="font-size:30px;color:white">dialer_sip</i> Network
    </p>
    <p class="additionalTextgroup2">Testability & Skill </p>

    <div class="textContainer1">
      <div class="red-palette">
        <i class="fa fa-empire" style="font-size:80px;color:white;"></i>
        </img>
      </div>
      <p class="divText">
        Tests
      </p>
    </div>

    <div class="textContainer1">
      <div class="green-palette">
        <i class="fa fa-ra" style="font-size:80px;color:white;"></i>
        </img>
      </div>
      <p class="divText">
        Tests
      </p>
    </div>

    <div class="textContainer1">
      <div class="blue-palette">
        <i class="fa fa-file-code-o" style="font-size:80px;color:white;"></i>
        </img>

      </div>
      <p class="divText">
        Tests
      </p>
    </div>

    <div class="textContainer1">
      <div class="orange-palette">
        <i class="fa fa-area-chart" style="font-size:80px;color:white;"></i>

      </div>
      <p class="divText">
        Tests
      </p>
    </div>

    <div class="textContainer1">
      <div class="yellow-palette">
        <i class="fa fa-exchange" style="font-size:80px;color:white;"></i>

      </div>
      <p class="divText">
        Tests
      </p>
    </div>

  </div>
  <!-- second section of icons-->


</html>

.textContainer1 {
  display: inline-block;
  padding: 15px;
  height: 190px;
  width: 152px;
  background-color: /*green */;
    
}

.material-icons {
  text-shadow: none;
}

.fa-exchange {
  position: relative;
  top: 22%;
  left: 23%;
  text-shadow: none;
}

.fa-area-chart {
  position: relative;
  top: 22%;
  left: 23%;
  text-shadow: none;
}

.fa-file-code-o {
  position: relative;
  top: 22%;
  left: 27%;
  text-shadow: none;
} 

.fa-empire {
  position: relative;
  top: 22%;
  left: 23%;
  text-shadow: none;
}

.fa-ra {
  position: relative;
  top: 22%;
  left: 23%;
  text-shadow: none;
}

.headText {
  color: #fff;
  text-align: left;
  font-family: Arial;
  text-shadow: none;
  font-size: 30px;
  font-weight: bold;
  position: relative;
  left: 25px;
}

.additionalText {
  color: #fff;
  text-align: left;
  font-family: Arial;
  text-shadow: none;
  font-size: 18px;
  position: relative;
  top: -30px;
  left: 67px;
}

.additionalTextgroup2 {
  color: #fff;
  text-align: left;
  font-family: Arial;
  text-shadow: none;
  font-size: 18px;
  position: relative;
  top: -30px;
  left: 67px;
}

.divText {
  color: #fff;
  text-align: center;
  font-family: Arial;
  text-shadow: none;
  /*1px 1px #000; */
  font-size: 20px;
}

.firstGroup {
  background: #464849;
  border-color: white;
  border-width: 1px;
  border-top-style: solid;
  position: relative;
  width: 95%;
  box-shadow: 1px 1px 2px black, 0 0 25px black, 0 0 5px black;
  border-radius: 15px;
  left: 5px;
}

.secondGroup {
  background: #464849;
  border-color: white;
  border-width: 1px;
  border-bottom-style: solid;
  border-top-style: solid;
  position: relative;
  width: 95%;
  box-shadow: 1px 1px 2px black, 0 0 25px black, 0 0 5px black;
  border-radius: 15px;
  top: 25px;
  left: 5px;
}

.red-palette {
  width: 152px;
  height: 152px;
  color: #fff;
  text-shadow: -2px 2px #346392;
  background: linear-gradient(to bottom right, #FF4747 0%, #D90A6F 100%);
  /* -webkit- must be used for gradient to work in Safari */
  box-shadow: inset 0 0 0 1px #27496d, 0 5px 15px #193047;
  /* Shadow of DIV */
  border: none;
  /* Border of DIV */
  border-radius: 30px;
  /* Curves the edges of a DIV */
}

.red-palette:hover {
  box-shadow: inset 0 0 0 1px #27496d, /*inset */
  0 5px 15px #193047;
  transition: .75s;
  transform: scale(1.3, 1.3);
  -webkit-transform: scale(1.3, 1.3);
  -moz-transform: scale(1.3, 1.3);
  /* -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg); */
}

.green-palette {
  width: 152px;
  height: 152px;
  color: #fff;
  text-shadow: -2px 2px #346392;
  background: linear-gradient(to bottom right, #00CD86 0%, #3AB52A 100%);
  /* -webkit- must be used for gradient to work in Safari */
  box-shadow: inset 0 0 0 1px #27496d, 0 5px 15px #193047;
  /* Shadow of DIV */
  border: none;
  /* Border of DIV */
  border-radius: 30px;
  /* Curves the edges of a DIV */
}

.green-palette:hover {
  box-shadow: inset 0 0 0 1px #27496d, /*inset */
  0 5px 15px #193047;
  -moz-transition: .75s;
  -webkit-transition: .75s;
  transition: .75s;
  transform: scale(1.3, 1.3);
  /* -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg); */
}

.blue-palette {
  width: 152px;
  height: 152px;
  color: #fff;
  text-shadow: -2px 2px #346392;
  background: linear-gradient(to bottom right, #2678E4 0%, #5F48E5 100%);
  /* -webkit- must be used for gradient to work in Safari */
  box-shadow: inset 0 0 0 1px #27496d, 0 5px 15px #193047;
  /* Shadow of DIV */
  border: none;
  /* Border of DIV */
  border-radius: 30px;
  /* Curves the edges of a DIV */
}

.blue-palette:hover {
  box-shadow: inset 0 0 0 1px #27496d, /*inset */
  0 5px 15px #193047;
  transition: .75s;
  transform: scale(1.3, 1.3);
  /* -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg); */
}

.orange-palette {
  width: 152px;
  height: 152px;
  color: #fff;
  text-shadow: -2px 2px #346392;
  background: linear-gradient(to bottom right, #FC881B 0%, #F22553 100%);
  /* -webkit- must be used for gradient to work in Safari */
  box-shadow: inset 0 0 0 1px #27496d, 0 5px 15px #193047;
  /* Shadow of DIV */
  border: none;
  /* Border of DIV */
  border-radius: 30px;
  /* Curves the edges of a DIV */
}

.orange-palette:hover {
  box-shadow: inset 0 0 0 1px #27496d, /*inset */
  0 5px 15px #193047;
  transition: .75s;
  transform: scale(1.3, 1.3);
  /* -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg); */
}

.yellow-palette {
  width: 152px;
  height: 152px;
  color: #fff;
  text-shadow: -2px 2px #346392;
  background: linear-gradient(to bottom right, #ECC41F 0%, #E27B13 100%);
  /* -webkit- must be used for gradient to work in Safari */
  box-shadow: inset 0 0 0 1px #27496d, 0 5px 15px #193047;
  /* Shadow of DIV */
  border: none;
  /* Border of DIV */
  border-radius: 30px;
  /* Curves the edges of a DIV */
}

.yellow-palette:hover {
  box-shadow: inset 0 0 0 1px #27496d, /*inset */
  0 5px 15px #193047;
  transition: .75s;
  transform: scale(1.3, 1.3);
  /* -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg); */
}



body {
    background: linear-gradient(to bottom right, #00C8C8 0%, #0A9EC4 100%);
}

This Pen is owned by Eric Forbes on CodePen.

See more by @malevolentsage on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.