تصميم قالب موقع الكتروني
تفاصيل العمل
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>Brand Name | حلول تسويقية</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f5f5f5;
direction: rtl;
}
header {
background: linear-gradient(135deg, #111, #333);
color: white;
padding: 60px 20px;
text-align: center;
}
header h1 {
margin-bottom: 10px;
font-size: 36px;
}
header p {
font-size: 18px;
opacity: 0.9;
}
section {
padding: 50px 20px;
max-width: 1100px;
margin: auto;
}
.services {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.box {
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
text-align: center;
}
.box h3 {
margin-bottom: 10px;
}
.cta {
background: #111;
color: white;
text-align: center;
padding: 50px 20px;
}
.cta a {
display: inline-block;
margin-top: 15px;
padding: 12px 30px;
background: #ff4d4d;
color: white;
text-decoration: none;
border-radius: 6px;
}
footer {
background: #222;
color: #aaa;
text-align: center;
padding: 15px;
font-size: 14px;
}
</style>
</head>
<body>
<header>
<h1>Brand Name</h1>
<p>نقدّم حلول تسويقية ومحتوى إعلاني يساعدك على النمو</p>
</header>
<section>
<h2 style="text-align:center;">خدماتنا</h2>
<div class="services">
<div class="box">
<h3>فيديوهات إعلانية</h3>
<p>مونتاج فيديوهات قصيرة مخصصة للسوشيال ميديا.</p>
</div>
<div class="box">
<h3>تصميم صفحات هبوط</h3>
<p>صفحات بسيطة وسريعة لزيادة التحويلات.</p>
</div>
<div class="box">
<h3>إدارة محتوى</h3>
<p>تنظيم ونشر محتوى احترافي للعلامات التجارية.</p>
</div>
</div>
</section>
<div class="cta">
<h2>ابدأ مشروعك معنا الآن</h2>
<p>تواصل معنا للحصول على عرض مناسب</p>
<a href="#">تواصل معنا</a>
</div>
<footer>
© 2026 Brand Name – جميع الحقوق محفوظة
</footer>
</body>
</html>