<div id="holder">
<div id="container">
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);

* {
   box-sizing: border-box;
}
*:before,
*:after {
   box-sizing: border-box;
}

body {
   background: radial-gradient(
      farthest-corner at 0px 100%,
      #dad4ec 0%,
      #f3e7e9 100%
   );
   margin: 0 auto 50;
   padding: 50px;
   
}

#holder {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: top;
   padding-bottom: 50px;
}

#container {
   max-width: 1200px;
   display: flex;
   flex-wrap: wrap;
   list-style: none;
   overflow: hidden;
   justify-content: center;
   margin: 0 auto 50;
   padding: 50 0
}

.card {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   box-shadow: 0px 10px 30px -10px rgba(0, 0, 0, 0.7);

   border-radius: 15px;
   height: 200px;
   width: 200px;
   margin-top: 0;
   margin: 15px;
   transition: transform 400ms, box-shadow 400ms;
   padding-left: 15px;
}

.card:hover {
   transform: translate(0px, 5px);
   box-shadow: 0px 0px 30px -10px rgba(0, 0, 0, 0);
}

p {
   color: #fff;
}

.number {
   position: relative;
   font-family: "Open Sans", sans-serif;
   font-size: 40px;
   margin: 10px 0px;
   line-height: 0px;
   opacity: 0.6;
   
}

.color-code {
   font-size: 12px;
   font-family: monospace;
   transition: transform 400ms;
   opacity: 0.5;
}

.color-code:hover {
   opacity: 1;
   text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}

::selection {
   color: #30cfd0;
   background: #09203f;
}

@keyframes card-animation {
   0%,
   10% {
      color: #fff;
   }
   
   5% {
      color: #060463;
     
   }
}

// gradients //
var divCount = 69;
var colors = [
   "#fbc2eb",
   "#a18cd1",
   "#e55700",
   "#830c89",
   "#33078c",
   "#060463",
   "#30cfd0",
   "#330867",
   "#ad0f95",
   "#0e0454",
   "#667eea",
   "#764ba2",
   "#4e4376",
   "#2b5876",
   "#537895",
   "#09203f",
   "#fceebd",
   "#f2f1ef",
   "#569ce2",
   "#e9defa",
   "#434343",
   "#97d9e1",
   "#d9afd9",
   "#f83600",
   "#f9d423",
   "#c7eafd"
];

for (i = 0; i < divCount; i++) {
   var randomColor = colors[Math.floor(Math.random() * colors.length)];
   var randomColorSecond = colors[Math.floor(Math.random() * colors.length)];

   // avoid smilar color //
   if (randomColor === randomColorSecond) {
      var randomColorSecond = colors[Math.floor(Math.random() * colors.length)];
   }

   //

   var objTo = document.getElementById("container");
   var iDiv = document.createElement("div");
   var iParagraph = document.createElement("p");
   var iParagraph2 = document.createElement("p");
   var divNumber = document.createTextNode(i + 1);
   var colorCodes = document.createTextNode(
      randomColor + " →  " + randomColorSecond
   );
   

   iDiv.className = "card";
   iParagraph2.className = "color-code";
   iParagraph.className = "number";
   // Special Numbers  //

   if (i + 1 === 69) {
      var colorCodes = document.createTextNode("Lyon💙");
      var randomColor = "red";
      var randomColorSecond = "blue";
   }
   
   var randomGradient =
      "radial-gradient(" +
      "farthest-corner at 0px 100%, " +
      randomColor +
      " 0%, " +
      randomColorSecond +
      " 100%)";

   objTo.appendChild(iDiv);
   iDiv.appendChild(iParagraph);
   iDiv.appendChild(iParagraph2);

   iParagraph.append(divNumber);
   iParagraph2.append(colorCodes);

   iDiv.style.background = randomGradient;

   // animation //
   var delayCardAnimation = i * 250 + "ms";
   var cardAnimation = "card-animation 10s linear " + delayCardAnimation + " infinite";
   
   console.log(cardAnimation)
   iParagraph.style.animation = cardAnimation;
   
   
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js