这就是今天要实现的效果图（颜色提取推荐使用snipaste）
代码（仅供参考，不喜勿喷， 可以在评论区展示作品）
<html>
<head>
<script src="//at.alicdn.com/t/c/font_4930922_q7xa56cbs2b.js"></script>
<style>
/* Write your CSS code here */
body {
background-color: rgb(240, 137, 177);
display: flex;
}
.outer {
margin: auto;
width: 180px;
height: 340px;
background-color: white;
border-radius: 10px;
padding: 30px;
transition-property: all;
transition-duration: 1s;
}
.outer:hover {
transform: scale(1.1);
}
.title {
font-size: 15px;
margin-top: 0px;
}
.item1 {
height: 50px;
font-size: 10px;
display: flex;
padding-top: 5px;
padding-bottom: 5px;
box-sizing: border-box;
transition-property: all;
transition-duration: 1s;
border-radius: 5px;
}
.item1:hover {
transform: scale(1.1);
border: 1px solid skyblue;
cursor: pointer;
}
.icon {
width: 40px;
border-radius: 20px;
border: 1px solid black;
}
.content {
margin: 0px;
margin-left: 10px;
opacity: 0.8;
}
button {
margin-top: 20px;
width: 180px;
height: 45px;
color: white;
background-color: rgb(232, 109, 203);
background-image: linear-gradient(to right bottom, rgb(232, 109, 203), rgb(254, 105, 163));
border-color: transparent;
border-radius: 5px;
box-shadow: 0px 5px 10px 1px gray;
transition: all;
transition-duration: 1s;
}
button:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="outer">
<p class="title">24 birthdays today</p>
<div class="item1">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-user-full"></use>
</svg>
<p class="content">
<strong>Bertie Yates</strong>
<br>
29 years
</p>
</div>
<div class="item1">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-user-full"></use>
</svg>
<p class="content">
<strong>Bertie Yates</strong>
<br>
29 years
</p>
</div>
<div class="item1">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-user-full"></use>
</svg>
<p class="content">
<strong>Bertie Yates</strong>
<br>
29 years
</p>
</div>
<div class="item1">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-user-full"></use>
</svg>
<p class="content">
<strong>Bertie Yates</strong>
<br>
29 years
</p>
</div>
<div class="item1">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-user-full"></use>
</svg>
<p class="content">
<strong>Bertie Yates</strong>
<br>
29 years
</p>
</div>
<button>View all</button>
</div>
</body>
</html>