پیشنمایش زنده
کد HTML
<div class="card">
<div class="image">
<svg xml:space="preserve" viewBox="0 0 512.108 512.108" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1" width="800px" height="800px">
<g transform="translate(-1)">
<path d="M12.937,280.484c0,0-22.449,14.292-4.078,36.749c0,0-37.941,44.341,52.904,53.53
c0,0,28.584-24.497,40.828,8.165c0,0,56.311-7.601,94.076-24.956c0,0,30.623-11.229,40.828,0
c10.214,11.229,72.925,45.162,85.937,8.245c0,0,18.238-6.012,24.497,12.253c0,0,35.31,15.943,48.799-12.332l12.244-4.078
c0,0,31.258,25.044,44.526-7.618l12.253-8.166l8.554-0.556c0,0,59.639-25.565,31.047-77.621c0,0-12.235,22.449-20.409,28.575
c0,0-73.242,83.421-276.03,12.306c0,0-40.819-16.419-130.639-5.535C78.27,299.446,55.981,301.115,12.937,280.484" style="fill:#DEDEE1;"></path>
<path d="M12.946,280.484c42.417,20.418,65.324,18.962,65.324,18.962
c89.821-10.884,130.648,5.535,130.648,5.535c202.778,71.115,276.021-12.306,276.021-12.306
c8.174-6.126,20.409-28.575,20.409-28.575v-4.087c0,0-1.457-20.356-80.049-20.356c0,0-61.926,4.423-69.402-24.497
c0,0-10.893-5.102-12.253,4.087l-16.331-12.253c0,0-5.438-20.754-20.409-8.166l-12.253-8.166c0,0-2.719-14.627-16.331-8.166
c0,0-11.564-4.767-16.331-12.244c0,0-3.063-11.229-12.244-4.087c0,0-11.564,2.039-24.497-16.331
c-12.932-18.37-55.455-30.279-44.915,12.244c0,0-14.627,25.176-65.315,20.418c0,0-22.81-3.063-32.671-16.331
c-9.869-13.268-52.056-18.37-48.984,4.087c3.054,22.449-4.087,24.497-4.087,24.497s-28.513,36.396-16.331,81.655V280.484z" style="fill:#569E67;"></path>
<g>
<path d="M224.731,208.14c-2.26,0-4.52-0.865-6.241-2.586c-3.452-3.452-3.452-9.031,0-12.482l34.154-34.154
c3.452-3.452,9.039-3.452,12.482,0c3.452,3.443,3.452,9.031,0,12.482l-34.154,34.154
C229.25,207.275,226.991,208.14,224.731,208.14" style="fill:#397949;"></path>
<path d="M258.369,227.471c-2.26,0-4.52-0.865-6.241-2.586c-3.452-3.443-3.452-9.031,0-12.482l33.766-33.774
c3.452-3.452,9.039-3.452,12.482,0c3.452,3.443,3.452,9.031,0,12.482l-33.766,33.774
C262.889,226.606,260.629,227.471,258.369,227.471" style="fill:#397949;"></path>
<path d="M290.455,239.519c-2.26,0-4.52-0.865-6.241-2.586c-3.452-3.452-3.452-9.031,0-12.482l32.371-32.371
c3.452-3.452,9.031-3.452,12.482,0c3.452,3.452,3.452,9.031,0,12.482l-32.371,32.371
C294.974,238.654,292.715,239.519,290.455,239.519" style="fill:#397949;"></path>
<path d="M186.49,237.588c0,14.627-27.674,26.483-61.793,26.483c-34.127,0-61.793-11.855-61.793-26.483
c0-14.627,27.666-26.483,61.793-26.483C158.815,211.105,186.49,222.96,186.49,237.588" style="fill:#397949;"></path>
</g>
<path d="M133.524,246.415h-17.655c-4.882,0-8.828-3.955-8.828-8.828c0-4.873,3.946-8.828,8.828-8.828h17.655
c4.882,0,8.828,3.955,8.828,8.828C142.352,242.461,138.406,246.415,133.524,246.415" style="fill:#569E67;"></path>
<path d="M425.3,239.657c0,0-29.493,2.101-50.22-6.109c-18.397,25.98-29.696,57.176-29.696,57.176
l-7.062,42.364c17.638,1.05,33.465,0.627,47.616-0.821c9.163-5.5,16.711-13.091,20.63-23.887
c5.473-15.033,35.761-46.91,64.83-65.457C460.151,240.972,445.224,239.657,425.3,239.657" style="fill:#397949;"></path>
</g>
</svg>
</div>
<div class="productTitle">
Nebula Ludis
</div>
<div class="cost">
$149.90
</div>
<div class="radio-inputs">
<label class="radio">
<input type="radio" name="radio" checked="">
<span class="name">B</span>
</label>
<label class="radio">
<input type="radio" name="radio">
<span class="name">D</span>
</label>
<label class="radio">
<input type="radio" name="radio">
<span class="name">2E</span>
</label>
<label class="radio">
<input type="radio" name="radio">
<span class="name">4E</span>
</label>
</div>
<button class="addtocart">Add to Cart</button>
</div>
کد CSS
.card {
width: 230px;
height: 340px;
background: #131313;
border: 2px solid #569E67;
border-radius: 40px;
}
.image {
background-color: #1f1f1fa3;
border-radius: 2.5em 2.5em 0em 0em;
width: 100%;
height: 37%;
padding: 2px;
}
.image svg {
width: 75%;
margin-top: -335px;
margin-left: 30px;
}
.productTitle {
text-align: center;
font-size: 22px;
font-weight: bold;
color: #569E67;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin-top: 10px;
}
.cost {
text-align: center;
margin-top: 10px;
font-weight: bold;
color: white;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.radio-inputs {
position: relative;
margin-top: 20px;
margin-left: 13px;
display: flex;
flex-wrap: wrap;
border-radius: 0.5rem;
background-color: #182b1c;
box-sizing: border-box;
box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
padding: 0.25rem;
width: 200px;
font-size: 14px;
}
.radio-inputs .radio {
flex: 1 1 auto;
text-align: center;
}
.radio-inputs .radio input {
display: none;
}
.radio-inputs .radio .name {
display: flex;
cursor: pointer;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
border: none;
padding: .5rem 0;
color: #fff;
transition: all .15s ease-in-out;
}
.radio-inputs .radio input:checked + .name {
background-color: #000;
color: #569E67;
font-weight: 600;
}
.addtocart {
width: 100%;
margin-top: 19px;
padding: 15px;
border: none;
border-top: 2px solid #569E67;
background-color: #131313;
color: #569E67;
font-weight: bold;
font-size: 15px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
border-radius: 0px 0px 38px 38px;
transition: 0.2s;
}
.addtocart:hover {
background-color: #569E67;
border-top: 2px solid transparent;
color: #111111;
}