مشروع كامل – تصميم موقع متكامل على css & html

بواسطة /

بالطبع! إليك مشروع أكبر مع مقال أطول حول “تصميم موقع متكامل باستخدام CSS وHTML”:

الدرس السادس والثلاثون: مشروع كامل – تصميم موقع متكامل

مقدمة

في هذا الدرس، سنغطي كيفية تصميم موقع ويب متكامل باستخدام تقنيات CSS و HTML المتقدمة. سيتضمن المشروع بناء صفحة هبوط (Landing Page) لموقع شركة صغيرة تقدم خدمات متعلقة بالتكنولوجيا. سنعمل على تصميم الموقع باستخدام أدوات CSS المختلفة مثل CSS Grid، Flexbox، Transitions، Media Queries، بالإضافة إلى استخدام قوائم التنقل، الأزرار، النماذج، و الأيقونات. سيشمل المشروع أيضًا تحسين التصميم ليكون متجاوبًا مع الأجهزة المختلفة، وتطبيق تأثيرات تفاعلية عند المرور على العناصر.

المتطلبات المبدئية للمشروع

  1. HTML: هيكل الصفحة الذي يحتوي على الأقسام المختلفة.
  2. CSS: تنسيق وتصميم الصفحة باستخدام الأساليب المتقدمة.
  3. تأثيرات تفاعلية: باستخدام Transitions و Hover Effects.
  4. التصميم المتجاوب: باستخدام Media Queries لتصميم واجهة الموقع بشكل يتكيف مع الأجهزة المختلفة.

الخطوة 1: تخطيط الموقع

قبل البدء في كتابة الأكواد، يجب علينا التخطيط لموقعنا. الموقع سيكون عبارة عن صفحة هبوط لعرض خدمات شركة تقنية. سيكون له الأقسام التالية:

  1. Header: يحتوي على شعار الشركة وقائمة تنقل.
  2. Hero Section: صورة خلفية كبيرة مع عنوان رئيسي وخطوات لعملاء محتملين.
  3. Services Section: عرض الخدمات التي تقدمها الشركة.
  4. Testimonials Section: عرض آراء العملاء السابقين.
  5. Contact Section: نموذج اتصال مع التفاصيل.
  6. Footer: يحتوي على روابط وسائل التواصل الاجتماعي ومعلومات الاتصال.

الخطوة 2: هيكل HTML الأساسي

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>شركة تكنولوجيا المعلومات</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <!-- Header Section -->
  <header>
    <div class="logo">شركة تكنولوجيا المعلومات</div>
    <nav>
      <ul>
        <li><a href="#">الرئيسية</a></li>
        <li><a href="#">خدماتنا</a></li>
        <li><a href="#">آراء العملاء</a></li>
        <li><a href="#">اتصل بنا</a></li>
      </ul>
    </nav>
  </header>

  <!-- Hero Section -->
  <section class="hero">
    <h1>نحن نقدم الحلول الرقمية الأفضل</h1>
    <p>حلول مبتكرة تساعد أعمالك على النمو</p>
    <button>تعرف أكثر</button>
  </section>

  <!-- Services Section -->
  <section class="services">
    <h2>خدماتنا</h2>
    <div class="service">
      <h3>تصميم المواقع</h3>
      <p>نقدم خدمات تصميم مواقع ويب احترافية تضمن لك النجاح في عالم الإنترنت.</p>
    </div>
    <div class="service">
      <h3>التسويق الرقمي</h3>
      <p>نساعدك في الوصول إلى جمهورك المستهدف باستخدام استراتيجيات تسويقية مبتكرة.</p>
    </div>
    <div class="service">
      <h3>التطوير البرمجي</h3>
      <p>نطور حلول برمجية مخصصة لتلبية احتياجاتك التجارية بأعلى مستويات الجودة.</p>
    </div>
  </section>

  <!-- Testimonials Section -->
  <section class="testimonials">
    <h2>آراء العملاء</h2>
    <blockquote>
      "كان فريق شركة تكنولوجيا المعلومات من أفضل الفرق التي تعاملنا معها. قدموا لنا حلولاً مبتكرة وساعدونا في تحسين أعمالنا."
    </blockquote>
    <p>- عميل سعيد</p>
  </section>

  <!-- Contact Section -->
  <section class="contact">
    <h2>اتصل بنا</h2>
    <form>
      <input type="text" placeholder="الاسم الكامل" required>
      <input type="email" placeholder="البريد الإلكتروني" required>
      <textarea placeholder="رسالتك" required></textarea>
      <button type="submit">إرسال</button>
    </form>
  </section>

  <!-- Footer Section -->
  <footer>
    <p>حقوق الطبع والنشر © 2024 شركة تكنولوجيا المعلومات</p>
    <div class="social-media">
      <a href="#">فيسبوك</a>
      <a href="#">تويتر</a>
      <a href="#">إنستغرام</a>
    </div>
  </footer>

</body>
</html>

الخطوة 3: تنسيق الموقع باستخدام CSS

الآن سنقوم بتنسيق الموقع باستخدام CSS. سنستخدم CSS Grid و Flexbox لتوزيع العناصر بشكل مرن وأنيق، مع إضافة تأثيرات تفاعلية و تصميم متجاوب.

1. تصميم الهيكل باستخدام CSS Grid و Flexbox

/* Resetting default margins and paddings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body Setup */
body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  background-color: #f9f9f9;
  display: grid;
  grid-template-rows: 60px 1fr 1fr 1fr 1fr 60px;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

/* Header Styling */
header {
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  list-style: none;
  display: flex;
}

nav ul li {
  margin-left: 20px;
}

nav a {
  text-decoration: none;
  color: white;
  font-size: 18px;
}

nav a:hover {
  color: #f4f4f4;
  transition: color 0.3s ease;
}

/* Hero Section */
.hero {
  background-image: url('hero-image.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
  color: white;
  padding: 80px 20px;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.5rem;
}

.hero button {
  padding: 10px 20px;
  background-color: #ff6347;
  color: white;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.hero button:hover {
  background-color: #f04e32;
}

/* Services Section */
.services {
  display: flex;
  justify-content: space-around;
  padding: 40px 20px;
}

.service {
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.service:hover {
  transform: scale(1.05);
}

.service h3 {
  font-size: 1.8rem;
}

.service p {
  font-size: 1.1rem;
}

/* Testimonials Section */
.testimonials {
  background-color: #f4f4f4;
  text-align: center;
  padding: 40px 20px;
}

blockquote {
  font-style: italic;
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.testimonials p {
  font-size: 1.2rem;
  color: #555;
}

/* Contact Section */
.contact {
  padding: 40px 20px;
  text-align: center;
}

.contact form {
  max-width: 600px;
  margin: 0 auto;
}

.contact input,
.contact textarea {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.contact button {
  padding: 12px 25px;
  background-color: #333;
  color: white;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}

.contact button:hover {
  background-color: #555;
}

/* Footer Section */
footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
}

.social-media a {
  text-decoration: none;
  color: #fff;
  margin: 0 10px;
  font-size: 1.2rem;
}

.social-media a:hover {
  color: #ff6347;
}

/* Media Queries for responsiveness */
@media screen and

 (max-width: 768px) {
  .services {
    flex-direction: column;
    align-items: center;
  }
}

الخطوة 4: إضافة تأثيرات تفاعلية باستخدام CSS

إضافة تأثيرات التمرير (Hover Effects) إلى الأزرار والعناصر الأخرى يعطي الموقع طابعًا تفاعليًا. على سبيل المثال، قمنا بتطبيق تأثير التمرير للأزرار والنصوص في القسم العلوي و القوائم.

الخطوة 5: تحسين التصميم ليكون متجاوبًا

استخدمنا Media Queries لضبط تصميم الموقع ليتناسب مع مختلف الشاشات، سواء كانت أجهزة الكمبيوتر المكتبية أو الهواتف المحمولة.

خاتمة

هذا كان مشروعًا كاملًا يوضح كيفية تصميم صفحة هبوط باستخدام تقنيات CSS و HTML المتقدمة. من خلال هذا المشروع تعلمنا كيفية تنظيم الأقسام المختلفة، إضافة تأثيرات تفاعلية، و تصميم متجاوب باستخدام CSS Grid و Flexbox.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Scroll to Top
Verified by MonsterInsights