/* تغيير لون الخلفية */
body {
background-color: #f9f9f9; /* لون خلفية ناعم */
color: #2c3e50; /* لون النص الأساسي */
font-family: 'Poppins', sans-serif; /* خط عصري */
margin: 0;
padding: 0;
}
/* تخصيص العناوين */
h1, h2, h3 {
color: #34495e; /* لون أزرق داكن */
font-family: 'Arial', sans-serif;
margin-bottom: 15px;
text-transform: capitalize; /* أول حرف كبير */
letter-spacing: 1px; /* تباعد بسيط بين الأحرف */
}
/* تخصيص الروابط */
a {
color: #ff7e5f; /* لون برتقالي جذاب */
text-decoration: none;
transition: color 0.3s ease-in-out;
}
a:hover {
color: #e74c3c; /* لون أحمر عند التمرير */
}
/* تخصيص الأزرار */
.button-buy {
background-color: #ff5722; /* لون برتقالي زاهي */
color: #fff; /* نص أبيض */
padding: 10px 20px;
border-radius: 5px; /* حواف مستديرة */
border: none;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.button-buy:hover {
background-color: #e64a19; /* لون داكن عند التمرير */
}
/* تخصيص الصور */
img {
max-width: 100%;
border-radius: 10px; /* زوايا مستديرة */
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1); /* ظل ناعم */
transition: transform 0.3s ease-in-out;
img {
max-width: 100%; /* يجعل الصورة تتكيف مع عرض الحاوية */
border-radius: 10px;
}
}
img:hover {
transform: scale(1.05); /* تكبير بسيط عند التمرير */
}
/* تخصيص الحاويات */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #fff; /* خلفية بيضاء */
border-radius: 10px;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1); /* ظل خفيف */
}
>