كيف - بطاقة المنتج
تعرف على كيفية إنشاء بطاقة منتج باستخدام CSS.
جينز مفصل
19.99 دولارًا
بعض النصوص عن الجينز. بنطلون جينز فائق النحافة ومريح للإفطار. تحقق من بنطال الإفطار Jeamsun الدينيم.
كيفية إنشاء بطاقة منتج
الخطوة 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) أضف CSS:
مثال
.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;
}