Skip to content

Commit

Permalink
.
Browse files Browse the repository at this point in the history
  • Loading branch information
@lordlokion
lordlokion authored Dec 14, 2023
1 parent bcf217d commit 4fbe542
Show file tree
Hide file tree
Showing 3 changed files with 507 additions and 0 deletions.
105 changes: 105 additions & 0 deletions components/shop/cart1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<section class="relative">
<div class="absolute top-0 left-0 w-full sm:py-12 md:py-24">
<div class="max-w-lg pt-6 pb-8 px-8 mx-auto bg-blueGray-900">
<div class="flex mb-10 items-center justify-between">
<h6 class="font-bold text-xl text-white mb-0">Shopping Cart</h6>
<button class="inline-block text-gray-400 hover:text-gray-200">
<svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 11L11 1M1 1L11 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</div>
<div class="flex flex-wrap -mx-2 pb-6 border-b border-blueGray-800">
<div class="w-1/4 px-2">
<img class="block h-full" src="https://shuffle.dev/vendia-assets/images/cart-popup/item1.png" alt="">
</div>
<div class="w-2/4 px-2">
<div class="flex flex-col h-full">
<h6 class="font-bold text-white mb-1">Zip Tote Basket</h6>
<span class="block pb-4 mb-auto font-medium text-gray-400">White and black</span>
<select class="w-14 text-sm pl-2 text-white bg-blueGray-900 outline-none" name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
</div>
</div>
<div class="w-1/4 px-2">
<div class="flex flex-col items-end h-full">
<button class="inline-block mb-auto font-medium text-sm text-gray-400 hover:text-gray-200">Remove</button>
<span class="block mt-2 text-sm font-bold text-white">$140.00</span>
</div>
</div>
</div>
<div class="flex flex-wrap -mx-2 py-6 border-b border-blueGray-800">
<div class="w-1/4 px-2">
<img class="block h-full w-full" src="https://shuffle.dev/vendia-assets/images/cart-popup/item1.png" alt="">
</div>
<div class="w-2/4 px-2">
<div class="flex flex-col h-full">
<h6 class="font-bold text-white mb-1">Zip Tote Basket</h6>
<span class="block pb-4 mb-auto font-medium text-gray-400">White and black</span>
<select class="w-14 text-sm pl-2 text-white bg-blueGray-900 outline-none" name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
</div>
</div>
<div class="w-1/4 px-2">
<div class="flex flex-col items-end h-full">
<button class="inline-block mb-auto font-medium text-sm text-gray-400 hover:text-gray-200">Remove</button>
<span class="block mt-2 text-sm font-bold text-white">$140.00</span>
</div>
</div>
</div>
<div class="flex flex-wrap -mx-2 pt-6 mb-10">
<div class="w-1/4 px-2">
<img class="block h-full w-full" src="https://shuffle.dev/vendia-assets/images/cart-popup/item1.png" alt="" style="max-width: 110px;">
</div>
<div class="w-2/4 px-2">
<div class="flex flex-col h-full">
<h6 class="font-bold text-white mb-1">Zip Tote Basket</h6>
<span class="block pb-4 mb-auto font-medium text-gray-400">White and black</span>
<select class="w-14 text-sm pl-2 text-white bg-blueGray-900 outline-none" name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
</div>
</div>
<div class="w-1/4 px-2">
<div class="flex flex-col items-end h-full">
<button class="inline-block mb-auto font-medium text-sm text-gray-400 hover:text-gray-200">Remove</button>
<span class="block mt-2 text-sm font-bold text-white">$140.00</span>
</div>
</div>
</div>
<div class="bg-black p-6">
<div class="mb-5 pb-5 border-b border-blueGray-800">
<div class="flex content-center justify-between">
<span class="font-medium text-gray-400">Subtotal</span>
<span class="font-bold text-gray-300">$262.00</span>
</div>
</div>
<div class="mb-5 pb-5 border-b border-blueGray-800">
<div class="flex content-center justify-between">
<span class="font-medium text-gray-400">Shipping</span>
<span class="font-bold text-gray-300">$5.00</span>
</div>
</div>
<div class="mb-5 pb-5 border-b border-blueGray-800">
<div class="flex content-center justify-between">
<span class="font-medium text-gray-400">Tax</span>
<span class="font-bold text-gray-300">$53.40</span>
</div>
</div>
<div class="flex mb-6 content-center justify-between">
<span class="font-bold text-white">Order total</span>
<span class="text-sm font-bold text-white">$320.40</span>
</div>
<button class="inline-block w-full px-6 py-3 text-center font-bold text-black bg-yellow-500 hover:bg-yellow-600 transition duration-200">Continue to Payment</button>
</div>
</div>
</div>
</section>
178 changes: 178 additions & 0 deletions components/shop/cart2.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
<section class="py-12 md:py-24 bg-black">
<div class="container mx-auto px-4">
<h3 class="text-4xl text-white font-bold mb-12">Shopping Cart</h3>
<div class="flex flex-wrap -mx-4">
<div class="w-full lg:w-7/12 px-4 mb-12 lg:mb-0">
<div class="py-10 border-t border-b border-gray-800 relative">
<button class="inline-block p-0 absolute top-0 right-0 mt-10 w-auto">
<svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 11L11 1M1 1L11 11" stroke="#84878A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<div class="flex flex-wrap -mx-4">
<div class="w-full sm:w-1/3 px-4 mb-6 sm:mb-0">
<img class="block w-full" src="https://shuffle.dev/vendia-assets/images/cart/cart-item1.png" alt="">
</div>
<div class="w-full sm:w-2/3 px-4">
<div class="flex flex-col h-full">
<div>
<div class="sm:flex items-start">
<div class="flex-shrink-0 mr-4 md:mr-12 lg:mr-32 mb-6 sm:mb-4">
<span class="text-white font-medium">Basic Tee</span>
<div>
<span class="inline-block mr-5 text-sm font-medium text-gray-400">Sienna</span>
<span class="inline-block mr-5 text-sm font-medium text-gray-400">Large</span>
</div>
</div>
<div class="mb-6 sm:mb-4">
<div class="inline-flex mb-4 pr-1 font-bold text-gray-400 border border-blueGray-800 rounded">
<select class="w-12 text-sm font-bold text-center bg-transparent outline-none" name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
<h6 class="text-sm font-bold text-white">$32.00</h6>
</div>
<div class="mt-auto inline-flex items-center">
<svg width="14" height="10" viewbox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7071 0.292893C14.0976 0.683417 14.0976 1.31658 13.7071 1.70711L5.70711 9.70711C5.31658 10.0976 4.68342 10.0976 4.29289 9.70711L0.292893 5.70711C-0.0976311 5.31658 -0.0976311 4.68342 0.292893 4.29289C0.683417 3.90237 1.31658 3.90237 1.70711 4.29289L5 7.58579L12.2929 0.292893C12.6834 -0.0976311 13.3166 -0.0976311 13.7071 0.292893Z" fill="#F2FF5A"></path>
</svg>
<span class="ml-2 text-sm font-bold text-gray-400">In stock</span>
</div>
</div>
</div>
</div>
</div>
<div class="py-10 border-b border-gray-800 relative">
<button class="inline-block p-0 absolute top-0 right-0 mt-10 w-auto">
<svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 11L11 1M1 1L11 11" stroke="#84878A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<div class="flex flex-wrap -mx-4">
<div class="w-full sm:w-1/3 px-4 mb-6 sm:mb-0">
<img class="block w-full" src="https://shuffle.dev/vendia-assets/images/cart/cart-item2.png" alt="">
</div>
<div class="w-full sm:w-2/3 px-4">
<div class="flex flex-col h-full">
<div>
<div class="sm:flex items-start">
<div class="flex-shrink-0 mr-4 md:mr-12 lg:mr-32 mb-6 sm:mb-4">
<span class="text-white font-medium">Basic Tee</span>
<div>
<span class="inline-block mr-5 text-sm font-medium text-gray-400">Black</span>
<span class="inline-block mr-5 text-sm font-medium text-gray-400">Medium</span>
</div>
</div>
<div class="mb-6 sm:mb-4">
<div class="inline-flex mb-4 pr-1 font-bold text-gray-400 border border-blueGray-800 rounded">
<select class="w-12 text-sm font-bold text-center bg-transparent outline-none" name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
<h6 class="text-sm font-bold text-white">$32.00</h6>
</div>
<div class="mt-auto inline-flex items-center">
<svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM9 4C9 3.44772 8.55229 3 8 3C7.44772 3 7 3.44772 7 4V8C7 8.26522 7.10536 8.51957 7.29289 8.70711L10.1213 11.5355C10.5118 11.9261 11.145 11.9261 11.5355 11.5355C11.9261 11.145 11.9261 10.5118 11.5355 10.1213L9 7.58579V4Z" fill="#84878A"></path>
</svg>
<span class="ml-2 text-sm font-bold text-gray-400">Ships in 3-4 weeks</span>
</div>
</div>
</div>
</div>
</div>
<div class="py-10 border-b border-gray-800 relative">
<button class="inline-block p-0 absolute top-0 right-0 mt-10 w-auto">
<svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 11L11 1M1 1L11 11" stroke="#84878A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<div class="flex flex-wrap -mx-4">
<div class="w-full sm:w-1/3 px-4 mb-6 sm:mb-0">
<img class="block w-full" src=https://shuffle.dev/vendia-assets/images/cart/cart-item3.png" alt="">
</div>
<div class="w-full sm:w-2/3 px-4">
<div class="flex flex-col h-full">
<div>
<div class="sm:flex items-start">
<div class="flex-shrink-0 mr-4 md:mr-12 lg:mr-32 mb-6 sm:mb-4">
<span class="text-white font-medium">Basic Tee</span>
<div>
<span class="inline-block mr-5 text-sm font-medium text-gray-400">Sienna</span>
<span class="inline-block mr-5 text-sm font-medium text-gray-400">Large</span>
</div>
</div>
<div class="mb-6 sm:mb-4">
<div class="inline-flex mb-4 pr-1 font-bold text-gray-400 border border-blueGray-800 rounded">
<select class="w-12 text-sm font-bold text-center bg-transparent outline-none" name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
<h6 class="text-sm font-bold text-white">$32.00</h6>
</div>
<div class="mt-auto inline-flex items-center">
<svg width="14" height="10" viewbox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7071 0.292893C14.0976 0.683417 14.0976 1.31658 13.7071 1.70711L5.70711 9.70711C5.31658 10.0976 4.68342 10.0976 4.29289 9.70711L0.292893 5.70711C-0.0976311 5.31658 -0.0976311 4.68342 0.292893 4.29289C0.683417 3.90237 1.31658 3.90237 1.70711 4.29289L5 7.58579L12.2929 0.292893C12.6834 -0.0976311 13.3166 -0.0976311 13.7071 0.292893Z" fill="#F2FF5A"></path>
</svg>
<span class="ml-2 text-sm font-bold text-gray-400">In stock</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full lg:w-5/12 px-4">
<div class="lg:max-w-md lg:ml-auto p-8 bg-blueGray-900">
<h5 class="text-xl font-bold text-white mb-6">Order summary</h5>
<div class="mb-4 pb-4 border-b border-gray-800">
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-gray-400">Subtotal</span>
<span class="text-sm font-medium text-gray-400">$99.00</span>
</div>
</div>
<div class="mb-4 pb-4 border-b border-gray-800">
<div class="flex items-center justify-between">
<div class="flex items-center">
<span class="mr-2 text-sm font-medium text-gray-400">Shipping estimate</span>
<svg width="15" height="15" viewbox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 0C3.35795 0 0 3.35795 0 7.5C0 11.642 3.35795 15 7.5 15C11.642 15 15 11.642 15 7.5C15 3.35795 11.642 0 7.5 0ZM6.74455 5.41023C6.90136 5.10136 7.01727 4.95477 7.11341 4.87841C7.18568 4.82114 7.28386 4.77273 7.5 4.77273C7.92614 4.77273 8.18182 5.09318 8.18182 5.43955C8.18182 5.62909 8.145 5.72318 8.04409 5.84318C7.90296 6.01091 7.64182 6.21477 7.125 6.55636L6.81818 6.75818V8.18182C6.81818 8.36265 6.89002 8.53607 7.01788 8.66394C7.14575 8.7918 7.31917 8.86364 7.5 8.86364C7.68083 8.86364 7.85425 8.7918 7.98212 8.66394C8.10998 8.53607 8.18182 8.36265 8.18182 8.18182V7.48841C8.55136 7.23341 8.86159 6.98932 9.08659 6.72205C9.41182 6.33614 9.54545 5.92432 9.54545 5.43955C9.54545 4.43727 8.77295 3.40909 7.5 3.40909C7.03364 3.40909 6.62114 3.52909 6.26727 3.80932C5.93727 4.07045 5.71227 4.42977 5.52818 4.79455C5.4854 4.87464 5.45905 4.96247 5.45068 5.05288C5.4423 5.14329 5.45207 5.23447 5.47941 5.32105C5.50675 5.40764 5.55111 5.48789 5.60988 5.5571C5.66866 5.62631 5.74066 5.68309 5.82168 5.7241C5.90269 5.7651 5.99108 5.78951 6.08165 5.7959C6.17223 5.80228 6.26316 5.79051 6.34913 5.76127C6.43509 5.73204 6.51435 5.68592 6.58225 5.62564C6.65015 5.56536 6.70533 5.49212 6.74455 5.41023ZM8.18182 10.5682C8.18182 10.3874 8.10998 10.2139 7.98212 10.0861C7.85425 9.9582 7.68083 9.88636 7.5 9.88636C7.31917 9.88636 7.14575 9.9582 7.01788 10.0861C6.89002 10.2139 6.81818 10.3874 6.81818 10.5682V10.9091C6.81818 11.0899 6.89002 11.2633 7.01788 11.3912C7.14575 11.5191 7.31917 11.5909 7.5 11.5909C7.68083 11.5909 7.85425 11.5191 7.98212 11.3912C8.10998 11.2633 8.18182 11.0899 8.18182 10.9091V10.5682Z" fill="#84878A"></path>
</svg>
</div>
<span class="text-sm font-medium text-gray-400">$5.00</span>
</div>
</div>
<div class="mb-4 pb-4 border-b border-gray-800">
<div class="flex items-center justify-between">
<div class="flex items-center">
<span class="mr-2 text-sm font-medium text-gray-400">Tax estimate</span>
<svg width="15" height="15" viewbox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 0C3.35795 0 0 3.35795 0 7.5C0 11.642 3.35795 15 7.5 15C11.642 15 15 11.642 15 7.5C15 3.35795 11.642 0 7.5 0ZM6.74455 5.41023C6.90136 5.10136 7.01727 4.95477 7.11341 4.87841C7.18568 4.82114 7.28386 4.77273 7.5 4.77273C7.92614 4.77273 8.18182 5.09318 8.18182 5.43955C8.18182 5.62909 8.145 5.72318 8.04409 5.84318C7.90296 6.01091 7.64182 6.21477 7.125 6.55636L6.81818 6.75818V8.18182C6.81818 8.36265 6.89002 8.53607 7.01788 8.66394C7.14575 8.7918 7.31917 8.86364 7.5 8.86364C7.68083 8.86364 7.85425 8.7918 7.98212 8.66394C8.10998 8.53607 8.18182 8.36265 8.18182 8.18182V7.48841C8.55136 7.23341 8.86159 6.98932 9.08659 6.72205C9.41182 6.33614 9.54545 5.92432 9.54545 5.43955C9.54545 4.43727 8.77295 3.40909 7.5 3.40909C7.03364 3.40909 6.62114 3.52909 6.26727 3.80932C5.93727 4.07045 5.71227 4.42977 5.52818 4.79455C5.4854 4.87464 5.45905 4.96247 5.45068 5.05288C5.4423 5.14329 5.45207 5.23447 5.47941 5.32105C5.50675 5.40764 5.55111 5.48789 5.60988 5.5571C5.66866 5.62631 5.74066 5.68309 5.82168 5.7241C5.90269 5.7651 5.99108 5.78951 6.08165 5.7959C6.17223 5.80228 6.26316 5.79051 6.34913 5.76127C6.43509 5.73204 6.51435 5.68592 6.58225 5.62564C6.65015 5.56536 6.70533 5.49212 6.74455 5.41023ZM8.18182 10.5682C8.18182 10.3874 8.10998 10.2139 7.98212 10.0861C7.85425 9.9582 7.68083 9.88636 7.5 9.88636C7.31917 9.88636 7.14575 9.9582 7.01788 10.0861C6.89002 10.2139 6.81818 10.3874 6.81818 10.5682V10.9091C6.81818 11.0899 6.89002 11.2633 7.01788 11.3912C7.14575 11.5191 7.31917 11.5909 7.5 11.5909C7.68083 11.5909 7.85425 11.5191 7.98212 11.3912C8.10998 11.2633 8.18182 11.0899 8.18182 10.9091V10.5682Z" fill="#84878A"></path>
</svg>
</div>
<span class="text-sm font-medium text-gray-400">$8.32</span>
</div>
</div>
<div class="mb-6">
<div class="flex items-center justify-between">
<span class="font-bold text-white">Order total</span>
<span class="font-bold text-white">$112.32</span>
</div>
</div>
<button class="block px-6 py-3 text-center font-bold text-black bg-yellow-500 hover:bg-yellow-600 transition duration-200 w-full">Checkout</button>
</div>
</div>
</div>
</div>
</section>
Loading

0 comments on commit 4fbe542

Please sign in to comment.