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.

htmlcss

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

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!!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Div with headers that stick to the top and stack when scrolling

I am working on creating a lengthy scrollable list of grouped items where the group titles remain visible at all times (stacked). When a user clicks on a group header, the page should scroll to the corresponding items. I have successfully used the positio ...

javascriptcsssticky

The scrollbar on the side of my page seems to be malfunctioning

I'm having an issue with the collapsible sidebar and tabs on my angularjs page. The scroll bar is not appearing when there is overflow in the sidebar. I've tried setting the scrollbar height to auto and overflow-y to scroll, but it's not wor ...

htmlcssangularjs

The flipping action will only occur on the initial card

I am working on creating a unique photo gallery that allows users to flip the picture by clicking or tapping on it. Once flipped, users will be presented with additional information about the image and a link. I have included all of my CSS, JS, and HTML be ...

jqueryhtmlcsscss-transforms

Creating a Curved Border with Clip Path in CSS

Hey there! I'm currently attempting to add a speech bubble at the bottom left using clip-path, but I'm struggling to adjust the pixels just right to achieve the clear and exact look I want. Can someone provide suggestions on how to accomplish thi ...

javascripthtmlcss

Is it possible to utilize v-html with message data in Vue without any limitations on the <title> element?

Currently utilizing Vue.js 2 and my SDK is IntelliJ: I am attempting to bring HTML content into a Vue.js file. The main objective is to include the <title></title> attribute, as it seems that Vue doesn't have direct support for this feat ...

javascripthtmlcssvue.jsaccessibility

PHP and jQuery to create an autocomplete text input feature

I've been working on implementing an auto suggest text box using PHP and jQuery, but it seems like the jQuery code I found online is already deprecated. I'm not sure if my code is incorrect or if the issue lies with the jQuery itself. Can anyone ...

phpjqueryhtml

Abandoned <li> and </li> elements

I've come across some HTML code where orphaned <li> and </li> tags are surrounding certain paragraphs without any corresponding opening or closing <ul> or <ol> tags. Is there a way to efficiently parse or mass find/replace ove ...

htmlregexreplacehtml-listsorphan

Extracting Data From HTML Document Specifically Targeting Table

How can I scrape the data from the table located on the far right of this page , considering that all tables on the page use the same styles and class names? I need to extract information from that specific table and display it. Any suggestions? ...

phphtmldomweb-scraping

Pinterest Style Card Layout using React-Semantic-UI

Utilizing semantic-ui-react in React, I am working on displaying cards with varying heights based on the amount of text. I am aiming for a pinterest style layout where each card's height adjusts according to the content it contains. .... <Card.Co ...

cssreactjssemantic-uisemantic-ui-react

Why isn't the float left property working as expected?

Why won't my image float to the left? I'm using a class called align-left with float: left but it's not working. You can see the live version at - (check out the review grid halfway down under the heading 'High customer satisfaction r ...

htmlcss

Steps for changing the background color string in mui?

I have a component where I am trying to dynamically change the color based on the user type. The issue arises when I use gradient colors, as the transition stops working. If I stick to simple colors like blue, red, or green, it works fine. Currently, the c ...

cssreactjsmaterial-ui

Box-free calendar dash component

Encountering an issue within my application dashboard, here's a direct screenshot: https://i.stack.imgur.com/sEMrM.png The problem is that the Calendar days are extending beyond the borders of the calendar box. To implement this, I simply utilized ...

pythonhtmlcssplotly-dash

<div.content> </div.content> - Structure

I recall encountering this code before but I can't remember where: <div.main> // .... </div.main> <div.secondary> // .... </div.secondary> Could someone please clarify for me what this syntax is referred to as and what ...

htmlcssreactjsreact-nativesass

behind the scenes of a disappearing bootstrap modal

Greetings everyone! Currently, I am deep into the process of identifying and resolving a pesky bug that has been impacting my work. The project in question involves developing a module for an open-source platform built on Laravel and Bootstrap - Microweb ...

csstwitter-bootstrap-3modal-dialogbootstrap-modal

The fancybox scroll feature is visible when using a browser, but unfortunately, it does not appear on the

I noticed that the scrollbar in my fancybox is not showing up on iPad, but it does display when using Google Chrome on Desktop. You can find the page here. The issue seems to be with the vertical scroll bar not appearing on iPad. Has anyone encountered th ...

jqueryhtmlcssipadfancybox

Obtain the current activity

In my code, I have a wrapper div that contains another div. When the inner div is clicked, a message should be displayed. However, the issue arises when the inner divs all share a common class despite having unique IDs generated at runtime. My markup is g ...

jqueryhtml

Overflow issues with flexbox design on mobile devices

Hello, I'm currently working on creating a sliding panel of images. While I have successfully implemented it, I am encountering some browser compatibility issues. The sliding panel functions perfectly on Chrome desktop, however, when viewed on mobil ...

htmlcssgoogle-chromemobilesafari

Discover how to effortlessly unveil JSON data by clicking on data retrieved from an API

After successfully parsing data from a Tumblr API, I encountered an issue when introducing tags within the body description, which includes images and hyperlinks. The main task at hand is to create a list of blog titles where the corresponding blog descri ...

jqueryhtmljsonajaxapi

Ensure that everything within the Container is not see-through

Fiddle:https://jsfiddle.net/jzhang172/b09pbs4v/ I am attempting to create a unique scrolling effect where any content within the bordered container becomes fully opaque (opacity: 1) as the user scrolls. It would be great if there could also be a smooth tr ...

javascriptjqueryhtmlcss

Code that achieves the same functionality but does not rely on the

I utilized a tutorial to obtain the ajax code below. The tutorial referenced the library jquery.form.js. Here is the code snippet provided: function onsuccess(response,status){ $("#onsuccessmsg").html(response); alert(response); } $("# ...

javascriptjqueryhtmlajaxforms