efim/Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(15): desktop styling step 1

Browse Source
This commit is contained in:
efim
2023-07-09 19:19:40 +00:00
parent 7b2060c5d0
commit 967864e72d
3 changed files with 155 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
15-multi-step-form/src/main/resources/templates/step1.html
View File

@@ -36,11 +36,11 @@
<![endif]-->
<article
class="flex flex-col items-center w-screen h-screen md:grid md:grid-cols-2 md:p-5 md:bg-white md:w-desktop-form md:h-desktop-form"
class="flex flex-col items-center w-screen h-screen md:grid md:items-start md:p-5 md:bg-white md:rounded-2xl md:grid-cols-[auto_1fr] md:w-desktop-form md:h-desktop-form md:drop-shadow-2xl"
id="form-step"
>
<summary
class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"
class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"
id="sidebar"
>
<ol
@@ -53,7 +53,7 @@
1
</div>
<p class="hidden md:flex md:flex-col">
<span>Step 1</span><span class="font-bold">Your info</span>
<span class="text-light-gray">Step 1</span><span class="font-bold">Your info</span>
</p>
</li>
<li class="items-center md:grid md:gap-x-4 md:grid-cols-[auto_1fr]">
@@ -63,7 +63,7 @@
2
</div>
<p class="hidden md:flex md:flex-col">
<span>Step 2</span><span class="font-bold">Select plan</span>
<span class="text-light-gray">Step 2</span><span class="font-bold">Select plan</span>
</p>
</li>
<li class="items-center md:grid md:gap-x-4 md:grid-cols-[auto_1fr]">
@@ -73,7 +73,7 @@
3
</div>
<p class="hidden md:flex md:flex-col">
<span>Step 3</span><span class="font-bold">Add-ons</span>
<span class="text-light-gray">Step 3</span><span class="font-bold">Add-ons</span>
</p>
</li>
<li class="items-center md:grid md:gap-x-4 md:grid-cols-[auto_1fr]">
@@ -83,44 +83,44 @@
4
</div>
<p class="hidden md:flex md:flex-col">
<span>Step 4</span><span class="font-bold">summary</span>
<span class="text-light-gray">Step 4</span><span class="font-bold">summary</span>
</p>
</li>
</ol>
</summary>
<section
id="multipage-form-container"
class="flex flex-col py-8 px-6 -mt-20 w-11/12 bg-white rounded-xl md:mt-0 drop-shadow-xl"
class="flex flex-col py-8 px-6 -mt-20 w-11/12 bg-white rounded-xl md:px-24 md:mt-0 md:w-full drop-shadow-xl md:drop-shadow-none"
>
<!-- Step 1 start -->
<h1 class="text-2xl font-bold text-marine-blue">Personal info</h1>
<h1 class="text-2xl font-bold md:text-4xl text-marine-blue">Personal info</h1>
<p class="py-3 text-cool-gray">
Please provide your name, email address, and phone number.
</p>
<label for="name" class="pt-3 text-sm text-marine-blue">Name</label>
<label for="name" class="pt-3 text-sm md:pt-5 md:pb-2 text-marine-blue">Name</label>
<input
id="name"
type="text"
placeholder="e.g. Stephen King"
class="p-1 px-4 h-10 text-sm font-semibold rounded border placeholder:text-cool-gray"
class="p-1 px-4 h-10 text-sm font-semibold rounded border md:p-6 md:px-4 md:text-base md:rounded-lg placeholder:text-cool-gray"
/>
<label for="email" class="pt-3 text-sm text-marine-blue"
<label for="email" class="pt-3 text-sm md:pt-5 md:pb-2 text-marine-blue"
>Email Address</label
>
<input
id="email"
type="email"
placeholder="e.g. stephenking@lorem.com"
class="p-1 px-4 h-10 text-sm font-semibold rounded border placeholder:text-cool-gray"
class="p-1 px-4 h-10 text-sm font-semibold rounded border md:p-6 md:px-4 md:text-base md:rounded-lg placeholder:text-cool-gray"
/>
<label for="phone" class="pt-3 text-sm text-marine-blue"
<label for="phone" class="pt-3 text-sm md:pt-5 md:pb-2 text-marine-blue"
>Phone Number</label
>
<input
id="phone"
type="tel"
placeholder="e.g. +1 234 567 890"
class="p-1 px-4 h-10 text-sm font-semibold rounded border placeholder:text-cool-gray"
class="p-1 px-4 h-10 text-sm font-semibold rounded border md:p-6 md:px-4 md:text-base md:rounded-lg placeholder:text-cool-gray"
/>
<!-- Step 1 end -->
@@ -128,12 +128,12 @@
<div class="md:hidden grow"></div>
<section
id="footer-controls"
class="flex flex-row items-center py-4 w-full bg-white"
class="flex flex-row items-center py-4 w-full bg-white md:items-end md:h-full"
>
<div class="grow"></div>
<a
href="step2.html"
class="grid place-content-center mr-3 w-24 h-10 text-sm font-semibold text-white rounded bg-marine-blue"
class="grid place-content-center mr-3 w-24 h-10 text-sm font-semibold text-white rounded md:mr-24 md:w-32 md:h-12 md:text-base md:rounded-lg bg-marine-blue"
>Next Step</a
>
</section>