-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
abdulrahman
committed
Oct 27, 2024
1 parent
6ef0783
commit 95fc214
Showing
12 changed files
with
2,023 additions
and
1,797 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Document</title> | ||
| </head> | ||
| <body> | ||
| <div class=" px-9lg:px-[100px] xl:px-[200px]"> | ||
| <div class="px-10"> | ||
| <div class="w-full relative "> | ||
| <div class="swiper multiple-slide-carousel swiper-container relative"> | ||
| <div class="swiper-wrapper"> | ||
| <!-- Slide --> | ||
| <div class="swiper-slide"> | ||
| <div class="p-3 flex-col justify-center items-center bg-white rounded border border-[#e4e7e9] cursor-pointer"> | ||
| <img class="pb-3 m-auto w-3/6" src="./../assets/images/best deals.svg" /> | ||
| <h3 class="text-center text-[#191c1e]">Computer & Laptop</h3> | ||
| </div> | ||
| </div> | ||
| <!-- Slide --> | ||
| <div class="swiper-slide"> | ||
| <div class="p-3 flex-col justify-center items-center bg-white rounded border border-[#e4e7e9] cursor-pointer"> | ||
| <img class="pb-3 m-auto w-3/6" src="./../assets/images/best deals.svg" /> | ||
| <h3 class="text-center text-[#191c1e]">Computer & Laptop</h3> | ||
| </div> | ||
| </div> | ||
| <!-- Slide --> | ||
| <div class="swiper-slide"> | ||
| <div class="p-3 flex-col justify-center items-center bg-white rounded border border-[#e4e7e9] cursor-pointer"> | ||
| <img class="pb-3 m-auto w-3/6" src="./../assets/images/best deals.svg" /> | ||
| <h3 class="text-center text-[#191c1e]">Computer & Laptop</h3> | ||
| </div> | ||
| </div> | ||
| <!-- Slide --> | ||
| <div class="swiper-slide"> | ||
| <div class="p-3 flex-col justify-center items-center bg-white rounded border border-[#e4e7e9] cursor-pointer"> | ||
| <img class="pb-3 m-auto w-3/6" src="./../assets/images/best deals.svg" /> | ||
| <h3 class="text-center text-[#191c1e]">Computer & Laptop</h3> | ||
| </div> | ||
| </div> | ||
| <!-- Slide --> | ||
| <div class="swiper-slide"> | ||
| <div class="p-3 flex-col justify-center items-center bg-white rounded border border-[#e4e7e9] cursor-pointer"> | ||
| <img class="pb-3 m-auto w-3/6" src="./../assets/images/best deals.svg" /> | ||
| <h3 class="text-center text-[#191c1e]">Computer & Laptop</h3> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <!-- Navigation Buttons --> | ||
| </div> | ||
| <button id="slider-button-left" class="!w-12 !h-12 swiper-button-prev del bg-[#f98131] duration-500 border border-solid border-[#f98131] rounded-full flex justify-center items-center hover:bg-white !text-white hover:!text-black absolute left-0 top-[50%] transform -translate-x-3/4 "> | ||
| <i class="fa fa-arrow-left" aria-hidden="true"></i> | ||
| </button> | ||
|
|
||
| <button id="slider-button-right" class="!w-12 !h-12 swiper-button-next del bg-[#f98131] duration-500 border border-solid border-[#f98131] rounded-full flex justify-center items-center hover:bg-white !text-white hover:!text-black absolute right-0 top-[50%] transform translate-x-3/4 "> | ||
| <i class="fa fa-arrow-right" aria-hidden="true"></i> | ||
| </button> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Document</title> | ||
| </head> | ||
| <body> | ||
| <div class="lg:px-[150px] w-full py-2 bg-[#f8f8f8] justify-between items-center gap-2 flex flex-col lg:flex-row"> | ||
| <!-- Main container for the header section --> | ||
|
|
||
| <!-- Navigation and language selection (visible on small screens and up) --> | ||
| <ul class="hidden sm:flex text-center min-[360px]:gap-3"> | ||
| <li class="self-stretch text-[#666666] text-[13px] flex"> | ||
| <form class="max-w-sm mx-auto"> | ||
| <div class="relative"> | ||
| <!-- Dropdown button for language selection --> | ||
| <div id="countries-button" class="flex"> | ||
| <img src="./../assets/images/countries/usa.svg" alt="USA" class="w-5 h-5 mr-2"> English | ||
| </div> | ||
|
|
||
| <!-- Dropdown menu for available languages --> | ||
| <div id="dropdown-countries" class="absolute z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-60 mt-1"> | ||
| <ul class="py-2 text-sm text-gray-700"> | ||
| <!-- Language option: Arabic --> | ||
| <li> | ||
| <button type="button" class="flex items-center w-full px-4 py-2 hover:bg-gray-100"> | ||
| <img src="./../assets/images/icon.svg" alt="Arabic" class="w-5 h-5 mr-2"> Arabic | ||
| </button> | ||
| </li> | ||
| <!-- Language option: Mandarin --> | ||
| <li> | ||
| <button type="button" class="flex items-center w-full px-4 py-2 hover:bg-gray-100"> | ||
| <img src="./../assets/images/countries/china.svg" alt="Mandarin" class="w-5 h-5 mr-2"> Mandarin | ||
| </button> | ||
| </li> | ||
| <!-- Language option: Russian --> | ||
| <li> | ||
| <button type="button" class="flex items-center w-full px-4 py-2 hover:bg-gray-100"> | ||
| <img src="./../assets/images/countries/russia.svg" alt="Russian" class="w-5 h-5 mr-2"> Russian | ||
| </button> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </li> | ||
|
|
||
| <!-- Divider between language selection and other items --> | ||
| <li class="m-1.5 w-0 h-[10px] border border-[#d6d6d6]"></li> | ||
|
|
||
| <!-- Placeholder text --> | ||
| <li class="self-stretch text-[#666666] text-[13px]">Lorem, ipsum.</li> | ||
|
|
||
| <!-- Divider --> | ||
| <li class="m-1.5 w-0 h-[10px] border border-[#d6d6d6]"></li> | ||
|
|
||
| <!-- Placeholder text --> | ||
| <li class="self-stretch text-[#666666] text-[13px]">Lorem, ipsum.</li> | ||
|
|
||
| <!-- Divider --> | ||
| <li class="m-1.5 w-0 ma h-[10px] border border-[#d6d6d6]"></li> | ||
|
|
||
| <!-- Placeholder text --> | ||
| <li class="text-[#666666] text-[13px] flex">Lorem, ipsum.</li> | ||
| </ul> | ||
|
|
||
| <!-- Contact information section --> | ||
| <ul class="flex gap-2 pt-[3px] pb-0.5"> | ||
| <!-- Email contact --> | ||
| <li class="text-[#666666] text-[13px]">[email protected] | ||
| <i class="pl-2 fa-regular text-[#62D0B6] fa-envelope"></i> | ||
| </li> | ||
|
|
||
| <!-- Divider --> | ||
| <li class="m-1.5 shrink-0 mx-0 h-[10px] border border-[#d6d6d6]"></li> | ||
|
|
||
| <!-- Phone contact --> | ||
| <li class="text-[#666666] text-[13px]">+966556754472 | ||
| <i class="pr-2 fa-solid fa-phone-volume text-[#62D0B6] transform -scale-x-100"></i> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Document</title> | ||
| </head> | ||
| <body> | ||
| <div class="lg:px-[100px] xl:px-[200px] p-3"> | ||
| <!-- Main container for the support features --> | ||
| <div class="border p-4 rounded-md border-[#e4e7e9] items-center justify-center flex flex-row flex-wrap"> | ||
|
|
||
| <!-- First row of support features --> | ||
| <div class="flex justify-center items-center w-full lg:w-fit min-[420px]:flex-row flex-col"> | ||
| <!-- Support feature 1 --> | ||
| <div class="p-4 bg-white justify-center grow items-center gap-4 inline-flex"> | ||
| <img src="./../assets/images/Package.svg" alt="Package Icon"> | ||
| <div class="flex-col justify-start items-start gap-1 inline-flex"> | ||
| <div class="text-[#191c1e]">Support 24/7</div> | ||
| <div class="text-[#5f6c72]">Live contact/message</div> | ||
| </div> | ||
| </div> | ||
| <!-- Vertical divider between support features --> | ||
| <div class="m-4 w-0 min-[420px]:block hidden ma h-14 border border-[#d6d6d6]"></div> | ||
|
|
||
| <!-- Support feature 2 --> | ||
| <div class="grow p-4 bg-white justify-center items-center gap-4 inline-flex"> | ||
| <img src="./../assets/images/Trophy.svg" alt="Trophy Icon"> | ||
| <div class="flex-col justify-start items-start gap-1 inline-flex"> | ||
| <div class="text-[#191c1e]">Support 24/7</div> | ||
| <div class="text-[#5f6c72]">Live contact/message</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Vertical divider for larger screens --> | ||
| <div class="m-4 w-0 hidden 2xl:block ma h-14 border border-[#d6d6d6]"></div> | ||
|
|
||
| <!-- Second row of support features --> | ||
| <div class="flex justify-center items-center w-full lg:w-fit min-[420px]:flex-row flex-col"> | ||
| <!-- Support feature 3 --> | ||
| <div class="p-4 grow bg-white justify-center items-center gap-4 inline-flex"> | ||
| <img src="./../assets/images/CreditCard.svg" alt="Credit Card Icon"> | ||
| <div class="flex-col justify-start items-start gap-1 inline-flex"> | ||
| <div class="text-[#191c1e]">Support 24/7</div> | ||
| <div class="text-[#5f6c72]">Live contact/message</div> | ||
| </div> | ||
| </div> | ||
| <!-- Vertical divider --> | ||
| <div class="min-[420px]:block hidden m-4 w-0 ma h-14 border border-[#d6d6d6]"></div> | ||
|
|
||
| <!-- Support feature 4 --> | ||
| <div class="grow p-4 bg-white justify-center items-center gap-4 inline-flex"> | ||
| <img src="./../assets/images/Headphones.svg" alt="Headphones Icon"> | ||
| <div class="flex-col justify-start items-start gap-1 inline-flex"> | ||
| <div class="text-[#191c1e]">Support 24/7</div> | ||
| <div class="text-[#5f6c72]">Live contact/message</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
Oops, something went wrong.