Testimonial Card Display

INFORMATION & CODE

Testimonial Cards Display

This code creates a Testimonial Card Display, a web component designed to showcase customer feedback or reviews in a clean, visually appealing grid format. It uses modern front-end web technologies to ensure a responsive and interactive design.

How It Works

The code uses standard HTML5 to structure the content, placing each testimonial inside a <figure> element with the class card. Within this structure, it utilizes a <blockquote> for the review text, an <h3> for the customer's name, and an<h4> for their company/affiliation.

The visual styling is handled by CSS3. Key features include:

Flexbox Positioning: The body uses Flexbox to center all cards on the screen.
Pseudo-elements: The code uses the ::before selector on the figcaption to inject a FontAwesome quote icon (\f10e) at the top of every card, giving it a professional look.
Interactive Effects: A :hover pseudo-class is applied to the cards, which increases the font size and intensifies the shadow effect when a user moves their mouse over a specific card.
Responsive Web Design: The code includes media queries to adjust the alignment of the cards for smaller screens, ensuring the layout remains consistent across mobile, tablet, and desktop devices.

Technologies Used

HTML5: Provides the semantic structure of the document.
CSS3: Handles all visual appearances, animations, and layout positioning.
Google Fonts: Uses "Press Start 2P" and "VT323" from the Google Fonts API to provide modern, stylized typography.
FontAwesome: An external icon library (via CDN) is integrated to display the floating "quote" icon above the testimonial cards.

How to Use This Code

To implement this on your own website, follow these steps:

Save the file: Create a new file on your computer named index.html.
Paste the code: Copy and paste the entire provided HTML code block into your text editor (such as VS Code, Notepad++, or Sublime Text) and save the file.
Open in Browser: Open index.html in any web browser (Chrome, Firefox, Edge, etc.). You will see the testimonial cards rendered in the center of the window.
Customization:

Edit Content: Simply update the text inside the <p>, <h3>, and <h4> tags to reflect your actual customer testimonials.
Add/Remove Cards: You can add more cards by copying the <figure class="card"... </figure> section, or delete them to reduce the number of cards shown.
Styling: You can modify the CSS inside the <style> tags—such as changing the --border-top color (currently green #03ca35) and deleting the filter: grayscale(100%); — to match your brand's color scheme.

HTML


                <!doctype html>
<html lang="en/US">
  <head>
    <meta charset="UFT-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testimonial Card Display</title>
    <link rel="icon" type="image/x-icon" href="https://e-nash.net/photos/modules-favicon.png">
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/d9cf1148e3.js">crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="card-container">
      <figure class="card">
        <figcaption>
          <blockquote>
            <p>“[Product name] had a great [product advantage]. I was a bit worried about [objection], but it wasn’t a problem at                     all. I love using [product name] when I’m [best use scenario].”
            </p>
          </blockquote>
          <h3>Wisteria Ravenclaw</h3>
          <h4>Google Inc.</h4>
        </figcaption>
      </figure>
      <figure class="card">
        <figcaption>
          <blockquote>
            <p>“This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a                        medium and it fits great. It’s so comfortable and breathable, I can wear it to bed or to the gym, and it looks                          great day-to-day too.”
            </p>
          </blockquote>
          <h3>Ursula Gurnmeister</h3>
          <h4>Facebook</h4>
        </figcaption>
      </figure>
      <figure class="card">
        <figcaption>
          <blockquote>
            <p>“[Business name] was [positive attribute]. The team helped me [problem the business solved]. I had a problem with                      [key challenge], but they took care of it right away.”
            </p>
          </blockquote>
          <h3>Ingredia Nutrisha</h3>
          <h4>Twitter</h4>
        </figcaption>
      </figure>
    </div>
  </body>
</html>

CSS


                .card-container {
  display: block;
}
.card {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  color: #9e9e9e;
  display: inline-block;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 16px;
  margin: 85px 10px 10px;
  max-width: 310px;
  min-width: 250px;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  background-color: #ffffff;
  border-radius: 5px;
  border-top: 5px solid #03ca35;
}
.card:hover {
  aspect-ratio: 1.15 / 0.15;
  font-size: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}
@media(max-width: 980px) {
  .card {
    transform: translate(-52.5%);
  }
}

.card *,
.card *:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}

.card figcaption {
  padding: 13% 10% 12%;
}

.card figcaption:before {
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  color: #ff2020;
  content: "\f10e";
  font-family: 'FontAwesome';
  font-size: 32px;
  font-style: normal;
  left: 50%;
  line-height: 60px;
  position: absolute;
  top: -30px;
  width: 60px;
}

.card h3 {
  color: #3c3c3c;
  font-size: 20px;
  font-weight: 300;
  line-height: 24px;
  margin: 10px 0 5px;
}

.card h4 {
  font-weight: 400;
  margin: 0;
  opacity: 0.5;
}

.code blockquote {
  font-style: italic;
  font-weight: 300;
  margin: 0 0 20px;
}

PREVIEW

“[Product name] had a great [product advantage]. I was a bit worried about [objection], but it wasn’t a problem at all. I love using [product name] when I’m [best use scenario].”

Wisteria Ravenclaw

Google Inc.

“This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great. It’s so comfortable and breathable, I can wear it to bed or to the gym, and it looks great day-to-day too.”

Ursula Gurnmeister

Facebook

“[Business name] was [positive attribute]. The team helped me [problem the business solved]. I had a problem with [key challenge], but they took care of it right away.”

MENU