إليك مشروعًا بسيطًا متكاملًا يستخدم HTML وCSS لإنشاء صفحة ويب جميلة. هذا المشروع سيكون عبارة عن "صفحة هبوط" تعرض معلومات عن منتج. يمكنك استخدام الكود التالي:
### 1. هيكل HTML (index.html)
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>صفحة هبوط للمنتج</title>
</head>
<body>
<header class="header">
<h1>مرحبًا بك في منتجنا الجديد!</h1>
<p>الذي سيساعدك على تحسين حياتك اليومية.</p>
</header>
<section class="features">
<h2>مميزات المنتج</h2>
<div class="feature-item">
<h3>مميزة 1</h3>
<p>وصف شامل للمميزة الأولى.</p>
</div>
<div class="feature-item">
<h3>مميزة 2</h3>
<p>وصف شامل للمميزة الثانية.</p>
</div>
<div class="feature-item">
<h3>مميزة 3</h3>
<p>وصف شامل للمميزة الثالثة.</p>
</div>
</section>
<section class="cta">
<h2>احصل على منتجك الآن!</h2>
<button class="cta-button">اشترِ الآن</button>
</section>
<footer class="footer">
<p>حقوق الطبع والنشر © 2024 جميع الحقوق محفوظة.</p>
</footer>
</body>
</html>
### 2. نمط CSS (styles.css)
* {
box-sizing: border-box; /* التأكد من أن الحشو والحدود لا تؤثر على العرض الكلي */
}
body {
font-family: Arial, sans-serif; /* تعيين نوع الخط */
margin: 0; /* إزالة الهوامش الافتراضية */
padding: 0; /* إزالة الحشو الافتراضي */
background-color: #f4f4f4; /* تعيين لون الخلفية */
}
.header {
background-color: #2c3e50; /* لون خلفية رأس الصفحة */
color: white; /* لون النص */
text-align: center; /* محاذاة النص في الوسط */
padding: 50px 20px; /* إضافة حشوات */
}
.features {
padding: 20px; /* إضافة حشي للجزء الخاص بالمميزات */
}
.feature-item {
background-color: white; /* لون خلفية عنصر الميزة */
margin: 10px 0; /* إضافة هوامش عمودية */
padding: 15px; /* إضافة حشي داخلي */
border-radius: 5px; /* زوايا مستديرة */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* إضافة ظل لأبعاد العمق */
}
.cta {
text-align: center; /* محاذاة النص في الوسط */
margin: 20px; /* إضافة هوامش */
}
.cta-button {
background-color: #e74c3c; /* لون خلفية الزر */
color: white; /* لون النص */
border: none; /* إزالة الحدود */
border-radius: 5px; /* زوايا مستديرة */
padding: 10px 20px; /* إضافة حشي */
cursor: pointer; /* تغيير شكل المؤشر عند التمرير فوق الزر */
font-size: 16px; /* حجم الخط */
}
.cta-button:hover {
background-color: #c0392b; /* تغيير لون الزر عند التمرير */
}
.footer {
background-color: #2c3e50; /* لون خلفية الفاوتير */
color: white; /* لون النص */
text-align: center; /* محاذاة النص في الوسط */
padding: 20px 0; /* إضافة حشوات */
position: relative; /* تحديد الموقع النسبي */
bottom: 0; /* جعل الفاوتير في أسفل الصفحة */
width: 100%; /* عرض كامل للفاوتير */
}
### كيفية استخدام الكود:
1. أنشئ مجلدًا جديدًا على جهاز الكمبيوتر الخاص بك.
2. قم بإنشاء ملف باسم index.html وانسخ فيه كود HTML أعلاه.
3. قم بإنشاء ملف آخر باسم styles.css وانسخ فيه كود CSS أعلاه.
4. افتح ملف
### 1. هيكل HTML (index.html)
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>صفحة هبوط للمنتج</title>
</head>
<body>
<header class="header">
<h1>مرحبًا بك في منتجنا الجديد!</h1>
<p>الذي سيساعدك على تحسين حياتك اليومية.</p>
</header>
<section class="features">
<h2>مميزات المنتج</h2>
<div class="feature-item">
<h3>مميزة 1</h3>
<p>وصف شامل للمميزة الأولى.</p>
</div>
<div class="feature-item">
<h3>مميزة 2</h3>
<p>وصف شامل للمميزة الثانية.</p>
</div>
<div class="feature-item">
<h3>مميزة 3</h3>
<p>وصف شامل للمميزة الثالثة.</p>
</div>
</section>
<section class="cta">
<h2>احصل على منتجك الآن!</h2>
<button class="cta-button">اشترِ الآن</button>
</section>
<footer class="footer">
<p>حقوق الطبع والنشر © 2024 جميع الحقوق محفوظة.</p>
</footer>
</body>
</html>
### 2. نمط CSS (styles.css)
* {
box-sizing: border-box; /* التأكد من أن الحشو والحدود لا تؤثر على العرض الكلي */
}
body {
font-family: Arial, sans-serif; /* تعيين نوع الخط */
margin: 0; /* إزالة الهوامش الافتراضية */
padding: 0; /* إزالة الحشو الافتراضي */
background-color: #f4f4f4; /* تعيين لون الخلفية */
}
.header {
background-color: #2c3e50; /* لون خلفية رأس الصفحة */
color: white; /* لون النص */
text-align: center; /* محاذاة النص في الوسط */
padding: 50px 20px; /* إضافة حشوات */
}
.features {
padding: 20px; /* إضافة حشي للجزء الخاص بالمميزات */
}
.feature-item {
background-color: white; /* لون خلفية عنصر الميزة */
margin: 10px 0; /* إضافة هوامش عمودية */
padding: 15px; /* إضافة حشي داخلي */
border-radius: 5px; /* زوايا مستديرة */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* إضافة ظل لأبعاد العمق */
}
.cta {
text-align: center; /* محاذاة النص في الوسط */
margin: 20px; /* إضافة هوامش */
}
.cta-button {
background-color: #e74c3c; /* لون خلفية الزر */
color: white; /* لون النص */
border: none; /* إزالة الحدود */
border-radius: 5px; /* زوايا مستديرة */
padding: 10px 20px; /* إضافة حشي */
cursor: pointer; /* تغيير شكل المؤشر عند التمرير فوق الزر */
font-size: 16px; /* حجم الخط */
}
.cta-button:hover {
background-color: #c0392b; /* تغيير لون الزر عند التمرير */
}
.footer {
background-color: #2c3e50; /* لون خلفية الفاوتير */
color: white; /* لون النص */
text-align: center; /* محاذاة النص في الوسط */
padding: 20px 0; /* إضافة حشوات */
position: relative; /* تحديد الموقع النسبي */
bottom: 0; /* جعل الفاوتير في أسفل الصفحة */
width: 100%; /* عرض كامل للفاوتير */
}
### كيفية استخدام الكود:
1. أنشئ مجلدًا جديدًا على جهاز الكمبيوتر الخاص بك.
2. قم بإنشاء ملف باسم index.html وانسخ فيه كود HTML أعلاه.
3. قم بإنشاء ملف آخر باسم styles.css وانسخ فيه كود CSS أعلاه.
4. افتح ملف
❤2🔥1