<div class="card">
<div class="image">
<img src="https://images.unsplash.com/photo-1642623883157-cd5b06ae6c45?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTA2MDIwMw&ixlib=rb-1.2.1&q=85" alt="">
</div>
<div class="content">
<h4>Coding</h4>
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, nisi! Nulla molestiae ab id hic? Eaque fugiat, dolor recusandae repellendus qui vitae voluptas quod corrupti illo cupiditate ratione minima sed.
</div>
</div>
</div>
<div class="card loading">
<div class="image">
</div>
<div class="content">
<h4></h4>
<div class="desc"></div>
</div>
</div>
:root {
--loading-grey: #ededed;
}
body {
background-color: #f6f6f6;
font-family: Helvetica;
font-size: 15px;
display: flex;
justify-content: space-evenly;
align-items: center;
min-height: 100vh;
}
.card {
width: 320px;
background-color: #fff;
border-radius: 6px;
overflow: hidden;
box-shadow: 0px 4px 6px rgba(0,0,0,0.12)
}
.image {
height: 200px;
}
.image img {
display: block;
width: 100%;
height: inherit;
object-fit: cover;
}
.content {
padding: 2rem 1.8rem;
}
h4 {
margin: 0 0 1rem;
font-size: 1.5rem;
line-hright: 1.5rem;
}
.desc {
font-size: 1rem;
line-height: 1.4rem;
}
.loading .image,
.loading h4,
.loading .desc {
background-color: var(--loading-grey);
background: linear-gradient(
100deg,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 60%
) var(--loading-grey);
background-size: 200% 100%;
background-position-x: 120%;
animation: 1s loading ease-in-out infinite;
}
@keyframes loading {
to {
background-position-x: -20%;
}
}
.loading h4 {
min-height: 1.6rem;
border-radius: 4px;
}
.loading .desc {
min-height: 4rem;
border-radius: 4px;
}
