Apple App center Card

apple-app-center-card.markdown

Apple App center Card

See the post about how I built this -https://link.medium.com/eUbtYTRdr5

A Pen by Studiodews on CodePen.

License.

index.html

<div class="Outerview">
  <div class="title-section">
    <p class="sub-heading">
      Limited time event
    </p>
    <p class="main-heading">
      Don't miss these gaming events
    </p>
  </div>
  <div class="icon-section">
  </div>
</div>

<i title="Switch Theme" class="fas fa-sun switch" onclick="handleThemeSwitch()"> Switch Theme</i>

<!-- <div class="icon-holder">
<img class="icon" src="https://source.unsplash.com/640x480/?nature?sig=123">
<img class="icon" src="https://source.unsplash.com/640x480/?nature?sig=1234">
<img class="icon" src="https://source.unsplash.com/640x480/?nature?sig=234">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature?sig=123">
<img class="icon" src="https://source.unsplash.com/640x480/?nature?sig=1234">
<img class="icon" src="https://source.unsplash.com/640x480/?nature?sig=234">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
</div>
<div class="icon-holder">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
</div>
<div class="icon-holder">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
<img class="icon" src="https://source.unsplash.com/640x480/?nature">
</div> -->

script.js

for (var i = 0; i < 3; i++) {
  var div = document.createElement("div");
  div.setAttribute("class", "icon-holder");
  setTimeout(function () {}, 1000);
  for (var j = 0; j < 15; j++) {
    var randomNumber = Math.floor(Math.random() * 100);
    var imageSrc = `https://loremflickr.com/640/480/nature,mountain,river,tree?random=${randomNumber}`;
    /**
     * `https://source.unsplash.com/random?mountain?sig=${randomNumber}`
     */
    var img = document.createElement("img");
    img.setAttribute("class", "icon");
    img.setAttribute("src", imageSrc);
    div.appendChild(img);
  }

  var innerview = document.getElementsByClassName("icon-section")[0];
  innerview.appendChild(div);
}

var currentTheme = false; // false = "dark"; true = "light"
function handleThemeSwitch() {
  currentTheme = !currentTheme;
  if (currentTheme) {
    document.body.style.backgroundColor = "rgba(255, 255, 255,0.9)";
    document.body.style.color = "#000";
    document.getElementsByClassName("Outerview")[0].style.backgroundColor =
      "#fff";
    document.getElementsByClassName("sub-heading")[0].style.color =
      "rgba(0,0,0, 0.4)";
  } else if (!currentTheme) {
    document.body.style.backgroundColor = "#000";
    document.body.style.color = "#fff";
    document.getElementsByClassName("Outerview")[0].style.backgroundColor =
      "rgba(100,100,100, 0.3)";
    document.getElementsByClassName("sub-heading")[0].style.color =
      "rgba(255, 255, 255, 0.6)";
  }
}

style.css

* {
  padding: 0;
  margin: 0;
  display: border-box;
}

html,
body {
  background-color: #000;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  color: #fff;
  transition: background-color 1s ease;
}

.Outerview {
  height: 375px;
  width: 350px;
  background: rgba(100,100,100, 0.3);
  display: flex;
  align-items: left;
  flex-direction: column;
  overflow: hidden;
  border-radius: 10px;
    -webkit-box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin: 10px;
    transition: background-color 1s ease;
}

.sub-heading {
  color: rgba(255, 255, 255, 0.6);
  text-align: left;
  padding: 15px 15px 5px 15px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 600;
}

.main-heading {
  text-align: left;
  padding: 5px 100px 5px 15px;
  font-size: 28px;
  font-weight: 600;
  text-transform: capitalize;
}

.icon-section div:first-child{
  margin-left: -10%;
}

.icon-section div:last-child{
  margin-left: -30%;
}

.icon-holder {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

.icon {
  border-radius: 15px;
  height: 75px;
  width: 75px;
  margin: 5px;
  position: relative;
  animation: slideShow 50s infinite;
  -webkit-box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.1);
box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.1);
  
}

@keyframes slideShow {
  from {left: 0%;}
  to {left: -50%;}
}

.switch{
  position: absolute;
  top: 10px;
  right: 10px;
  border-Radius: 3px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />