-
Notifications
You must be signed in to change notification settings - Fork 3
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
1 parent
ed2ebdc
commit 5d5f5ce
Showing
2 changed files
with
209 additions
and
0 deletions.
There are no files selected for viewing
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,111 @@ | ||
| <section class="py-12 md:py-14 bg-black"> | ||
| <div class="container mx-auto px-4"> | ||
| <div class="max-w-md md:max-w-none mx-auto"> | ||
| <ul class="flex items-center"> | ||
| <li class="mr-3"> | ||
| <a class="text-gray-400 font-medium" href="#">Home</a> | ||
| <span class="pl-2 text-gray-400">/</span> | ||
| </li> | ||
| <li class="mr-3"> | ||
| <a class="text-gray-400 font-medium" href="#">Fashion</a> | ||
| <span class="pl-2 text-gray-400">/</span> | ||
| </li> | ||
| <li><a class="text-yellow-500 font-medium" href="#">Basic Gray T-Shirt</a></li> | ||
| </ul> | ||
| <div class="flex flex-wrap mt-10 -mx-4"> | ||
| <div class="w-full md:w-1/2 lg:w-3/5 xl:w-2/3 mb-12 md:mb-0 px-4"> | ||
| <div class="max-w-3xl"> | ||
| <div class="lg:flex h-full"> | ||
| <div class="lg:flex-shrink-0 lg:w-20 lg:mr-6"> | ||
| <div class="flex lg:-mb-4 lg:block justify-between"> | ||
| <a class="block mb-4" href="#"> | ||
| <img class="block sm:w-20 h-20" src="https://shuffle.dev/vendia-assets/images/product-details/clothes1.png" alt=""> | ||
| </a> | ||
| <a class="block mb-4" href="#"> | ||
| <img class="block sm:w-20 h-20" src="https://shuffle.dev/vendia-assets/images/product-details/clothes2.png" alt=""> | ||
| </a> | ||
| <a class="block mb-4" href="#"> | ||
| <img class="block sm:w-20 h-20" src="https://shuffle.dev/vendia-assets/images/product-details/clothes3.png" alt=""> | ||
| </a> | ||
| <a class="block mb-4" href="#"> | ||
| <img class="block sm:w-20 h-20" src="https://shuffle.dev/vendia-assets/images/product-details/clothes4.png" alt=""> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <img class="block h-full w-full max-w-4xl" src="https://shuffle.dev/vendia-assets/images/product-details/clothes-big-1.png" alt=""> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="w-full md:w-1/2 lg:w-2/5 xl:w-1/3 px-4"> | ||
| <div class="p-8 h-full border border-blueGray-800"> | ||
| <div class="pb-8 border-b border-blueGray-800"> | ||
| <span class="inline-block px-2 text-sm mb-5 bg-yellow-500 font-medium rounded-full">Hot</span> | ||
| <h4 class="font-heading font-bold text-2xl text-white mb-3">Basic Gray T-Shirt</h4> | ||
| <p class="text-gray-400 mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing a elit. Nullam to the dictum aliquet accum.</p> | ||
| <span class="block mb-1 text-gray-500 font-medium line-through">$39.99 USD</span> | ||
| <div class="inline-flex items-end"> | ||
| <h4 class="text-2xl font-bold text-white mr-4">$29.99 USD</h4> | ||
| <span class="text-yellow-500">%25 OFF</span> | ||
| </div> | ||
| </div> | ||
| <div class="pt-8 pb-8 border-b border-blueGray-800"> | ||
| <div class="max-w-xs xl:pr-20"> | ||
| <span class="block text-white font-bold">Product</span> | ||
| <span class="block mb-1 text-white font-bold">information</span> | ||
| <div class="flex mb-2"> | ||
| <span class="text-white font-bold">Brand:</span> | ||
| <span class="ml-auto text-sm text-gray-400">Fashion Co.</span> | ||
| </div> | ||
| <div class="flex mb-2"> | ||
| <span class="text-white font-bold">Model name:</span> | ||
| <span class="ml-auto text-sm text-gray-400">Basic Gray T-Shirt</span> | ||
| </div> | ||
| <div class="flex mb-2"> | ||
| <span class="text-white font-bold">Color:</span> | ||
| <span class="ml-auto text-sm text-gray-400">Gray</span> | ||
| </div> | ||
| <div class="flex"> | ||
| <span class="text-white font-bold">Size:</span> | ||
| <span class="ml-auto text-sm text-gray-400">Medium</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="pt-8"> | ||
| <div class="sm:flex mb-8"> | ||
| <div class="mb-5 sm:mb-0 sm:mr-6"> | ||
| <span class="block mb-3 font-bold text-white">Quantity</span> | ||
| <div class="inline-flex px-3 font-bold text-secondary border border-blueGray-800"> | ||
| <input class="w-12 px-2 py-4 text-center md:text-right bg-transparent outline-none placeholder-gray-400 text-gray-300" type="number" placeholder="1"> | ||
| <div class="inline-flex flex-col justify-center"> | ||
| <button class="inline-block mb-1 text-white"> | ||
| <svg width="10" height="7" viewbox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M0.916341 5.75L4.99967 1.66667L9.08301 5.75" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> | ||
| </svg> | ||
| </button> | ||
| <button class="inline-block text-white"> | ||
| <svg width="10" height="7" viewbox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M0.916341 1.25L4.99967 5.33333L9.08301 1.25" stroke="#84878A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> | ||
| </svg> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <span class="block mb-3 font-bold text-white">Select color</span> | ||
| <select class="bg-transparent border border-blueGray-800 pl-6 pr-10 py-4 font-medium text-gray-400 outline-none" name="" id=""> | ||
| <option value="1">Choose option</option> | ||
| <option value="2">Small</option> | ||
| <option value="3">Large</option> | ||
| </select> | ||
| </div> | ||
| </div> | ||
| <a class="inline-block px-12 py-4 text-center text-black font-bold bg-yellow-500 hover:bg-yellow-600 transition duration-200" href="#">Add to Cart</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> |
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,98 @@ | ||
| <section class="py-12 md:py-32 bg-black"> | ||
| <div class="container mx-auto px-4"> | ||
| <div class="max-w-lg lg:max-w-4xl mx-auto"> | ||
| <div class="flex flex-wrap -mx-4"> | ||
| <div class="w-full lg:w-1/2 mb-16 lg:mb-0 px-4"> | ||
| <div> | ||
| <img class="img-fluid block w-full h-full mb-5" src="https://shuffle.dev/vendia-assets/images/product-details/item-bag-gray-big.png" alt="" style="max-height: 400px;"> | ||
| <div class="flex"> | ||
| <a class="inline-block mr-5" href="#"> | ||
| <img class="img-fluid block w-full" src="https://shuffle.dev/vendia-assets/images/product-details/item-bag-gray1.png" alt=""> | ||
| </a> | ||
| <a class="inline-block mr-5" href="#"> | ||
| <img class="img-fluid block w-full" src="https://shuffle.dev/vendia-assets/images/product-details/item-bag-gray2.png" alt=""> | ||
| </a> | ||
| <a class="inline-block" href="#"> | ||
| <img class="img-fluid block w-full" src="https://shuffle.dev/vendia-assets/images/product-details/item-bag-gray3.png" alt=""> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="w-full lg:w-1/2 px-4"> | ||
| <div class="xl:pl-12"> | ||
| <div class="flex mb-2"> | ||
| <button class="inline-block mr-1"> | ||
| <svg width="16" height="15" viewbox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M15.6117 5.66765C15.5086 5.3507 15.2275 5.12631 14.8962 5.09633L10.3778 4.68612L8.59206 0.505394C8.46022 0.198241 8.16023 0 7.82632 0C7.49242 0 7.19231 0.198241 7.06131 0.505394L5.27559 4.68612L0.756428 5.09633C0.425151 5.12691 0.144629 5.3513 0.0409712 5.66765C-0.0620899 5.98459 0.0330893 6.33223 0.283637 6.55197L3.69922 9.54695L2.69214 13.9825C2.61845 14.3087 2.74504 14.6459 3.01565 14.8415C3.16111 14.9472 3.332 15 3.50349 15C3.65086 15 3.79834 14.9608 3.93006 14.882L7.82632 12.5523L11.7219 14.882C12.0076 15.0528 12.367 15.0371 12.637 14.8415C12.9076 14.6459 13.0342 14.3087 12.9605 13.9825L11.9534 9.54695L15.369 6.55197C15.6194 6.33223 15.7147 5.98531 15.6117 5.66765V5.66765Z" fill="#FFBB29"></path> | ||
| </svg> | ||
| </button> | ||
| <button class="inline-block mr-1"> | ||
| <svg width="16" height="15" viewbox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M15.6117 5.66765C15.5086 5.3507 15.2275 5.12631 14.8962 5.09633L10.3778 4.68612L8.59206 0.505394C8.46022 0.198241 8.16023 0 7.82632 0C7.49242 0 7.19231 0.198241 7.06131 0.505394L5.27559 4.68612L0.756428 5.09633C0.425151 5.12691 0.144629 5.3513 0.0409712 5.66765C-0.0620899 5.98459 0.0330893 6.33223 0.283637 6.55197L3.69922 9.54695L2.69214 13.9825C2.61845 14.3087 2.74504 14.6459 3.01565 14.8415C3.16111 14.9472 3.332 15 3.50349 15C3.65086 15 3.79834 14.9608 3.93006 14.882L7.82632 12.5523L11.7219 14.882C12.0076 15.0528 12.367 15.0371 12.637 14.8415C12.9076 14.6459 13.0342 14.3087 12.9605 13.9825L11.9534 9.54695L15.369 6.55197C15.6194 6.33223 15.7147 5.98531 15.6117 5.66765V5.66765Z" fill="#FFBB29"></path> | ||
| </svg> | ||
| </button> | ||
| <button class="inline-block mr-1"> | ||
| <svg width="16" height="15" viewbox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M15.6117 5.66765C15.5086 5.3507 15.2275 5.12631 14.8962 5.09633L10.3778 4.68612L8.59206 0.505394C8.46022 0.198241 8.16023 0 7.82632 0C7.49242 0 7.19231 0.198241 7.06131 0.505394L5.27559 4.68612L0.756428 5.09633C0.425151 5.12691 0.144629 5.3513 0.0409712 5.66765C-0.0620899 5.98459 0.0330893 6.33223 0.283637 6.55197L3.69922 9.54695L2.69214 13.9825C2.61845 14.3087 2.74504 14.6459 3.01565 14.8415C3.16111 14.9472 3.332 15 3.50349 15C3.65086 15 3.79834 14.9608 3.93006 14.882L7.82632 12.5523L11.7219 14.882C12.0076 15.0528 12.367 15.0371 12.637 14.8415C12.9076 14.6459 13.0342 14.3087 12.9605 13.9825L11.9534 9.54695L15.369 6.55197C15.6194 6.33223 15.7147 5.98531 15.6117 5.66765V5.66765Z" fill="#FFBB29"></path> | ||
| </svg> | ||
| </button> | ||
| <button class="inline-block mr-1"> | ||
| <svg width="16" height="15" viewbox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M15.6117 5.66765C15.5086 5.3507 15.2275 5.12631 14.8962 5.09633L10.3778 4.68612L8.59206 0.505394C8.46022 0.198241 8.16023 0 7.82632 0C7.49242 0 7.19231 0.198241 7.06131 0.505394L5.27559 4.68612L0.756428 5.09633C0.425151 5.12691 0.144629 5.3513 0.0409712 5.66765C-0.0620899 5.98459 0.0330893 6.33223 0.283637 6.55197L3.69922 9.54695L2.69214 13.9825C2.61845 14.3087 2.74504 14.6459 3.01565 14.8415C3.16111 14.9472 3.332 15 3.50349 15C3.65086 15 3.79834 14.9608 3.93006 14.882L7.82632 12.5523L11.7219 14.882C12.0076 15.0528 12.367 15.0371 12.637 14.8415C12.9076 14.6459 13.0342 14.3087 12.9605 13.9825L11.9534 9.54695L15.369 6.55197C15.6194 6.33223 15.7147 5.98531 15.6117 5.66765V5.66765Z" fill="#FFBB29"></path> | ||
| </svg> | ||
| </button> | ||
| <button class="inline-block"> | ||
| <svg width="17" height="15" viewbox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path opacity="0.5" d="M16.1712 5.66765C16.0682 5.3507 15.7871 5.12631 15.4558 5.09633L10.9373 4.68612L9.15163 0.505394C9.01979 0.198241 8.7198 0 8.38589 0C8.05199 0 7.75188 0.198241 7.62088 0.505394L5.83516 4.68612L1.316 5.09633C0.984722 5.12691 0.7042 5.3513 0.600542 5.66765C0.49748 5.98459 0.59266 6.33223 0.843207 6.55197L4.25879 9.54695L3.25171 13.9825C3.17802 14.3087 3.30461 14.6459 3.57522 14.8415C3.72068 14.9472 3.89157 15 4.06306 15C4.21043 15 4.35791 14.9608 4.48964 14.882L8.38589 12.5523L12.2814 14.882C12.5672 15.0528 12.9266 15.0371 13.1966 14.8415C13.4672 14.6459 13.5938 14.3087 13.5201 13.9825L12.513 9.54695L15.9286 6.55197C16.179 6.33223 16.2743 5.98531 16.1712 5.66765V5.66765Z" fill="#84878A"></path> | ||
| </svg> | ||
| </button> | ||
| </div> | ||
| <h3 class="text-4xl sm:text-5xl font-bold text-white mb-2">Arm Bag</h3> | ||
| <div class="mb-5"> | ||
| <span class="mr-2 text-2xl font-bold text-white">$29.99 USD</span> | ||
| <span class="text-sm text-gray-500">$39.99 USD</span> | ||
| </div> | ||
| <p class="max-w-sm text-gray-400 mb-16">Lorem ipsum dolor sit amet, consectetur adipiscing a elit. Nullam to the dictum aliquet accumsan porta lectus ridiculus in these of mattis.</p> | ||
| <div class="flex mb-5 items-center"> | ||
| <span class="mr-4 text-white font-bold">Model</span> | ||
| <span class="text-gray-500">#EL809B</span> | ||
| </div> | ||
| <div class="flex mb-5 items-center"> | ||
| <span class="mr-4 text-white font-bold">Color</span> | ||
| <button class="inline-block mr-2"> | ||
| <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M10.0004 19.6C15.3023 19.6 19.6004 15.302 19.6004 10C19.6004 4.69809 15.3023 0.400024 10.0004 0.400024C4.69846 0.400024 0.400391 4.69809 0.400391 10C0.400391 15.302 4.69846 19.6 10.0004 19.6ZM14.4489 8.44855C14.9175 7.97992 14.9175 7.22013 14.4489 6.7515C13.9803 6.28287 13.2205 6.28287 12.7519 6.7515L8.80039 10.703L7.24892 9.1515C6.78029 8.68287 6.02049 8.68287 5.55186 9.1515C5.08323 9.62013 5.08323 10.3799 5.55186 10.8486L7.95186 13.2486C8.42049 13.7172 9.18029 13.7172 9.64892 13.2486L14.4489 8.44855Z" fill="#FFB672"></path> | ||
| </svg> | ||
| </button> | ||
| <button class="inline-block mr-2"> | ||
| <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="#47E1AE"></circle></svg> | ||
| </button> | ||
| <button class="inline-block"> | ||
| <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="white"></circle></svg> | ||
| </button> | ||
| </div> | ||
| <div class="mb-8"> | ||
| <span class="inline-block mr-4 font-bold text-white">Quantity</span> | ||
| <div class="inline-flex px-3 font-bold text-secondary border border-blueGray-800"> | ||
| <input class="w-12 px-2 py-4 text-center md:text-right bg-transparent outline-none placeholder-gray-400 text-gray-300" type="number" placeholder="1"> | ||
| <div class="inline-flex flex-col justify-center"> | ||
| <button class="inline-block mb-1 text-white"> | ||
| <svg width="10" height="7" viewbox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M0.916341 5.75L4.99967 1.66667L9.08301 5.75" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> | ||
| </svg> | ||
| </button> | ||
| <button class="inline-block text-white"> | ||
| <svg width="10" height="7" viewbox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M0.916341 1.25L4.99967 5.33333L9.08301 1.25" stroke="#84878A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> | ||
| </svg> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="flex flex-col sm:flex-row flex-wrap sm:items-center"><a class="inline-block px-8 py-3 mb-3 sm:mb-0 sm:mr-4 text-center text-white font-bold border border-blueGray-800 hover:bg-blueGray-800" href="#">Add to Cart</a><a class="inline-block px-8 py-3 text-center text-black font-bold bg-yellow-500 hover:bg-yellow-600" href="#">Buy Now</a></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> |