192 lines
7.8 KiB
HTML
192 lines
7.8 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>
|
||
|
||
<!-- 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 >
|
||
<div class="py-20 px-7 space-y-7 min-h-screen text-white h-max bg-light-grayish-blue">
|
||
<section
|
||
th:each="testimonial : ${testimonials}"
|
||
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"
|
||
>
|
||
<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"
|
||
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 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"
|
||
>
|
||
<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">
|
||
“ 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 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"
|
||
>
|
||
<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 opacity-50">Verified Graduate</p>
|
||
</div>
|
||
</div>
|
||
<h2 class="text-2xl">An overall wonderful and rewarding experience</h2>
|
||
<p class="opacity-[70%] pb-2">
|
||
“ 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 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"
|
||
>
|
||
<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 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">
|
||
“ 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 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"
|
||
>
|
||
<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>
|
||
<p class="opacity-[70%] pb-2">
|
||
“ 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
|
||
>. Coded by <a href="#">Your Name Here</a>.
|
||
</div>
|
||
</body>
|
||
</html>
|