_____________________________________________________________________________________
الاكود✔️🎯
_____________________________________________________________________________________
html :
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تجارة القطن</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<h1>شركة القطن الطبيعي</h1>
<nav>
<ul>
<li><a href="#home">الرئيسية</a></li>
<li><a href="#products">منتجاتنا</a></li>
<li><a href="#contact">تواصل معنا</a></li>
</ul>
</nav>
</div>
</header>
<section id="home" class="hero">
<div class="container">
<h2>أفضل أنواع القطن الطبيعي بأعلى جودة</h2>
<p>نقدم لكم منتجات قطنية تلبي احتياجاتكم المختلفة بأسعار تنافسية.</p>
<a href="#products" class="btn">تصفح المنتجات</a>
</div>
</section>
<section id="products" class="products">
<div class="container">
<h2>منتجاتنا</h2>
<div class="product-list">
<div class="product">
<h3>قطن خام</h3>
<p>قطن عالي الجودة يناسب جميع الاستخدامات الصناعية والمنزلية.</p>
<button onclick="addToCart('قطن خام')">أضف إلى السلة</button>
</div>
<div class="product">
<h3>أقمشة قطنية</h3>
<p>أقمشة ناعمة ومريحة لجميع أنواع الملابس والمفروشات.</p>
<button onclick="addToCart('أقمشة قطنية')">أضف إلى السلة</button>
</div>
<div class="product">
<h3>وسائد قطنية</h3>
<p>وسائد مريحة مصنوعة من القطن الطبيعي لضمان نوم هادئ.</p>
<button onclick="addToCart('وسائد قطنية')">أضف إلى السلة</button>
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<h2>تواصل معنا</h2>
<form id="contactForm">
<label for="name">الاسم</label>
<input type="text" id="name" name="name" required>
<label for="email">البريد الإلكتروني</label>
<input type="email" id="email" name="email" required>
<label for="message">الرسالة</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">إرسال</button>
</form>
</div>
</section>
<footer>
<div class="container">
<p>© 2025 شركة القطن الطبيعي. جميع الحقوق محفوظة.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
_________________________________________________________________________________
css:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
background-color: #f9f9f9;
}
header {
background: #4CAF50;
color: #fff;
padding: 10px 0;
}
header h1 {
text-align: center;
margin: 0;
}
nav ul {
list-style: none;
text-align: center;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
.hero {
background: #e8f5e9;
text-align: center;
padding: 50px 20px;
}
.hero .btn {
background: #4CAF50;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
}
.products {
padding: 20px;
text-align: center;
}
.product-list {
display: flex;
justify-content: center;
gap: 20px;
}
.product {
background: #fff;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
width: 250px;
}
.product button {
background: #4CAF50;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.contact {
background: #f1f1f1;
padding: 20px;
}
form label {
display: block;
margin: 10px 0 5px;
}
form input, form textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
form button {
background: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
___________________________________________________________________________________
شرح الكود او الموقع:
موقع تجارة القطن الذي تم تصميمه يحتوي على العديد من المميزات التي تجعله جذابًا وعمليًا، ومنها:
1. واجهة مستخدم بسيطة وسهلة الاستخدام
تصميم بسيط ومنظم يسهل التنقل بين الأقسام المختلفة.
ترتيب واضح للأقسام: الرئيسية، المنتجات، والتواصل.
2. تجربة مستخدم ممتازة
زر "أضف إلى السلة" لكل منتج يعزز التفاعل مع الزائر.
إشعارات فورية عند إضافة المنتجات إلى السلة أو إرسال نموذج الاتصال.
3. تصميم متجاوب (Responsive Design)
الموقع متوافق مع جميع الأجهزة (كمبيوتر، هاتف، جهاز لوحي).
استخدام تصميم متجاوب يجعل الموقع يبدو جيدًا على الشاشات المختلفة.
4. عرض المنتجات
قسم مخصص لعرض المنتجات مع وصف موجز لكل منتج.
تنوع المنتجات (قطن خام، أقمشة قطنية، وسائد قطنية) لجذب فئات مختلفة من العملاء.
5. نموذج تواصل فعّال
نموذج تواصل بسيط يسمح للمستخدمين بإرسال استفساراتهم مباشرة.
الحقول تشمل الاسم، البريد الإلكتروني، والرسالة لضمان تواصل احترافي.
6. تجربة بصرية جذابة
ألوان هادئة ومريحة (أخضر وأبيض) تتناسب مع فكرة القطن الطبيعي.
تصميم عصري باستخدام عناصر CSS لجعل الموقع جذابًا.
7. توافق مع جميع المتصفحات
الموقع مكتوب بلغة HTML وCSS وJavaScript، وهي مدعومة في جميع المتصفحات الحديثة.
8. إمكانية التوسع مستقبلاً
يمكن إضافة مزايا جديدة بسهولة، مثل:
نظام تسجيل دخول المستخدمين.
سلة تسوق متكاملة.
بوابة دفع إلكتروني.
9. دعم اللغة العربية
الموقع مكتوب بالكامل باللغة العربية وباتجاه مناسب (من اليمين إلى اليسار)، مما يجعله مناسبًا للمستخدمين في الدول العربية.
10. سهولة التخصيص
إمكانية تعديل النصوص أو التصميم أو إضافة منتجات جديدة بسهولة من خلال الأكواد.
ملاحظات إضافية:
___________________________________________________________________________________
صور الموقع
___________________________________________________________________________________