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

feat(12): desktop styling

This commit is contained in:
efim 2023-06-28 12:04:22 +00:00
parent 0816b79c26
commit 6cd6c8cc3e
1 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
12-order-summary-component-thymeleaf/src/main/resources/templates/index.html
View File

@ -38,32 +38,39 @@
<!-- main container -->
<div class="bg-pale-blue w-screen h-screen grid place-content-center">
<div
class="bg-white rounded-xl drop-shadow-2xl flex flex-col items-center w-[320px] h-[565px]"
class="bg-white rounded-xl drop-shadow-2xl flex flex-col items-center w-[320px] h-[565px] md:w-[450px] md:h-[700px]"
>
<img src="public/images/illustration-hero.svg" class="rounded-t-xl w-full" />
<h1 class="text-xl font-extrabold my-7">Order Summary</h1>
<img
src="public/images/illustration-hero.svg"
class="rounded-t-xl w-full"
/>
<h1 class="text-xl font-extrabold my-7 md:text-3xl md:mt-10">Order Summary</h1>
<p class="text-center text-desaturated-blue px-8 mb-5">
<p class="text-center text-desaturated-blue px-8 mb-5 md:px-12">
You can now listen to millions of songs, audiobooks, and podcasts on
any device anywhere you like!
</p>
<div
class="bg-very-pale-blue rounded-xl p-4 w-[calc(100%-3rem)] flex flex-row"
class="bg-very-pale-blue rounded-xl p-4 w-[calc(100%-3rem)] flex flex-row md:w-[calc(100%-6rem)] md:h-24 md:items-center md:p-6"
>
<img src="public/images/icon-music.svg">
<div class="flex flex-col grow pl-3 justify-center">
<p class="font-bold text-sm text-dark-blue">Annual Plan</p>
<p class="text-desaturated-blue text-sm">$59.99/year</p>
<img src="public/images/icon-music.svg"
class="md:w-12 md:h-12"
/>
<div class="flex flex-col grow pl-3 md:pl-6 justify-center">
<p class="font-bold text-sm text-dark-blue md:text-base">Annual Plan</p>
<p class="text-desaturated-blue text-sm md:text-base">$59.99/year</p>
</div>
<button
class="underline text-xs text-bright-blue font-bold"
>Change</button>
<button class="underline text-xs text-bright-blue font-bold">
Change
</button>
</div>
<button
class="bg-bright-blue rounded-xl drop-shadow-2xl text-white font-bold py-3 my-6 w-[calc(100%-3rem)]"
>Proceed to Payment</button>
class="bg-bright-blue rounded-xl drop-shadow-2xl text-white font-bold py-3 my-6 w-[calc(100%-3rem)] md:w-[calc(100%-6rem)] md:my-8"
>
Proceed to Payment
</button>
<button class="text-desaturated-blue font-bold">Cancel Order</button>
</div>
</div>