JavaScript is not enabled!...Please enable javascript in your browser

جافا سكريبت غير ممكن! ... الرجاء تفعيل الجافا سكريبت في متصفحك.

الصفحة الرئيسية

موقع احترافي جداااااااااا عن الالعاب

                                                          موقع احترافي جداااااااااا عن الالعاب

_____________________________________________________________________________________

                                                                         الاكواد🎯✔️🖥️

_____________________________________________________________________________________

<!DOCTYPE html>

<html lang="ar" dir="rtl">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="موقع متخصص في أحدث الألعاب وأكثرها إثارة بجميع الأنواع">

    <title>عالم الألعاب - الترفيه والإثارة في مكان واحد</title>

    <style>

        body {

            margin: 0;

            font-family: 'Cairo', sans-serif;

            background-color: #121212;

            color: #ffffff;

            overflow-x: hidden;

        }

        header {

            background: linear-gradient(90deg, #1f1f1f, #3a3a3a);

            color: #fff;

            padding: 20px 30px;

            display: flex;

            justify-content: space-between;

            align-items: center;

            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);

            position: sticky;

            top: 0;

            z-index: 1000;

        }

        header h1 {

            margin: 0;

            font-size: 2rem;

            font-weight: bold;

        }

        nav a {

            color: #fff;

            text-decoration: none;

            margin: 0 20px;

            font-size: 1rem;

            transition: color 0.3s;

        }

        nav a:hover {

            color: #f39c12;

        }

        .hero {

            background: url('games-background.jpg') no-repeat center center/cover;

            height: 500px;

            display: flex;

            justify-content: center;

            align-items: center;

            text-align: center;

            position: relative;

            color: #fff;

        }

        .hero::after {

            content: "";

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: rgba(0, 0, 0, 0.6);

            z-index: 1;

        }

        .hero h1 {

            font-size: 4rem;

            text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.7);

            z-index: 2;

            position: relative;

        }

        .container {

            padding: 50px 20px;

            max-width: 1200px;

            margin: 0 auto;

        }

        .games {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

            gap: 30px;

        }

        .game {

            background: #1e1e1e;

            border-radius: 15px;

            overflow: hidden;

            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);

            transition: transform 0.3s ease, box-shadow 0.3s ease;

            text-align: center;

        }

        .game:hover {

            transform: translateY(-15px);

            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);

        }

        .game img {

            width: 100%;

            height: 200px;

            object-fit: cover;

        }

        .game h3 {

            margin: 15px 0;

            font-size: 1.5rem;

            color: #f39c12;

        }

        .game p {

            color: #fff;

            font-size: 1.2rem;

            margin-bottom: 15px;

        }

        .cta {

            background: #f39c12;

            color: #fff;

            padding: 40px 20px;

            text-align: center;

            border-radius: 15px;

            margin: 40px 0;

        }

        .cta h2 {

            font-size: 2.5rem;

            margin-bottom: 20px;

        }

        .cta a {

            display: inline-block;

            background: #d35400;

            color: #fff;

            padding: 15px 30px;

            border-radius: 30px;

            text-decoration: none;

            font-size: 1.2rem;

            transition: background 0.3s;

        }

        .cta a:hover {

            background: #e67e22;

        }

        footer {

            background-color: #333;

            color: #fff;

            text-align: center;

            padding: 20px;

            margin-top: 50px;

            font-size: 0.9rem;

        }

        footer .social a {

            margin: 0 15px;

            color: #f39c12;

            text-decoration: none;

            font-size: 1.2rem;

        }

        footer .social a:hover {

            color: #e67e22;

        }

    </style>

    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">

</head>

<body>

    <header>

        <h1>عالم الألعاب</h1>

        <nav>

            <a href="#about">من نحن</a>

            <a href="#games">الألعاب</a>

            <a href="#contact">اتصل بنا</a>

        </nav>

    </header>


    <section class="hero">

        <h1>أحدث الألعاب بين يديك</h1>

    </section>


    <section id="about" class="container">

        <h2>من نحن</h2>

        <p>نحن متجر رقمي متخصص في تقديم أفضل الألعاب الحديثة التي تناسب جميع الأعمار. هدفنا توفير الترفيه بأعلى جودة.</p>

    </section>


    <section id="games" class="container">

        <h2>الألعاب المميزة</h2>

        <div class="games">

            <div class="game">

                <img src="game1.jpg" alt="لعبة أكشن">

                <h3>لعبة الأكشن</h3>

                <p>$20</p>

            </div>

            <div class="game">

                <img src="game2.jpg" alt="لعبة مغامرات">

                <h3>لعبة المغامرات</h3>

                <p>$25</p>

            </div>

            <div class="game">

                <img src="game3.jpg" alt="لعبة رياضية">

                <h3>لعبة رياضية</h3>

                <p>$15</p>

            </div>

        </div>

    </section>


    <section class="cta">

        <h2>لا تفوت الفرصة!</h2>

        <a href="#games">استعرض جميع الألعاب</a>

    </section>


    <section id="contact" class="container">

        <h2>اتصل بنا</h2>

        <p>لأي استفسار، تواصل معنا عبر البريد الإلكتروني: <a href="mailto:info@gamesworld.com">info@gamesworld.com</a></p>

        <p>أو عبر الهاتف: <a href="tel:+123456789">+123456789</a></p>

    </section>


    <footer>

        <p>جميع الحقوق محفوظة © 2025 عالم الألعاب</p>

        <div class="social">

            <a href="#">فيسبوك</a>

            <a href="#">تويتر</a>

            <a href="#">إنستجرام</a>

        </div>

    </footer>

</body>

</html>

                                                                    شرح الكود:

1. الهيكل العام للموقع:

  • يستخدم HTML لتحديد المحتوى الأساسي.
  • اللغة المستخدمة هي العربية، مع اتجاه النص من اليمين إلى اليسار (rtl).
  • يحتوي على أقسام متعددة تشمل العنوان الرئيسي (header)، قسم الأبطال (hero)، معلومات عن الموقع، الألعاب المميزة، الدعوة إلى الشراء (CTA)، والتواصل.

2. التصميم (CSS):

  • الخطوط والألوان:
    • تم استخدام خط "Cairo" لجعل النصوص متناسقة وسهلة القراءة.
    • يعتمد التصميم على درجات الألوان الداكنة مع تدرجات لونية ولمسات برتقالية لإضافة التباين.
  • الأنماط العامة:
    • الخلفية داكنة لتناسب تصميم المواقع المخصصة للألعاب.
    • تم تصميم الهوامش والمسافات بعناية لتوفير قراءة سهلة وتجربة استخدام ممتازة.
  • المؤثرات البصرية:
    • تأثيرات عند تمرير الفأرة على الألعاب (hover effect) مثل تغيير الظل وتحريك العنصر.
    • استخدام تدرجات لونية ديناميكية في رأس الصفحة لإضافة لمسة عصرية.

3. أقسام الموقع:

1. رأس الصفحة (Header):

  • يحتوي على اسم الموقع "عالم الألعاب" وقائمة تنقل تشمل:
    • "من نحن" – قسم يوضح هوية الموقع.
    • "الألعاب" – يعرض الألعاب المميزة.
    • "اتصل بنا" – يوفر وسائل الاتصال.

2. قسم البطل (Hero):

  • يحتوي على صورة خلفية (غير مدمجة حاليًا، ولكن مكانها محجوز بـgames-background.jpg) مع نص رئيسي جذاب: "أحدث الألعاب بين يديك".

3. قسم من نحن (About):

  • نص يشرح فكرة الموقع وهدفه في تقديم أفضل الألعاب.

4. قسم الألعاب (Games):

  • يعرض الألعاب المميزة في شبكة من البطاقات:
    • لكل لعبة صورة، اسم، وسعر.
    • عند تمرير الفأرة على بطاقة لعبة، تتحرك للأعلى وتظهر بظل أكبر.

5. دعوة إلى الشراء (CTA):

  • قسم يشجع المستخدم على استكشاف المزيد من الألعاب مع زر واضح يقود إلى قسم الألعاب.

6. قسم الاتصال (Contact):

  • يعرض وسائل الاتصال بالموقع:
    • البريد الإلكتروني.
    • رقم الهاتف.

7. التذييل (Footer):

  • حقوق الملكية.
  • روابط الشبكات الاجتماعية.

4. التحسينات الاحترافية:

  • المرونة:
    • التصميم متجاوب بالكامل بفضل استخدام وحدات قابلة للتكيف مع الشاشات المختلفة.
  • التفاعل:
    • تم إضافة تأثيرات بصرية عند تمرير الفأرة على الروابط والألعاب.
  • التنظيم:
    • التقسيم الواضح للأقسام يجعل التنقل داخل الموقع سهلاً.
  • جودة الصور:
    • صور الألعاب وألوان الموقع تضيف جاذبية بصرية.
    • _________________________________________________________________________                                                      صور الموقع



الاسمبريد إلكترونيرسالة