196 lines
8.9 KiB
HTML
196 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<!-- displays site properly based on user's device -->
|
||
|
||
<link href="/dist/output.css" rel="stylesheet" />
|
||
<link href="../../../../dist/output.css" rel="stylesheet" th:remove="all" />
|
||
<link
|
||
rel="icon"
|
||
type="image/png"
|
||
sizes="32x32"
|
||
href="public/images/favicon-32x32.png"
|
||
/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<title>Frontend Mentor | [Challenge Name Here]</title>
|
||
|
||
<script type="text/javascript" src="public/deps/htmx.min.js"></script>
|
||
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
|
||
<style>
|
||
.attribution {
|
||
font-size: 11px;
|
||
text-align: center;
|
||
}
|
||
.attribution a {
|
||
color: hsl(228, 45%, 44%);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="grid grid-flow-col-dense place-content-center 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
|
||
th:fragment="testimonialSection(testimonials)"
|
||
th:each="testimonial : ${testimonials}"
|
||
th:classappend="${testimonial.additionalSizeClasses} + ' ' + ${testimonial.additionalColorClasses}"
|
||
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 "
|
||
th:id="${testimonial.id}"
|
||
th:hx-get="'/testimonial/' + ${testimonial.id} + '?nextOrientation=' + ${testimonial.followupOrientation}"
|
||
hx-swap="outerHTML"
|
||
>
|
||
<div class="flex items-center">
|
||
<img
|
||
alt="Avatar image"
|
||
src="../../../../public/images/image-daniel.jpg"
|
||
th:src="${testimonial.avatarUrl}"
|
||
class="mr-5 w-10 h-10 rounded-full border-2 border-gray-400"
|
||
/>
|
||
<div class="grow">
|
||
<h1
|
||
th:text="${testimonial.author}"
|
||
>Daniel Clifford</h1>
|
||
<p class="text-sm opacity-50">Verified Graduate</p>
|
||
</div>
|
||
</div>
|
||
<h2 class="text-2xl"
|
||
th:text="${testimonial.header}"
|
||
>
|
||
I received a job offer mid-course, and the subjects I learned were
|
||
current, if not more so, in the company I joined. I honestly feel I
|
||
got every penny’s worth.
|
||
</h2>
|
||
<p class="opacity-[70%] pb-2 leading-snug"
|
||
th:text="${testimonial.text}"
|
||
>
|
||
“ I was an EMT for many years before I joined the bootcamp. I’ve been
|
||
looking to make a transition and have heard some people who had an
|
||
amazing experience here. I signed up for the free intro course and
|
||
found it incredibly fun! I enrolled shortly thereafter. The next 12
|
||
weeks was the best - and most grueling - time of my life. Since
|
||
completing the course, I’ve successfully switched careers, working as
|
||
a Software Engineer at a VR startup. ”
|
||
</p>
|
||
</section>
|
||
|
||
<section
|
||
th:remove="all"
|
||
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">
|
||
<img
|
||
alt="Avatar image"
|
||
src="../../../../public/images/image-jonathan.jpg"
|
||
class="mr-5 w-10 h-10 rounded-full border-2 border-gray-400"
|
||
/>
|
||
<div class="grow">
|
||
<h1>Jonathan Walters</h1>
|
||
<p class="text-sm opacity-50">Verified Graduate</p>
|
||
</div>
|
||
</div>
|
||
<h2 class="text-2xl">
|
||
The team was very supportive and kept me motivated
|
||
</h2>
|
||
<p class="opacity-[70%] pb-2 leading-snug">
|
||
“ 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
|
||
investments I’ve made in myself. ”
|
||
</p>
|
||
</section>
|
||
<section
|
||
th:remove="all"
|
||
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">
|
||
<img
|
||
alt="Avatar image"
|
||
src="../../../../public/images/image-jeanette.jpg"
|
||
class="mr-5 w-10 h-10 rounded-full border-2 border-gray-400"
|
||
/>
|
||
<div class="grow">
|
||
<h1>Jeanette Harmon</h1>
|
||
<p class="text-sm leading-snug opacity-50">Verified Graduate</p>
|
||
</div>
|
||
</div>
|
||
<h2 class="text-2xl">An overall wonderful and rewarding experience</h2>
|
||
<p class="opacity-[70%] pb-2 leading-snug">
|
||
“ Thank you for the wonderful experience! I now have a job I really
|
||
enjoy, and make a good living while doing something I love. ”
|
||
</p>
|
||
</section>
|
||
<section
|
||
th:remove="all"
|
||
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">
|
||
<img
|
||
alt="Avatar image"
|
||
src="../../../../public/images/image-patrick.jpg"
|
||
class="mr-5 w-10 h-10 rounded-full border-2 border-gray-400"
|
||
/>
|
||
<div class="grow">
|
||
<h1>Patrick Abrams</h1>
|
||
<p class="text-sm leading-snug opacity-50">Verified Graduate</p>
|
||
</div>
|
||
</div>
|
||
<h2 class="text-2xl">
|
||
Awesome teaching support from TAs who did the bootcamp themselves.
|
||
Getting guidance from them and learning from their experiences was
|
||
easy.
|
||
</h2>
|
||
<p class="opacity-[70%] pb-2 leading-snug">
|
||
“ The staff seem genuinely concerned about my progress which I find
|
||
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
|
||
developer. The standard is above the rest. You will get the personal
|
||
attention you need from an incredible community of smart and amazing
|
||
people. ”
|
||
</p>
|
||
</section>
|
||
|
||
<section
|
||
th:remove="all"
|
||
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">
|
||
<img
|
||
alt="Avatar image"
|
||
src="../../../../public/images/image-kira.jpg"
|
||
class="mr-5 w-10 h-10 rounded-full border-2 border-gray-400"
|
||
/>
|
||
<div class="grow">
|
||
<h1>Kira Whittle</h1>
|
||
<p class="text-sm opacity-50">Verified Graduate</p>
|
||
</div>
|
||
</div>
|
||
<h2 class="text-2xl">
|
||
Such a life-changing experience. Highly recommended!
|
||
</h2>
|
||
Quis hendrerit dolor magna eget est lorem ipsum dolor sit amet, consectetur adipiscing elit pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis! Nam libero justo, laoreet sit amet cursus sit amet, dictum sit amet justo donec.
|
||
<p class="opacity-[70%] pb-2 leading-snug">
|
||
“ Before joining the bootcamp, I’ve never written a line of code. I
|
||
needed some structure from professionals who can help me learn
|
||
programming step by step. I was encouraged to enroll by a former
|
||
student of theirs who can only say wonderful things about the program.
|
||
The entire curriculum and staff did not disappoint. They were very
|
||
hands-on and I never had to wait long for assistance. The agile team
|
||
project, in particular, was outstanding. It took my learning to the
|
||
next level in a way that no tutorial could ever have. In fact, I’ve
|
||
often referred to it during interviews as an example of my developent
|
||
experience. It certainly helped me land a job as a full-stack
|
||
developer after receiving multiple offers. 100% recommend! ”
|
||
</p>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="fixed inset-x-0 bottom-0 attribution">
|
||
Challenge by
|
||
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
|
||
>Frontend Mentor</a
|
||
>. Source code at <a href="https://github.com/efim/Learning-HTMX">Your Name Here</a>.
|
||
</div>
|
||
</body>
|
||
</html>
|