Skip to content

Commit

Permalink
accordion
Browse files Browse the repository at this point in the history
  • Loading branch information
@asmaamostafa74
asmaamostafa74 committed Aug 13, 2024
1 parent b64da7f commit a2e9d06
Showing 1 changed file with 88 additions and 53 deletions.
141 changes: 88 additions & 53 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@
<ul class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li class="relative group">
<a href="#" class="flex py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent items-center">Products <i class="fa-solid fa-caret-down ml-1"></i></a>
<div class="absolute hidden group-hover:block bg-white dark:bg-gray-700 shadow-lg mt-2 rounded-lg z-10">
<div class="absolute hidden group-hover:block bg-white dark:bg-gray-700 shadow-lg mt-2 rounded-lg z-10" style="width: 105px;">
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600">Product 1</a>
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600">Product 2</a>
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600">Product 3</a>
Expand Down Expand Up @@ -150,8 +150,7 @@ <h1 class="text-7xl lg:text-7xl font-bold lg:text-left mb-6 dark:text-white">Bui
<div class="lg:w-1/2 flex justify-center">
<img src="./images/Col1.png" alt="" class="transform transition-transform duration-300 hover:scale-105 cursor-pointer">
</div>
</div>

</div>
<!-- End Header Section -->

<!-- Start Second Part -->
Expand Down Expand Up @@ -334,46 +333,83 @@ <h1 class="font-semibold mb-2 dark:text-white">Tellus eget feugiat sit</h1>
<!-- End Slider -->

<!-- Start Question Part -->
<div class="mt-10 mb-10">
<div>
<h1 class="text-4xl font-bold text-center mb-10 dark:text-white">Answers to your questions</h1>
<div id="accordion-color" data-accordion="collapse" data-active-classes="bg-blue-100 dark:bg-gray-800 text-blue-600 dark:text-white" class="pt-5 pb-5">
<!-- Accordion 1 -->
<h2 id="accordion-color-heading-1">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-800 dark:border-gray-700 dark:text-gray-400 hover:bg-blue-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-color-body-1" aria-expanded="false" aria-controls="accordion-color-body-1">
<span class="text-blue-600">Enim sodales consequat adipiscing facilisis massa venenatis, non lorem lobortis?</span>
<svg data-accordion-icon class="w-3 h-3 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-color-body-1" class="hidden" aria-labelledby="accordion-color-heading-1">
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<p class="mb-2 text-gray-500 dark:text-gray-400">Enim sodales consequat adipiscing facilisis massa venenatis, non lorem lobortis?</p>
</div>
<div class="w-full max-w-screen-xl mx-auto px-4">
<div class="space-y-4">
<button type="button" class="w-full text-left px-4 py-2 text-sm font-normal text-[#2563EB] bg-white border-t border-gray-300 focus:outline-none flex justify-between items-center">
Enim sodales consequat adipiscing facilisis massa venenatis, non lorem lobortis
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<button type="button" class="w-full text-left px-4 py-2 text-sm font-normal text-[#2563EB] bg-white border-t border-gray-300 focus:outline-none flex justify-between items-center">
Venenatis nulla sagittis nunc, lobortis nec sollicitudin neque, dolor?
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<button type="button" class="w-full text-left px-4 py-2 text-sm font-normal text-[#2563EB] bg-white border-t border-gray-300 focus:outline-none flex justify-between items-center">
Varius ultricies molestie tellus fermentum, viverra ipsum scelerisque etiam lorem?
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<button type="button" class="w-full text-left px-4 py-2 text-sm font-normal text-[#2563EB] bg-white border-t border-gray-300 focus:outline-none flex justify-between items-center">
Nulla etiam vitae, at sagittis, nibh ultrices mattis feugiat faucibus?
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<button type="button" class="w-full text-left px-4 py-2 text-sm font-normal text-[#2563EB] bg-white border-t border-gray-300 focus:outline-none flex justify-between items-center">
Sagittis consectetur gravida nec turpis eros, id sit et, dictum?
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>

<!-- Accordion 2 -->
<h2 id="accordion-color-heading-2">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-800 dark:border-gray-700 dark:text-gray-400 hover:bg-blue-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-color-body-2" aria-expanded="false" aria-controls="accordion-color-body-2">
<span class="text-blue-600">Vivamus ac mauris at elit facilisis viverra.</span>
<svg data-accordion-icon class="w-3 h-3 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-color-body-2" class="hidden" aria-labelledby="accordion-color-heading-2">
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<p class="mb-2 text-gray-500 dark:text-gray-400">Vivamus ac mauris at elit facilisis viverra.</p>
</div>
</div>
<!-- Start Question Part -->

<!-- Accordion 3 -->
<h2 id="accordion-color-heading-3">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-800 dark:border-gray-700 dark:text-gray-400 hover:bg-blue-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-color-body-3" aria-expanded="false" aria-controls="accordion-color-body-3">
<span class="text-blue-600">Curabitur sit amet justo non urna consectetur ultricies.</span>
<svg data-accordion-icon class="w-3 h-3 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-color-body-3" class="hidden" aria-labelledby="accordion-color-heading-3">
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<p class="mb-2 text-gray-500 dark:text-gray-400">Curabitur sit amet justo non urna consectetur ultricies.</p>
</div>
</div>

<!-- Accordion 4 -->
<h2 id="accordion-color-heading-4">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-800 dark:border-gray-700 dark:text-gray-400 hover:bg-blue-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-color-body-4" aria-expanded="false" aria-controls="accordion-color-body-4">
<span class="text-blue-600">Pellentesque habitant morbi tristique senectus et netus.</span>
<svg data-accordion-icon class="w-3 h-3 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-color-body-4" class="hidden" aria-labelledby="accordion-color-heading-4">
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<p class="mb-2 text-gray-500 dark:text-gray-400">Pellentesque habitant morbi tristique senectus et netus.</p>
</div>
</div>

<!-- Accordion 5 -->
<h2 id="accordion-color-heading-5">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-800 dark:border-gray-700 dark:text-gray-400 hover:bg-blue-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-color-body-5" aria-expanded="false" aria-controls="accordion-color-body-5">
<span class="text-blue-600">Sed nec massa nec nunc tincidunt ultricies.</span>
<svg data-accordion-icon class="w-3 h-3 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-color-body-5" class="hidden" aria-labelledby="accordion-color-heading-5">
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<p class="mb-2 text-gray-500 dark:text-gray-400">Sed nec massa nec nunc tincidunt ultricies.</p>
</div>
</div>
</div>
<!-- End Question Part -->

<!-- Start Services -->
<div class="lg:flex justify-center items-center mx-auto max-w-screen-xl px-4 py-16 h-[265px] bg-gray-100 ">
Expand Down Expand Up @@ -489,17 +525,17 @@ <h2 class="font-bold text-2xl sm:text-3xl lg:text-4xl uppercase dark:text-white"
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</button>

<div class="relative flex justify-center items-center overflow-hidden">
<div id="carousel" class="flex flex-nowrap transition-transform duration-500 ease-in-out">
<img src="./images/000.png" alt="Phone Mockup 1" class="carousel-image w-40 h-80 mx-2">
<img src="./images/003.png" alt="Phone Mockup 2" class="carousel-image w-40 h-80 mx-2">
<img src="./images/iPhoneX.png" alt="Phone Mockup 3" class="carousel-image w-40 h-80 mx-2">
<img src="./images/001.png" alt="Phone Mockup 4" class="carousel-image w-40 h-80 mx-2">
<img src="./images/004.png" alt="Phone Mockup 5" class="carousel-image w-40 h-80 mx-2">
<div class="relative flex justify-center items-center ">
<div id="carousel" class="flex transition-transform duration-500 ease-in-out" >
<img src="./images/000.png" alt="Phone Mockup 1" class="carousel-image w-52 h-80 mx-2 sm:w-64 sm:h-96">
<img src="./images/003.png" alt="Phone Mockup 2" class="carousel-image w-52 h-80 mx-2 sm:w-64 sm:h-96">
<img src="./images/iPhoneX.png" alt="Phone Mockup 3" class="carousel-image w-52 h-80 mx-2 sm:w-64 sm:h-96">
<img src="./images/001.png" alt="Phone Mockup 4" class="carousel-image w-52 h-80 mx-2 sm:w-64 sm:h-96">
<img src="./images/004.png" alt="Phone Mockup 5" class="carousel-image w-52 h-80 mx-2 sm:w-64 sm:h-96">
</div>
</div>

<!-- Slider indicators -->
<div class="absolute z-30 flex space-x-3 rtl:space-x-reverse bottom-4 sm:bottom-10 left-1/2 transform -translate-x-1/2" style="bottom: -50px;">
<button type="button" class="w-3 h-3 rounded-full bg-purple-600" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
Expand All @@ -508,17 +544,16 @@ <h2 class="font-bold text-2xl sm:text-3xl lg:text-4xl uppercase dark:text-white"
<button type="button" class="w-3 h-3 rounded-full bg-purple-600" aria-current="false" aria-label="Slide 4" data-carousel-slide-to="3"></button>
<button type="button" class="w-3 h-3 rounded-full bg-purple-600" aria-current="false" aria-label="Slide 5" data-carousel-slide-to="4"></button>
</div>

<button id="nextBtn" class="absolute right-4 p-3 bg-purple-600 text-white rounded-full shadow-md hover:bg-gray-200 transition-all duration-300 z-20">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>

</div>
<!-- End Second Slider Part -->


<!-- End Second Slider Part -->

<!-- Start Pricing Section -->
<div class="mt-24 bg-gray-50">
Expand Down

0 comments on commit a2e9d06

Please sign in to comment.