Testimonial Quotes Cloud in HTML CSS

This HTML and CSS code snippet helps you to create a display of testimonial quotes in a cloud-like layout. It showcases quotes from different sources, adding visual appeal to testimonials. The HTML structures quotes and their sources, while the CSS stylizes their appearance, arranging them in a visually pleasing grid.

This setup is helpful for showcasing client feedback or reviews in an engaging format on web pages.

How to Create Testimonial Quotes Cloud In HTML CSS

1. First, copy the HTML code into your project. The <main> tag contains all the testimonial quotes. Each <b> tag represents a quote or its source. Modify the <q> tags within <b> tags to include your own testimonial quotes. Similarly, change the <cite> tags to reflect the sources of the quotes or testimonials.

<main>
  <b class="rs4 blue vlr">
    <q>Unforgettable!</q>
    <cite>Rita Sodyte</cite>
  </b>
  <b class="rs3 cyan"></b>
  <b class="cs1 cyan"></b>
  <b class="cs4 yellow">
    <q>The best game ever</q>
    <cite>Gamer Monthly</cite>
  </b>
  <b class="rs3 blue vlr">
    <q class="md">A true test of mental agility.</q>
  </b>
  <b class="cs1 blue"></b>
  <b class="cs2 red"></b>
  <b class="rs3 green vlr">
    <q class="md">Hours of entertainment</q>
  </b>
  <b class="cs2 red"><q>Level Up</q></b>
  <b class="green"></b>
  <b class="green"></b>
  <b class="cs2 rs2 yellow">
    <q>Lost track of time</q>
  </b>
  <b class="orange"></b>
  <b class="cs2 green"><q>Classic</q><cite>Modern Gamer</cite></b>
  <b class="red"></b>
  <b class="cs2 orange"></b>
  <b class="green"></b>
  <b class="rs2 blue"></b>
  <b class="cs3 red">
    <q class="md">The ultimate puzzle-solving challenge</q>
  </b>
  <b class="blue"></b>
  <b class="orange"></b>
  <b class="rs2 blue"></b>
  <b class="yellow"></b>
  <b class="cs3 blue"><q>Endless fun</q></b>
  <b class="cs3 yellow"><q>Endless possibilities</q></b>

  <h1>The Iconic Puzzle Game That Stands the Test of Time</h1>
  <b class="cs2 rs2 red"><q class="md">Hooks you from the first block</q><cite>Player One</cite></b>
  <b class="rs4 cyan vlr"><q class="md">A classic that never gets old</q></b>
  <b class="cs4 orange">
    <q class="md">Simple, addictive, and timeless fun.</q>
  </b>
  <article class="cs4 rs4">
    In the vast world of video games, only a few titles have managed to achieve the status of true icons. One such game that has captivated generations of players is Tetris. Created by Russian software engineer Alexey Pajitnov in 1984, Tetris remains a timeless masterpiece, loved and played by millions worldwide.
  </article>
  <b class="cs2 rs2 yellow"><q class="md">Highly addictive</q><cite>Player Two</cite></b>
</main>

2. Now, add the following CSS code between <style> tag or external CSS file and link to your project. It defines colors, grid layouts, font sizes, and more. It styles the quotes and their sources to create a cloud-like appearance.

/* === COLORS === */
.cyan { background-color: hsl(185, 86%, 70%); color: hsl(185, 86%, 10%); }
.yellow { background-color: hsl(54, 93%, 66%); color: hsl(54, 93%, 8%); }
.purple { background-color: rgb(96, 64, 176); }
.green { background-color: hsl(87, 78%, 63%); color: hsl(87, 78%, 10%); }
.red { background-color: hsl(338, 76%, 58%); color: hsl(338, 76%, 92%);  }
.blue { background-color: hsl(214, 78%, 61%); color: hsl(214, 78%, 93%); }
.orange { background-color: rgb(230, 117, 64); }

/* === GRID === */
.cs1 { grid-column: span 1; }
.cs2 { grid-column: span 2; }
.cs3 { grid-column: span 3; }
.cs4 { grid-column: span 4; }
.rs2 { grid-row: span 2; }
.rs3 { grid-row: span 3; }
.rs4 { grid-row: span 4; }
.vlr {
  text-orientation: mixed;
  writing-mode: vertical-rl;
}

/* === TAGS === */
article {
  font-size: clamp(0.75rem, 0.2143rem + 1.7143vw, 1.5rem);
  line-height: 1.5;
  overflow-y: auto;
  padding:clamp(0.75rem, 0.2143rem + 1.7143vw, 1.5rem);
  text-align: center;
}
body {
  background-color: hsl(180, 25%, 15%);
  margin: 0;
}
b {
  display: grid;
  padding: 1ch;
  place-content: center;
  text-align: center;
}
cite {
  font-size: clamp(0.5rem, 0.3295rem + 0.8523vw, 0.875rem);
  font-weight: 300;
  white-space: nowrap;
}
cite::before { content: "— "; }
h1 {
  font-size: clamp(2rem, 0.8636rem + 5.6818vw, 4.5rem);
  grid-column: 1 / span 7;
  grid-row-start: 9 / span 2;
  line-height: 1.1;
  padding-inline: .25ch;
  text-align: center;
}
main {
  aspect-ratio: 1 / 2;
  background: darkslategray !important;
  color: hsl(182, 19%, 92%);
  display: grid;
  font-family: ui-sans-serif, system-ui, sans-serif;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(14, 1fr);
  margin-inline: auto;
  max-inline-size: 1024px;
}
q {
  font-size: clamp(0.875rem, -0.2045rem + 5.3977vw, 3.25rem);
  line-height: 1;
  margin-block-end: .25ch;
}
q.md {
  font-size: clamp(0.625rem, -0.1136rem + 3.6932vw, 2.25rem);
}
@media (max-width: 500px) {
  article {
    display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  place-self: start;
  }
}

Feel free to update the color values in the CSS to match your website’s theme. Likewise, adjust the grid column and row spans in the CSS (.cs1, .cs2, etc.) to change the layout.

That’s all! hopefully, you have successfully created Testimonial Quotes Cloud on your website. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.