حسن الكود لكي يصبح اكتر جمالا <!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>شركة لبيع المنظومات</title>
<link rel="stylesheet" href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
    <a href="#" class="logo"><i class='bx bx-home-smile'></i>شركة لبيع المنظومات</a>
    <ul class="navlist">
        <li><a href="#home" class="active">الرئيسية</a></li>
        <li><a href="#about">من نحن</a></li>
        <li><a href="#shop">المتجر</a></li>
        <li><a href="#services">خدماتنا</a></li>
        <li><a href="#contact">اتصل بنا</a></li>
    </ul>

    <div class="nav-icons">
        <a href="#"><i class='bx bx-moon'></i></a>
        <a href="#"><i class='bx bx-cart-add'></i></a>
        <div class="bx bx-menu" id="menu-icon"></div>
    </div>
</header>

<section class="home" id="home">
    <div class="home-text">
        <h1>الابتكار <span>في الحلول </span> <br> التقنية الحديثة</h1>
        <a href="#shop" class="btn">اكتشف منتجاتنا<i class='bx bxs-right-arrow'></i></a>
    </div>

    <div class="home-img">
        <img src="img/hero1.png" alt="منتجات التقنية">
    </div>
</section>

<section class="container">
    <div class="container-box">
        <img src="img/c1.png" alt="دعم العملاء">
        <h3>دعم العملاء</h3>
        <a href="#">خدمة على مدار الساعة</a>
    </div>

    <div class="container-box">
        <img src="img/c2.png" alt="شحن سريع">
        <h3>شحن سريع</h3>
        <a href="#">توصيل خلال 48 ساعة</a>
    </div>

    <div class="container-box">
        <img src="img/c3.png" alt="جودة مضمونة">
        <h3>جودة مضمونة</h3>
        <a href="#">أفضل الحلول التقنية</a>
    </div>
</section>

<section class="shop" id="shop">
    <div class="middle-text">
        <h4>عروضنا</h4>
        <h2>منتجاتنا المميزة</h2>
    </div>
    <div class="shop-content">
        <div class="row">
            <img src="img/p1.png" alt="منظومة 1">
            <h3>منظومة تقنية 1</h3>
            <p>وصف المنظومة التقنية 1 هنا</p>
            <div class="in-text">
                <div class="price">
                    <h6>$1000.00</h6>
                </div>
                <div class="s-btnn">
                    <a href="#">اطلب الآن</a>
                </div>
            </div>

            <div class="top-icon">
                <a href="#"><i class="bx bx-heart"></i></a>
            </div>
        </div>

        <div class="row">
            <img src="img/p2.png" alt="منظومة 2">
            <h3>منظومة تقنية 2</h3>
            <p>وصف المنظومة التقنية 2 هنا</p>
            <div class="in-text">
                <div class="price">
                    <h6>$1500.00</h6>
                </div>
                <div class="s-btnn">
                    <a href="#">اطلب الآن</a>
                </div>
            </div>

            <div class="top-icon">
                <a href="#"><i class="bx bx-heart"></i></a>
            </div>
        </div>

        <div class="row">
            <img src="img/p3.png" alt="منظومة 3">
            <h3>منظومة تقنية 3</h3>
            <p>وصف المنظومة التقنية 3 هنا</p>
            <div class="in-text">
                <div class="price">
                    <h6>$2000.00</h6>
                </div>
                <div class="s-btnn">
                    <a href="#">اطلب الآن</a>
                </div>
            </div>

            <div class="top-icon">
                <a href="#"><i class="bx bx-heart"></i></a>
            </div>
        </div>

        <div class="row">
            <img src="img/p4.png" alt="منظومة 4">
            <h3>منظومة تقنية 4</h3>
            <p>وصف المنظومة التقنية 4 هنا</p>
            <div class="in-text">
                <div class="price">
                    <h6>$2500.00</h6>
                </div>
                <div class="s-btnn">
                    <a href="#">اطلب الآن</a>
                </div>
            </div>

            <div class="top-icon">
                <a href="#"><i class="bx bx-heart"></i></a>
            </div>
        </div>
    </div>
</section>

<section class="services" id="services">
    <div class="middle-text">
        <h4>خدماتنا</h4>
        <h2>ما نقدمه من خدمات متميزة</h2>
    </div>

    <div class="services-content">
        <div class="service-box">
            <i class='bx bx-support'></i>
            <h3>الدعم الفني</h3>
            <p>فريق متخصص يقدم الدعم الفني على مدار الساعة لضمان عمل الأنظمة بكفاءة.</p>
        </div>

        <div class="service-box">
            <i class='bx bx-cog'></i>
            <h3>الصيانة الدورية</h3>
            <p>خدمات صيانة دورية للحفاظ على أداء المنظومات ومنع الأعطال.</p>
        </div>

        <div class="service-box">
            <i class='bx bx-rocket'></i>
            <h3>التطوير والترقية</h3>
            <p>تقديم حلول تطويرية وترقيات لتحسين أداء الأنظمة وتلبية احتياجات العملاء.</p>
        </div>
    </div>
</section>

<section class="mm">
    <div class="middle-text">
        <h4>من نحن</h4>
        <h2>شركة لبيع المنظومات التقنية</h2>
    </div>

    <div class="mm-content">
        <div class="mm-img">
            <img src="img/hero1.png" alt="صورة عن الشركة">
        </div>

        <div class="right-mm">
            <ul>
                <li><i class='bx bx-check-circle'></i> منتجات عالية الجودة</li>
                <li><i class='bx bx-check-circle'></i> دعم فني متخصص</li>
                <li><i class='bx bx-check-circle'></i> أسعار تنافسية</li>
                <li><i class='bx bx-check-circle'></i> توصيل سريع وآمن</li>
            </ul>
        </div>
    </div>
</section>

<section>
    <div class="middle-text">
        <h4>مقتطفات</h4>
        <h2>فرجة ممتعة</h2>
    </div>
    <div class="video-container">
        <video autoplay muted loop>
            <source src="a.mp4" type="video/mp4">
            متصفحك لا يدعم تشغيل الفيديو.
        </video>
        <div class="video-content">
            <h1>اكتشف حلولنا التقنية</h1>
            <p>شاهد الفيديو لمعرفة المزيد عن منتجاتنا وخدماتنا.</p>
            <a href="#shop" class="btn">شاهد الآن</a>
        </div>
    </div>
</section>

<section class="contact" id="contact">
<div class="contact-content">
	<div class="contact-text">
		<h2>اتصل بنا</h2>
		<p>نحن هنا لخدمتك طوال الوقت</p>
		<div class="social">
			<a href="#"><i class='bx bxl-instagram-alt'></i></a>
			<a href="#"><i class='bx bxl-facebook-circle'></i></a>
			<a href="#"><i class='bx bxl-twitter'></i></a>
			<a href="#"><i class='bx bxl-youtube'></i></a>
		</div>
	</div>
</div>
</section>


<a href="#" class="scroll">
<i class='bx bx-up-arrow-alt'></i>
</a>

<script type="text/javascript" src="js/script.js"></script>
<script src="https://unpkg.com/scrollreveal"></script>
<script type="text/javascript">
const header = document.querySelector("header");

window.addEventListener("scroll", function(){
  header.classList.toggle("sticky", window.scrollY > 80)
});

const sr = ScrollReveal({
  origin: 'top',
  distance: '85px',
  duration: 2500,
  reset: true
});

sr.reveal('.home-text',{delay: 300});
sr.reveal('.home-img',{delay: 400});
sr.reveal('.container',{delay: 300});

sr.reveal('.middle-text',{});
sr.reveal('.shop-content',{delay: 300});

sr.reveal('.contact',{delay: 300});

sr.reveal(".mm-content", {delay: 400});

// إضافة كود تفعيل القائمة على الشاشات الصغيرة
const menuIcon = document.getElementById('menu-icon');
const navList = document.querySelector('.navlist');

menuIcon.addEventListener('click', () => {
  navList.classList.toggle('active');
  menuIcon.classList.toggle('bx-x'); // تغيير الأيقونة عند النقر
});
</script>
</body>
</html>
 ليس الكود البرمجي بل عدل تصيق الاشياء لكي تصبح افضل