پیشنمایش زنده
کد HTML
<div class="card">
<div class="card-wrapper">
<div class="card-icon">
<div class="icon-cart-box">
<svg
viewBox="0 0 512 512"
width="20"
height="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.6 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0zm0 66.8V444.8C394 378 431.1 230.1 432 141.4L256 66.8l0 0z"
fill="#ffffff"
></path>
</svg>
</div>
</div>
<div class="card-content">
<div class="card-title-wrapper">
<span class="card-title">Privacy</span>
<span class="card-action">
<svg
xmlns="http://www.w3.org/2000/svg"
height="15"
width="15"
viewBox="0 0 384 512"
>
<path
d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
></path>
</svg>
</span>
</div>
<div class="card-text">
This website requires cookies to provide all of it's features. Please
enable your browser cookies.
</div>
<button type="button" class="btn-accept">Accept</button>
</div>
</div>
</div>
کد CSS
.card {
width: 400px;
height: auto;
background: #f9f9f9;
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.1);
margin: 20px;
padding: 0 10px;
}
.card-wrapper {
display: inline-flex;
flex-wrap: nowrap;
align-items: center;
width: 100%;
}
.card-icon {
width: 20%;
}
.card-icon .icon-cart-box {
background-color: #2196f3;
width: 3em;
height: 3em;
border-radius: 50%;
text-align: center;
padding: 15px 0px;
margin: 0 auto;
}
.card-content {
width: 80%;
}
.card-title-wrapper {
display: inline-flex;
flex-wrap: nowrap;
align-items: baseline;
width: 100%;
}
.card-title {
width: 95%;
font-size: 1em;
font-weight: 600;
color: #333;
padding: 20px 0 0 10px;
}
.card-action {
width: 5%;
text-align: right;
padding: 0 20px;
}
.card-action svg {
cursor: pointer;
fill: rgba(0, 0, 0, 0.2);
transition: 0.3s ease-in-out;
}
.card-action svg:hover {
fill: rgba(0, 0, 0, 0.6);
}
.card-text {
font-size: 0.8em;
color: #757575;
padding: 10px 0 10px 10px;
}
.product-price {
font-size: 0.9em;
font-weight: 600;
color: #333;
padding: 0 0 10px 10px;
}
.btn-accept {
font-size: 0.7em;
font-weight: 600;
padding: 5px 10px;
margin: 5px 10px 20px;
border-radius: 15px;
color: #2196f3;
border: 1px solid #e3f2fd;
background-color: #e3f2fd;
box-shadow: none;
text-transform: uppercase;
cursor: pointer;
transition: 0.4s ease-in-out;
}
.btn-accept:hover,
.btn-accept:active,
.btn-accept:focus {
color: #2196f3;
background-color: #e3f2fd;
border: 1px solid #2196f3;
}