Testimonial Quotes Cloud in HTML CSS

Testimonial Quotes Cloud in HTML CSS
Code Snippet:Tetris Testimonial Quotes
Author: Mads Stoumann
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 560
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X