Notification Page , index responsive and footer

footer.html

@@ -29,7 +29,7 @@ <h2 class="font-bold text-xl md:text-2xl text-white mb-10">Quick Links</h2>
                     <div class="p-5">
                         <h2 class="font-bold text-xl md:text-2xl text-white mb-10">من نحن</h2>
                         <h3 class="text-white text-[18px]">التطبيق الاول من نوعه الذي يقدم خدمات متكاملة</h3>
-                        <ul class="text-white text-[18px] text-right ltr:text-left list-disc list-inside mt-5">
+                        <ul class="text-white text-[18px] list-disc list-inside mt-5">
                             <li>بيع وشراء السيارات</li>
                             <li>خدمات أخرى متعلقة بالسيارات</li>
                             <li>تصميم إعلان سيارات باستخدام الذكاء الاصطناعي (منشور/قصة)</li>

index.html

@@ -44,11 +44,11 @@
                 <div class="relative bg-gray-200 overflow-hidden shadow-md rounded-[30px]">
                     <img src="./images/header.webp" alt="Header Image" class="w-full h-[300px] sm:h-[365px] rounded-[30px] object-cover" />
                     <div class="absolute inset-0 flex flex-col sm:justify-center text-center text-white bg-black bg-opacity-50 p-4 md:p-8">         
-                        <div class="flex flex-col justify-center items-center mt-5">
-                            <h2 class=" sm:text-2xl text-[18px] font-bold px-2 md:px-0 text-right xl:text-3xl ltr:text-left mb-2 leading-8">بع و إشتري سيارتك بكل سهولة و أفضل أسعار</h2>
-                            <p class="mt-2 font-normal text-[20px]">بع او اشتري في جميع الامارات</p>
+                        <div class="flex flex-col justify-center items-center sm:mt-5 mt-10">
+                            <h2 class=" sm:text-2xl text-sm font-bold px-2 md:px-0 text-right xl:text-3xl ltr:text-left mb-2 leading-8">بع و إشتري سيارتك بكل سهولة و أفضل أسعار</h2>
+                            <p class="mt-2 font-normal sm:text-[20px] text-sm">بع او اشتري في جميع الامارات</p>
                         </div>
-                        <form class="sm:flex hidden max-w-md mx-auto h-16 items-center mt-[65px]">   
+                        <form class="flex max-w-md mx-auto h-16 items-center sm:mt-[65px] mt-5">   
                             <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
                             <div class="relative">
                                 <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
@@ -69,17 +69,6 @@ <h2 class=" sm:text-2xl text-[18px] font-bold px-2 md:px-0 text-right xl:text-3x
 
         <!-- Start ADS -->
             <div class="container mx-auto mt-4 px-4 mb-8">
-                <form class="sm:hidden flex items-center justify-center  max-w-md mx-auto lg:mt-[-100px] lg:mb-16 h-16">   
-                    <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
-                    <div class="relative lg:mr-16">
-                        <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
-                            <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
-                            </svg>
-                        </div>
-                        <input type="search" id="default-search" class="block lg:w-[400px] w-[296px] p-3 ps-10 text-sm text-gray-900 rounded-lg bg-[#F2F2F2] outline-none placeholder-[#A5A3A3]" placeholder="ابحث عن سيارتك المفضلة" required />
-                    </div>
-                </form>
                 <!-- Buttons -->
                 <div class="flex gap-3 flex-row lg:gap-5 mb-6">
                     <button onclick="filterCards('all')" class="filter-btn bg-[#C10D10] font-semibold py-2 px-4 border text-white rounded w-full text-[12px] md:text-base sm:text-[15px] lg:w-[200px]">

notification.html

@@ -0,0 +1,49 @@
+<!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="2G9">
+    <link href="./output.css" rel="stylesheet">
+    <title>Favorite PAge</title>
+    <link rel="icon" type="image/png" href="./images/logo.png">
+    <!-- Icons -->
+    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
+    <!-- Fonts -->
+    <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=Noto+Kufi+Arabic:[email protected]&display=swap" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <script src="./js/script.js"></script>
+</head>
+<style>
+    body {
+            font-family: "Noto Kufi Arabic", sans-serif;
+        }
+</style>
+<body >
+        <!-- Start Navbar -->
+            <div id="navbar"></div>
+        <!-- End Navbar -->
+
+        <!-- Start Section -->
+            <div class="container mx-auto p-5">
+                <h2 class="text-[#2B2F4E] font-bold sm:text-[40px] text-2xl mt-5"> الاشعارات</h2>
+                    <div class="flex flex-col items-center justify-center gap-10 mt-20">
+                        <img src="./images/notification.webp" alt="Notification">
+                        <h2 class="sm:text-[39.19px] text-2xl font-medium text-[#111827]">ليس لديك اي اشعارات</h2>
+                    </div>
+            </div>
+        <!-- End Section -->
+
+        <!-- Start Icons --> 
+            <div id="icons"></div>
+        <!-- End Icons -->
+
+        <!-- Start Footer --> 
+            <div id="footer" class="md:block hidden"></div>
+        <!-- End Footer -->
+</body>
+</html>