.wrapper.shine
  h2 Coming soon
  .container   
    .card
    .card
    .card
    .card
    .card
  h2 Best sellers
  .container
    .card
    .card
    .card
    .card
    .card
  h2 Recommended
  .container
    .card
    .card
    .card
    .card
    .card
    .card
    .card
    .card
    .card
    .card
View Compiled
// Fonts
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

// Style
body{
  background: #dedede;
}

.wrapper{
  width: 900px;
  max-width: 95%;
  margin: 55px auto;
  h2{
    color: white;
    letter-spacing: 1px;
    margin: 10px 0 5px 10px;
    font-family: 'Roboto', sans-serif;
  }
  .container{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    .card{
      margin: 10px;
      width: 160px;
      height: 90px;
      border-radius: 3px;
      background-image: linear-gradient(90deg, #e2e2e2 0px, #efefef 30px, #e2e2e2 60px);
      background-size: calc(160px + 160px);
      animation: refresh 1.2s infinite ease-out;
    }
  }
}

@keyframes refresh {
  0% {
    background-position: calc(-160px);
  }
  60%, 100% {
    background-position: 160px;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.