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

feat: styling statically all other testimonials

This commit is contained in:
efim 2023-06-29 16:09:04 +00:00
parent 71be19c677
commit 951d364380
1 changed files with 134 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,75 +31,144 @@
} }
</style> </style>
</head> </head>
<body class="py-20 px-7 space-y-7 text-white bg-light-grayish-blue"> <body >
<section class="py-7 px-10 space-y-4 rounded-xl bg-moderate-violet first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top]"> <div class="py-20 px-7 space-y-7 text-white bg-light-grayish-blue">
<div class="flex items-center"> <section
<img class="py-7 px-10 space-y-4 rounded-xl bg-moderate-violet first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow"
alt="Avatar image" >
src="../../../../public/images/image-daniel.jpg" <div class="flex items-center">
class="mr-5 w-10 h-10 rounded-full border-2 border-gray-400" <img
/> alt="Avatar image"
<div class="grow"> src="../../../../public/images/image-daniel.jpg"
<h1>Daniel Clifford</h1> class="mr-5 w-10 h-10 rounded-full border-2 border-gray-400"
<p class="text-sm opacity-50">Verified Graduate</p> />
<div class="grow">
<h1>Daniel Clifford</h1>
<p class="text-sm opacity-50">Verified Graduate</p>
</div>
</div> </div>
</div> <h2 class="text-2xl">
<h2 class="text-2xl"> I received a job offer mid-course, and the subjects I learned were
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
current, if not more so, in the company I joined. I honestly feel I got got every penny’s worth.
every penny’s worth. </h2>
</h2> <p class="opacity-[70%] pb-2">
<p class="opacity-[70%] pb-2"> “ 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 looking to make a transition and have heard some people who had an
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
amazing experience here. I signed up for the free intro course and found found it incredibly fun! I enrolled shortly thereafter. The next 12
it incredibly fun! I enrolled shortly thereafter. The next 12 weeks was weeks was the best - and most grueling - time of my life. Since
the best - and most grueling - time of my life. Since completing the completing the course, I’ve successfully switched careers, working as
course, I’ve successfully switched careers, working as a Software a Software Engineer at a VR startup. ”
Engineer at a VR startup. ” </p>
</p> </section>
</section>
<section> <section
Jonathan Walters Verified Graduate The team was very supportive and kept 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"
me motivated “ 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 <div class="flex items-center">
the best investments I’ve made in myself. ” <img
</section> 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
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
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> <section
Jeanette Harmon Verified Graduate An overall wonderful and rewarding 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"
experience “ Thank you for the wonderful experience! I now have a job I >
really enjoy, and make a good living while doing something I love. ” <div class="flex items-center">
</section> <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>
<section> <div class="fixed inset-x-0 bottom-0 attribution">
Patrick Abrams Verified Graduate Awesome teaching support from TAs who did
the bootcamp themselves. Getting guidance from them and learning from
their experiences was easy. “ 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. ”
</section>
<section>
Kira Whittle Verified Graduate Such a life-changing experience. Highly
recommended! “ 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! ”
</section>
<div class="attribution">
Challenge by Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank" <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a >Frontend Mentor</a