Blockquotes are a powerful tool for emphasizing key points and adding credibility to your content. They can transform ordinary text into compelling statements that capture your readers' attention.
In this article, we will explore 10 blockquote examples that demonstrate their versatility and impact. Whether you're quoting an expert or highlighting a crucial message, these examples will inspire you to use blockquotes effectively in your own writing.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers love Subframe for its drag-and-drop interface and intuitive, responsive canvas. Create pixel-perfect blockquotes effortlessly, ensuring your UI stands out every time.
Join the community of satisfied users and elevate your design game. Start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to elevate your UI design game? With Subframe, you can create pixel-perfect interfaces, including stunning blockquotes, in minutes. Our drag-and-drop editor ensures efficiency and precision.
Don't wait—start designing immediately and see the difference. Start for free today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Corporate Inspirational Blockquote</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f8f9fa; padding: 20px; } .quote-container { width: 100%; max-width: 650px; position: relative; overflow: hidden; } .quote-card { background-color: white; padding: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); position: relative; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); cursor: pointer; overflow: hidden; transform-origin: center; } .quote-card:hover { box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08); transform: translateY(-5px); } .quote-card:before { content: ''; position: absolute; top: 0; left: 0; height: 4px; width: 100%; background: linear-gradient(90deg, #1a6dff, #00d1ff); transform: scaleX(0); transform-origin: left; transition: transform 0.6s ease; } .quote-card:hover:before { transform: scaleX(1); } .quote-text { font-size: 1.6rem; line-height: 1.5; color: #343a40; margin-bottom: 24px; position: relative; font-weight: 300; letter-spacing: -0.01em; } .quote-icon { position: absolute; top: -10px; left: -8px; font-size: 60px; color: #f0f0f0; z-index: 0; user-select: none; } .quote-content { position: relative; z-index: 1; } .quote-author { font-size: 1rem; font-weight: 500; color: #495057; display: block; margin-top: 5px; } .quote-role { font-size: 0.9rem; color: #6c757d; margin-top: 5px; font-weight: 400; } .quote-company { font-size: 0.85rem; color: #adb5bd; margin-top: 2px; } .quote-controls { display: flex; justify-content: center; margin-top: 30px; gap: 15px; } .quote-button { width: 40px; height: 40px; border-radius: 50%; background: white; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; color: #495057; } .quote-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); background: #f8f9fa; } .quote-button:active { transform: translateY(0); } .quote-indicator { display: flex; justify-content: center; margin-top: 20px; gap: 8px; } .indicator-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #dee2e6; transition: all 0.3s ease; } .indicator-dot.active { background-color: #1a6dff; transform: scale(1.3); } .quote-card.changing { transform: translateY(10px); opacity: 0; } .quote-progress { height: 2px; width: 100%; background-color: #f1f3f5; position: absolute; bottom: 0; left: 0; overflow: hidden; } .quote-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, #1a6dff, #00d1ff); transition: width 0.2s linear; } @media (max-width: 600px) { .quote-card { padding: 30px; } .quote-text { font-size: 1.3rem; } } </style> </head> <body> <div class="quote-container"> <div class="quote-card"> <div class="quote-icon">"</div> <div class="quote-content"> <p class="quote-text">Innovation isn't about saying yes to everything. It's about saying no to all but the most crucial features that truly impact our customer experience.</p> <div class="author-info"> <span class="quote-author">Melinda Chen</span> <span class="quote-role">VP of Product Development</span> <span class="quote-company">Luminary Tech Solutions</span> </div> </div> <div class="quote-progress"> <div class="quote-progress-bar"></div> </div> </div> <div class="quote-controls"> <button class="quote-button" id="prev-quote"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <button class="quote-button" id="next-quote"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> </div> <div class="quote-indicator"> <div class="indicator-dot active"></div> <div class="indicator-dot"></div> <div class="indicator-dot"></div> <div class="indicator-dot"></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const quotes = [ { text: "Innovation isn't about saying yes to everything. It's about saying no to all but the most crucial features that truly impact our customer experience.", author: "Melinda Chen", role: "VP of Product Development", company: "Luminary Tech Solutions" }, { text: "Data without context is just noise. Transform numbers into knowledge, knowledge into insights, and insights into strategic action.", author: "Raj Patel", role: "Chief Data Officer", company: "Quantum Analytics" }, { text: "The modern workplace doesn't need people working harder—it needs people thinking differently and challenging established processes.", author: "David Kwan", role: "Director of Innovation", company: "Forward Dynamics" }, { text: "Resilience isn't just surviving disruption; it's using change as fuel to develop stronger, more adaptive business models.", author: "Sarah Thornton", role: "Chief Strategy Officer", company: "Elevate Enterprise" } ]; const quoteText = document.querySelector('.quote-text'); const quoteAuthor = document.querySelector('.quote-author'); const quoteRole = document.querySelector('.quote-role'); const quoteCompany = document.querySelector('.quote-company'); const quoteCard = document.querySelector('.quote-card'); const progressBar = document.querySelector('.quote-progress-bar'); const indicatorDots = document.querySelectorAll('.indicator-dot'); const prevButton = document.getElementById('prev-quote'); const nextButton = document.getElementById('next-quote'); let currentQuoteIndex = 0; let autoChangeInterval; function updateQuote(index) { // Add a class for the transition quoteCard.classList.add('changing'); setTimeout(() => { quoteText.textContent = quotes[index].text; quoteAuthor.textContent = quotes[index].author; quoteRole.textContent = quotes[index].role; quoteCompany.textContent = quotes[index].company; // Update active indicator dot indicatorDots.forEach((dot, i) => { dot.classList.toggle('active', i === index); }); // Remove the transition class quoteCard.classList.remove('changing'); // Reset progress bar resetProgressBar(); }, 300); } function nextQuote() { currentQuoteIndex = (currentQuoteIndex + 1) % quotes.length; updateQuote(currentQuoteIndex); } function prevQuote() { currentQuoteIndex = (currentQuoteIndex - 1 + quotes.length) % quotes.length; updateQuote(currentQuoteIndex); } function resetProgressBar() { progressBar.style.width = '0'; clearInterval(autoChangeInterval); startProgressBarAnimation(); } function startProgressBarAnimation() { let width = 0; autoChangeInterval = setInterval(() => { if (width >= 100) { nextQuote(); } else { width += 0.5; progressBar.style.width = width + '%'; } }, 50); // 10 seconds total (50ms * 200 increments) } // Set up event listeners nextButton.addEventListener('click', nextQuote); prevButton.addEventListener('click', prevQuote); // Make indicator dots clickable indicatorDots.forEach((dot, index) => { dot.addEventListener('click', () => { currentQuoteIndex = index; updateQuote(currentQuoteIndex); }); }); // Start progress bar animation startProgressBarAnimation(); // Also handle hover state quoteCard.addEventListener('mouseenter', () => { clearInterval(autoChangeInterval); }); quoteCard.addEventListener('mouseleave', () => { resetProgressBar(); }); // Random slight rotation on hover for a more dynamic feel quoteCard.addEventListener('mousemove', (e) => { const xAxis = (window.innerWidth / 2 - e.pageX) / 25; const yAxis = (window.innerHeight / 2 - e.pageY) / 25; quoteCard.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg) translateY(-5px)`; }); quoteCard.addEventListener('mouseleave', () => { quoteCard.style.transform = 'rotateY(0) rotateX(0) translateY(0)'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Customer Testimonials</title> <style> :root { --color-bg: #f8f7f5; --color-text: #2c2c2c; --color-accent-1: #8a7f6d; --color-accent-2: #c6a47e; --color-card: #ffffff; --color-highlight: #e9e5e0; --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.08); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background-color: var(--color-bg); color: var(--color-text); display: flex; flex-direction: column; min-height: 100vh; padding: 2rem; line-height: 1.6; width: 100%; max-width: 700px; margin: 0 auto; } .container { max-width: 100%; margin: 0 auto; } header { margin-bottom: 2rem; text-align: center; } h1 { font-size: 1.8rem; margin-bottom: 0.5rem; color: var(--color-text); font-weight: 700; letter-spacing: -0.02em; } .subtitle { font-size: 1rem; color: var(--color-accent-1); font-weight: 500; max-width: 500px; margin: 0 auto; } .testimonials { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .testimonial { position: relative; background-color: var(--color-card); border-radius: 12px; padding: 1.75rem; transition: var(--transition); cursor: pointer; box-shadow: var(--shadow-sm); border-left: 4px solid var(--color-accent-1); overflow: hidden; } .testimonial::before { content: """; position: absolute; top: -2rem; right: 1rem; font-size: 8rem; font-family: Georgia, serif; color: rgba(198, 164, 126, 0.1); z-index: 0; line-height: 1; } .testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-left-color: var(--color-accent-2); } .testimonial:hover .rating span { animation: pulse 0.6s forwards; } .testimonial:hover .highlight { background-position: 0 100%; } .testimonial-content { position: relative; z-index: 1; } .testimonial-text { font-size: 1rem; line-height: 1.7; margin-bottom: 1.25rem; font-weight: 400; position: relative; } .highlight { background: linear-gradient(transparent 60%, rgba(198, 164, 126, 0.2) 40%); background-size: 0% 100%; background-repeat: no-repeat; transition: background-position 0.5s, background-size 0.5s; background-size: 100% 100%; background-position: 100% 100%; padding: 0 2px; } .testimonial-meta { display: flex; align-items: center; margin-top: 1.5rem; border-top: 1px solid rgba(138, 127, 109, 0.1); padding-top: 1rem; } .avatar { width: 42px; height: 42px; border-radius: 50%; background-color: var(--color-highlight); overflow: hidden; margin-right: 1rem; flex-shrink: 0; position: relative; } .avatar img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .testimonial:hover .avatar img { transform: scale(1.05); } .meta-text { flex-grow: 1; } .customer-name { font-weight: 600; font-size: 0.95rem; margin-bottom: 2px; letter-spacing: -0.01em; } .purchase-info { font-size: 0.8rem; color: var(--color-accent-1); font-weight: 500; } .rating { display: flex; gap: 0.2rem; margin-left: auto; } .rating span { color: var(--color-accent-2); transition: var(--transition); transform-origin: center; } .testimonial-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .tag { background-color: var(--color-highlight); color: var(--color-accent-1); font-size: 0.7rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 30px; transition: var(--transition); } .testimonial:hover .tag { background-color: var(--color-accent-2); color: white; } .filters { display: flex; gap: 0.8rem; margin-bottom: 2rem; flex-wrap: wrap; justify-content: center; } .filter-btn { background: none; border: none; padding: 0.5rem 1rem; border-radius: 30px; font-size: 0.8rem; cursor: pointer; transition: var(--transition); background-color: white; color: var(--color-accent-1); font-weight: 500; box-shadow: var(--shadow-sm); } .filter-btn.active { background-color: var(--color-accent-1); color: white; } .filter-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes show { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .testimonial { animation: show 0.5s forwards; opacity: 0; } .testimonial:nth-child(1) { animation-delay: 0.1s; } .testimonial:nth-child(2) { animation-delay: 0.2s; } .testimonial:nth-child(3) { animation-delay: 0.3s; } /* Verified badge */ .verified-badge { display: inline-flex; align-items: center; margin-left: 0.4rem; color: var(--color-accent-2); font-size: 0.8rem; font-weight: 500; } .verified-badge svg { width: 14px; height: 14px; margin-right: 3px; } /* Responsive adjustments */ @media (max-width: 700px) { body { padding: 1.5rem; } .testimonials { gap: 1.25rem; } .testimonial { padding: 1.5rem; } h1 { font-size: 1.6rem; } } @media (min-width: 500px) { .testimonials { grid-template-columns: repeat(2, 1fr); } .testimonial:first-child { grid-column: 1 / -1; } } </style> </head> <body> <div class="container"> <header> <h1>What Our Customers Say</h1> <p class="subtitle">Authentic reviews from people who've experienced our artisanal skincare collection</p> </header> <div class="filters"> <button class="filter-btn active" data-filter="all">All Reviews</button> <button class="filter-btn" data-filter="skincare">Skincare</button> <button class="filter-btn" data-filter="haircare">Haircare</button> <button class="filter-btn" data-filter="bodycare">Bodycare</button> </div> <div class="testimonials"> <div class="testimonial" data-category="skincare"> <div class="testimonial-content"> <p class="testimonial-text">After 3 weeks with the <span class="highlight">Rosehip Facial Serum</span>, the persistent redness around my cheeks has noticeably diminished. I've tried countless products over the years, but this is the first one that's actually delivered consistent results without irritating my sensitive skin.</p> <div class="testimonial-tags"> <span class="tag">Sensitive Skin</span> <span class="tag">Anti-Redness</span> <span class="tag">Hydrating</span> </div> <div class="testimonial-meta"> <div class="avatar"> <img src="https://randomuser.me/api/portraits/women/42.jpg" alt="Customer avatar"> </div> <div class="meta-text"> <div class="customer-name">Sophie Martins<span class="verified-badge"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/> </svg>Verified</span> </div> <div class="purchase-info">Purchased 3 months ago</div> </div> <div class="rating"> <span>★</span> <span>★</span> <span>★</span> <span>★</span> <span>★</span> </div> </div> </div> </div> <div class="testimonial" data-category="haircare"> <div class="testimonial-content"> <p class="testimonial-text">The <span class="highlight">Argan Oil Hair Treatment</span> has completely transformed my curls. My hair is noticeably more defined and the frizz is finally under control, even in humid weather. Love that it's lightweight and doesn't leave any greasy residue.</p> <div class="testimonial-tags"> <span class="tag">Curly Hair</span> <span class="tag">Anti-Frizz</span> </div> <div class="testimonial-meta"> <div class="avatar"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer avatar"> </div> <div class="meta-text"> <div class="customer-name">Marcus Johnson<span class="verified-badge"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/> </svg>Verified</span> </div> <div class="purchase-info">Purchased 1 month ago</div> </div> <div class="rating"> <span>★</span> <span>★</span> <span>★</span> <span>★</span> <span>★</span> </div> </div> </div> </div> <div class="testimonial" data-category="bodycare"> <div class="testimonial-content"> <p class="testimonial-text">I'm on my third jar of the <span class="highlight">Shea Butter Body Balm</span> and it's now a permanent part of my evening routine. It's helped tremendously with the keratosis pilaris on my arms, something I've struggled with since childhood. Worth every penny!</p> <div class="testimonial-tags"> <span class="tag">Dry Skin</span> <span class="tag">Keratosis Pilaris</span> </div> <div class="testimonial-meta"> <div class="avatar"> <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Customer avatar"> </div> <div class="meta-text"> <div class="customer-name">Eliza Thornberry<span class="verified-badge"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/> </svg>Verified</span> </div> <div class="purchase-info">Purchased 5 months ago</div> </div> <div class="rating"> <span>★</span> <span>★</span> <span>★</span> <span>★</span> <span>★</span> </div> </div> </div> </div> </div> </div> <script> // Animation for stars on hover document.querySelectorAll('.testimonial').forEach(item => { const stars = item.querySelectorAll('.rating span'); item.addEventListener('mouseenter', () => { stars.forEach((star, index) => { star.style.animationDelay = `${index * 0.1}s`; }); }); }); // Filter functionality document.querySelectorAll('.filter-btn').forEach(btn => { btn.addEventListener('click', () => { // Update active state document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); const filter = btn.getAttribute('data-filter'); // Filter testimonials document.querySelectorAll('.testimonial').forEach(testimonial => { if (filter === 'all' || testimonial.getAttribute('data-category') === filter) { testimonial.style.display = 'block'; // Reset and replay the animation testimonial.style.animation = 'none'; testimonial.offsetHeight; // Trigger reflow testimonial.style.animation = 'show 0.5s forwards'; } else { testimonial.style.display = 'none'; } }); }); }); // Initialize with animations document.querySelectorAll('.testimonial').forEach((testimonial, index) => { testimonial.style.animationDelay = `${index * 0.1}s`; }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Libre+Baskerville:ital@0;1&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Libre Baskerville', serif; color: #333; background-color: #f9f7f4; height: 100vh; display: flex; align-items: center; justify-content: center; overflow-x: hidden; padding: 20px; } .timeline-container { width: 660px; height: 660px; position: relative; overflow: hidden; } .quote-container { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; transition: transform 0.5s ease; } .blockquote-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 30px; opacity: 0; transform: scale(0.9); transition: opacity 0.8s ease, transform 0.8s ease; } .blockquote-wrapper.active { opacity: 1; transform: scale(1); z-index: 1; } .quote-card { position: relative; width: 100%; max-width: 600px; background-color: #fff; border-radius: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; transition: transform 0.3s ease; } .quote-card:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg=='); opacity: 0.07; pointer-events: none; } .quote-card:hover { transform: translateY(-5px); } .quote-content { padding: 35px 40px; position: relative; } .quote-mark { font-family: 'Playfair Display', serif; font-size: 80px; position: absolute; color: rgba(139, 69, 19, 0.1); z-index: 0; } .quote-mark-open { top: 20px; left: 20px; } .quote-mark-close { bottom: 30px; right: 30px; } .quote-text { font-family: 'Playfair Display', serif; font-size: 22px; line-height: 1.6; color: #333; margin-bottom: 20px; position: relative; z-index: 1; } .quote-attribution { font-size: 16px; color: #8b4513; font-style: italic; margin-bottom: 5px; } .quote-context { font-size: 14px; color: #666; margin-top: 5px; } .quote-date { display: inline-block; font-size: 12px; background-color: #8b4513; color: #fff; padding: 4px 8px; border-radius: 2px; margin-top: 15px; } .timeline-nav { display: flex; justify-content: space-between; margin-top: 20px; position: absolute; bottom: 20px; width: 100%; padding: 0 30px; z-index: 10; } .nav-btn { background: none; border: none; font-size: 16px; color: #8b4513; cursor: pointer; transition: transform 0.3s ease, color 0.3s ease; padding: 10px; display: flex; align-items: center; font-family: 'Libre Baskerville', serif; } .nav-btn:hover { color: #5e2e0d; transform: scale(1.05); } .nav-btn:focus { outline: none; } .nav-btn i { font-size: 20px; margin: 0 8px; } .progress-container { height: 3px; width: 100%; background-color: rgba(139, 69, 19, 0.2); position: absolute; bottom: 0; } .progress-bar { height: 100%; background-color: #8b4513; width: 0; transition: width 0.3s ease; } .quote-time-period { position: absolute; left: 40px; top: 20px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #8b4513; opacity: 0; transform: translateY(-10px); transition: opacity 0.5s ease, transform 0.5s ease; } .blockquote-wrapper.active .quote-time-period { opacity: 1; transform: translateY(0); transition-delay: 0.3s; } .quote-annotation { position: absolute; background: rgba(255, 249, 235, 0.95); border-left: 2px solid #8b4513; padding: 10px 15px; font-size: 14px; width: 180px; top: 70px; right: -190px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); opacity: 0; transform: translateX(-20px); transition: opacity 0.3s ease, transform 0.3s ease; z-index: 5; } .quote-card:hover .quote-annotation { opacity: 1; transform: translateX(0); } @media (max-width: 700px) { .quote-text { font-size: 18px; } .quote-mark { font-size: 60px; } .quote-annotation { position: relative; right: 0; top: 0; width: 100%; margin-top: 15px; transform: none; opacity: 1; } .quote-content { padding: 25px; } } /* Ink splatter decoration */ .ink-splatter { position: absolute; width: 50px; height: 50px; background-size: contain; background-repeat: no-repeat; opacity: 0.15; z-index: 0; } .ink-1 { top: 20px; right: 30px; transform: rotate(45deg); background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%238b4513" d="M82.03,56.61c-3.06-0.35-7.32-0.56-12.34-0.56c-13.58,0-20.37,3.33-27.15,3.33 c-6.78,0-10.17-3.33-23.75-3.33c-5.03,0-10.73,0.79-12.35,0.79c-1.61,0-3.28-0.79-4.39-2.37c-1.11-1.58-1.66-3.94-1.66-7.08 c0-6.29,2.5-9.44,7.49-9.44c4.99,0,11.43,1.29,19.31,1.29c8.03,0,15.52-1.29,22.49-1.29c7.12,0,13.36,1.29,18.7,1.29 c5.34,0,8.01-3.15,8.01-9.44c0-3.15-0.55-5.5-1.66-7.08c-1.11-1.58-2.77-2.37-4.99-2.37c-2.77,0-5.62,0.56-8.54,1.69 c-2.91,1.13-5.76,2.37-8.54,3.73c-2.77,1.35-5.2,2.6-7.29,3.73c-2.08,1.13-3.84,1.69-5.26,1.69c-3.98,0-7.56-1.96-10.73-5.89 c-3.17-3.93-4.76-8.28-4.76-13.06C25.62,5.1,31.24,0,42.49,0c4.71,0,9.76,0.62,15.17,1.85c5.41,1.23,10.31,2.94,14.73,5.1 c4.42,2.17,8.12,4.8,11.1,7.92c2.98,3.11,4.47,6.63,4.47,10.58c0,3.94-1.2,6.63-3.62,8.08c-2.41,1.46-5.41,2.77-9.01,3.96 c-3.59,1.19-7.7,2.23-12.34,3.13c-4.64,0.9-9.49,1.83-14.56,2.77c-5.07,0.94-10.06,2.02-14.99,3.25 c-4.92,1.23-9.32,2.88-13.19,4.96c-3.87,2.08-6.99,4.65-9.35,7.75c-2.36,3.09-3.53,6.91-3.53,11.44c0,9.82,3.31,17.63,9.95,23.42 C22.95,98.9,31.7,100,40.83,100c5.48,0,10.56-0.82,15.26-2.48c4.7-1.65,8.86-3.78,12.5-6.4c3.63-2.62,6.81-5.53,9.52-8.75 c2.71-3.22,5.23-6.34,7.56-9.35c2.34-3.02,4.51-5.78,6.52-8.3c2.01-2.52,4.14-4.44,6.39-5.75c2.25-1.31,4.79-1.97,7.62-1.97 c3.53,0,6.49,1.17,8.85,3.5c2.37,2.33,3.56,5.21,3.56,8.64c0,3.43-1.13,6.24-3.4,8.42c-2.27,2.18-5.01,3.27-8.25,3.27 c-6.87,0-13.75-4.59-20.64-13.76c-1.93-2.53-3.79-4.19-5.59-4.97c-1.8-0.78-3.41-1.17-4.83-1.17c-2.82,0-4.93,0.84-6.35,2.52 c-1.41,1.68-2.12,3.58-2.12,5.7c0,4.23,1.93,7.56,5.81,9.99c3.87,2.43,8.99,3.65,15.34,3.65c1.2,0,2.56-0.04,4.07-0.11 c1.51-0.07,2.87-0.11,4.07-0.11c3.11,0,5.66,0.91,7.67,2.74c2.01,1.83,3.01,4.01,3.01,6.55c0,3.94-1.65,6.8-4.95,8.58 c-3.3,1.78-6.74,2.67-10.34,2.67c-3.59,0-8.68-0.44-15.26-1.31c-6.57-0.87-12.77-1.31-18.61-1.31c-5.83,0-12.04,0.44-18.61,1.31 c-6.57,0.87-11.67,1.31-15.26,1.31c-4.31,0-7.9-0.88-10.77-2.63c-2.87-1.75-4.3-4.65-4.3-8.69c0-2.53,1-4.72,3.01-6.55 c2.01-1.83,4.66-2.74,7.96-2.74c1.01,0,2.17,0.04,3.49,0.11c1.32,0.07,2.68,0.11,4.07,0.11c12.67,0,19-4.55,19-13.64 c0-2.12-0.74-4.01-2.22-5.7c-1.48-1.68-3.66-2.52-6.52-2.52c-1.41,0-3.01,0.39-4.82,1.17c-1.8,0.78-3.65,2.44-5.54,4.97 c-6.88,9.17-13.75,13.76-20.64,13.76c-3.17,0-5.86-1.09-8.08-3.27c-2.22-2.18-3.33-4.99-3.33-8.42c0-3.43,1.13-6.3,3.4-8.64 c2.27-2.33,5.18-3.5,8.72-3.5c3.35,0,6.03,0.66,8.04,1.97c2.01,1.31,3.82,3.23,5.42,5.75c1.61,2.52,3.4,5.28,5.38,8.3 c1.98,3.02,4.45,6.13,7.41,9.35c2.95,3.22,6.55,6.13,10.78,8.75c4.23,2.62,9.41,4.76,15.55,6.4c6.14,1.65,13.29,2.48,21.46,2.48 c9.05,0,17.75-1.1,26.09-3.29c8.34-2.19,12.51-9.99,12.51-23.42c0-4.53-1.13-8.35-3.4-11.44c-2.27-3.09-5.28-5.67-9.03-7.75 c-3.76-2.08-8.04-3.74-12.85-4.96c-4.82-1.23-9.7-2.3-14.65-3.25c-4.95-0.94-9.73-1.87-14.35-2.77 c-4.62-0.9-8.66-1.94-12.14-3.13c-3.48-1.19-6.3-2.5-8.47-3.96c-2.16-1.46-3.24-3.28-3.24-5.5c0-5.89,5.27-10.51,15.82-13.88 C62.06,1.68,72.21,0,82,0c11.24,0,16.87,5.1,16.87,15.31c0,4.78-1.67,9.13-5.01,13.06c-3.34,3.93-7.07,5.89-11.18,5.89 c-1.46,0-3.32-0.56-5.58-1.69c-2.27-1.13-4.76-2.37-7.49-3.73c-2.73-1.35-5.49-2.6-8.3-3.73c-2.8-1.13-5.42-1.69-7.84-1.69 c-0.15,0-0.36,0.17-0.64,0.51c-0.29,0.34-0.57,0.73-0.85,1.18c-0.29,0.45-0.57,0.85-0.85,1.18c-0.29,0.34-0.43,0.51-0.43,0.51 c-0.72,1.58-1.08,3.09-1.08,4.53c0,4.6,2.65,6.9,7.96,6.9c1.76,0,4.29-0.25,7.56-0.73c3.28-0.49,6.66-0.98,10.15-1.46 c3.48-0.49,6.85-0.94,10.09-1.35c3.24-0.42,5.77-0.63,7.56-0.63c1.81,0,3.05,0.56,3.73,1.69c0.68,1.13,1.02,2.49,1.02,4.08 c0,3.15-1.14,4.72-3.43,4.72c-3.06,0-7.32-0.45-12.77-1.35c-5.45-0.9-11.15-1.35-17.09-1.35c-5.95,0-11.65,0.45-17.09,1.35 c-5.45,0.9-10.15,1.35-14.08,1.35c-2.21,0-3.32-1.58-3.32-4.72c0-1.58,0.34-2.94,1.02-4.08c0.68-1.13,1.93-1.69,3.75-1.69 c5.57,0,12.21,0.67,19.91,2.02c7.7,1.35,14.34,2.02,19.91,2.02c1.43,0,3.19-0.3,5.26-0.9c2.08-0.6,4.19-1.18,6.33-1.75 c2.15-0.56,4.26-1.04,6.33-1.41c2.08-0.38,3.84-0.56,5.26-0.56c1.81,0,3.05,0.56,3.73,1.69c0.68,1.13,1.02,2.49,1.02,4.08 c0,1.58-0.34,2.92-1.02,4.02c-0.68,1.1-1.93,1.64-3.73,1.64c-2.36,0-5.55-0.34-9.57-1.01c-4.03-0.68-8.15-1.01-12.35-1.01 c-4.19,0-8.15,0.39-11.87,1.18c-3.73,0.79-5.59,1.18-5.59,1.18c-1.79,0-3.05-0.56-3.77-1.69c-0.72-1.13-1.08-2.51-1.08-4.14 c0-1.47,0.31-2.74,0.92-3.82c0.61-1.08,1.43-1.68,2.46-1.8c1.04-0.11,2.17-0.28,3.4-0.51c1.22-0.22,2.36-0.6,3.4-1.12 c1.04-0.53,1.93-1.25,2.65-2.15c0.72-0.9,1.08-2.09,1.08-3.56c0-3.43-1.4-5.15-4.21-5.15c-0.86,0-2.72,0.8-5.59,2.41 c-2.87,1.61-4.3,2.78-4.3,3.5c0,0.72,0.07,1.33,0.21,1.83c0.14,0.5,0.21,0.87,0.21,1.13c0,0.9-0.36,1.64-1.08,2.21 c-0.72,0.56-1.58,0.85-2.58,0.85c-2.14,0-3.21-1.47-3.21-4.42c0-3.6,2.8-7.17,8.4-10.69c5.59-3.53,10.45-5.29,14.56-5.29 c3.39,0,6.1,1.06,8.15,3.19c2.04,2.12,3.06,4.76,3.06,7.91c0,3.15-0.9,5.79-2.69,7.92c-1.8,2.13-4.1,3.7-6.91,4.71 c-0.57,0.23-0.93,0.38-1.07,0.45c-0.15,0.08-0.22,0.11-0.22,0.11c0.72,0.34,1.79,0.51,3.21,0.51c13.86,0,20.8-3.38,20.8-10.13 c0-1.58-0.68-2.98-2.04-4.19c-1.36-1.22-3.65-1.83-6.85-1.83c-1.29,0-3.11,0.2-5.48,0.62c-2.37,0.41-4.75,0.88-7.15,1.41 c-2.39,0.53-4.66,1.01-6.81,1.46c-2.14,0.45-3.78,0.68-4.93,0.68c-1.61,0-2.41-1.18-2.41-3.53c0-3.21,2.87-5.76,8.62-7.65 c5.74-1.88,10.92-2.83,15.55-2.83c4.2,0,7.85,1.14,10.95,3.42c3.1,2.28,4.65,5.02,4.65,8.21c0,3.19-1.95,6.09-5.86,8.69 c-3.9,2.6-8.9,4.67-14.99,6.2c-6.1,1.54-13.16,2.61-21.19,3.22c-8.03,0.61-16.06,0.92-24.09,0.92c-7.32,0-14.17,0.2-20.55,0.62 c-6.38,0.41-11.93,0.95-16.66,1.63c-4.73,0.68-8.47,1.5-11.22,2.47c-2.76,0.97-4.14,1.94-4.14,2.92c0,0.97,0.47,1.48,1.4,1.52 c0.93,0.04,2.33,0.06,4.18,0.06c4.63,0,10.01-0.39,16.12-1.18c6.11-0.79,11.48-1.18,16.12-1.18c4.64,0,10.01,0.39,16.13,1.18 c6.11,0.79,11.5,1.18,16.14,1.18c4.65,0,7.69-0.02,9.11-0.06c1.43-0.04,2.86-0.56,4.28-1.58c1.43-1.01,2.15-2.41,2.15-4.19 c0-1.79-0.72-3.17-2.15-4.14c-1.43-0.98-2.86-1.46-4.28-1.46c-1.43,0-4.46,0.45-9.11,1.35c-4.64,0.9-9.14,1.35-13.51,1.35 c-5.25,0-8.37-1.91-9.38-5.72c-0.29-1.24-0.43-2.09-0.43-2.53c0-1.24,0.22-2.22,0.65-2.92c0.43-0.71,1.08-1.06,1.94-1.06 c0.85,0,1.9,0.14,3.15,0.4c1.25,0.27,2.51,0.57,3.77,0.9c1.26,0.34,2.37,0.64,3.33,0.9c0.97,0.27,1.58,0.4,1.84,0.4 c1.72,0,3.13-0.59,4.23-1.78c1.1-1.18,1.65-2.7,1.65-4.54c0-1.84-0.55-3.45-1.65-4.82c-1.1-1.37-2.51-2.05-4.23-2.05 c-1.08,0-2.73,0.36-4.93,1.07c-2.22,0.71-4.43,0.98-6.65,0.79c-2.22-0.19-4.14-0.29-5.76-0.29c-5.26,0-10.7,0.77-16.33,2.31 c-5.63,1.54-8.45,3.5-8.45,5.9c0,1.24,0.47,2.27,1.4,3.08c0.93,0.82,1.99,1.47,3.17,1.97c1.18,0.5,2.25,0.84,3.21,1.02 c0.97,0.19,1.58,0.28,1.84,0.28c3.44,0,8.05-0.17,13.83-0.51c5.77-0.34,10.39-0.51,13.83-0.51c1.82,0,3.7,0.12,5.66,0.36 c1.96,0.24,3.7,0.37,5.23,0.37c3.87,0,6.63-0.9,8.3-2.69c1.68-1.8,2.51-3.8,2.51-6.01c0-3.38-1.43-5.06-4.29-5.06 c-2.85,0-5.77,1.01-8.73,3.02c-2.96,2.01-6.03,4.31-9.2,6.9c-3.18,2.58-6.53,5.06-10.06,7.41c-3.54,2.36-7.36,4.37-11.46,6.05 c-4.1,1.68-8.65,2.99-13.66,3.93c-5.01,0.94-10.64,1.41-16.88,1.41c-6.25,0-11.87-0.47-16.88-1.41c-5.01-0.94-9.56-2.25-13.66-3.93 c-4.1-1.68-7.92-3.7-11.46-6.05c-3.54-2.36-6.89-4.83-10.07-7.41c-3.18-2.58-6.25-4.88-9.2-6.9c-2.97-2.01-5.88-3.02-8.73-3.02 c-2.87,0-4.29,1.69-4.29,5.06c0,2.21,0.86,4.22,2.58,6.01c1.72,1.8,4.47,2.69,8.22,2.69c1.65,0,3.43-0.12,5.34-0.37 c1.9-0.24,3.82-0.36,5.76-0.36c3.55,0,8.2,0.17,13.94,0.51c5.73,0.34,10.38,0.51,13.94,0.51c0.25,0,0.9-0.09,1.94-0.28 c1.04-0.19,2.15-0.53,3.33-1.02c1.18-0.5,2.22-1.15,3.13-1.97c0.9-0.82,1.35-1.84,1.35-3.08c0-2.4-3.02-4.37-9.06-5.9 c-6.04-1.54-11.65-2.31-16.87-2.31c-1.79,0-3.77,0.1-5.93,0.29c-2.16,0.19-4.33-0.08-6.51-0.79c-2.18-0.71-3.94-1.07-5.27-1.07 c-1.65,0-3.06,0.68-4.22,2
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Merriweather", Georgia, serif; background-color: #f9f9f9; color: #333; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .container { width: 100%; max-width: 660px; position: relative; } .blockquote-container { position: relative; margin: 40px 0; transition: all 0.3s ease; } .academic-blockquote { background-color: rgba(245, 245, 250, 0.8); border-left: 4px solid #3a5199; padding: 25px 30px; font-size: 16px; line-height: 1.7; position: relative; border-radius: 3px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; overflow: hidden; } .academic-blockquote:hover { transform: translateY(-3px); box-shadow: 0 5px 20px rgba(58, 81, 153, 0.15); } .academic-blockquote::before { content: """; font-family: 'Times New Roman', serif; position: absolute; top: -30px; left: 10px; font-size: 150px; color: rgba(58, 81, 153, 0.1); z-index: 0; } .quote-text { position: relative; z-index: 2; font-weight: 300; margin-bottom: 15px; color: #444; } .quote-citation { display: block; font-style: italic; font-size: 14px; color: #666; margin-top: 15px; text-align: right; position: relative; z-index: 2; } .highlighted-text { background: linear-gradient(to bottom, transparent 0%, transparent 60%, rgba(255, 230, 0, 0.4) 60%, rgba(255, 230, 0, 0.4) 100%); padding: 0 2px; cursor: help; position: relative; transition: background 0.3s ease; } .highlighted-text:hover { background: linear-gradient(to bottom, transparent 0%, transparent 60%, rgba(255, 230, 0, 0.7) 60%, rgba(255, 230, 0, 0.7) 100%); } .tooltip { visibility: hidden; position: absolute; background-color: #fff; color: #333; padding: 15px; border-radius: 4px; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1); width: 250px; font-size: 13px; line-height: 1.5; opacity: 0; transition: opacity 0.3s, transform 0.3s; transform: translateY(10px); z-index: 10; bottom: 100%; left: 50%; margin-left: -125px; margin-bottom: 10px; border-left: 2px solid #3a5199; } .tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -8px; border-width: 8px; border-style: solid; border-color: #fff transparent transparent transparent; } .highlighted-text:hover .tooltip { visibility: visible; opacity: 1; transform: translateY(0); } .tooltip-title { font-weight: 700; margin-bottom: 5px; color: #3a5199; font-size: 14px; } .tooltip-source { font-style: italic; font-size: 11px; color: #999; margin-top: 8px; display: block; } .related-insights { margin-top: 20px; background-color: #fff; padding: 20px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); border-top: 2px solid #3a5199; display: none; opacity: 0; transition: opacity 0.5s ease; } .show-insights { display: block; opacity: 1; animation: fadeIn 0.5s ease forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .insights-title { font-size: 16px; margin-bottom: 10px; color: #3a5199; font-weight: 700; display: flex; align-items: center; } .insights-title::before { content: ""; display: inline-block; width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233a5199'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E"); background-size: contain; margin-right: 8px; } .insight-list { list-style-type: none; margin-left: 0; padding-left: 0; } .insight-item { margin-bottom: 8px; padding-left: 25px; position: relative; font-size: 14px; line-height: 1.6; } .insight-item::before { content: "•"; color: #3a5199; font-weight: bold; position: absolute; left: 10px; } .expand-button { background-color: transparent; border: none; color: #3a5199; cursor: pointer; display: flex; align-items: center; font-family: "Merriweather", Georgia, serif; font-size: 14px; margin-top: 15px; padding: 5px 0; transition: color 0.3s; } .expand-button:hover { color: #263566; } .expand-button .icon { width: 16px; height: 16px; margin-right: 6px; transition: transform 0.3s ease; } .expand-button.expanded .icon { transform: rotate(180deg); } .reading-indicator { height: 3px; background-color: #3a5199; position: absolute; bottom: -3px; left: 0; width: 0%; transition: width 0.3s ease; } @media (max-width: 500px) { .academic-blockquote { padding: 20px; font-size: 15px; } .tooltip { width: 200px; margin-left: -100px; font-size: 12px; } .insight-item { font-size: 13px; } } </style> </head> <body> <div class="container"> <h2 style="color: #3a5199; margin-bottom: 10px; font-size: 22px;"> Research Highlight: Educational Neuroscience </h2> <p style="color: #666; margin-bottom: 25px; font-size: 15px; line-height: 1.6;"> From our latest peer-reviewed publication on cognitive development and learning strategies. </p> <div class="blockquote-container"> <blockquote class="academic-blockquote" id="neuroscience-quote"> <p class="quote-text"> Recent advances in <span class="highlighted-text">educational neuroscience<span class="tooltip"><span class="tooltip-title">Educational Neuroscience</span>An interdisciplinary field that combines neuroscience research with educational practice to improve teaching and learning outcomes.<span class="tooltip-source">Source: Handbook of Educational Neuroscience, 2022</span></span></span> suggest that the traditional model of passive learning significantly underutilizes the brain's capacity for neural plasticity. Studies demonstrate that <span class="highlighted-text">spaced repetition<span class="tooltip"><span class="tooltip-title">Spaced Repetition</span>A learning technique that incorporates increasing intervals of time between subsequent review of previously learned material to exploit the psychological spacing effect.<span class="tooltip-source">Source: Journal of Memory and Cognition, 2021</span></span></span> combined with <span class="highlighted-text">active recall<span class="tooltip"><span class="tooltip-title">Active Recall</span>A learning principle that involves actively stimulating memory during the learning process, rather than simply re-reading or passive review of material.<span class="tooltip-source">Source: Dunlosky et al., Psychological Science in the Public Interest, 2013</span></span></span> can increase information retention by up to 215% compared to conventional study methods. </p> <cite class="quote-citation">— Dr. Eleanor Matthews, Journal of Cognitive Development, 2023</cite> <div class="reading-indicator"></div> </blockquote> <button class="expand-button" id="expand-insights"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/> </svg> Related research insights </button> <div class="related-insights" id="insights-panel"> <h3 class="insights-title">Further Context & Applications</h3> <ul class="insight-list"> <li class="insight-item">Meta-analysis by Stanford Learning Lab (2022) confirms that multisensory learning approaches activate multiple brain regions simultaneously, enhancing neural pathway formation.</li> <li class="insight-item">Implementing microlearning strategies (3-5 minute focused segments) has shown a 17% increase in information transfer in undergraduate settings.</li> <li class="insight-item">Emotional engagement during learning activates the amygdala, which enhances memory consolidation and increases long-term retention by approximately 25%.</li> <li class="insight-item">Research from MIT's McGovern Institute demonstrates that contextual variation during practice prevents "overlearning" and promotes adaptable knowledge structures.</li> </ul> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Expand/collapse related insights functionality const expandButton = document.getElementById('expand-insights'); const insightsPanel = document.getElementById('insights-panel'); expandButton.addEventListener('click', () => { insightsPanel.classList.toggle('show-insights'); expandButton.classList.toggle('expanded'); if (expandButton.classList.contains('expanded')) { expandButton.innerHTML = ` <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/> </svg> Hide research insights `; } else { expandButton.innerHTML = ` <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/> </svg> Related research insights `; } }); // Reading progress indicator const blockquote = document.getElementById('neuroscience-quote'); const readingIndicator = blockquote.querySelector('.reading-indicator'); blockquote.addEventListener('mouseenter', () => { readingIndicator.style.width = '100%'; }); blockquote.addEventListener('mouseleave', () => { readingIndicator.style.width = '0%'; }); // Responsive tooltip positioning const highlightedElements = document.querySelectorAll('.highlighted-text'); highlightedElements.forEach(element => { const tooltip = element.querySelector('.tooltip'); element.addEventListener('mouseenter', () => { // Check if tooltip would go off screen to the right const tooltipRect = tooltip.getBoundingClientRect(); const containerRect = document.querySelector('.container').getBoundingClientRect(); if (tooltipRect.right > containerRect.right) { tooltip.style.left = 'auto'; tooltip.style.right = '0'; tooltip.style.marginLeft = '0'; } // Add subtle ripple effect const ripple = document.createElement('span'); ripple.style.position = 'absolute'; ripple.style.width = '100%'; ripple.style.height = '100%'; ripple.style.top = '0'; ripple.style.left = '0'; ripple.style.backgroundColor = 'rgba(58, 81, 153, 0.1)'; ripple.style.borderRadius = '50%'; ripple.style.transform = 'scale(0)'; ripple.style.animation = 'ripple 0.6s linear'; ripple.style.zIndex = '1'; element.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 700); }); }); // Add subtle animations document.querySelectorAll('.academic-blockquote, .related-insights').forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateY(20px)'; setTimeout(() => { el.style.transition = 'opacity 0.8s ease, transform 0.8s ease'; el.style.opacity = '1'; el.style.transform = 'translateY(0)'; }, 100); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Artisanal Voices - Magazine Feature</title> <style> :root { --primary: #111111; --accent: #ff3e55; --light: #f9f6f0; --secondary: #4a54d9; --tertiary: #2acaaa; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Helvetica Neue', Arial, sans-serif; background-color: var(--light); color: var(--primary); overflow-x: hidden; height: 100%; padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; } .container { width: 100%; max-width: 700px; height: 700px; padding: 30px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; } .blockquote-container { position: relative; opacity: 0; transform: translateY(40px); animation: fadeIn 1s ease-out forwards; } .quote-wrapper { position: relative; padding: 20px; margin-left: 40px; } .quote-content { font-size: 2.5rem; line-height: 1.3; font-weight: 700; margin-bottom: 30px; position: relative; z-index: 2; mix-blend-mode: difference; } .quote-content::before { content: '"'; position: absolute; left: -70px; top: -30px; font-size: 9rem; color: var(--accent); opacity: 0.7; z-index: -1; } .quote-attribution { font-size: 1.2rem; text-align: right; margin-right: 60px; font-style: italic; position: relative; z-index: 2; } .accent-shape { position: absolute; background-color: var(--secondary); width: 200px; height: 200px; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; z-index: 1; mix-blend-mode: multiply; animation: morphShape 15s infinite alternate ease-in-out; opacity: 0.7; } .accent-shape:nth-child(1) { top: -50px; right: 50px; background-color: var(--tertiary); animation-delay: -5s; } .accent-shape:nth-child(2) { bottom: 30px; left: 20px; width: 150px; height: 150px; background-color: var(--accent); animation-delay: -10s; } .magazine-title { position: absolute; top: 30px; left: 30px; font-size: 0.9rem; letter-spacing: 2px; font-weight: 600; text-transform: uppercase; color: var(--accent); animation: slideIn 0.8s ease-out forwards; opacity: 0; animation-delay: 0.5s; } .issue-number { position: absolute; bottom: 30px; right: 30px; font-size: 0.9rem; letter-spacing: 2px; color: var(--primary); opacity: 0.6; animation: slideIn 0.8s ease-out forwards; opacity: 0; animation-delay: 0.8s; } .highlight-word { position: relative; color: var(--accent); text-decoration: none; display: inline-block; transition: transform 0.3s ease; } .highlight-word:hover { transform: skewX(-10deg) translateY(-3px); } .scroll-indicator { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); width: 30px; height: 50px; border: 2px solid var(--primary); border-radius: 15px; opacity: 0; animation: fadeIn 1s ease-out forwards 1.5s; } .scroll-indicator::before { content: ''; position: absolute; top: 8px; left: 50%; width: 6px; height: 6px; margin-left: -3px; background-color: var(--primary); border-radius: 50%; animation: scrollDown 2s infinite; } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } @keyframes slideIn { to { opacity: 1; transform: translateX(0); } } @keyframes morphShape { 0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } 25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; } 50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; } 75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; } 100% { border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; } } @keyframes scrollDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(15px); } } @media (max-width: 600px) { .quote-content { font-size: 1.8rem; } .quote-content::before { font-size: 6rem; left: -50px; } .quote-attribution { font-size: 1rem; margin-right: 30px; } .accent-shape { width: 120px; height: 120px; } } /* Scroll-triggered animations */ .reveal { position: relative; transform: translateY(40px); opacity: 0; transition: all 0.8s ease; } .reveal.active { transform: translateY(0); opacity: 1; } .masked-text { position: relative; overflow: hidden; display: block; } .masked-text span { display: block; transform: translateY(100%); transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1); } .masked-text.visible span { transform: translateY(0); } </style> </head> <body> <div class="container"> <div class="accent-shape"></div> <div class="accent-shape"></div> <div class="magazine-title">Artisanal Voices</div> <div class="blockquote-container"> <div class="quote-wrapper"> <div class="quote-content"> <div class="masked-text"> <span>Art does not exist in a <a href="#" class="highlight-word">vacuum</a>.</span> </div> <div class="masked-text"> <span>It thrives in the <a href="#" class="highlight-word">tension</a> between</span> </div> <div class="masked-text"> <span>order and chaos, between the</span> </div> <div class="masked-text"> <span>rational and the <a href="#" class="highlight-word">sublime</a>.</span> </div> </div> <div class="quote-attribution reveal"> — Yayoi Kusama, from "The Infinity of Vision" </div> </div> </div> <div class="issue-number">ISSUE 083 • SPRING 2024</div> <div class="scroll-indicator"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const maskedTexts = document.querySelectorAll('.masked-text'); const reveal = document.querySelectorAll('.reveal'); // Initial animation on load setTimeout(() => { maskedTexts.forEach((text, index) => { setTimeout(() => { text.classList.add('visible'); }, 300 * index); }); }, 500); setTimeout(() => { reveal.forEach(el => { el.classList.add('active'); }); }, 1800); // Hover effects for dynamic interaction const container = document.querySelector('.container'); const accentShapes = document.querySelectorAll('.accent-shape'); container.addEventListener('mousemove', (e) => { const x = e.clientX / window.innerWidth; const y = e.clientY / window.innerHeight; accentShapes.forEach((shape, index) => { const offsetX = (index === 0) ? -20 : 20; const offsetY = (index === 0) ? -20 : 20; shape.style.transform = `translate(${offsetX * x}px, ${offsetY * y}px)`; }); }); // Trigger animations on scroll const handleScroll = () => { const scrollPosition = window.scrollY + window.innerHeight * 0.8; reveal.forEach(el => { const elPosition = el.getBoundingClientRect().top + window.scrollY; if (scrollPosition > elPosition) { el.classList.add('active'); } }); maskedTexts.forEach(el => { const elPosition = el.getBoundingClientRect().top + window.scrollY; if (scrollPosition > elPosition) { el.classList.add('visible'); } }); }; window.addEventListener('scroll', handleScroll); // Additional interactive elements const highlightWords = document.querySelectorAll('.highlight-word'); highlightWords.forEach(word => { word.addEventListener('mouseenter', () => { const color = getComputedStyle(document.documentElement).getPropertyValue('--accent'); word.style.color = 'var(--light)'; word.style.backgroundColor = 'var(--accent)'; word.style.padding = '0 5px'; }); word.addEventListener('mouseleave', () => { word.style.color = 'var(--accent)'; word.style.backgroundColor = 'transparent'; word.style.padding = '0'; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --bg-color: #f8f9fa; --text-color: #212529; --border-color: #6c757d; --accent-color: #3b5bdb; --highlight-color: #e9ecef; --code-bg: #f1f3f5; --subtle-accent: rgba(59, 91, 219, 0.1); --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color: var(--bg-color); color: var(--text-color); line-height: 1.6; padding: 20px; max-width: 700px; margin: 0 auto; height: 100vh; display: flex; flex-direction: column; justify-content: center; } h1 { font-size: 1.8rem; margin-bottom: 1.5rem; color: var(--accent-color); border-bottom: 2px solid var(--subtle-accent); padding-bottom: 0.5rem; } p { margin-bottom: 1rem; } code { font-family: var(--font-mono); background-color: var(--code-bg); padding: 0.2em 0.4em; border-radius: 3px; font-size: 0.9em; } pre { background-color: var(--code-bg); padding: 1rem; border-radius: 5px; overflow-x: auto; margin: 1rem 0; font-family: var(--font-mono); font-size: 0.9rem; position: relative; } pre code { background-color: transparent; padding: 0; } .language-indicator { position: absolute; top: 0; right: 0; padding: 2px 8px; font-size: 0.7rem; background-color: var(--accent-color); color: white; border-radius: 0 5px 0 5px; opacity: 0.8; } /* The main blockquote design */ .dev-blockquote { font-family: var(--font-mono); background-color: var(--subtle-accent); border-left: 3px solid var(--accent-color); margin: 1.5rem 0; padding: 1rem 1.5rem; position: relative; transition: all 0.3s ease; border-radius: 0 5px 5px 0; overflow: hidden; } .dev-blockquote::before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(to bottom, var(--accent-color), rgba(59, 91, 219, 0.3)); transform: scaleY(0); transform-origin: top; transition: transform 0.5s ease; } .dev-blockquote:hover::before { transform: scaleY(1); } .dev-blockquote:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } .quote-content { position: relative; z-index: 1; } .quote-content::before { content: '"'; font-size: 3rem; color: var(--accent-color); opacity: 0.2; position: absolute; left: -1rem; top: -1.5rem; line-height: 1; font-family: Georgia, serif; transition: all 0.3s ease; } .dev-blockquote:hover .quote-content::before { transform: scale(1.2); opacity: 0.3; } .quote-attribution { margin-top: 1rem; font-style: italic; display: flex; align-items: center; font-size: 0.9rem; opacity: 0.8; } .quote-attribution::before { content: "—"; margin-right: 0.5rem; } /* Copy button */ .copy-button { position: absolute; right: 10px; bottom: 10px; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 4px; padding: 3px 8px; font-size: 0.8rem; cursor: pointer; opacity: 0; transition: opacity 0.2s ease; font-family: var(--font-mono); } .dev-blockquote:hover .copy-button { opacity: 1; } .copy-button:hover { background-color: var(--accent-color); color: white; border-color: var(--accent-color); } .copy-button.copied { background-color: #28a745; color: white; border-color: #28a745; } /* Typing animation for blockquote */ .typing { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--accent-color); animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; display: inline-block; } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: var(--accent-color) } } /* For line numbers in the blockquote */ .line-numbers { counter-reset: line; padding-left: 2.5rem; position: relative; } .line-numbers p { position: relative; } .line-numbers p::before { counter-increment: line; content: counter(line); position: absolute; left: -2.5rem; width: 2rem; text-align: right; color: #adb5bd; font-size: 0.8rem; padding-right: 0.5rem; border-right: 1px solid #dee2e6; } /* Demo section stylings */ .demo-container { margin-top: 2rem; } .theme-toggle { margin-top: 1rem; padding: 0.5rem 1rem; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 4px; cursor: pointer; font-family: var(--font-mono); transition: all 0.3s ease; } .theme-toggle:hover { background-color: var(--accent-color); color: white; } .dark-theme { --bg-color: #1a1a1a; --text-color: #e9ecef; --border-color: #495057; --accent-color: #748ffc; --highlight-color: #2a2a2a; --code-bg: #2c2c2c; --subtle-accent: rgba(116, 143, 252, 0.15); } /* Animation for line highlight */ .highlight-line { background-color: transparent; transition: background-color 0.3s ease; } .highlight-line.active { background-color: rgba(59, 91, 219, 0.2); } @media (max-width: 600px) { body { padding: 15px; } h1 { font-size: 1.5rem; } .dev-blockquote { padding: 0.8rem 1rem; } .quote-content::before { font-size: 2rem; left: -0.8rem; top: -1.2rem; } } </style> </head> <body> <h1>Technical Documentation Blockquote Component</h1> <p>Our documentation includes a specialized blockquote component designed for code examples and important notes. Below is an example of how it appears in context:</p> <div class="dev-blockquote"> <div class="quote-content"> <div class="line-numbers"> <p class="highlight-line">When implementing asynchronous operations in Node.js, always remember that <code>async/await</code> is syntactic sugar over Promises.</p> <p class="highlight-line">The event loop continues to process other tasks while awaiting a Promise to resolve, making your application more efficient.</p> <p class="highlight-line">For handling errors, prefer <code>try/catch</code> blocks over Promise chaining when using async/await syntax.</p> </div> <div class="quote-attribution">Node.js Documentation, Chapter 7: Asynchronous Patterns</div> </div> <button class="copy-button">Copy</button> </div> <p>The blockquote is designed to stand out from regular text while maintaining readability and a code-focused aesthetic.</p> <pre><code class="language-javascript">// Example of async/await usage async function fetchUserData(userId) { try { const response = await fetch(`/api/users/${userId}`); if (!response.ok) { throw new Error('Network response was not ok'); } return await response.json(); } catch (error) { console.error('Error fetching user data:', error); return null; } }</code><span class="language-indicator">JS</span></pre> <div class="demo-container"> <p>Here's another example showing a terminal command sequence:</p> <div class="dev-blockquote"> <div class="quote-content"> <div class="typing">$ npm install --save-dev webpack webpack-cli</div> <p>After installation, create a <code>webpack.config.js</code> file in your project root to define your build configuration.</p> <div class="quote-attribution">Webpack Getting Started Guide</div> </div> <button class="copy-button">Copy</button> </div> </div> <button class="theme-toggle">Toggle Dark/Light Theme</button> <script> // Function to copy blockquote text document.querySelectorAll('.copy-button').forEach(button => { button.addEventListener('click', function() { const blockquote = this.closest('.dev-blockquote'); const text = blockquote.querySelector('.quote-content').innerText; navigator.clipboard.writeText(text).then(() => { // Visual feedback this.textContent = 'Copied!'; this.classList.add('copied'); setTimeout(() => { this.textContent = 'Copy'; this.classList.remove('copied'); }, 2000); }); }); }); // Toggle dark/light theme const themeToggle = document.querySelector('.theme-toggle'); themeToggle.addEventListener('click', function() { document.body.classList.toggle('dark-theme'); }); // Line highlighting animation const highlightLines = document.querySelectorAll('.highlight-line'); let currentHighlight = 0; function highlightNextLine() { // Remove highlight from all lines highlightLines.forEach(line => line.classList.remove('active')); // Add highlight to current line highlightLines[currentHighlight].classList.add('active'); // Move to next line or reset to first line currentHighlight = (currentHighlight + 1) % highlightLines.length; // Schedule next highlight setTimeout(highlightNextLine, 3000); } // Start the highlighting animation after a short delay setTimeout(highlightNextLine, 1000); // Initialize typing effect again after it completes const typingElements = document.querySelectorAll('.typing'); typingElements.forEach(element => { element.addEventListener('animationend', (e) => { if(e.animationName === 'typing') { // Reset by briefly removing and re-adding the class setTimeout(() => { element.classList.remove('typing'); setTimeout(() => element.classList.add('typing'), 100); }, 2000); } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Email Newsletter Accent - Blockquote Design</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background-color: #f7f7f7; color: #333; line-height: 1.6; padding: 30px; max-width: 700px; margin: 0 auto; height: 100vh; display: flex; flex-direction: column; justify-content: center; } .newsletter { background-color: white; padding: 40px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); } .newsletter-header { margin-bottom: 30px; } h1 { font-size: 24px; margin-bottom: 10px; color: #1a1a1a; } p { font-size: 16px; margin-bottom: 20px; color: #555; } .blockquote-container { margin: 30px 0; position: relative; overflow: hidden; transition: transform 0.3s ease; } .blockquote-container:hover { transform: translateY(-5px); } .blockquote { background-color: #f8f9fa; border-left: 5px solid #ff6b6b; padding: 25px 30px; position: relative; border-radius: 0 8px 8px 0; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); overflow: hidden; transition: all 0.3s ease; } .blockquote:hover { background-color: #fff; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); } .blockquote::before { content: '"'; font-family: Georgia, serif; font-size: 120px; position: absolute; opacity: 0.1; top: -10px; left: 10px; line-height: 1; color: #ff6b6b; transition: all 0.3s ease; } .blockquote:hover::before { transform: translateY(-5px) rotate(-5deg); opacity: 0.15; } .quote-text { font-size: 18px; line-height: 1.6; color: #444; margin-bottom: 15px; position: relative; z-index: 2; } .quote-author { font-size: 16px; font-weight: 600; color: #ff6b6b; display: block; text-align: right; position: relative; z-index: 2; } .quote-author span { font-weight: 400; color: #888; font-size: 14px; } .accent-selector { display: flex; justify-content: center; margin-top: 30px; gap: 10px; } .color-option { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; } .color-option:hover { transform: scale(1.1); } .color-option.active { border: 2px solid #333; transform: scale(1.1); } .color-1 { background-color: #ff6b6b; } .color-2 { background-color: #4ecdc4; } .color-3 { background-color: #7971ea; } .color-4 { background-color: #ffd166; } .highlight-marker { height: 8px; width: 40px; background-color: #ff6b6b; margin-bottom: 15px; transition: all 0.3s ease; } .cta-button { background-color: #ff6b6b; color: white; border: none; padding: 12px 24px; font-size: 16px; border-radius: 5px; font-weight: 600; cursor: pointer; margin-top: 20px; transition: all 0.3s ease; } .cta-button:hover { background-color: #ff5252; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3); } .footer-text { font-size: 14px; color: #999; margin-top: 30px; text-align: center; } @media (max-width: 600px) { body { padding: 20px; } .newsletter { padding: 25px; } h1 { font-size: 20px; } .blockquote { padding: 20px; } .quote-text { font-size: 16px; } } </style> </head> <body> <div class="newsletter"> <div class="newsletter-header"> <h1>Financial Intelligence Weekly</h1> <p>Insights and strategies for navigating today's complex markets - Issue #83</p> <div class="highlight-marker"></div> </div> <p>As we explore the impacts of the Federal Reserve's latest policy shift, many analysts are reconsidering their positions on growth stocks. This week's special focus examines how inflation expectations are reshaping investment strategies.</p> <div class="blockquote-container"> <div class="blockquote"> <p class="quote-text">The most important investment you can make is not in stocks, bonds, or real estate. The most important investment is in yourself—your skills, your knowledge, and your ability to adapt to changing market conditions. This has never been more relevant than in today's rapidly evolving financial landscape.</p> <p class="quote-author">Warren Buffett <span>CEO, Berkshire Hathaway</span></p> </div> </div> <p>This perspective has guided many successful investors through market volatility similar to what we're experiencing now. The ability to remain calm while others panic has historically separated market winners from those who surrender to emotional decision-making.</p> <button class="cta-button">Read This Week's Full Analysis</button> <div class="accent-selector"> <div class="color-option color-1 active" data-color="#ff6b6b"></div> <div class="color-option color-2" data-color="#4ecdc4"></div> <div class="color-option color-3" data-color="#7971ea"></div> <div class="color-option color-4" data-color="#ffd166"></div> </div> <p class="footer-text">Customize your newsletter experience by selecting your preferred accent color</p> </div> <script> document.addEventListener('DOMContentLoaded', function() { const colorOptions = document.querySelectorAll('.color-option'); const blockquote = document.querySelector('.blockquote'); const quoteAuthor = document.querySelector('.quote-author'); const highlightMarker = document.querySelector('.highlight-marker'); const ctaButton = document.querySelector('.cta-button'); colorOptions.forEach(option => { option.addEventListener('click', function() { // Remove active class from all options colorOptions.forEach(opt => opt.classList.remove('active')); // Add active class to clicked option this.classList.add('active'); // Get the color const color = this.getAttribute('data-color'); // Update all elements with the new color blockquote.style.borderLeftColor = color; quoteAuthor.style.color = color; highlightMarker.style.backgroundColor = color; ctaButton.style.backgroundColor = color; // Update the blockquote before pseudo-element document.documentElement.style.setProperty('--quote-color', color); // Add a subtle animation effect to the blockquote blockquote.classList.add('color-change'); setTimeout(() => { blockquote.classList.remove('color-change'); }, 500); // Update hover color for CTA button const hoverColor = adjustColor(color, -20); document.documentElement.style.setProperty('--cta-hover-color', hoverColor); // Update shadow color for CTA button document.documentElement.style.setProperty('--cta-shadow-color', color + '4D'); // 30% opacity }); }); // Function to adjust color brightness function adjustColor(color, amount) { return '#' + color.replace(/^#/, '').replace(/../g, color => ('0' + Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2)); } // Add subtle animation to the blockquote on page load setTimeout(() => { blockquote.style.opacity = '1'; blockquote.style.transform = 'translateY(0)'; }, 300); // Make the quote marks pulse subtly setInterval(() => { const quoteMark = document.querySelector('.blockquote::before'); if (quoteMark) { quoteMark.style.opacity = '0.15'; setTimeout(() => { quoteMark.style.opacity = '0.1'; }, 1500); } }, 3000); }); </script> </body> </html>
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', 'Helvetica Neue', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f9f9f9; padding: 20px; } .container { width: 100%; max-width: 650px; height: 650px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } .grid-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, rgba(200, 200, 200, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(200, 200, 200, 0.1) 1px, transparent 1px); background-size: 20px 20px; opacity: 0; transition: opacity 1s ease-in-out; z-index: -1; } .container:hover .grid-background { opacity: 1; } .blockquote-section { width: 100%; padding: 20px; transition: all 0.5s ease; } .blockquote-container { position: relative; padding: 50px 40px; border: 1px solid rgba(0, 0, 0, 0.08); background-color: white; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03); transition: all 0.5s ease; } .blockquote-container:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06); } .quote-icon { position: absolute; top: -25px; left: 40px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background-color: white; border: 1px solid rgba(0, 0, 0, 0.08); opacity: 0.9; transition: all 0.5s ease; } .blockquote-container:hover .quote-icon { transform: rotate(10deg); } .quote-icon svg { width: 20px; height: 20px; fill: #000; opacity: 0.7; } blockquote { margin: 0; padding: 0; border-left: none; } blockquote p { font-size: 1.6rem; line-height: 1.6; font-weight: 300; margin-bottom: 25px; color: #333; letter-spacing: -0.5px; } blockquote footer { font-size: 0.9rem; color: #888; display: flex; align-items: center; font-weight: 400; letter-spacing: 0.5px; } .author-line { display: inline-block; width: 30px; height: 1px; background-color: #ccc; margin-right: 15px; transition: width 0.3s ease; } .blockquote-container:hover .author-line { width: 50px; } .controls { display: flex; justify-content: space-between; margin-top: 30px; padding: 0 20px; } .control-button { background: none; border: none; font-size: 0.9rem; color: #888; cursor: pointer; padding: 8px 15px; border: 1px solid rgba(0, 0, 0, 0.08); transition: all 0.3s ease; outline: none; } .control-button:hover { background-color: rgba(0, 0, 0, 0.02); color: #333; } .control-button:focus { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); } .quote-indicator { display: flex; justify-content: center; margin-top: 30px; gap: 10px; } .indicator-dot { width: 6px; height: 6px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .indicator-dot.active { background-color: rgba(0, 0, 0, 0.5); transform: scale(1.2); } @media (max-width: 600px) { .blockquote-container { padding: 40px 25px; } blockquote p { font-size: 1.3rem; } .quote-icon { left: 25px; } } @media (max-width: 400px) { .blockquote-container { padding: 35px 20px; } blockquote p { font-size: 1.1rem; } } </style> </head> <body> <div class="container"> <div class="grid-background"></div> <div class="blockquote-section"> <div class="blockquote-container"> <div class="quote-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/> </svg> </div> <blockquote class="quote"> <p class="quote-text">Architecture should speak of its time and place, but yearn for timelessness. In the realm of minimalism, we don't subtract until nothing is left—we subtract until only what matters remains.</p> <footer> <span class="author-line"></span> <span class="author">Tadao Ando</span> </footer> </blockquote> </div> <div class="controls"> <button class="control-button prev-button">Previous</button> <button class="control-button next-button">Next</button> </div> <div class="quote-indicator"> <div class="indicator-dot active" data-index="0"></div> <div class="indicator-dot" data-index="1"></div> <div class="indicator-dot" data-index="2"></div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const quotes = [ { text: "Architecture should speak of its time and place, but yearn for timelessness. In the realm of minimalism, we don't subtract until nothing is left—we subtract until only what matters remains.", author: "Tadao Ando" }, { text: "Space has always been the spiritual dimension of architecture. It is not the physical statement of the structure so much as what it contains that moves us.", author: "John Pawson" }, { text: "Minimalism is not about denial or asceticism. It's about intentionality. It's about deciding what matters and letting go of what doesn't. Every material, line, and void must earn its place.", author: "Kazuyo Sejima" } ]; let currentQuoteIndex = 0; const quoteText = document.querySelector('.quote-text'); const authorText = document.querySelector('.author'); const prevButton = document.querySelector('.prev-button'); const nextButton = document.querySelector('.next-button'); const indicatorDots = document.querySelectorAll('.indicator-dot'); const blockquoteContainer = document.querySelector('.blockquote-container'); function updateQuote(index) { // Fade out blockquoteContainer.style.opacity = '0'; blockquoteContainer.style.transform = 'translateY(10px)'; setTimeout(() => { quoteText.textContent = quotes[index].text; authorText.textContent = quotes[index].author; // Update indicator dots indicatorDots.forEach((dot, i) => { if (i === index) { dot.classList.add('active'); } else { dot.classList.remove('active'); } }); // Fade in blockquoteContainer.style.opacity = '1'; blockquoteContainer.style.transform = 'translateY(0)'; }, 300); } prevButton.addEventListener('click', function() { currentQuoteIndex = (currentQuoteIndex - 1 + quotes.length) % quotes.length; updateQuote(currentQuoteIndex); }); nextButton.addEventListener('click', function() { currentQuoteIndex = (currentQuoteIndex + 1) % quotes.length; updateQuote(currentQuoteIndex); }); indicatorDots.forEach(dot => { dot.addEventListener('click', function() { currentQuoteIndex = parseInt(this.getAttribute('data-index')); updateQuote(currentQuoteIndex); }); }); // Initialize with first quote updateQuote(currentQuoteIndex); // Ensure blockquote is visible after initialization setTimeout(() => { blockquoteContainer.style.opacity = '1'; }, 100); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Syne:wght@400;600;700;800&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --gradient-primary: linear-gradient(135deg, #4F46E5, #6366F1, #8B5CF6); --gradient-secondary: linear-gradient(135deg, #EC4899, #DB2777, #BE185D); --accent-color: #22D3EE; --dark-bg: #111827; --light-text: #F9FAFB; --card-bg: rgba(31, 41, 55, 0.8); } body { font-family: 'Inter', sans-serif; background-color: var(--dark-bg); color: var(--light-text); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; overflow-x: hidden; } .container { max-width: 660px; width: 100%; height: 660px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; perspective: 1000px; overflow: hidden; } .headline { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 2.2rem; text-align: center; margin-bottom: 2rem; line-height: 1.2; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0px 4px 12px rgba(99, 102, 241, 0.3); z-index: 5; position: relative; } .quotes-container { width: 100%; position: relative; height: 400px; } .blockquote { position: absolute; width: 100%; padding: 2rem; background: var(--card-bg); border-radius: 16px; backdrop-filter: blur(8px); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.08); transform-style: preserve-3d; transform: translateZ(0) rotateX(0) rotateY(0); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); opacity: 0; top: 0; left: 0; z-index: 1; cursor: pointer; } .blockquote.active { opacity: 1; z-index: 2; } .blockquote:hover { transform: translateZ(30px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } .blockquote::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 16px; background: var(--gradient-primary); opacity: 0; z-index: -1; transition: opacity 0.5s ease; } .blockquote.innovation::before { background: var(--gradient-secondary); } .blockquote:hover::before { opacity: 0.1; } .quote-text { font-size: 1.4rem; font-weight: 600; line-height: 1.5; margin-bottom: 1.5rem; position: relative; z-index: 2; } .quote-author { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1rem; display: block; margin-top: 1rem; letter-spacing: 0.05em; color: var(--accent-color); } .quote-company { font-size: 0.85rem; opacity: 0.8; display: block; margin-top: 0.25rem; } .citation { display: flex; align-items: center; z-index: 2; } .citation-image { width: 48px; height: 48px; border-radius: 50%; margin-right: 1rem; background-size: cover; background-position: center; border: 2px solid rgba(255, 255, 255, 0.2); } .nav-dots { display: flex; justify-content: center; margin-top: 2rem; gap: 0.5rem; z-index: 5; position: relative; } .dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: all 0.3s ease; position: relative; } .dot.active { background: var(--accent-color); transform: scale(1.2); } .dot:hover { background: rgba(255, 255, 255, 0.5); } .quote-icon { position: absolute; font-size: 6rem; opacity: 0.1; top: -20px; left: -10px; font-family: 'Georgia', serif; z-index: 1; } .background-blur { position: absolute; width: 300px; height: 300px; border-radius: 50%; filter: blur(80px); opacity: 0.15; z-index: 0; transition: all 0.5s ease; } .blur-1 { background: #4F46E5; top: -100px; left: -100px; } .blur-2 { background: #EC4899; bottom: -100px; right: -100px; } .blur-3 { background: var(--accent-color); bottom: 150px; left: 50%; transform: translateX(-50%); } @media (max-width: 600px) { .headline { font-size: 1.8rem; } .quote-text { font-size: 1.2rem; } .blockquote { padding: 1.5rem; } .citation-image { width: 40px; height: 40px; } .quotes-container { height: 350px; } } @keyframes floatAnimation { 0% { transform: translateY(0); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0); } } .floating { animation: floatAnimation 6s ease-in-out infinite; } </style> </head> <body> <div class="container"> <div class="background-blur blur-1 floating"></div> <div class="background-blur blur-2"></div> <div class="background-blur blur-3"></div> <h1 class="headline">Innovating Together:<br>Quantum Solutions for a Digital Future</h1> <div class="quotes-container"> <div class="blockquote active"> <div class="quote-icon">"</div> <p class="quote-text">Quantum's predictive AI has transformed our decision-making process, reducing our analysis time by 78% while increasing accuracy by 40%. It's been a game-changer for our entire data operation.</p> <div class="citation"> <div class="citation-image" style="background-image: url('https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80');"></div> <div> <span class="quote-author">Sarah Chen</span> <span class="quote-company">CTO, Nexus Technologies</span> </div> </div> </div> <div class="blockquote innovation"> <div class="quote-icon">"</div> <p class="quote-text">We integrated Quantum's API in just 3 days, and our system performance improved by 63%. Their documentation is impeccable, and the customer support feels like having an extension of our own engineering team.</p> <div class="citation"> <div class="citation-image" style="background-image: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80');"></div> <div> <span class="quote-author">Marcus Reynolds</span> <span class="quote-company">Lead Developer, Altitude Finance</span> </div> </div> </div> <div class="blockquote"> <div class="quote-icon">"</div> <p class="quote-text">Since implementing Quantum's edge computing solution, our IoT network latency dropped from 120ms to just 18ms. Our customers immediately noticed the improvement, leading to a 28% increase in user retention.</p> <div class="citation"> <div class="citation-image" style="background-image: url('https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80');"></div> <div> <span class="quote-author">Elena Vega</span> <span class="quote-company">Product Director, SmartHome Systems</span> </div> </div> </div> </div> <div class="nav-dots"> <div class="dot active" data-index="0"></div> <div class="dot" data-index="1"></div> <div class="dot" data-index="2"></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const quotes = document.querySelectorAll('.blockquote'); const dots = document.querySelectorAll('.dot'); const blurs = document.querySelectorAll('.background-blur'); let currentIndex = 0; let isAnimating = false; // Initialize 3D effect initMouseMove(); // Auto rotate quotes const autoRotate = setInterval(() => { if (!isAnimating) { currentIndex = (currentIndex + 1) % quotes.length; updateQuote(); } }, 6000); // Dot navigation dots.forEach(dot => { dot.addEventListener('click', function() { if (isAnimating) return; const index = parseInt(this.getAttribute('data-index')); if (currentIndex !== index) { currentIndex = index; updateQuote(); clearInterval(autoRotate); } }); }); // Click on quote to go to next quotes.forEach(quote => { quote.addEventListener('click', function() { if (isAnimating) return; currentIndex = (currentIndex + 1) % quotes.length; updateQuote(); clearInterval(autoRotate); }); }); function updateQuote() { isAnimating = true; // Update active state for quotes quotes.forEach((quote, index) => { if (index === currentIndex) { quote.classList.add('active'); } else { quote.classList.remove('active'); } }); // Update active state for dots dots.forEach((dot, index) => { if (index === currentIndex) { dot.classList.add('active'); } else { dot.classList.remove('active'); } }); // Animate background blurs blurs.forEach((blur, index) => { const newX = -100 + (Math.random() * 300); const newY = -100 + (Math.random() * 300); blur.style.transition = 'all 0.8s ease'; if (index === 0) { blur.style.top = `${newY}px`; blur.style.left = `${newX}px`; } else if (index === 1) { blur.style.bottom = `${newY}px`; blur.style.right = `${newX}px`; } }); setTimeout(() => { isAnimating = false; }, 600); } function initMouseMove() { const container = document.querySelector('.container'); const activeQuote = document.querySelector('.blockquote.active'); container.addEventListener('mousemove', function(e) { const active = document.querySelector('.blockquote.active'); if (!active) return; const rect = container.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; const rotateY = ((x - centerX) / centerX) * 5; const rotateX = ((centerY - y) / centerY) * 5; active.style.transform = `translateZ(30px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; // Move blurs slightly for parallax effect blurs.forEach((blur, index) => { const parallaxFactor = index * 0.05 + 0.05; const offsetX = (x - centerX) * parallaxFactor; const offsetY = (y - centerY) * parallaxFactor; blur.style.transform = `translate(${offsetX}px, ${offsetY}px)`; }); }); container.addEventListener('mouseleave', function() { const active = document.querySelector('.blockquote.active'); if (active) { active.style.transform = 'translateZ(0) rotateX(0) rotateY(0)'; } blurs.forEach(blur => { blur.style.transform = 'translate(0, 0)'; }); }); } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Roboto:wght@300;400;500&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; background-color: #f9f9f9; display: flex; justify-content: center; align-items: center; height: 700px; width: 700px; overflow: hidden; position: relative; } .container { width: 100%; max-width: 650px; padding: 20px; position: relative; } .quote-container { position: relative; border-radius: 15px; overflow: hidden; padding: 50px 40px; margin-bottom: 40px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); cursor: pointer; transition: transform 0.4s ease, box-shadow 0.4s ease; background: #fff; opacity: 0; transform: translateY(30px); } .quote-container:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); } .quote-container:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, #FF6B6B, #FFD166, #06D6A0, #118AB2, #073B4C); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .quote-container:hover:before { transform: scaleX(1); } .blockquote { position: relative; font-size: 0; margin: 0; } .quote-text { font-family: 'Playfair Display', serif; font-size: 24px; line-height: 1.6; margin-bottom: 20px; color: #333; position: relative; opacity: 0; transform: translateX(-20px); transition: opacity 0.5s ease, transform 0.5s ease; } .quote-text.visible { opacity: 1; transform: translateX(0); } .quote-author { font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 16px; color: #666; text-align: right; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s; } .quote-author.visible { opacity: 1; transform: translateY(0); } .quote-icon { position: absolute; font-size: 80px; opacity: 0.05; z-index: 0; font-family: 'Playfair Display', serif; font-weight: bold; } .quote-open { top: -30px; left: -15px; color: #FF6B6B; } .quote-close { bottom: -60px; right: -15px; color: #118AB2; } .highlight { display: inline; position: relative; } .highlight-1 { color: #FF6B6B; font-style: italic; } .highlight-2 { color: #06D6A0; font-weight: 700; } .highlight-3 { color: #118AB2; font-style: italic; } .controls { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 20px; } .control-btn { background: none; border: none; cursor: pointer; width: 12px; height: 12px; border-radius: 50%; background-color: #ddd; transition: background-color 0.3s ease, transform 0.3s ease; } .control-btn:hover { transform: scale(1.2); } .control-btn.active { background-color: #118AB2; } .title { text-align: center; font-size: 24px; margin-bottom: 30px; color: #333; font-family: 'Playfair Display', serif; letter-spacing: 1px; opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } @media (max-width: 600px) { .container { padding: 15px; } .quote-container { padding: 30px 20px; } .quote-text { font-size: 20px; } .quote-author { font-size: 14px; } .title { font-size: 20px; margin-bottom: 20px; } } </style> </head> <body> <div class="container"> <h1 class="title">Insights That Transform</h1> <div class="quote-container" id="quote1"> <blockquote class="blockquote"> <div class="quote-icon quote-open">"</div> <p class="quote-text">The future of digital marketing isn't about <span class="highlight highlight-1">bombarding customers</span> with ads—it's about <span class="highlight highlight-2">creating moments</span> that matter.</p> <footer class="quote-author">— Melissa Chang, Growth Marketing Strategist</footer> <div class="quote-icon quote-close">"</div> </blockquote> </div> <div class="quote-container" id="quote2"> <blockquote class="blockquote"> <div class="quote-icon quote-open">"</div> <p class="quote-text">Data without <span class="highlight highlight-3">creative interpretation</span> is just numbers. Your analytics should tell a <span class="highlight highlight-2">compelling story</span> about your audience.</p> <footer class="quote-author">— David Zhao, Analytics Director</footer> <div class="quote-icon quote-close">"</div> </blockquote> </div> <div class="quote-container" id="quote3"> <blockquote class="blockquote"> <div class="quote-icon quote-open">"</div> <p class="quote-text">In a world of automation, the brands that <span class="highlight highlight-1">connect authentically</span> will be the ones that <span class="highlight highlight-2">thrive exponentially</span>.</p> <footer class="quote-author">— Sophia Rodriguez, Brand Experience Designer</footer> <div class="quote-icon quote-close">"</div> </blockquote> </div> <div class="controls"> <button class="control-btn active" data-index="0"></button> <button class="control-btn" data-index="1"></button> <button class="control-btn" data-index="2"></button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const quotes = document.querySelectorAll('.quote-container'); const controls = document.querySelectorAll('.control-btn'); let currentIndex = 0; let autoplayInterval; // Initial setup hideAllQuotes(); showQuote(currentIndex); // Setup intersection observer to trigger animations when in view const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const quote = entry.target; const quoteText = quote.querySelector('.quote-text'); const quoteAuthor = quote.querySelector('.quote-author'); setTimeout(() => { quote.style.opacity = '1'; quote.style.transform = 'translateY(0)'; }, 100); setTimeout(() => { quoteText.classList.add('visible'); }, 400); setTimeout(() => { quoteAuthor.classList.add('visible'); }, 700); } }); }, { threshold: 0.1 }); quotes.forEach(quote => { observer.observe(quote); }); // Handle control clicks controls.forEach((control, index) => { control.addEventListener('click', () => { clearInterval(autoplayInterval); hideAllQuotes(); currentIndex = index; showQuote(currentIndex); updateControls(); startAutoplay(); }); }); // Functions function hideAllQuotes() { quotes.forEach(quote => { quote.style.opacity = '0'; quote.style.transform = 'translateY(30px)'; quote.style.display = 'none'; const quoteText = quote.querySelector('.quote-text'); const quoteAuthor = quote.querySelector('.quote-author'); quoteText.classList.remove('visible'); quoteAuthor.classList.remove('visible'); }); } function showQuote(index) { const quote = quotes[index]; quote.style.display = 'block'; setTimeout(() => { quote.style.opacity = '1'; quote.style.transform = 'translateY(0)'; }, 100); setTimeout(() => { const quoteText = quote.querySelector('.quote-text'); quoteText.classList.add('visible'); }, 400); setTimeout(() => { const quoteAuthor = quote.querySelector('.quote-author'); quoteAuthor.classList.add('visible'); }, 700); } function updateControls() { controls.forEach((control, index) => { if (index === currentIndex) { control.classList.add('active'); } else { control.classList.remove('active'); } }); } function startAutoplay() { autoplayInterval = setInterval(() => { hideAllQuotes(); currentIndex = (currentIndex + 1) % quotes.length; showQuote(currentIndex); updateControls(); }, 8000); } // Start autoplay startAutoplay(); // Add hover effect to the container document.querySelectorAll('.quote-container').forEach(container => { container.addEventListener('mouseenter', () => { clearInterval(autoplayInterval); }); container.addEventListener('mouseleave', () => { startAutoplay(); }); }); }); </script> </body> </html>
