<div class="container">
<div class="card">
<div class="card-header">
<h4>🎂 24 birthdays toady</h4>
</div>
<div class="card-body">
<ul class="list-unstyled pl-0">
<li class="birthday-item">
<img src="https://randomuser.me/api/portraits/women/78.jpg" height="36" class="rounded-circle border shadow">
<p class="d-inline-block pl-1">Sylvia Black<br><small class="text-grey">29 Years</small></p>
</li>
<li class="birthday-item">
<img src="https://randomuser.me/api/portraits/men/8.jpg" height="36" class="rounded-circle border shadow">
<p class="d-inline-block pl-1">Roger Armstrong<br><small class="text-grey">32 Years</small></p>
</li>
<li class="birthday-item">
<img src="https://randomuser.me/api/portraits/women/39.jpg" height="36" class="rounded-circle border shadow">
<p class="d-inline-block pl-1">Florence Barnett<br><small class="text-grey">36 Years</small></p>
</li>
<li class="birthday-item">
<img src="https://randomuser.me/api/portraits/men/53.jpg" height="36" class="rounded-circle border shadow">
<p class="d-inline-block pl-1">Dwayne Peck<br><small class="text-grey">34 Years</small></p>
</li>
<li class="birthday-item">
<img src="https://randomuser.me/api/portraits/women/57.jpg" height="36" class="rounded-circle border shadow">
<p class="d-inline-block pl-1">Ethel Hale<br><small class="text-grey">29 Years</small></p>
</li>
</ul>
</div>
<div class="card-button">
<button>View All</button>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body{
height: 100%;
background-color: #F48FB1;
font-family: 'Poppins', sans-serif;
}
p {
font-size: 14px;
margin-top: 4px;
margin-bottom: 4px;
}
h4 {
margin-top: 6px;
margin-bottom: 6px;
}
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 500px;
}
.card {
background-color: #FFFFFF;
border-radius: 4px;
box-shadow: 40px 40px 15px 0 rgba(0,0,0,0.125);
padding: 16px 32px;
min-width: 250px;
transition: box-shadow 0.25s ease-in-out;
&:hover {
box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.125);
}
}
.list-unstyled {
list-style: none;
}
.rounded-circle {
border-radius: 50%;
}
.border {
border: 1px solid #ccc;
}
.shadow {
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
.pl-0 {
padding-left: 0;
}
.d-inline-block {
display: inline-block;
}
.pl-1 {
padding-left: 4px;
}
.text-grey {
color: #8f8f8f;
}
.card-button{
button {
width: 100%;
padding: 10px;
color: #FFFFFF;
background-image: linear-gradient(135deg, #C51162, #FF4081);
border: none;
font-size: 14px;
font-family: 'Poppins', sans-serif;
border-radius: 4px;
box-shadow: 0 4px 5px 0 #F06292;
cursor: pointer;
transition: box-shadow 0.125s ease-in-out;
&:hover {
box-shadow: 0 0 5px 0 #F06292;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.