Tips for making a standout testimonial card?

Question

Tips for making a standout testimonial card?

Apologies for the simplistic inquiry. As a fresh student of a full stack web developer bootcamp, I find myself grappling with this particular challenge.

How can I go about creating a testimonial card similar to this one?

I've attempted to write code (using Bootstrap 4.3) but it appears quite cluttered:

<section id="review">
      <div class="container">
        <div class="row">
          <div class="col-md-6 text-white mb-5">
            <h1>TOP SCORE</h1>
            <p>This top score is from various games provided on this platform.</p>
            <button type="button" class="btn btn-warning">See More</button>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card" style="background-color: #181818;">
          <div class="card-body">
            <img class="avatar" src="../chap3/assets/evan-lahti.jpg" alt="">
            <h5 class="card-title text-white">Evan Lahti</h5>
            <h6 class="card-subtitle mb-3 text-muted">PC Gamer</h6>
            <img style="position: relative; right: -40px;" src="../chap3/assets/twitter-card.png"></img>
          </div>
          <p class="card-text text-white">"One of my gaming highlights of the year."</p>
          <p class="card-text">
            <small class="text-muted">June 18, 2021</small>
          </p>
        </div>
      </div>
    </section>

The current output of my code looks like this.

html css

Answer 1

Answer №1

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
figure.snip1192 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  width: 100%;
  color: #333;
  text-align: left;
  box-shadow: none !important;
}
figure.snip1192 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.snip1192 img {
  max-width: 100%;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  margin-bottom: 15px;
  display: inline-block;
  z-index: 1;
  position: relative;
}
figure.snip1192 blockquote {
  margin: 0;
  display: block;
  border-radius: 8px;
  position: relative;
  background-color: #fafafa;
  padding: 30px 50px 65px 50px;
  font-size: 0.8em;
  font-weight: 500;
  margin: 0 0 -50px;
  line-height: 1.6em;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1192 blockquote:before,
figure.snip1192 blockquote:after {
  font-family: 'FontAwesome';
  content: "\201C";
  position: absolute;
  font-size: 50px;
  opacity: 0.3;
  font-style: normal;
}
figure.snip1192 blockquote:before {
  top: 35px;
  left: 20px;
}
figure.snip1192 blockquote:after {
  content: "\201D";
  right: 20px;
  bottom: 35px;
}
figure.snip1192 .author {
  margin: 0;
  text-transform: uppercase;
  text-align: center;
  color: #ffffff;
}
figure.snip1192 .author h5 {
  opacity: 0.8;
  margin: 0;
  font-weight: 800;
}
figure.snip1192 .author h5 span {
  font-weight: 400;
  text-transform: none;
  display: block;
}
/* Demo purposes only */
body {
  background-color: #212121;
}

<figure class="snip1192">
  <blockquote>Calvin: Sometimes when I'm talking with others, my words can't keep up with my thoughts. I wonder why we think faster than we speak. Hobbes: Probably so we can think twice. </blockquote>
  <div class="author">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample1.jpg" alt="sq-sample1"/>
    <h5>Pelican Steve <span> LittleSnippets</span></h5>
  </div>
</figure>
<figure class="snip1192 hover">
  <blockquote>Thank you. before I begin, I'd like everyone to notice that my report is in a professional, clear plastic binder...When a report looks this good, you know it'll get an A. That's a tip kids. Write it down.</blockquote>
  <div class="author">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample24.jpg" alt="sq-sample24"/>
    <h5>Max Conversion<span> LittleSnippets</span></h5>
  </div>
</figure>
<figure class="snip1192">
  <blockquote>My behaviour is addictive functioning in a disease process of toxic co-dependency. I need holistic healing and wellness before I'll accept any responsibility for my actions.</blockquote>
  <div class="author">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample29.jpg" alt="sq-sample29"/>
    <h5>Eleanor Faint<span> LittleSnippets</span></h5>
  </div>
</figure>

For more examples, you can visit this link. Thank me later

Answer 2

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
figure.snip1192 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  width: 100%;
  color: #333;
  text-align: left;
  box-shadow: none !important;
}
figure.snip1192 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.snip1192 img {
  max-width: 100%;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  margin-bottom: 15px;
  display: inline-block;
  z-index: 1;
  position: relative;
}
figure.snip1192 blockquote {
  margin: 0;
  display: block;
  border-radius: 8px;
  position: relative;
  background-color: #fafafa;
  padding: 30px 50px 65px 50px;
  font-size: 0.8em;
  font-weight: 500;
  margin: 0 0 -50px;
  line-height: 1.6em;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1192 blockquote:before,
figure.snip1192 blockquote:after {
  font-family: 'FontAwesome';
  content: "\201C";
  position: absolute;
  font-size: 50px;
  opacity: 0.3;
  font-style: normal;
}
figure.snip1192 blockquote:before {
  top: 35px;
  left: 20px;
}
figure.snip1192 blockquote:after {
  content: "\201D";
  right: 20px;
  bottom: 35px;
}
figure.snip1192 .author {
  margin: 0;
  text-transform: uppercase;
  text-align: center;
  color: #ffffff;
}
figure.snip1192 .author h5 {
  opacity: 0.8;
  margin: 0;
  font-weight: 800;
}
figure.snip1192 .author h5 span {
  font-weight: 400;
  text-transform: none;
  display: block;
}
/* Demo purposes only */
body {
  background-color: #212121;
}

<figure class="snip1192">
  <blockquote>Calvin: Sometimes when I'm talking with others, my words can't keep up with my thoughts. I wonder why we think faster than we speak. Hobbes: Probably so we can think twice. </blockquote>
  <div class="author">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample1.jpg" alt="sq-sample1"/>
    <h5>Pelican Steve <span> LittleSnippets</span></h5>
  </div>
</figure>
<figure class="snip1192 hover">
  <blockquote>Thank you. before I begin, I'd like everyone to notice that my report is in a professional, clear plastic binder...When a report looks this good, you know it'll get an A. That's a tip kids. Write it down.</blockquote>
  <div class="author">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample24.jpg" alt="sq-sample24"/>
    <h5>Max Conversion<span> LittleSnippets</span></h5>
  </div>
</figure>
<figure class="snip1192">
  <blockquote>My behaviour is addictive functioning in a disease process of toxic co-dependency. I need holistic healing and wellness before I'll accept any responsibility for my actions.</blockquote>
  <div class="author">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample29.jpg" alt="sq-sample29"/>
    <h5>Eleanor Faint<span> LittleSnippets</span></h5>
  </div>
</figure>

For more examples, you can visit this link. Thank me later

Answer 3

Answer №2

Utilize tailwind css to design visually appealing testimonial cards! Familiarize yourself with tailwind css and then visit the tailblocks website for easy access to simple testimonial card designs!!

Answer 4

Utilize tailwind css to design visually appealing testimonial cards! Familiarize yourself with tailwind css and then visit the tailblocks website for easy access to simple testimonial card designs!!

Tips for making a standout testimonial card?

Answer №1

Answer №2

Similar questions

What is the best way to exchange configuration data among Javascript, Python, and CSS within my Django application?

Integrating information from various sources to create a cohesive online platform

Adjust the baseline of the text within the <li> element by moving it 2 pixels upwards

"Data is not defined" error message is triggered when using jQuery DataTable Row Details

issue with using references to manipulate the DOM of a video element in fullscreen mode

The HTML website appears to be having trouble scrolling on Android devices, however, it functions properly on both iOS and desktop platforms

Is the button not aligned properly with the email input field?

How to eliminate the vertical scroll indicators in Material UI's TextField

Combine collapse and popover in Bootstrap 3 for enhanced functionality

Efficient Ways to Utilize Global CSS in an Angular Project Without CLI

Using relative paths to showcase images in Node.js

Can you provide guidance on how to successfully transfer an array of JSON objects from the script section of an HTML file to the JavaScript

unable to display loading image prior to upload

What is the inner workings of CSS?

What is the best location for storing css files in Laravel?

Adjusting Headers Using Buttons

Columns in Bootstrap4 housing elements positioned absolutely

Managing Margins and Padding in Multiple Lines of Divs in CSS

Disable multiple buttons at once by clicking on them

The utilization of `ngSwitch` in Angular for managing and displaying