Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding new purchase step shipping component #383

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Adding new purchase step shipping component #383

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 157 additions & 0 deletions components/purchase-step-shipping.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
<div class="mb-10 xl:mb-0 xl:grid xl:grid-cols-12">
<div
class="bg-gray-800 text-center text-yellow-200 flex xl:flex-col items-center justify-around col-span-2 py-4 lg:py-0"
>
<h1 class="xl:text-5xl text-2xl font-bold">S.</h1>
<p class="hidden lg:block"><i class="fa fa-bars fa-2x"></i></p>
<p class="lg:hidden"><i class="fa fa-bars"></i></p>
<p class="hidden lg:block"><i class="fa fa-info-circle fa-2x"></i></p>
<p class="lg:hidden"><i class="fa fa-info-circle"></i></p>
</div>

<div class="bg-white col-span-7 pb-12">
<h1 class="text-5xl pl-10 pt-8 pb-6 font-semibold">
Step 1: &nbsp;&nbsp;Shipping Method
</h1>
<div class="flex flex-col mx-6 lg:mx-0 lg:flex-row justify-around">
<div
class="flex flex-row items-center lg:w-2/5 justify-between bg-gray-100 shadow-lg py-4 px-5"
>
<input type="radio" name="Shipping" id="" />
<div>
<p class="font-bold">UPS Ground Shipping</p>
<p class="text-sm text-gray-500">
Standard delivery in 5-7 days.
</p>
</div>
<p class="font-bold">$9.99</p>
</div>
<div
class="flex flex-row items-center lg:w-2/5 justify-between bg-gray-100 shadow-lg py-4 px-5"
>
<input type="radio" name="Shipping" id="" />
<div>
<p class="font-bold">Priority Express</p>
<p class="text-sm text-gray-500">
Delivery within 24 hours.
</p>
</div>
<p class="font-bold">$29.99</p>
</div>
</div>

<h1 class="text-5xl pl-10 pt-8 pb-6 font-semibold">
Step 2: &nbsp;&nbsp;Address Details
</h1>
<div class="flex flex-col lg:flex-row mx-6 lg:mx-0 justify-around">
<p class="lg:w-2/5 bg-gray-100 shadow-lg py-2 px-5">
<input
type="text"
name=""
id=""
placeholder="First Name"
class="py-3 w-full"
/>
</p>
<p class="mt-4 lg:mt-0 lg:w-2/5 bg-gray-100 shadow-lg py-2 px-5">
<input
type="text"
name=""
id=""
placeholder="Last Name"
class="py-3 w-full"
/>
</p>
</div>

<div class="flex flex-col lg:flex-row mx-6 lg:mx-0 justify-around mt-4">
<p class="lg:w-2/5 bg-gray-100 shadow-lg py-2 px-5">
<input
type="text"
name=""
id=""
placeholder="Email Address"
class="py-3 w-full"
/>
</p>
<p class="mt-4 lg:mt-0 lg:w-2/5 bg-gray-100 shadow-lg py-2 px-5">
<input
type="text"
name=""
id=""
placeholder="Phone Number"
class="py-3 w-full"
/>
</p>
</div>

<div class="flex flex-col lg:flex-row mx-6 lg:mx-0 justify-around mt-4">
<p class="lg:w-2/5 bg-gray-100 shadow-lg py-2 px-5">
<input
type="text"
name=""
id=""
placeholder="City"
class="py-3 w-full"
/>
</p>
<div class="mt-4 lg:mt-0 lg:w-2/5 bg-gray-100 shadow-lg py-2 px-5">
<select name="" id="" class="py-3 w-full">
<option value="">United States</option>
<option value="">Canada</option>
<option value="">Australia</option>
<option value="">United Kingdom</option>
</select>
</div>
</div>
</div>

<div class="col-span-3">
<div
class="flex flex-row font-bold mx-8 justify-between text-2xl mt-16"
>
<p>Shopping Cart</p>
<p>(03)</p>
</div>
<div class="flex flex-row mx-8 justify-between mt-6 mb-2">
<img
src="https://source.unsplash.com/random/400x300"
class="w-24 h-18"
/>
<div>
<p class="text-sm font-bold">Item 1</p>
<p class="text-xs text-gray-500">Small, Blue</p>
<p class="text-xs text-gray-500">Qty: 1</p>
</div>
<p>$12.49</p>
</div>
<div class="flex flex-row mx-8 justify-between mt-6 mb-2">
<img
src="https://source.unsplash.com/random/401x300"
class="w-24 h-18"
/>
<div>
<p class="text-sm font-bold">Item 2</p>
<p class="text-xs text-gray-500">Medium, Red</p>
<p class="text-xs text-gray-500">Qty: 2</p>
</div>
<p>$8.99</p>
</div>
<p class="underline text-xs text-gray-600 ml-8">Modify Cart</p>
<hr class="m-8" />
<div class="flex flex-row justify-between mx-8">
<p class="font-bold">SUBTOTAL</p>
<p class="font-bold">$21.48</p>
</div>
<hr class="m-8" />
<div class="flex flex-row gap-32 mx-8 items-center justify-between">
<p class="text-gray-500 font-bold text-sm">Shipping to USA</p>
<p class="font-bold">$9.99</p>
</div>
<hr class="m-8" />
<div class="flex flex-row gap-32 mx-8 justify-between">
<p class="font-extrabold">TOTAL</p>
<p class="font-extrabold">$31.47</p>
</div>
</div>
</div>