feat: styled first testimony as static page
bg - relative from 'output.css' image - relative from templates/index.html ideally i'll figure out how to lay out things, so that relative paths would be same as paths during deploy
This commit is contained in:
efim
parent
ec8c8bb678
commit
71be19c677
|
|
@ -1,102 +1,109 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
|
<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" />
|
||||||
<link href="../../../../dist/output.css" rel="stylesheet" th:remove="all">
|
<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
|
||||||
|
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">
|
<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>
|
<title>Frontend Mentor | [Challenge Name Here]</title>
|
||||||
|
|
||||||
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
|
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
|
||||||
<style>
|
<style>
|
||||||
.attribution { font-size: 11px; text-align: center; }
|
.attribution {
|
||||||
.attribution a { color: hsl(228, 45%, 44%); }
|
font-size: 11px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.attribution a {
|
||||||
|
color: hsl(228, 45%, 44%);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-light-grayish-blue py-20 px-7">
|
<body class="py-20 px-7 space-y-7 text-white bg-light-grayish-blue">
|
||||||
<section
|
<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]">
|
||||||
th:fragment="testimonialCard(t)"
|
<div class="flex items-center">
|
||||||
class="bg-moderate-violet"
|
<img
|
||||||
th:remove="tag"
|
alt="Avatar image"
|
||||||
>
|
src="../../../../public/images/image-daniel.jpg"
|
||||||
some unconditional text
|
class="mr-5 w-10 h-10 rounded-full border-2 border-gray-400"
|
||||||
<p th:text="${t}">Daniel Clifford</p>
|
/>
|
||||||
<!-- <p th:text="${t.author}">author name</p> -->
|
<div class="grow">
|
||||||
</section>
|
<h1>Daniel Clifford</h1>
|
||||||
|
<p class="text-sm opacity-50">Verified Graduate</p>
|
||||||
<p th:text="${oneTestimonial.author}">
|
|
||||||
"Hello"
|
|
||||||
</p>
|
|
||||||
<!-- <section th:replace=":: testimonialCard(${oneTestimonial})"> </section> -->
|
|
||||||
|
|
||||||
<div th:each="t : ${testimonials}">
|
|
||||||
<span th:text="${t.author}">author</span> and <span th:text="${t.text}">the text</span>
|
|
||||||
<!-- <section th:replace=":: testimonialCard(${testimonial})"> </section> -->
|
|
||||||
</div>
|
</div>
|
||||||
<section
|
</div>
|
||||||
th:if="${#lists.isEmpty(testimonials)}"
|
<h2 class="text-2xl">
|
||||||
>
|
I received a job offer mid-course, and the subjects I learned were
|
||||||
Jonathan Walters
|
current, if not more so, in the company I joined. I honestly feel I got
|
||||||
Verified Graduate
|
every penny’s worth.
|
||||||
|
</h2>
|
||||||
The team was very supportive and kept me motivated
|
<p class="opacity-[70%] pb-2">
|
||||||
|
“ I was an EMT for many years before I joined the bootcamp. I’ve been
|
||||||
“ I started as a total newbie with virtually no coding skills. I now work as a mobile engineer
|
looking to make a transition and have heard some people who had an
|
||||||
for a big company. This was one of the best investments I’ve made in myself. ”
|
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>
|
||||||
|
|
||||||
<section
|
<section>
|
||||||
th:if="${#lists.isEmpty(testimonials)}"
|
Jonathan Walters Verified Graduate The team was very supportive and kept
|
||||||
>
|
me motivated “ I started as a total newbie with virtually no coding
|
||||||
Jeanette Harmon
|
skills. I now work as a mobile engineer for a big company. This was one of
|
||||||
Verified Graduate
|
the best investments I’ve made in myself. ”
|
||||||
|
|
||||||
An overall wonderful and rewarding 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. ”
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section
|
<section>
|
||||||
th:if="${#lists.isEmpty(testimonials)}"
|
Jeanette Harmon Verified Graduate An overall wonderful and rewarding
|
||||||
>
|
experience “ Thank you for the wonderful experience! I now have a job I
|
||||||
Patrick Abrams
|
really enjoy, and make a good living while doing something I love. ”
|
||||||
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>
|
||||||
|
|
||||||
<section
|
<section>
|
||||||
th:if="${#lists.isEmpty(testimonials)}"
|
Patrick Abrams Verified Graduate Awesome teaching support from TAs who did
|
||||||
>
|
the bootcamp themselves. Getting guidance from them and learning from
|
||||||
Kira Whittle
|
their experiences was easy. “ The staff seem genuinely concerned about my
|
||||||
Verified Graduate
|
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>
|
||||||
|
|
||||||
Such a life-changing experience. Highly recommended!
|
<section>
|
||||||
|
Kira Whittle Verified Graduate Such a life-changing experience. Highly
|
||||||
“ Before joining the bootcamp, I’ve never written a line of code. I needed some structure from
|
recommended! “ Before joining the bootcamp, I’ve never written a line of
|
||||||
professionals who can help me learn programming step by step. I was encouraged to enroll by a former
|
code. I needed some structure from professionals who can help me learn
|
||||||
student of theirs who can only say wonderful things about the program. The entire curriculum and staff
|
programming step by step. I was encouraged to enroll by a former student
|
||||||
did not disappoint. They were very hands-on and I never had to wait long for assistance. The agile team
|
of theirs who can only say wonderful things about the program. The entire
|
||||||
project, in particular, was outstanding. It took my learning to the next level in a way that no tutorial
|
curriculum and staff did not disappoint. They were very hands-on and I
|
||||||
could ever have. In fact, I’ve often referred to it during interviews as an example of my developent
|
never had to wait long for assistance. The agile team project, in
|
||||||
experience. It certainly helped me land a job as a full-stack developer after receiving multiple offers.
|
particular, was outstanding. It took my learning to the next level in a
|
||||||
100% recommend! ”
|
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>
|
</section>
|
||||||
|
|
||||||
<div class="attribution">
|
<div class="attribution">
|
||||||
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
|
Challenge by
|
||||||
Coded by <a href="#">Your Name Here</a>.
|
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
|
||||||
|
>Frontend Mentor</a
|
||||||
|
>. Coded by <a href="#">Your Name Here</a>.
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue