Styled Blockquotes Kit

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Blockquotes Kit</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f9;
    padding: 20px;
  }
  .blockquote-container {
    margin: 20px 0;
    padding: 20px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
  }
  blockquote {
    margin: 0;
    font-size: 1.2rem;
    position: relative;
  }
  cite {
    display: block;
    margin-top: 10px;
    font-size: 1rem;
    font-weight: bold;
  }
  /* Design 1: Gradient Elegance */
  .gradient-elegance {
    background: linear-gradient(135deg, #ffafbd, #ffc3a0);
    color: #333;
  }
  .gradient-elegance blockquote::before, .gradient-elegance blockquote::after {
    content: '"';
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.5);
    position: absolute;
  }
  .gradient-elegance blockquote::before {
    top: -20px;
    left: -10px;
  }
  .gradient-elegance blockquote::after {
    bottom: -20px;
    right: -10px;
  }
  /* Design 2: Neumorphic Charm */
  .neumorphic-charm {
    background: #e0e0e0;
    box-shadow: 10px 10px 20px #b0b0b0, -10px -10px 20px #ffffff;
  }
  .neumorphic-charm blockquote {
    color: #333;
  }
  /* Design 3: Dark Minimalist */
  .dark-minimalist {
    background: #333;
    color: #fff;
  }
  .dark-minimalist blockquote::before, .dark-minimalist blockquote::after {
    content: '"';
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.3);
    position: absolute;
  }
  .dark-minimalist blockquote::before {
    top: -20px;
    left: -10px;
  }
  .dark-minimalist blockquote::after {
    bottom: -20px;
    right: -10px;
  }
  /* Design 4: Vintage Vibes */
  .vintage-vibes {
    background: #f8ecd4;
    border-left: 5px solid #d4a373;
    color: #5a4634;
  }
  /* Design 5: Modern Geometric */
  .modern-geometric {
    background: #ffffff;
    border: 2px solid #3d5afe;
    color: #3d5afe;
  }
  .modern-geometric blockquote {
    padding: 20px;
    position: relative;
  }
  .modern-geometric blockquote::before {
    content: '';
    width: 100%;
    height: 100%;
    border: 2px solid #3d5afe;
    position: absolute;
    top: -10px;
    left: -10px;
    z-index: -1;
  }
  /* Design 6: Soft Shadows */
  .soft-shadows {
    background: #f0f0f0;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
  }
  .soft-shadows blockquote {
    color: #333;
  }
  /* Design 7: Retro Pop */
  .retro-pop {
    background: #f6f4d2;
    color: #f2545b;
    text-align: center;
  }
  .retro-pop blockquote::before, .retro-pop blockquote::after {
    content: '"';
    font-size: 3rem;
    color: rgba(242, 84, 91, 0.3);
    position: absolute;
  }
  .retro-pop blockquote::before {
    top: -20px;
    left: -10px;
  }
  .retro-pop blockquote::after {
    bottom: -20px;
    right: -10px;
  }
  /* Design 8: Futuristic Glow */
  .futuristic-glow {
    background: #1f1f1f;
    color: #00e5ff;
    text-align: center;
    border: 1px solid #00e5ff;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.7);
  }
  .futuristic-glow blockquote {
    position: relative;
  }
  .futuristic-glow blockquote::before {
    content: '“';
    font-size: 4rem;
    color: rgba(0, 229, 255, 0.5);
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
  }
  .futuristic-glow blockquote::after {
    content: '”';
    font-size: 4rem;
    color: rgba(0, 229, 255, 0.5);
    position: absolute;
    bottom: -40px;
    right: 50%;
    transform: translateX(50%);
  }
  /* Design 9: Paper Cut */
  .paper-cut {
    background: #ffffff;
    border: 1px solid #000000;
    position: relative;
  }
  .paper-cut blockquote {
    color: #333;
  }
  .paper-cut::before, .paper-cut::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #000000;
    top: 5px;
    left: 5px;
  }
  /* Design 10: Whimsical Waves */
  .whimsical-waves {
    background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
    color: #ffffff;
    text-align: center;
    border-radius: 20px;
  }
  .whimsical-waves blockquote::before, .whimsical-waves blockquote::after {
    content: '"';
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.5);
    position: absolute;
  }
  .whimsical-waves blockquote::before {
    top: -20px;
    left: -10px;
  }
  .whimsical-waves blockquote::after {
    bottom: -20px;
    right: -10px;
  }
</style>
</head>
<body>
<div class="blockquote-container gradient-elegance">
  <blockquote>
    "The only limit to our realization of tomorrow is our doubts of today."
    <cite>– Franklin D. Roosevelt</cite>
  </blockquote>
</div>
<div class="blockquote-container neumorphic-charm">
  <blockquote>
    "Success is not final, failure is not fatal: it is the courage to continue that counts."
    <cite>– Winston Churchill</cite>
  </blockquote>
</div>
<div class="blockquote-container dark-minimalist">
  <blockquote>
    "In the end, we will remember not the words of our enemies, but the silence of our friends."
    <cite>– Martin Luther King Jr.</cite>
  </blockquote>
</div>
<div class="blockquote-container vintage-vibes">
  <blockquote>
    "Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment."
    <cite>– Buddha</cite>
  </blockquote>
</div>
<div class="blockquote-container modern-geometric">
  <blockquote>
    "Life is what happens when you're busy making other plans."
    <cite>– John Lennon</cite>
  </blockquote>
</div>
<div class="blockquote-container soft-shadows">
  <blockquote>
    "The greatest glory in living lies not in never falling, but in rising every time we fall."
    <cite>– Nelson Mandela</cite>
  </blockquote>
</div>
<div class="blockquote-container retro-pop">
  <blockquote>
    "The purpose of our lives is to be happy."
    <cite>– Dalai Lama</cite>
  </blockquote>
</div>
<div class="blockquote-container futuristic-glow">
  <blockquote>
    "Get busy living or get busy dying."
    <cite>– Stephen King</cite>
  </blockquote>
</div>
<div class="blockquote-container paper-cut">
  <blockquote>
    "You have within you right now, everything you need to deal with whatever the world can throw at you."
    <cite>– Brian Tracy</cite>
  </blockquote>
</div>
<div class="blockquote-container whimsical-waves">
  <blockquote>
    "Believe you can and you're halfway there."
    <cite>– Theodore Roosevelt</cite>
  </blockquote>
</div>
</body>
</html>

Styled Blockquotes Kit - MeggiTools