कैसे करें - उत्पाद कार्ड
CSS के साथ उत्पाद कार्ड बनाने का तरीका जानें।
सिलवाया जीन्स
$19.99
जींस के बारे में कुछ पाठ। सुपर स्लिम और कम्फर्टेबल ब्रेकफास्ट जींस। जेमसन डेनिम ब्रेकफास्ट जींस देखें।
उत्पाद कार्ड कैसे बनाएं
चरण 1) HTML जोड़ें:
उदाहरण
<div class="card">
<img src="jeans3.jpg" alt="Denim Jeans"
style="width:100%">
<h1>Tailored Jeans</h1>
<p
class="price">$19.99</p>
<p>Some text about the jeans..</p>
<p><button>Add to Cart</button></p>
</div>
चरण 2) सीएसएस जोड़ें:
उदाहरण
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}
.price
{
color: grey;
font-size: 22px;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color:
white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}