پیشنمایش زنده
کد HTML
<a class="card" href="">
<div class="containers">
<div class="icon-circle">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 28 29"
height="29"
width="28"
>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="1.5"
stroke="#23C55E"
d="M23.7222 9.04435V6.71102C23.7222 5.42235 22.6775 4.37769 21.3888 4.37769L6.61106 4.37769C5.32239 4.37769 4.27773 5.42235 4.27773 6.71102V9.04435C4.27773 10.333 5.32239 11.3777 6.61106 11.3777H21.3888C22.6775 11.3777 23.7222 10.333 23.7222 9.04435Z"
></path>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="1.5"
stroke="#23C55E"
d="M23.7222 21.4888V19.1555C23.7222 17.8668 22.6775 16.8221 21.3888 16.8221H15.9444C14.6557 16.8221 13.6111 17.8668 13.6111 19.1555V21.4888C13.6111 22.7775 14.6557 23.8221 15.9444 23.8221H21.3888C22.6775 23.8221 23.7222 22.7775 23.7222 21.4888Z"
></path>
</svg>
</div>
<div class="title mb-3">Easy For Everyoness</div>
<div class="subtitle">
Every year, we award travelers’ favorite destinations, hotels,
restaurants, and things to do around the world.
</div>
<div class="btnRound btnService">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 19 18"
height="18"
width="19"
>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="1.5"
stroke="#23C55E"
d="M3.51141 2.78405L14.9344 6.95805C15.4154 7.13405 15.4014 7.81905 14.9134 7.97605L9.68541 9.64905L8.01241 14.8771C7.85641 15.3651 7.17041 15.3791 6.99441 14.8981L2.82141 3.47405C2.66441 3.04405 3.08141 2.62705 3.51141 2.78405Z"
></path>
</svg>
</div>
</div>
</a>
کد CSS
.card {
position: relative;
display: flex;
max-width: 500px;
padding: 42px 32px;
flex-direction: column;
align-items: flex-start;
border-radius: 30px;
border: 2px solid #f8f9fd;
background: #fff;
transition: 1s all;
text-decoration: none;
}
.title {
color: #072713;
text-align: center;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: 35.196px;
transition: 0.4s all;
}
.subtitle {
color: #7e8882;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
transition: 0.4s all;
}
.icon-circle {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: #e5f6eb;
}
.card:hover {
background: #23c55e;
transition: 0.4s all;
}
.card:hover .title,
.card:hover .subtitle {
color: #fff;
transition: 0.4s all;
}
.btnRound {
display: inline-flex;
justify-content: center;
align-items: center;
height: 30px;
padding: 6px 28px;
border-radius: 100px;
border: 1px solid #23c55e;
background: #fff;
transition: all 0.2s ease;
}
.btnRound:hover {
box-shadow: 0px 6px 10px 0px rgba(35, 197, 94, 0.2);
transition: all 0.2s ease;
}
.btnService {
position: absolute;
bottom: -30px;
left: 50%;
transform: translate(-50%, -50%);
}