<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحة الخدمات</title>
<style>
.container {
max-width: 1200px;
margin: auto;
padding: 20px;
}
.row {
display: flex;
margin-bottom: 20px;
}
.col-50 {
flex: 50%; /* تحديد العرض بنسبة 50% */
}
.col-100 {
flex: 100%; /* تحديد العرض بنسبة 100% */
}
img {
max-width: 100%; /* تأكيد أن الصورة لا تتجاوز عرض العمود */
height: auto; /* الحفاظ على نسب الصورة */
}
.contact-form {
padding: 20px;
background-color: #f8f8f8; /* لون خلفية فاتح */
text-align: center; /* محاذاة النص للوسط */
border: 1px solid #ccc; /* إضافة حدود للفورم */
}
</style>
</head>
<body>
<div class="container">
<!-- الصف الأول -->
<div class="row">
<div class="col-50">
<h2>مقدمة عن الخدمة</h2>
<p>هنا يمكن وضع نص مقدمة عن الخدمة التي تقدمها الشركة.</p>
</div>
<div class="col-50">
<img src="path_to_your_image.jpg" alt="صورة توضيحية">
</div>
</div>
<!-- الصف الثاني -->
<div class="row">
<div class="col-100">
<h2>تفاصيل الخدمة</h2>
<p>هنا يمكن وضع نص تفصيلي عن الخدمة، بما في ذلك مزاياها، كيفية تقديمها، وأي معلومات مهمة أخرى ترغب بمشاركتها مع العملاء.</p>
</div>
</div>
<!-- الصف الثالث -->
<div class="row">
<div class="col-100 contact-form">
<h2>تواصل معنا لطلب الخدمة</h2>
<p>يمكنك التواصل معنا عبر الطرق التالية:</p>
<p>الهاتف: 1234567890</p>
<p>البريد الإلكتروني: info@yourcompany.com</p>
</div>
</div>
</div>
</body>
</html>
