Module_5 Assignment Dome. HTML CSS Tailwind JS Responsivenes All Done Ready to Submit..😊😊

Author: Refan420

Module_5/Assets/Dental_prescption.docx

@@ -8,6 +8,7 @@
         integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
     <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    <link rel="icon" type="image/png" href="./Assets/Logo.png">
     <link rel="stylesheet" href="style.css">
     <title>Medi Bridge</title>
 </head>
@@ -19,16 +20,32 @@
                 <img src="./Assets/Logo.png" alt="">
                 <span class="font-bold">Medi Bridge</span>
             </div>
-            <menu class="fixed md:static top-0 right-0 h-screen md:h-auto md:w-auto 
+            <menu class="fixed md:static top-0 right-0 h-screen w-[80%] md:h-auto md:w-auto 
              bg-gray-400 md:bg-transparent z-50 
              transform translate-x-full md:translate-x-0 
              transition-transform duration-300 ease-in-out">
                 <ul
-                    class="flex flex-col md:flex-row list-none items-center justify-around h-full md:h-auto gap-8 md:gap-4">
-                    <button class="hidden"><i class="fa-solid fa-angle-right" id="menu_Close"></i></button>
+                    class="flex flex-col md:flex-row list-none items-center justify-center h-full md:h-auto gap-8 md:gap-4">
+                    <button
+                        class=" py-2 px-4 m-4 bg-yellow-500 border border-yellow-500 hover:bg-transparent transition-transform duration-300 ease-in-out rounded-2xl font-semibold md:hidden "
+                        id="menu_Close"><i class="fa-solid fa-angle-right"></i></button>
                     <li><a href="#" class="hover:text-blue-600 whitespace-nowrap">About Us</a></li>
-                    <li class="flex justify-center items-center cursor-pointer gap-1">
-                        Features <i class="fa-solid fa-angle-down text-xs"></i>
+                    <li class="flex flex-col justify-center items-center cursor-pointer gap-1 md:relative"
+                        id="collapse_Menu">
+                        <div class="flex"> Features
+                            <span id="arrow_Down"><i
+                                    class="fa-solid fa-angle-down text-xs transition-transform duration-300"></i></span>
+                            <!-- <span>
+                            <i class="fa-solid fa-angle-up text-xs transition-transform duration-300" id="arrow_up"></i></span> -->
+                        </div>
+
+                        <ul class="opacity-0 max-h-0 overflow-hidden transition-all duration-300 ease-in-out md:absolute md:top-5 md:left-2 "
+                            id="collapse_List">
+                            <li>Feature 1</li>
+                            <li>Feature 2</li>
+                            <li>Feature 3</li>
+                            <li>Feature 4</li>
+                        </ul>
                     </li>
                     <li><a href="#" class="hover:text-blue-600 whitespace-nowrap">Find Doctors</a></li>
                     <li><a href="#" class="hover:text-blue-600">Blog</a></li>
@@ -39,7 +56,9 @@
                 <button class="mx-2 px-5 py-2 bg-green-800 border-green-800 rounded-xl text-white">Register</button>
             </div>
 
-            <button class="md:hidden w-10" id="menu_Open"><i class="fa-solid fa-angle-left"></i></button>
+            <button
+                class="md:hidden py-2 px-4 bg-green-500 border border-green-700 hover:bg-transparent transition-transform duration-300 ease-in-out rounded-2xl font-semibold "
+                id="menu_Open"><i class="fa-solid fa-angle-left"></i></button>
         </nav>
     </header>
     <main>
@@ -48,7 +67,7 @@
         <div class="hero md:flex ">
             <div class="content p-4 m-2 md:w-[50%]">
                 <div
-                    class="snapBar flex items-center justify-center gap-2 bg-[rgba(138,195,188,0.15)] border-green-400 rounded-3xl py-2 px-2 m-4 font-semibold text-[.8rem] text-green-900 md:w-[40%]">
+                    class="snapBar flex items-center justify-center gap-2 bg-[rgba(138,195,188,0.15)] border-green-400 rounded-3xl py-2 px-2 m-4 font-semibold text-[.8rem] text-green-900 w-fit">
                     <i class="fa-solid fa-award p-2 rounded-full bg-[rgba(138,195,188,0.40)] text-green-900"></i>
                     <span>Top-rated healthcare service</span>
                 </div>
@@ -68,7 +87,7 @@ <h1 class="text-5xl font-semibold text-black">Transforming <br> Healthcare for a
                 <div class="bgDoc">
                     <img src="./Assets/womanDoc.png" alt="" class="self-center justify-center-safe">
                     <div
-                        class=" grid grid-cols-3 items-center justify-center sidDiv absolute left-0 top-40 z-20  p-3 bg-white rounded-xl w-full  md:w-[70%]">
+                        class=" grid grid-cols-3 items-center justify-center sidDiv absolute left-0 top-40 z-20  p-3 bg-white rounded-xl w-full  md:w-[70%] md:grid-cols-2 xl:grid-cols-3">
                         <img src="./Assets/Avatar.png" alt="">
                         <div class="miniContent">
                             <button>Available</button>
@@ -80,7 +99,8 @@ <h2>Dr. Andrea G.</h2>
                             class="flex items-center justify-center text-green-700 font-semibold border border-green-600 bg-transparent p-2 m-2 rounded-2xl h-9"><i
                                 class="fa-solid fa-phone"></i> Book Now</button>
                     </div>
-                    <div class="bottomDiv absolute bottom-0 right-0 md:w-[50%] bg-green-700 rounded-xl p-4 text-white">
+                    <div
+                        class="bottomDiv absolute bottom-0 right-0 md:w-[50%] bg-green-700 rounded-xl p-4 text-white md:z-20">
                         <div class="textDiv font-semibold">
                             <p>“The workshops were insightful, the networking opportunities were abundant”</p>
                             <div class="spalteDiv flex justify-between">
@@ -356,14 +376,17 @@ <h2 class="bg-green-900 text-white font-semibold px-2 h-20 rounded-t-xl flex ite
 
         <!-- Appointment Section Code -->
         <div
-            class="appointemnt bg-[#34978B] flex flex-col items-center justify-center rounded-2xl p-16 m-16 h-[60vh] text-white">
+            class="appointemnt bg-[#017D6E] flex flex-col items-center justify-center rounded-2xl p-16 m-16 h-[60vh] text-white relative">
+            <img src="./Assets/Union2.png" alt="" class="absolute top-0 left-0 opacity-70 h-60 hidden md:block">
+
             <h1 class="text-3xl font-semibold m-3">Discover Comprehensive <br>
                 Care Tailored to Your Needs</h1>
             <p class="text-gray-200 
             ">Experience personalized healthcare solutions designed to prioritize your well-being</p>
             <button
                 class="py-2 px-3 my-3 bg-gray-200 border border-gray-300 rounded-[.4rem] text-[1rem] font-semibold  text-black hover:text-white hover:scale-110 hover:bg-transparent transition-all duration-300 ease-in-out w-fit">Make
                 an Appoinment</button>
+            <img src="./Assets/Union1.png" alt="" class="absolute bottom-0 right-0 opacity-70 hidden md:block">
         </div>
     </main>
 

Module_5/Assets/Union.png Module_5/Assets/Union1.pngModule_5/Assets/Union.png renamed to Module_5/Assets/Union1.png

@@ -0,0 +1,28 @@
+let openBtn = document.querySelector("#menu_Open");
+let closeBtn = document.querySelector("#menu_Close");
+let menu = document.querySelector("menu")
+openBtn.addEventListener("click", ()=>{
+menu.classList.remove( "translate-x-full");
+});
+
+closeBtn.addEventListener("click", ()=>{
+menu.classList.add("translate-x-full");
+});
+
+let collapseMenu = document.querySelector("#collapse_Menu");
+let collapseList = document.querySelector("#collapse_List");
+let arrowDown = document.querySelector("#arrow_Down");
+
+collapseMenu.addEventListener("click", () => {
+    if (collapseList.classList.contains("max-h-0")) {
+        collapseList.classList.remove("opacity-0", "max-h-0");
+        collapseList.classList.add("opacity-100", "max-h-50"); 
+arrowDown.style.transform = "rotate(180deg)";
+
+    } 
+    else {
+        collapseList.classList.add("opacity-0", "max-h-0");
+        collapseList.classList.remove("opacity-100", "max-h-50");
+arrowDown.style.transform = "rotate(0deg)";
+    }
+});

Module_5/Assets/Union2.png

@@ -13,7 +13,7 @@ menu ul li {
 
 }
 
-memu ul li a {
+menu ul li a {
     text-align: center;
 }