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

feat(13): desktop grid styling

This commit is contained in:
efim 2023-06-29 19:09:30 +00:00
parent 4248d1b047
commit 36b91cd5d1
1 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
13-testimonials-grid-section/src/main/resources/templates/index.html
View File

@ -31,12 +31,12 @@
} }
</style> </style>
</head> </head>
<body > <body class="grid place-content-center bg-light-grayish-blue">
<div class="py-20 px-7 space-y-7 min-h-screen text-white h-max bg-light-grayish-blue"> <div class="py-20 px-7 space-y-7 min-h-screen text-white md:grid md:gap-[30px] md:py-0 md:px-0 h-max max-w-[1200px] md:grid-cols-[repeat(auto-fill,_255px)] md:auto-rows-[280px] md:mt-[160px] md:space-y-0">
<section <section
th:each="testimonial : ${testimonials}" th:each="testimonial : ${testimonials}"
th:classappend="${testimonial.additionalClasses}" th:classappend="${testimonial.additionalClasses}"
class="py-7 px-10 space-y-4 rounded-xl first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow bg-moderate-violet" class="py-7 px-10 flex flex-col justify-between rounded-xl first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow bg-moderate-violet md:col-span-2"
> >
<div class="flex items-center"> <div class="flex items-center">
<img <img
@ -59,7 +59,7 @@
current, if not more so, in the company I joined. I honestly feel I current, if not more so, in the company I joined. I honestly feel I
got every penny’s worth. got every penny’s worth.
</h2> </h2>
<p class="opacity-[70%] pb-2" <p class="opacity-[70%] pb-2 leading-snug"
th:text="${testimonial.text}" th:text="${testimonial.text}"
> >
“ I was an EMT for many years before I joined the bootcamp. I’ve been “ I was an EMT for many years before I joined the bootcamp. I’ve been
@ -74,7 +74,7 @@
<section <section
th:remove="all" th:remove="all"
class="py-7 px-10 space-y-4 rounded-xl bg-very-dark-grayish-blue first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow" class="py-7 px-10 flex flex-col justify-between rounded-xl bg-very-dark-grayish-blue first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow"
> >
<div class="flex items-center"> <div class="flex items-center">
<img <img
@ -90,7 +90,7 @@
<h2 class="text-2xl"> <h2 class="text-2xl">
The team was very supportive and kept me motivated The team was very supportive and kept me motivated
</h2> </h2>
<p class="opacity-[70%] pb-2"> <p class="opacity-[70%] pb-2 leading-snug">
“ I started as a total newbie with virtually no coding skills. I now “ I started as a total newbie with virtually no coding skills. I now
work as a mobile engineer for a big company. This was one of the best work as a mobile engineer for a big company. This was one of the best
investments I’ve made in myself. ” investments I’ve made in myself. ”
@ -98,7 +98,7 @@
</section> </section>
<section <section
th:remove="all" th:remove="all"
class="py-7 px-10 space-y-4 rounded-xl bg-white text-very-dark-blackish-blue first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow" class="py-7 px-10 flex flex-col justify-between rounded-xl bg-white text-very-dark-blackish-blue first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow"
> >
<div class="flex items-center"> <div class="flex items-center">
<img <img
@ -108,18 +108,18 @@
/> />
<div class="grow"> <div class="grow">
<h1>Jeanette Harmon</h1> <h1>Jeanette Harmon</h1>
<p class="text-sm opacity-50">Verified Graduate</p> <p class="text-sm leading-snug opacity-50">Verified Graduate</p>
</div> </div>
</div> </div>
<h2 class="text-2xl">An overall wonderful and rewarding experience</h2> <h2 class="text-2xl">An overall wonderful and rewarding experience</h2>
<p class="opacity-[70%] pb-2"> <p class="opacity-[70%] pb-2 leading-snug">
“ Thank you for the wonderful experience! I now have a job I really “ Thank you for the wonderful experience! I now have a job I really
enjoy, and make a good living while doing something I love. ” enjoy, and make a good living while doing something I love. ”
</p> </p>
</section> </section>
<section <section
th:remove="all" th:remove="all"
class="py-7 px-10 space-y-4 rounded-xl bg-very-dark-blackish-blue text-white first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow" class="py-7 px-10 flex flex-col justify-between rounded-xl bg-very-dark-blackish-blue text-white first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow md:col-span-2"
> >
<div class="flex items-center"> <div class="flex items-center">
<img <img
@ -129,7 +129,7 @@
/> />
<div class="grow"> <div class="grow">
<h1>Patrick Abrams</h1> <h1>Patrick Abrams</h1>
<p class="text-sm opacity-50">Verified Graduate</p> <p class="text-sm leading-snug opacity-50">Verified Graduate</p>
</div> </div>
</div> </div>
<h2 class="text-2xl"> <h2 class="text-2xl">
@ -137,7 +137,7 @@
Getting guidance from them and learning from their experiences was Getting guidance from them and learning from their experiences was
easy. easy.
</h2> </h2>
<p class="opacity-[70%] pb-2"> <p class="opacity-[70%] pb-2 leading-snug">
“ The staff seem genuinely concerned about my progress which I find “ The staff seem genuinely concerned about my progress which I find
really refreshing. The program gave me the confidence necessary to be really refreshing. The program gave me the confidence necessary to be
able to go out in the world and present myself as a capable junior able to go out in the world and present myself as a capable junior
@ -149,7 +149,7 @@
<section <section
th:remove="all" th:remove="all"
class="py-7 px-10 space-y-4 rounded-xl bg-white text-very-dark-blackish-blue first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow" class="py-7 px-10 flex flex-col justify-between rounded-xl bg-white text-very-dark-blackish-blue first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow md:row-span-2 md:row-start-1 md:col-end-[-1]"
> >
<div class="flex items-center"> <div class="flex items-center">
<img <img
@ -165,7 +165,7 @@
<h2 class="text-2xl"> <h2 class="text-2xl">
Such a life-changing experience. Highly recommended! Such a life-changing experience. Highly recommended!
</h2> </h2>
<p class="opacity-[70%] pb-2"> <p class="opacity-[70%] pb-2 leading-snug">
“ Before joining the bootcamp, I’ve never written a line of code. I “ Before joining the bootcamp, I’ve never written a line of code. I
needed some structure from professionals who can help me learn needed some structure from professionals who can help me learn
programming step by step. I was encouraged to enroll by a former programming step by step. I was encouraged to enroll by a former