Skip to content

Instantly share code, notes, and snippets.

@nerdpraxis

nerdpraxis/index.html

Created October 1, 2022 21:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nerdpraxis/0fbb804a2c0701a388f2d71376e0eb6c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nerdpraxis/0fbb804a2c0701a388f2d71376e0eb6c to your computer and use it in GitHub Desktop.
Download ZIP
complicated grid layout
Raw
index.html
<main class="testimonial-grid">
<article class="testimonial grid-col-span-2 flow bg-primary-400 quote text-neutral-100">
<div class="flex">
<div>
<img src="./images/image-daniel.jpg" alt="daniel clifford">
</div>
<div>
<h2 class="name">Daniel Clifford</h2>
<p class="position">Verified Graduate</p>
</div>
</div>
<p>
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.
</p>
<p>
“ 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>
</article>
<article class="testimonial flow bg-secondary-400 text-neutral-100">
<div class="flex">
<div>
<img src="./images/image-jonathan.jpg" alt="Jonathan Walters">
</div>
<div>
<h2 class="name">Jonathan Walters</h2>
<p class="position">Verified Graduate</p>
</div>
</div>
<p>
The team was very supportive and kept me motivated
</p>
<p>
“ 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>
</article>
<article class="testimonial flow bg-neutral-100 text-secondary-400">
<div class="flex">
<div>
<img src="./images/image-jeanette.jpg" alt="Jeanette Harmon">
</div>
<div>
<h2 class="name">Jeanette Harmon</h2>
<p class="position">Verified Graduate</p>
</div>
</div>
<p>
An overall wonderful and rewarding experience</p>
<p>
“ 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>
</article>
<article class="testimonial grid-col-span-2 flow bg-secondary-500 text-neutral-100">
<div class="flex">
<div>
<img class="border-primary-400" src="./images/image-patrick.jpg" alt="Patrick Abrams">
</div>
<div>
<h2 class="name">Patrick Abrams</h2>
<p class="position">Verified Graduate</p>
</div>
</div>
<p>
Awesome teaching support from TAs who did the bootcamp themselves. Getting guidance from them and
learning from their experiences was easy.
</p>
<p>
“ 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>
</article>
<article class="testimonial flow bg-neutral-100 text-secondary-400">
<div class="flex">
<div>
<img src="./images/image-kira.jpg" alt="Kira Whittle">
</div>
<div>
<h2 class="name">Kira Whittle</h2>
<p class="position">Verified Graduate</p>
</div>
</div>
<p>
Such a life-changing experience. Highly recommended!
</p>
<p>
“ 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>
</article>
</main>
Raw
style.scss
body {
display: grid;
place-content: center;
min-height: 100vh;
font-family: var(--ff-primary);
font-weight: var(--fw-400);
background-color: hsl(var(--clr-neutral-200));
}
/* utilities */
.flex {
display: flex;
gap: var(--gap, 1rem);
}
.flow > *:where(:not(:first-child)) {
margin-top: var(--flow-spacer, 1em);
}
.bg-primary-400 {
background: hsl(var(--clr-primary-400));
}
.bg-secondary-400 {
background: hsl(var(--clr-secondary-400));
}
.bg-secondary-500 {
background: hsl(var(--clr-secondary-500));
}
.bg-neutral-100 {
background: hsl(var(--clr-neutral-100));
}
.text-neutral-100 {
color: hsl(var(--clr-neutral-100));
}
.text-secondary-400 {
color: hsl(var(--clr-secondary-400));
}
.border-primary-400 {
border: 2px solid #a775f1;
}
/* components */
.testimonial-grid {
display: grid;
gap: 1.5rem;
grid-auto-columns: 1fr;
grid-template-areas:
'one'
'two'
'three'
'four'
'five';
padding-block: 2rem;
width: min(95%, 70rem);
margin-inline: auto;
}
.testimonial {
font-size: var(--fs-400);
padding: 2rem;
border-radius: 0.5rem;
box-shadow: 2.5rem 3.75rem 3rem -3rem hsl(var(--clr-secondary-400) / 0.25);
}
.testimonial:nth-child(1) {
grid-area: one;
}
.testimonial:nth-child(2) {
grid-area: two;
}
.testimonial:nth-child(3) {
grid-area: three;
}
.testimonial:nth-child(4) {
grid-area: four;
}
.testimonial:nth-child(5) {
grid-area: five;
}
@media screen and (min-width: 33em) {
.testimonial-grid {
grid-template-areas:
"one one"
"two three"
"five five"
"four four";
}
}
@media screen and (min-width: 38em) {
.testimonial-grid {
grid-template-areas:
'one one'
'two five'
'three five'
'four four';
}
}
@media screen and (min-width: 54em) {
.testimonial-grid {
grid-template-areas:
"one one two"
"five five five"
"three four four";
}
}
@media screen and (min-width: 75em) {
.testimonial-grid {
grid-template-areas:
"one one two five"
"three four four five";
}
}
.testimonial.quote {
background-image: url("./images/bg-pattern-quotation.svg");
background-repeat: no-repeat;
background-position: top right 10%;
}
.testimonial img {
width: 1.75rem;
aspect-ratio: 1;
border-radius: 50%;
}
.testimonial .name {
font-size: var(--fs-400);
font-weight: var(--fw-400);
line-height: 1;
}
.testimonial .position {
font-size: var(--fs-300);
opacity: 0.5;
}
.testimonial > p:first-of-type {
font-size: var(--fs-500);
line-height: 1.2;
}
.testimonial > p:last-of-type {
opacity: 0.7;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment