Question 44355 in Html Question posted in
Some basic documentation can be found here.

How to create a testimonial card? – Html

Sorry for basic question. I’m a new student of full stack web developer bootcamp and now I’m stuck with this part of the challenge.

How to create a testimonial card like these?
Testimonial card

I have tried write a code like this (with bootstrap 4.3) but it’s too messy here

<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 from various game 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 output of my code is like
this

Tags:

2

Answers


  1. 0

    You can use tailwind css to create testimonial cards! Just learn tailwind css and then go to tailblocks website to get simple testimonial cards!!

    Login or Signup to reply.
  2. 0 
    @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>

    You can refer this Thank me later

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search