这就是今天要实现的效果图（颜色提取推荐使用snipaste）
代码（仅供参考，不喜勿喷， 可以在评论区展示作品）
<html><head><style>/* Write your CSS code here */@font-face {font-family: 'iconfont';/* Project id 4930922 */src: url('//at.alicdn.com/t/c/font_4930922_zjx4lgsxzjj.woff2?t=1748064330130') format('woff2'),url('//at.alicdn.com/t/c/font_4930922_zjx4lgsxzjj.woff?t=1748064330130') format('woff'),url('//at.alicdn.com/t/c/font_4930922_zjx4lgsxzjj.ttf?t=1748064330130') format('truetype');}body {background-color: rgb(239, 240, 243);display: flex;}.card {margin: auto;width: 355px;height: 375px;background-color: white;border-top-left-radius: 5px;border-top-right-radius: 20px;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;box-shadow: 0px 0px 20px 10px rgb(223, 226, 233);position: relative;}.ico-close {font-family: iconfont;position: absolute;top: 10px;right: 10px;cursor: pointer;border-radius: 50%;line-height: 40px;width: 40px;height: 40px;text-align: center;text-shadow: 0px 0px 40px;font-style: normal;display: block;}.ico-close:hover {background-color: gray;}.ico-close:active {background-color: skyblue;}.merry-tree {font-family: 'iconfont';font-style: normal;font-size: 40px;text-align: center;position: absolute;top: 60px;left: 160px;}.title {display: inline-block;width: 100%;color: rgb(40, 49, 79);text-align: center;position: absolute;top: 120px;}.text1 {font-size: 10px;font-weight: bold;text-align: center;color: rgb(91, 98, 121);position: absolute;top: 150px;width: 100%;}.text2 {color: orange;text-align: center;font-size: 12px;width: 100%;position: absolute;top: 200px;}.btn {width: 180px;height: 46px;border-radius: 5px;color: white;background-color: rgb(36, 46, 76);position: absolute;top: 260px;left: 86px;transition: all;transition-duration: 1s;}.btn:hover {background-color: skyblue;}.btn:active {background-color: deepskyblue}</style></head><body><div class="card"><i class="ico-close"></i><i class="merry-tree"></i><strong class="title">Merry Christmas !</strong><p class="text1">You completed all your December's tasks<br>so we decided to get you a gift:</p><p class="text2">50% off on your Yearly Premium Plan</p><button class="btn">GET YOUR GIFT</button></div></body></html>
