.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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.