Skip to content

Commit

Permalink
responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
Asmaa ElBanna committed Aug 12, 2024
1 parent 728653b commit d3f6bf8
Showing 1 changed file with 9 additions and 11 deletions.
20 changes: 9 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
}

.carousel-image.active {
transform: scale(1.2);
transform: scale(1.1);
opacity: 1;
z-index: 10;
}
Expand Down Expand Up @@ -498,7 +498,7 @@ <h1 class="font-bold text-[#2563EB]">Appy</h1>
<div class="flex justify-center items-center text-center">
<div>
<h2 class="font-bold text-2xl sm:text-3xl lg:text-4xl uppercase dark:text-white">Checkout Our App Interface Look</h2>
<p class="mt-4 mx-auto sm:w-3/4 text-base sm:text-lg lg:text-xl relative lg:w-3/5 dark:text-white ">
<p class="mt-4 mx-auto sm:w-3/4 text-base sm:text-lg lg:text-xl relative lg:w-3/5 dark:text-white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viverra nunc ante velit vitae. Est tellus vitae, nullam lobortis enim. Faucibus amet etiam tincidunt rhoncus, ullamcorper velit. Ullamcorper risus tempor, ac nunc libero urna, feugiat.
</p>
</div>
Expand All @@ -510,8 +510,8 @@ <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 ">

<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">
Expand All @@ -520,27 +520,25 @@ <h2 class="font-bold text-2xl sm:text-3xl lg:text-4xl uppercase dark:text-white"
<img src="./images/004.png" alt="Phone Mockup 5" class="carousel-image w-40 h-80 mx-2">
</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: -60px;">
<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>
<button type="button" class="w-3 h-3 rounded-full bg-purple-600" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
<button type="button" class="w-3 h-3 rounded-full bg-purple-600" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
<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 -->
Expand Down

0 comments on commit d3f6bf8

Please sign in to comment.