Testimonial Grid Section

Dies ist eine Lösung für die Testimonials grid section Challenge auf Frontend Mentor.

Anforderung

Benutzer*innen sollten in der Lage sein:

• Das optimale Layout der Seite abhängig von der Bildschirmgröße ihres Geräts anzusehen

Gebaut mit

• Semantisches HTML5-Markup
• Flexbox
• CSS Grid
• Mobile-first Workflow
• React - JS-Bibliothek
• Remix - React-Framework
• Tailwindcss - Für Styles

Etwas Code, auf den ich stolz bin

Ich habe eine zusammengesetzte Komponente für die Testimonial Card erstellt, sodass ich ähnliche Styles in der Komponente verwenden kann. So habe ich sie verwendet:

<TestimonialCard className="bg-moderate-violet sm:col-span-2">
  <TestimonialCard.Header title="Daniel Clifford" subtitle="Verified Graduate" className="text-white">
    <TestimonialCard.Icon
      src="/images/image-daniel.jpg"
      alt="Daniel Clifford"
      className="border-2 border-light-violet"
    />
  </TestimonialCard.Header>
  <TestimonialCard.Body>
    <TestimonialCard.Title className="mb-10 text-white">
      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.
    </TestimonialCard.Title>
    <TestimonialCard.Text className="text-light-gray">
      “ 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. ”
    </TestimonialCard.Text>
  </TestimonialCard.Body>
</TestimonialCard>