پیشنمایش زنده
کد HTML
<div class="card">
<div class="image">
<svg xml:space="preserve" viewBox="0 0 456 456" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Capa_1" version="1.1">
<g>
<path d="M8,230.627v56h66.918C69.232,254.838,41.4,230.627,8,230.627z" style="fill:#ac646b;"></path>
<path d="M83.044,286.627H448v-2.542c0-7.779-5.595-14.431-13.259-15.763L264,238.627l-15.181-15.181
c-0.228,0.227-0.476,0.438-0.764,0.611l-24.061,14.437c0.001,0.045,0.007,0.089,0.007,0.134c0,4.418-3.582,8-8,8s-8-3.582-8-8
s3.582-8,8-8c1.41,0,2.733,0.368,3.883,1.008l23.203-13.922l-10.336-10.336c-0.275,0.323-0.592,0.617-0.976,0.848l-23.78,14.269
c0.001,0.045,0.007,0.088,0.007,0.134c0,4.418-3.582,8-8,8s-8-3.582-8-8s3.582-8,8-8c1.41,0,2.732,0.368,3.883,1.008l23.203-13.922
l-10.231-10.231c-0.193,0.175-0.404,0.334-0.636,0.473l-24.226,14.538c0.001,0.045,0.007,0.089,0.007,0.134c0,4.418-3.582,8-8,8
s-8-3.582-8-8s3.582-8,8-8c1.41,0,2.732,0.367,3.882,1.008l23.202-13.924l-10.334-10.334c-0.275,0.323-0.592,0.617-0.976,0.848
l-23.78,14.269c0.001,0.045,0.007,0.088,0.007,0.134c0,4.418-3.582,8-8,8s-8-3.582-8-8s3.582-8,8-8c1.41,0,2.732,0.368,3.883,1.008
l23.203-13.922L176,150.627l-19.314-19.314c-2.588-2.588-6.784-2.588-9.373,0c-6.248,6.248-6.248,16.379,0,22.627l2.84,2.84
L20.294,187.7C13.087,189.416,8,195.856,8,203.265v19.362C45.823,222.627,77.272,250.404,83.044,286.627z" style="fill:#ac646b;"></path>
<path d="M448,286.627H83.044c-5.772-36.224-37.221-64-75.044-64v8c33.4,0,61.232,24.21,66.918,56H8
c-4.418,0-8,3.582-8,8v24c0,4.418,3.582,8,8,8h8h104h16c4.418,0,8-3.582,8-8c0-4.222,3.74-7.466,7.92-6.869l81.567,11.652
c14.99,2.142,30.113,3.216,45.255,3.216H448c4.418,0,8-3.582,8-8v-24C456,290.209,452.418,286.627,448,286.627z" style="fill:#55323C;"></path>
<path d="M168,194.627c-1.352,0-2.68-0.691-3.43-1.941c-1.141-1.895-0.523-4.352,1.375-5.488l5.937-3.563
c-1.15-0.64-2.473-1.008-3.883-1.008c-4.418,0-8,3.582-8,8s3.582,8,8,8s8-3.582,8-8c0-0.045-0.006-0.089-0.007-0.134l-5.938,3.563
C169.414,194.444,168.703,194.627,168,194.627z" style="fill:#7D5050;"></path>
<path d="M184,210.627c-1.352,0-2.68-0.691-3.43-1.941c-1.141-1.895-0.523-4.352,1.375-5.488l5.937-3.563
c-1.15-0.64-2.473-1.008-3.882-1.008c-4.418,0-8,3.582-8,8s3.582,8,8,8s8-3.582,8-8c0-0.045-0.006-0.089-0.007-0.134l-5.938,3.564
C185.414,210.444,184.703,210.627,184,210.627z" style="fill:#7D5050;"></path>
<path d="M200,226.627c-1.352,0-2.68-0.691-3.43-1.941c-1.141-1.895-0.523-4.352,1.375-5.488l5.937-3.563
c-1.15-0.64-2.473-1.008-3.883-1.008c-4.418,0-8,3.582-8,8s3.582,8,8,8s8-3.582,8-8c0-0.045-0.006-0.089-0.007-0.134l-5.938,3.563
C201.414,226.444,200.703,226.627,200,226.627z" style="fill:#7D5050;"></path>
<path d="M216,242.627c-1.352,0-2.68-0.691-3.43-1.941c-1.141-1.895-0.523-4.352,1.375-5.488l5.938-3.563
c-1.15-0.64-2.473-1.008-3.883-1.008c-4.418,0-8,3.582-8,8s3.582,8,8,8s8-3.582,8-8c0-0.045-0.006-0.089-0.007-0.134l-5.939,3.563
C217.414,242.444,216.703,242.627,216,242.627z" style="fill:#7D5050;"></path>
<path d="M171.883,183.635l-5.937,3.563c-1.898,1.137-2.516,3.594-1.375,5.488
c0.75,1.25,2.078,1.941,3.43,1.941c0.703,0,1.414-0.184,2.055-0.57l5.938-3.563l23.78-14.269c0.384-0.23,0.701-0.525,0.976-0.848
c1.085-1.271,1.308-3.13,0.399-4.641c-1.133-1.895-3.609-2.492-5.484-1.371l-0.579,0.347L171.883,183.635z" style="fill:#55323C;"></path>
<path d="M187.882,199.635l-5.937,3.563c-1.898,1.137-2.516,3.594-1.375,5.488
c0.75,1.25,2.078,1.941,3.43,1.941c0.703,0,1.414-0.184,2.055-0.57l5.938-3.564l24.226-14.538c0.232-0.139,0.443-0.299,0.636-0.473
c1.385-1.256,1.74-3.352,0.739-5.015c-1.133-1.902-3.609-2.492-5.484-1.371l-1.025,0.615L187.882,199.635z" style="fill:#55323C;"></path>
<path d="M203.883,215.635l-5.937,3.563c-1.898,1.137-2.516,3.594-1.375,5.488
c0.75,1.25,2.078,1.941,3.43,1.941c0.703,0,1.414-0.184,2.055-0.57l5.938-3.563l23.78-14.269c0.384-0.23,0.701-0.525,0.976-0.848
c1.085-1.271,1.308-3.13,0.399-4.641c-1.141-1.898-3.602-2.496-5.484-1.371l-0.579,0.347L203.883,215.635z" style="fill:#55323C;"></path>
<path d="M219.883,231.635l-5.938,3.563c-1.898,1.137-2.516,3.594-1.375,5.488
c0.75,1.25,2.078,1.941,3.43,1.941c0.703,0,1.414-0.184,2.055-0.57l5.939-3.563l24.061-14.437c0.288-0.173,0.537-0.384,0.764-0.611
c1.271-1.267,1.578-3.271,0.611-4.877c-1.141-1.898-3.609-2.496-5.484-1.371l-0.859,0.516L219.883,231.635z" style="fill:#55323C;"></path>
</g>
</svg>
</div>
<div class="productTitle">
Nimbus Formale
</div>
<div class="cost">
$60.99
</div>
<div class="radio-inputs">
<label class="radio">
<input checked="" name="radio" type="radio">
<span class="name">B</span>
</label>
<label class="radio">
<input name="radio" type="radio">
<span class="name">D</span>
</label>
<label class="radio">
<input name="radio" type="radio">
<span class="name">2E</span>
</label>
<label class="radio">
<input name="radio" type="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 #bb6c74;
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: -25px;
margin-left: 30px;
}
.productTitle {
text-align: center;
font-size: 22px;
font-weight: bold;
color: #bb6c74;
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: #1c1c1c;
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;
font-weight: 600;
cursor: pointer;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
border: none;
padding: .5rem 0;
color: #bb6c74;
transition: all .15s ease-in-out;
}
.radio-inputs .radio input:checked + .name {
background-color: #000;
color: #fff;
font-weight: 600;
}
.addtocart {
width: 100%;
margin-top: 19px;
padding: 15px;
border: none;
border-top: 2px solid #bb6c74;
background-color: #131313;
color: #bb6c74;
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: #bb6c74;
border-top: 2px solid transparent;
color: #111111;
}