Untitled

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>الصفحة الرئيسية</title>
    <link rel="icon" href="Logo.png">
    <link rel="stylesheet" href="style.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=Open+Sans:wght@600&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/6a55b70c17.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
    <script src ="Signup-Login/sign_axios.js"></script>
</head>

<body>
    <div class = "wrapper">
        <div class="header">
            <div class="inner-logo">
                <a href="index.html"><img src="Logo.png"></a>
            </div>
            <!-- -------------------------------------------------Search box area ------------------------------------------------- -->
            <!-- <div class="inner-search">
                <input type="text" placeholder="بحث..." class="يتم البحث...">
                <a href="#"><i class="fas fa-search"></i></a>
            </div> -->
            <!-- -------------------------------------------------nav links area ------------------------------------------------- -->
            <div class="inner-list" id="innerList">
                <i class="fas fa-times" onclick="hideMenu()"></i>
                <ul>
                    <li class="links"><a href="#home" id="home-margin" class="current">الصفحة الرئيسية</a></li>
                    <li class="links"><a href="Booking/Booking.html">الحجز</a></li>
                    <li class="links"><a href="#to-about">من نحن</a></li>
                    <li class="links"><a href="Contact Us/contact.html">تواصل معنا </a></li>
                    <li class="links"><a href="Personal_Details/personal.html" id="when_login">بيانات الحساب </a></li>
                    <li><a href="Signup-Login/LOGIN.html" id="login">تسجيل الدخول</a></li>
                </ul>
            </div>
            <!--------------------------------------------------- bars icon  --------------------------------------------------->
            <i class="fas fa-bars" onclick="showMenu()"></i>
        </div>
        <!-- -------------------------------------------------First Home Section--------------------------------------------------->
        <section class="banner" id="home">
            <div class="middle">
                <div class="midtext">
                    <h1>HemaX</h1>
                    <p class="short-txt">
                        Calmness, Peace & Humanity
                    </p>
                    <p class="long-txt">
                        Donate blood, make a difference. Your gift saves lives and uplifts your spirits. It's a meaningful act that brings unmatched satisfaction.
                    </p>
                    <a href="Books-page/books.html" class="starting-links s1">احجز موعد</a>
                    <a href="Signup-Login/Sign Up.html" class="starting-links s2">إنشاء حساب</a>
                </div>
            </div>
        </section>
        <!-- -------------------------------------------------Latest section------------------------------------------------- -->
        <!-- ------------------------------------------------- Slides section --------------------------------------------------->
        <div class="slide-container" id="popular">
            <section class="slides-area">
                <h2>دمنا واحد.</h2>
                <p>
                    ومن أحياها فكأنما أحيا الناس جميعا.
                </p>
                <div class="slider">
                    <img src="Slides/Dmna_1.jpeg">
                    <img src="Slides/Dmna_2.jpeg">
                    <img src="Slides/Dmna_3.jpeg">
                    <img src="Slides/Dmna_4.jpeg">
                    <img src="Slides/Dmna_1.jpeg">
                </div>
            </section>
        </div>
        <!-- --------------------------------------------------- About us Section --------------------------------------------------- -->
    <section class="about" id="to-about">
        <h2>من نحن</h2>
            <p class = "about-para">Lorem ipsum, dolor sit amet consectetur adipisicing elit</p>
        <div class="content">
            <img src = "backgroudns/abb.jpg">
            <div class= "text">
                <h1>دمنا واحد</h1>
                <h5>Life Safers & Blood Donation</h5>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis hic omnis at consequuntur illum accusantium. Ab magni officiis totam iste! Obcaecati impedit fugit libero deserunt quibusdam atque quod ipsa repellendus?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium facilis totam autem sit, ad magni iusto dolorem. Dolore, beatae sint. Beatae quibusdam magnam doloribus ullam consequuntur corporis dignissimos facilis aspernatur.
                </p>
            </div>
        </div>
    </section>
        <!-- --------------------------------------------------- Rate us Section ----------------------------------------------------->
        <!-- ------------------------------------------------- Footer ------------------------------------------------- -->
        <footer class="footer">
            <div class="upper-footer-list">
                <ul>
                    <li><a href="#to-about">About HemaX</a></li>
                    <li><a href="#feedback">Share your experience</a></li>
                    <li><a href="Contact Us/contact.html">Contact</a></li>
                    <li><a href="Footer-links/help.html">Help</a></li>
                    <li><a href="#popular">Popular</a></li>
                </ul>
            </div>
            <div class="footer-logo">
                <a href="#home"><img src="Logo.png"></a>
            </div>
            <div class="lower-footer-list">
                <ul>
                    <li><a href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a></li>
                    <li><a href="https://twitter.com/" target="_blank"><i class="fab fa-twitter"></i></a></li>
                    <li><a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
                    <li><a href="https://ae.linkedin.com/" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
                    <li><a href="https://www.reddit.com/" target="_blank"><i class="fab fa-reddit-alien"></i></a></li>
                </ul>
            </div>
            <div class="rights">
                <p>جميع الحقوق محفوظة لموقع, هيما اكس &copy; 2023</p>
            </div>
        </footer>
    </div>
    <!-- -------------------------------------------------JavaScript  --------------------------------------------------->
    <script>
        var innerList = document.getElementById("innerList");

        // making the show menu function

        function showMenu() {
            innerList.style.left = "0";
        }

        // making the hdie menu function

        function hideMenu() {
            innerList.style.left = "-200px";
        }

        // Rate us
        const btn = document.querySelector("button");
        const post = document.querySelector(".post");
        const widget = document.querySelector(".star-widget");
        const editBtn = document.querySelector(".edit");
        btn.onclick = () => {
            widget.style.display = "none";
            post.style.display = "block";
            post.style.margin = "11px 0";
            editBtn.onclick = () => {
                widget.style.display = "block";
                post.style.display = "none";
            }
            return false;
        }
    </script>
</body>

</html>