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 --> <!-- main container -->
<div class="bg-pale-blue w-screen h-screen grid place-content-center"> <div class="bg-pale-blue w-screen h-screen grid place-content-center">
<div <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" /> <img
<h1 class="text-xl font-extrabold my-7">Order Summary</h1> 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 You can now listen to millions of songs, audiobooks, and podcasts on
any device anywhere you like! any device anywhere you like!
</p> </p>
<div <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"> <img src="public/images/icon-music.svg"
<div class="flex flex-col grow pl-3 justify-center"> class="md:w-12 md:h-12"
<p class="font-bold text-sm text-dark-blue">Annual Plan</p> />
<p class="text-desaturated-blue text-sm">$59.99/year</p> <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> </div>
<button <button class="underline text-xs text-bright-blue font-bold">
class="underline text-xs text-bright-blue font-bold" Change
>Change</button> </button>
</div> </div>
<button <button
class="bg-bright-blue rounded-xl drop-shadow-2xl text-white font-bold py-3 my-6 w-[calc(100%-3rem)]" 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> >
Proceed to Payment
</button>
<button class="text-desaturated-blue font-bold">Cancel Order</button> <button class="text-desaturated-blue font-bold">Cancel Order</button>
</div> </div>
</div> </div>