Blog cards are a crucial element in web design, offering a snapshot of content that entices readers to click through. They combine visual appeal with essential information, making them a powerful tool for engagement.
In this article, we will explore 10 blog card examples that stand out for their design, functionality, and user experience. These examples will inspire you to create your own stunning blog cards.
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, elevate your blog cards with Subframe's drag-and-drop interface. Its intuitive, responsive canvas ensures pixel-perfect UI every time, making it a favorite among professionals.
Join the community that loves Subframe. 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 blog cards and other stunning UIs in minutes. Its drag-and-drop interface ensures efficiency and precision.
Don't wait—start designing immediately. Start for free today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Editorial Magazine Blog Card</title> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Source+Serif+Pro:wght@300;400;600&family=Cormorant+Garamond:ital,wght@0,300;0,500;1,300&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 700px; width: 700px; background-color: #f7f5f2; padding: 20px; font-family: 'Source Serif Pro', serif; color: #332e2e; overflow-x: hidden; } .blog-card-container { width: 100%; max-width: 660px; height: auto; display: flex; flex-direction: column; gap: 24px; } .blog-card { background-color: #fff; border-radius: 0; position: relative; overflow: hidden; transition: all 0.4s ease; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); cursor: pointer; max-width: 100%; transform-origin: center; } .blog-card:hover { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); transform: translateY(-5px); } .texture-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAABCBJREFUaEPtmttx2zAQRQ8qQHKRn1SKkApCVxCmgmQ6sD1+JO7AqSB0BaYrMF1B6ApMVSC7guSnLZAzAhdYgCIgUpbHM54xLYq4u3cvlkvlxV6ul7z4CpDnzsizI1tbbTPGdgkhPUJIjxLaI4R29+P+KaVjSsiYMTbebDbj/X7/sBWolZzKklpVVbs8z3uU0j6ltKfrelcFhhAy0XX9ASEPCLn/+Ph4r3KvbM7GQIqiyFRV7TPG+pqmdXVd35T9sN02jmM2m82ubdvjzWbzI03T+1XWWgtEABAAQEjTB2VQFV6maRqfzWZ8Pp9PEEIPWZZ9XwVoJYiyLDuqqvYppX3G2EGc+BYdBJ9lMplMbkejke2Sdcm1IBaEZVn9oiiGhmHsrtox1/Mc13VHUFpxHI9Wccvr5FIQRLTruj3TNI+WZR3IRltuc12Xj8fj2+Fw+BVF0d0ybyzubQAEQVzqut65BOJftvl8zu/u7m7DMLzxPO9h2yAbQdzd3XU0TRsahvHBtu0gSZLYcZybn5+fn76+vobL8nuTcQLJeU3TJpqmSXNJOhBskiThYRjeJEly/fX19S3P8+CvBfE8T0S6Vvl4nsdRFI2ur6+/b2NvdEZ+y7KOTdPse563Z5pm4Lru2HGcm+UNuwZinJu9vb2j5dhZCSTLskCcT4IgQPk9EkGKojCLooCmgY5d7JcQNlmW8cVicbPZbK6TJLn+8eMH6rKR0CAIgnA4HMpqsiuBeJ5nMsaOEWXTNAPP80S3kzqGoqi24ziB67pj13Vv/jYYWa0jPBiG0ddU9X0cx99kc5QIAvscSqnIB2mjYS+aTCaT22/fvsGN51I5Inbb910nGYgMwnVdUz6X/HEkPM8zwzBE+UXKCaVphkFgNxKNZnOu1dQpSim5vLyU1l0tJGzbDgzDOMpBEFkR5/JcKqm8yEU1kE9t2w7iOIZ7QXeVLu+BwP0vzyWVu91uMJ/PR57nfQ7DcFT3XASCVjs4ONgX7SbCQU7BRtdHcKRbLpewS6XK0IFgMELIdRRFn+I4Xho1KVZxHHfQbtFKkUviNVVVj9I0vf7y5UsmQ2kDgftRLw3DOEbNl3JkrVZDOX358kV0EejGdXR0tH9+fn5Z+3UtgEQQ2LQRZZRcFEVc1/Xatm2T7BLpNEg4WUlIpQMjXbquc6TUcDiU1vM6Zw4PD2EbzTb99u07h35UVdUoDMO1/S8hUaRlZ3B5eQm7gOMiC/ZaRhAEwfn5+ZUsRVZSS9jY5HU0TdvVNA2ttG8YBm+aJrZt76OFwzDoep63yHFsnOe5+XZeNpvN0mU31G0Z/38n7MvLS3Ob0f6nGdVbRZFIu7Zt48fHR+nOvXWQpkP5E84LyE4Cq2/0Xd1R1b1+k9d3BmSTQ3uJZ/8CnzFRHmr8Ji0AAAAASUVORK5CYII='); background-repeat: repeat; opacity: 0.05; z-index: 1; pointer-events: none; } .blog-card-inner { display: flex; flex-direction: column; position: relative; z-index: 2; } .image-container { width: 100%; height: 270px; overflow: hidden; position: relative; } .image-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .blog-card:hover .image-container img { transform: scale(1.05); } .card-content { padding: 22px 28px 28px; position: relative; } .category { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: 16px; color: #a3815f; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; display: inline-block; border-bottom: 1px solid rgba(163, 129, 95, 0.3); padding-bottom: 3px; transition: all 0.3s ease; } .blog-card:hover .category { border-bottom-color: rgba(163, 129, 95, 0.8); } .title { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin-bottom: 14px; color: #333; transition: color 0.3s ease; } .blog-card:hover .title { color: #a3815f; } .excerpt { font-family: 'Source Serif Pro', serif; font-size: 16px; line-height: 1.6; color: #555; margin-bottom: 20px; } .meta { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(0, 0, 0, 0.08); padding-top: 16px; font-family: 'Cormorant Garamond', serif; font-size: 15px; color: #777; } .author { display: flex; align-items: center; } .author-image { width: 30px; height: 30px; border-radius: 50%; margin-right: 10px; overflow: hidden; } .author-image img { width: 100%; height: 100%; object-fit: cover; } .date { font-style: italic; } .read-more { font-family: 'Playfair Display', serif; font-style: italic; font-size: 15px; color: #a3815f; text-decoration: none; position: relative; transition: all 0.3s ease; display: inline-flex; align-items: center; } .read-more::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background-color: #a3815f; transition: width 0.3s ease; } .blog-card:hover .read-more::after { width: 100%; } .read-more svg { margin-left: 8px; transition: transform 0.3s ease; } .blog-card:hover .read-more svg { transform: translateX(4px); } .issue-number { position: absolute; top: -15px; right: 28px; background-color: #a3815f; color: #fff; font-family: 'Playfair Display', serif; font-size: 13px; padding: 4px 12px; z-index: 3; letter-spacing: 1px; transform: translateY(0); transition: transform 0.3s ease; } .blog-card:hover .issue-number { transform: translateY(-3px); } .page-mark { position: absolute; top: 0; right: 0; width: 30px; height: 30px; background-color: #f7f5f2; transform: rotate(45deg) translate(10px, -20px); z-index: 2; transition: transform 0.3s ease; } .blog-card:hover .page-mark { transform: rotate(45deg) translate(5px, -15px); } .page-mark::after { content: ''; position: absolute; top: 50%; left: 50%; width: 15px; height: 15px; background-color: rgba(163, 129, 95, 0.2); border-radius: 50%; transform: translate(-50%, -50%); } .magazine-title { text-align: center; margin-bottom: 30px; position: relative; } .magazine-title h1 { font-family: 'Playfair Display', serif; font-size: 36px; color: #333; letter-spacing: 1px; margin-bottom: 5px; } .magazine-title .subtitle { font-family: 'Cormorant Garamond', serif; font-style: italic; color: #a3815f; font-size: 18px; } .magazine-title::after { content: ''; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 80px; height: 2px; background-color: rgba(163, 129, 95, 0.5); } @media (max-width: 600px) { .blog-card-container { gap: 16px; } .image-container { height: 200px; } .card-content { padding: 20px; } .title { font-size: 20px; } .excerpt { font-size: 14px; margin-bottom: 15px; } .meta { flex-direction: column; align-items: flex-start; gap: 10px; } .magazine-title h1 { font-size: 28px; } .magazine-title .subtitle { font-size: 16px; } .issue-number { top: -12px; right: 20px; font-size: 11px; padding: 3px 10px; } } </style> </head> <body> <div class="blog-card-container"> <div class="magazine-title"> <h1>ARTISAN</h1> <div class="subtitle">The Modern Craftsmanship Journal</div> </div> <div class="blog-card" id="card1"> <div class="texture-overlay"></div> <div class="issue-number">ISSUE 42</div> <div class="page-mark"></div> <div class="blog-card-inner"> <div class="image-container"> <img src="https://images.unsplash.com/photo-1489367874814-f5d040621dd8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Slow Fashion Revolution"> </div> <div class="card-content"> <span class="category">Sustainable Style</span> <h2 class="title">The Slow Fashion Revolution: Craftsmanship Over Consumption</h2> <p class="excerpt">Exploring how artisanal techniques and sustainable materials are reshaping the modern wardrobe, with insights from industry pioneers who have embraced slow fashion principles.</p> <div class="meta"> <div class="author"> <div class="author-image"> <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Eliza Norton"> </div> <span>Eliza Norton</span> </div> <span class="date">October 21, 2023</span> </div> <a href="#" class="read-more"> Continue reading <svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 1L13 5M13 5L9 9M13 5H1" stroke="#a3815f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </a> </div> </div> </div> <div class="blog-card" id="card2"> <div class="texture-overlay"></div> <div class="issue-number">ISSUE 41</div> <div class="page-mark"></div> <div class="blog-card-inner"> <div class="image-container"> <img src="https://images.unsplash.com/photo-1595241446169-a8f8f5127d6d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Spaces That Inspire"> </div> <div class="card-content"> <span class="category">Interior Design</span> <h2 class="title">Spaces That Inspire: Modern Homes With Historical Soul</h2> <p class="excerpt">Discover the delicate art of incorporating vintage elements and traditional craftsmanship into contemporary living spaces that honor the past while embracing the future.</p> <div class="meta"> <div class="author"> <div class="author-image"> <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Marcus Reed"> </div> <span>Marcus Reed</span> </div> <span class="date">September 15, 2023</span> </div> <a href="#" class="read-more"> Continue reading <svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 1L13 5M13 5L9 9M13 5H1" stroke="#a3815f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </a> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const cards = document.querySelectorAll('.blog-card'); // Initial staggered animation cards.forEach((card, index) => { setTimeout(() => { card.style.transform = 'translateY(0)'; card.style.opacity = '1'; }, 200 * index); }); // Add refined hover effect with depth cards.forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-5px)'; this.style.boxShadow = '0 15px 30px rgba(0, 0, 0, 0.1)'; // Create a subtle "lifting" effect const otherCards = [...cards].filter(c => c !== this); otherCards.forEach(otherCard => { otherCard.style.opacity = '0.7'; otherCard.style.transform = 'scale(0.98)'; }); }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0)'; this.style.boxShadow = '0 4px 16px rgba(0, 0, 0, 0.05)'; // Reset other cards const otherCards = [...cards].filter(c => c !== this); otherCards.forEach(otherCard => { otherCard.style.opacity = '1'; otherCard.style.transform = 'scale(1)'; }); }); }); // Simulate page-turning effect on click cards.forEach(card => { card.addEventListener('click', function() { this.style.transform = 'translateX(5px) translateY(-5px)'; setTimeout(() => { this.style.transform = 'translateY(-5px)'; }, 200); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive Blog Cards</title> <style> :root { --gradient-1: linear-gradient(135deg, #FF3366, #FF9933); --gradient-2: linear-gradient(135deg, #36D1DC, #5B86E5); --gradient-3: linear-gradient(135deg, #9733EE, #FF3366); --shadow: 0 10px 30px rgba(0, 0, 0, 0.15); --transition: all 0.4s cubic-bezier(0.33, 1, 0.68, 1); --border-radius: 16px; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; } body { display: flex; align-items: center; justify-content: center; background-color: #f7f9fc; min-height: 100vh; padding: 20px; overflow-x: hidden; } .container { width: 100%; max-width: 700px; display: flex; flex-direction: column; gap: 24px; } .section-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 10px; background: linear-gradient(90deg, #333, #777); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; } .section-title::after { content: ""; position: absolute; width: 60px; height: 4px; background: var(--gradient-1); left: 0; bottom: -8px; border-radius: 2px; } .blog-cards { display: grid; grid-template-columns: 1fr; gap: 24px; } .blog-card { position: relative; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow); height: 180px; cursor: pointer; transform-style: preserve-3d; perspective: 1000px; } .blog-card:nth-child(1) .card-header { background: var(--gradient-1); } .blog-card:nth-child(2) .card-header { background: var(--gradient-2); } .blog-card:nth-child(3) .card-header { background: var(--gradient-3); } .card-header { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 25px; display: flex; flex-direction: column; justify-content: space-between; color: white; transition: var(--transition); transform: translateZ(0); z-index: 2; } .blog-card:hover .card-header { transform: rotateX(10deg) translateY(-80px); opacity: 0.95; } .card-title { font-size: 1.6rem; font-weight: 700; margin-bottom: 5px; position: relative; z-index: 1; } .meta-info { display: flex; align-items: center; gap: 15px; font-size: 0.85rem; letter-spacing: 0.5px; } .tag { background: rgba(255, 255, 255, 0.2); padding: 4px 10px; border-radius: 50px; backdrop-filter: blur(5px); font-weight: 500; } .date { display: flex; align-items: center; gap: 5px; } .date svg { width: 14px; height: 14px; } .card-content { background: white; padding: 25px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; transform: translateY(100%); transition: var(--transition); z-index: 1; } .blog-card:hover .card-content { transform: translateY(0); } .description { font-size: 0.95rem; line-height: 1.6; color: #444; margin-bottom: 15px; overflow-y: auto; max-height: 85px; scrollbar-width: thin; } .description::-webkit-scrollbar { width: 4px; } .description::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; } .btn-wrapper { display: flex; gap: 10px; } .read-more { display: inline-flex; align-items: center; gap: 5px; padding: 8px 16px; border: none; border-radius: 50px; font-weight: 600; font-size: 0.9rem; color: white; cursor: pointer; transition: var(--transition); background: #333; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .blog-card:nth-child(1) .read-more { background: var(--gradient-1); } .blog-card:nth-child(2) .read-more { background: var(--gradient-2); } .blog-card:nth-child(3) .read-more { background: var(--gradient-3); } .read-more:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); } .read-more svg { width: 16px; height: 16px; } .bookmark-btn { width: 36px; height: 36px; border: none; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); } .bookmark-btn:hover { background: #e5e5e5; transform: translateY(-3px); } .bookmark-btn svg { width: 18px; height: 18px; transition: var(--transition); } .bookmark-btn.active svg { fill: #FF3366; stroke: #FF3366; } .card-content-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.95); z-index: 0; } .pattern { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.4; background-size: 20px 20px; } .blog-card:nth-child(1) .pattern { background-image: radial-gradient(circle, #FF3366 1px, transparent 1px); } .blog-card:nth-child(2) .pattern { background-image: radial-gradient(circle, #36D1DC 1px, transparent 1px); } .blog-card:nth-child(3) .pattern { background-image: radial-gradient(circle, #9733EE 1px, transparent 1px); } /* Responsive styles */ @media (max-width: 700px) { .container { padding: 10px; } .blog-card { height: 160px; } .card-title { font-size: 1.4rem; } .description { font-size: 0.9rem; max-height: 65px; } } @media (max-width: 500px) { .section-title { font-size: 1.5rem; } .blog-card { height: 150px; } .card-header { padding: 20px; } .card-content { padding: 20px; } .card-title { font-size: 1.2rem; } .description { font-size: 0.85rem; line-height: 1.5; max-height: 60px; } .read-more { padding: 6px 12px; font-size: 0.8rem; } } /* Elegant animations */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 51, 102, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(255, 51, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 51, 102, 0); } } .pulse { animation: pulse 1.5s infinite; } </style> </head> <body> <div class="container"> <h1 class="section-title">Latest Articles</h1> <div class="blog-cards"> <div class="blog-card"> <div class="card-header"> <div> <h2 class="card-title">CSS Hover Magic: Beyond Basic Effects</h2> <div class="meta-info"> <span class="tag">Web Design</span> <span class="date"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" /> </svg> May 12, 2023 </span> </div> </div> </div> <div class="pattern"></div> <div class="card-content"> <div class="description"> Transform your website with advanced hover techniques that go beyond simple color changes. Learn how to implement 3D transforms, parallax effects, and content reveals using pure CSS. This article breaks down the cubic-bezier timing functions and how they create fluid, natural animations that feel responsive to user interaction. </div> <div class="btn-wrapper"> <button class="read-more"> Read article <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" /> </svg> </button> <button class="bookmark-btn"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" /> </svg> </button> </div> </div> </div> <div class="blog-card"> <div class="card-header"> <div> <h2 class="card-title">Interactive Card Animations: The Complete Guide</h2> <div class="meta-info"> <span class="tag">UX Design</span> <span class="date"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" /> </svg> April 28, 2023 </span> </div> </div> </div> <div class="pattern"></div> <div class="card-content"> <div class="description"> Master the art of card-based interfaces with this deep dive into interactive hover animations. Discover how to create slide-out content, rotational effects, and dynamic 3D perspectives that bring your interfaces to life. We'll explore practical examples using CSS transitions, transforms, and subtle JavaScript enhancements for a seamless user experience. </div> <div class="btn-wrapper"> <button class="read-more"> Read article <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" /> </svg> </button> <button class="bookmark-btn"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" /> </svg> </button> </div> </div> </div> <div class="blog-card"> <div class="card-header"> <div> <h2 class="card-title">Creating Fluid Gradient Transitions in Web Design</h2> <div class="meta-info"> <span class="tag">CSS</span> <span class="date"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" /> </svg> March 15, 2023 </span> </div> </div> </div> <div class="pattern"></div> <div class="card-content"> <div class="description"> Vibrant gradients are a cornerstone of modern web aesthetics. This tutorial explores how to create smooth, animated gradient transitions that respond to user interaction. Learn advanced techniques for shifting gradient positions, changing color stops, and implementing subtle background animations that don't overwhelm your content but enhance the overall user experience. </div> <div class="btn-wrapper"> <button class="read-more"> Read article <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" /> </svg> </button> <button class="bookmark-btn"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" /> </svg> </button> </div> </div> </div> </div> </div> <script> const bookmarkBtns = document.querySelectorAll('.bookmark-btn'); const readMoreBtns = document.querySelectorAll('.read-more'); const blogCards = document.querySelectorAll('.blog-card'); // Add a subtle parallax effect to the blog cards on mousemove blogCards.forEach(card => { card.addEventListener('mousemove', function(e) { const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const xPercent = x / rect.width - 0.5; const yPercent = y / rect.height - 0.5; const cardHeader = card.querySelector('.card-header'); const cardContent = card.querySelector('.card-content'); cardHeader.style.transform = `rotateX(${yPercent * -10}deg) rotateY(${xPercent * 10}deg) translateZ(0)`; if (card.matches(':hover')) { cardHeader.style.transform += ' translateY(-80px)'; } cardContent.style.boxShadow = `${xPercent * -15}px ${yPercent * -15}px 30px rgba(0,0,0,0.1) inset`; }); card.addEventListener('mouseleave', function() { const cardHeader = card.querySelector('.card-header'); const cardContent = card.querySelector('.card-content'); cardHeader.style.transform = ''; cardContent.style.boxShadow = ''; setTimeout(() => { if (card.matches(':hover')) return; cardHeader.style.transition = 'var(--transition)'; cardContent.style.transition = 'var(--transition)'; }, 100); }); }); // Bookmark functionality bookmarkBtns.forEach(btn => { btn.addEventListener('click', function(e) { e.stopPropagation(); this.classList.toggle('active'); // Add pulse animation when bookmarking if (this.classList.contains('active')) { this.classList.add('pulse'); setTimeout(() => { this.classList.remove('pulse'); }, 1500); } }); }); // Prevent form submission readMoreBtns.forEach(btn => { btn.addEventListener('click', function(e) { e.stopPropagation(); // In a real app, this would navigate to the article // For this demo, we just add a subtle animation this.classList.add('pulse'); setTimeout(() => { this.classList.remove('pulse'); }, 1500); }); }); // Add touch support for mobile devices blogCards.forEach(card => { let touchStartTime; card.addEventListener('touchstart', function() { touchStartTime = new Date().getTime(); }); card.addEventListener('touchend', function() { const touchEndTime = new Date().getTime(); const touchDuration = touchEndTime - touchStartTime; // If it's a quick tap (less than 200ms), toggle the card state if (touchDuration < 200) { const cardHeader = this.querySelector('.card-header'); const cardContent = this.querySelector('.card-content'); if (cardContent.style.transform === 'translateY(0px)') { cardContent.style.transform = 'translateY(100%)'; cardHeader.style.transform = 'rotateX(0deg) translateY(0)'; } else { cardContent.style.transform = 'translateY(0px)'; cardHeader.style.transform = 'rotateX(10deg) translateY(-80px)'; } } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>News Portal Blog Card</title> <style> :root { --primary-color: #2c3e50; --secondary-color: #e74c3c; --tertiary-color: #3498db; --bg-color: #f9f9f9; --text-color: #2c3e50; --border-radius: 12px; --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); --transition-speed: 0.3s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--bg-color); color: var(--text-color); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .news-portal { width: 100%; max-width: 700px; display: flex; flex-direction: column; gap: 25px; } .portal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .portal-title { font-size: 28px; font-weight: 700; color: var(--primary-color); position: relative; } .portal-title::after { content: ""; position: absolute; bottom: -8px; left: 0; width: 60px; height: 4px; background-color: var(--secondary-color); border-radius: 2px; } .categories { display: flex; gap: 15px; margin-bottom: 15px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 5px; } .categories::-webkit-scrollbar { display: none; } .category { background-color: #fff; padding: 8px 15px; border-radius: 20px; font-size: 14px; font-weight: 600; color: var(--primary-color); cursor: pointer; transition: var(--transition-speed); border: 1px solid #e1e1e1; white-space: nowrap; } .category.active { background-color: var(--primary-color); color: white; } .category:hover:not(.active) { background-color: #f0f0f0; transform: translateY(-2px); } .news-cards { display: grid; grid-template-columns: 1fr; gap: 25px; } .news-card { background-color: white; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--card-shadow); transition: transform var(--transition-speed), box-shadow var(--transition-speed); cursor: pointer; display: flex; flex-direction: column; position: relative; } .news-card:hover { transform: translateY(-6px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); } .news-card:hover .card-image img { transform: scale(1.05); } .card-image { height: 200px; overflow: hidden; position: relative; } .card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .news-tag { position: absolute; top: 15px; left: 15px; background-color: var(--secondary-color); color: white; padding: 6px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; z-index: 2; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .card-content { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .card-meta { display: flex; align-items: center; gap: 15px; font-size: 13px; color: #6c757d; } .author { display: flex; align-items: center; gap: 8px; } .author-avatar { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; } .author-avatar img { width: 100%; height: 100%; object-fit: cover; } .card-title { font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--primary-color); transition: color var(--transition-speed); } .news-card:hover .card-title { color: var(--tertiary-color); } .card-excerpt { font-size: 15px; line-height: 1.6; color: #4a4a4a; margin-bottom: 10px; } .card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 15px; border-top: 1px solid #f0f0f0; } .read-more { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--tertiary-color); transition: gap var(--transition-speed); } .news-card:hover .read-more { gap: 10px; } .stats { display: flex; align-items: center; gap: 15px; font-size: 13px; color: #6c757d; } .stat { display: flex; align-items: center; gap: 5px; } .breaking-news { position: relative; background: linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b); padding: 20px; border-radius: var(--border-radius); color: white; overflow: hidden; box-shadow: var(--card-shadow); cursor: pointer; transition: transform var(--transition-speed); } .breaking-news:hover { transform: translateY(-6px); } .breaking-news::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect x="0" y="0" width="50" height="50" fill="rgba(255,255,255,0.03)"/><rect x="50" y="50" width="50" height="50" fill="rgba(255,255,255,0.03)"/></svg>'); background-size: 20px; opacity: 0.6; } .breaking-label { display: inline-block; background-color: #ff3b30; padding: 5px 10px; border-radius: 4px; font-size: 14px; font-weight: 700; margin-bottom: 15px; position: relative; z-index: 1; } .breaking-title { font-size: 26px; font-weight: 700; line-height: 1.3; margin-bottom: 15px; position: relative; z-index: 1; } .breaking-time { font-size: 14px; opacity: 0.9; display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; } .pulse { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #ff3b30; box-shadow: 0 0 0 rgba(255, 59, 48, 0.4); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(255, 59, 48, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); } } .newsletter { background-color: white; padding: 25px; border-radius: var(--border-radius); box-shadow: var(--card-shadow); text-align: center; } .newsletter-title { font-size: 20px; font-weight: 700; margin-bottom: 10px; color: var(--primary-color); } .newsletter-desc { font-size: 14px; color: #6c757d; margin-bottom: 20px; } .newsletter-form { display: flex; gap: 10px; } .newsletter-input { flex: 1; padding: 12px 15px; border: 1px solid #e1e1e1; border-radius: 6px; font-size: 14px; transition: border-color var(--transition-speed); } .newsletter-input:focus { outline: none; border-color: var(--tertiary-color); } .newsletter-btn { background-color: var(--tertiary-color); color: white; border: none; border-radius: 6px; padding: 0 20px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color var(--transition-speed); } .newsletter-btn:hover { background-color: #2980b9; } /* Responsive adjustments */ @media (max-width: 600px) { .portal-header { flex-direction: column; align-items: flex-start; gap: 15px; } .newsletter-form { flex-direction: column; } .card-image { height: 180px; } .breaking-title { font-size: 22px; } } /* Loading effect animation */ @keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } .shimmer-effect { animation-duration: 1.5s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: shimmer; animation-timing-function: linear; background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%); background-size: 800px 104px; position: relative; } </style> </head> <body> <div class="news-portal"> <div class="portal-header"> <h1 class="portal-title">GlobalPulse</h1> <div class="search-bar"></div> </div> <div class="categories"> <div class="category active">All News</div> <div class="category">Politics</div> <div class="category">Technology</div> <div class="category">Climate</div> <div class="category">Business</div> <div class="category">Health</div> <div class="category">Science</div> </div> <div class="breaking-news"> <span class="breaking-label">BREAKING</span> <h2 class="breaking-title">Global Tech Summit Unveils Next-Gen AI Systems for Climate Prediction</h2> <div class="breaking-time"> <span class="pulse"></span> <span>25 minutes ago</span> </div> </div> <div class="news-cards"> <div class="news-card"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1504711434969-e33886168f5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Semiconductor industry"> <div class="news-tag">Technology</div> </div> <div class="card-content"> <div class="card-meta"> <div class="author"> <div class="author-avatar"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author avatar"> </div> <span>Sarah Chen</span> </div> <div class="published-date">Oct 12, 2023</div> </div> <h3 class="card-title">Semiconductor Shortage Eases as New Production Facilities Come Online</h3> <p class="card-excerpt">Major chip manufacturers report increased capacity as new facilities in Arizona and Taiwan begin operations, promising relief for automotive and consumer electronics industries after two years of constraints.</p> <div class="card-footer"> <div class="read-more"> Read full story <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/> </svg> </div> <div class="stats"> <div class="stat"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/> </svg> 3 min read </div> <div class="stat"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/> </svg> 1.2K shares </div> </div> </div> </div> </div> <div class="news-card"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1523966211575-eb4a01e7dd51?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2033&q=80" alt="Climate policy meeting"> <div class="news-tag">Climate</div> </div> <div class="card-content"> <div class="card-meta"> <div class="author"> <div class="author-avatar"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author avatar"> </div> <span>James Ortega</span> </div> <div class="published-date">Oct 11, 2023</div> </div> <h3 class="card-title">EU Announces Ambitious Carbon Reduction Targets with New Enforcement Mechanisms</h3> <p class="card-excerpt">European Commission unveils strengthened climate legislation featuring carbon border adjustments and penalties for non-compliance, aiming to reduce emissions 60% by 2030 compared to 1990 levels.</p> <div class="card-footer"> <div class="read-more"> Read full story <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/> </svg> </div> <div class="stats"> <div class="stat"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/> </svg> 4 min read </div> <div class="stat"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/> </svg> 2.4K shares </div> </div> </div> </div> </div> </div> <div class="newsletter"> <h3 class="newsletter-title">Stay Updated</h3> <p class="newsletter-desc">Get the latest news delivered directly to your inbox every morning.</p> <form class="newsletter-form"> <input type="email" class="newsletter-input" placeholder="Your email address" required> <button type="button" class="newsletter-btn">Subscribe</button> </form> </div> </div> <script> // Interactive category selection const categories = document.querySelectorAll('.category'); categories.forEach(category => { category.addEventListener('click', () => { // Remove active class from all categories categories.forEach(c => c.classList.remove('active')); // Add active class to clicked category category.classList.add('active'); // Add a simulated loading effect to news cards const newsCards = document.querySelectorAll('.news-card'); newsCards.forEach(card => { card.style.opacity = '0.7'; card.classList.add('shimmer-effect'); setTimeout(() => { card.style.opacity = '1'; card.classList.remove('shimmer-effect'); }, 800); }); }); }); // Newsletter form handling const newsletterForm = document.querySelector('.newsletter-form'); const newsletterInput = document.querySelector('.newsletter-input'); const newsletterBtn = document.querySelector('.newsletter-btn'); newsletterBtn.addEventListener('click', () => { const email = newsletterInput.value.trim(); if (email && isValidEmail(email)) { // Success state newsletterBtn.textContent = 'Subscribed!'; newsletterBtn.style.backgroundColor = '#27ae60'; newsletterInput.value = ''; setTimeout(() => { newsletterBtn.textContent = 'Subscribe'; newsletterBtn.style.backgroundColor = ''; }, 2000); } else { // Error state newsletterInput.style.borderColor = '#e74c3c'; newsletterInput.style.backgroundColor = 'rgba(231, 76, 60, 0.05)'; // Reset after 2 seconds setTimeout(() => { newsletterInput.style.borderColor = ''; newsletterInput.style.backgroundColor = ''; }, 2000); } }); function isValidEmail(email) { const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return regex.test(email); } // News card interaction const newsCards = document.querySelectorAll('.news-card'); newsCards.forEach(card => { card.addEventListener('click', () => { // Add a ripple effect to indicate it's clickable const ripple = document.createElement('div'); ripple.classList.add('ripple'); ripple.style.width = '100%'; ripple.style.height = '100%'; ripple.style.position = 'absolute'; ripple.style.top = '0'; ripple.style.left = '0'; ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.2)'; ripple.style.borderRadius = 'var(--border-radius)'; ripple.style.transform = 'scale(0)'; ripple.style.transition = 'transform 0.5s'; card.appendChild(ripple); setTimeout(() => { ripple.style.transform = 'scale(1)'; setTimeout(() => { ripple.remove(); }, 500); }, 10); }); }); // Breaking news animation const breakingNews = document.querySelector('.breaking-news'); breakingNews.addEventListener('mouseover', () => { breakingNews.style.backgroundPosition = '100%'; }); breakingNews.addEventListener('mouseout', () => { breakingNews.style.backgroundPosition = '0%'; }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Courier New', monospace; background-color: #f7f3e9; display: flex; justify-content: center; align-items: center; min-height: 700px; padding: 20px; } .blog-card { width: 100%; max-width: 650px; border-radius: 8px; overflow: hidden; position: relative; background-color: #e8e0d0; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .blog-card:hover { transform: translateY(-5px); } .texture-overlay { 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.15; pointer-events: none; } .stamp { position: absolute; top: 20px; right: 20px; width: 80px; height: 80px; background-color: #d23c3c; border-radius: 50%; display: flex; justify-content: center; align-items: center; transform: rotate(12deg); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); z-index: 10; } .stamp-text { color: #f7f3e9; font-weight: bold; text-transform: uppercase; font-family: 'Rockwell', 'Courier Bold', monospace; font-size: 14px; letter-spacing: 1px; text-align: center; line-height: 1.2; } .card-header { position: relative; padding-bottom: 60%; overflow: hidden; } .blog-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(20%) contrast(90%) brightness(90%); transition: filter 0.4s ease; } .blog-card:hover .blog-image { filter: sepia(10%) contrast(100%) brightness(95%); } .card-content { padding: 25px; position: relative; } .blog-date { font-family: 'Courier New', monospace; color: #836953; font-size: 14px; margin-bottom: 10px; letter-spacing: 1px; } .blog-title { font-family: 'Georgia', serif; color: #4a3c2c; font-size: 28px; margin-bottom: 15px; line-height: 1.2; font-weight: bold; letter-spacing: -0.5px; } .blog-excerpt { color: #554738; line-height: 1.6; margin-bottom: 25px; font-size: 16px; } .read-more-btn { display: inline-block; padding: 12px 25px; background-color: #9b8669; color: #f7f3e9; text-decoration: none; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; font-size: 14px; border: none; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2); } .read-more-btn:hover { background-color: #836953; } .read-more-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); } .read-more-btn::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF8WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0NDYwLCAyMDIwLzA1LzEyLTE2OjA0OjE3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMiAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjAtMDktMTRUMTM6MDM6NDcrMDM6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTA5LTE0VDEzOjA1OjAyKzAzOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIwLTA5LTE0VDEzOjA1OjAyKzAzOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjMwZjRjOTJjLTljZDQt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'); background-size: cover; opacity: 0; transition: opacity 0.3s ease; } .read-more-btn:active::after { opacity: 0.1; } .metadata { display: flex; margin-top: 20px; border-top: 1px dashed #9b8669; padding-top: 15px; color: #836953; font-size: 14px; } .metadata div { margin-right: 20px; display: flex; align-items: center; } .icon { width: 16px; height: 16px; margin-right: 5px; fill: #836953; } @media (max-width: 550px) { .blog-card { max-width: 100%; } .blog-title { font-size: 24px; } .card-header { padding-bottom: 70%; } .stamp { width: 70px; height: 70px; top: 10px; right: 10px; } .stamp-text { font-size: 12px; } .metadata { flex-wrap: wrap; } .metadata div { margin-bottom: 8px; } } /* Typewriter effect */ .typewriter { overflow: hidden; border-right: 2px solid #9b8669; white-space: nowrap; margin: 0; letter-spacing: 0.05em; animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; animation-fill-mode: forwards; } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: #9b8669 } } /* Paper fold effect */ .fold-corner { position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 30px 30px; border-color: transparent transparent #d9cbb3 transparent; box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .blog-card:hover .fold-corner { border-width: 0 0 50px 50px; } /* Vinyl record effect on image hover */ .vinyl-effect { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 150px; height: 150px; border-radius: 50%; background: radial-gradient( circle, #1a1a1a 0%, #1a1a1a 20%, #333333 21%, #333333 30%, #1a1a1a 31%, #1a1a1a 40%, #333333 41%, #333333 50%, #1a1a1a 51%, #1a1a1a 60%, #333333 61%, #333333 70%, #1a1a1a 71%, #1a1a1a 100% ); opacity: 0.7; transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 5; } .card-header:hover .vinyl-effect { transform: translate(-50%, -50%) scale(1) rotate(720deg); } .vinyl-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; background-color: #e8e0d0; border-radius: 50%; z-index: 6; } </style> </head> <body> <div class="blog-card"> <div class="texture-overlay"></div> <div class="stamp"> <span class="stamp-text">New Post May 18</span> </div> <div class="card-header"> <img src="https://images.unsplash.com/photo-1519817914152-22d216bb9170?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="Vintage record player" class="blog-image"> <div class="vinyl-effect"></div> <div class="vinyl-center"></div> </div> <div class="card-content"> <div class="blog-date">MAY 18, 1975</div> <h2 class="blog-title typewriter">The Golden Age of Vinyl</h2> <p class="blog-excerpt">When the needle drops and that warm crackle fills the room, it's more than just sound—it's time travel. Explore how the analog renaissance is reshaping our digital world, and why these spinning discs continue to captivate generations born long after their heyday.</p> <button class="read-more-btn">Continue Reading</button> <div class="metadata"> <div> <svg class="icon" viewBox="0 0 24 24"> <path d="M12 4C7.58 4 4 7.58 4 12s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm-1-10h2v4h-2V8zm0 6h2v2h-2v-2z"/> </svg> 5 min read </div> <div> <svg class="icon" viewBox="0 0 24 24"> <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"/> </svg> Subscribers Only </div> <div> <svg class="icon" viewBox="0 0 24 24"> <path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"/> </svg> Music, Collectibles </div> </div> <div class="fold-corner"></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const button = document.querySelector('.read-more-btn'); const blogTitle = document.querySelector('.blog-title'); const vinylEffect = document.querySelector('.vinyl-effect'); // Button press effect with sound simulation button.addEventListener('click', function(e) { e.preventDefault(); // Visual feedback this.style.transform = 'translate(2px, 2px)'; this.style.boxShadow = '1px 1px 0 rgba(0, 0, 0, 0.2)'; // Add ink press effect this.style.backgroundColor = '#7d6b53'; // Reset after animation setTimeout(() => { this.style.transform = ''; this.style.boxShadow = '3px 3px 0 rgba(0, 0, 0, 0.2)'; this.style.backgroundColor = ''; // Show reading confirmation const excerpt = document.querySelector('.blog-excerpt'); excerpt.innerHTML = "You're now reading this article. The story continues with how vinyl records emerged in the late 1940s, transforming home entertainment forever. The rich, warm audio quality offered something digital formats still struggle to replicate..."; }, 200); }); // Reapply typewriter effect on click blogTitle.addEventListener('click', function() { this.style.animation = 'none'; this.offsetHeight; // Trigger reflow this.style.animation = 'typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite'; }); // Simulate vinyl rotation on hover const cardHeader = document.querySelector('.card-header'); cardHeader.addEventListener('mouseenter', function() { const rotateAnimation = [ { transform: 'translate(-50%, -50%) scale(1) rotate(0deg)' }, { transform: 'translate(-50%, -50%) scale(1) rotate(360deg)' } ]; const rotateTiming = { duration: 3000, iterations: Infinity, easing: 'linear' }; if (vinylEffect.style.transform.includes('scale(1)')) { vinylEffect.animate(rotateAnimation, rotateTiming); } }); // Make stamp appear handmade with slight wobble const stamp = document.querySelector('.stamp'); stamp.addEventListener('mouseenter', function() { this.animate([ { transform: 'rotate(12deg)' }, { transform: 'rotate(14deg)' }, { transform: 'rotate(10deg)' }, { transform: 'rotate(12deg)' } ], { duration: 500, easing: 'ease-in-out' }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bold Graphic Blog Card</title> <style> /* Reset and base styles */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } :root { --primary: #FF3366; --secondary: #5932EA; --accent: #FFD60A; --dark: #232946; --light: #FFFFFE; } body { display: flex; justify-content: center; align-items: center; min-height: 700px; background-color: #f0f0f0; overflow: hidden; padding: 1rem; } /* Container styles */ .container { width: 100%; max-width: 700px; height: 650px; position: relative; perspective: 1000px; } /* Card styles */ .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); background: var(--light); border-radius: 16px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); overflow: hidden; } .card:hover { transform: translateY(-10px); } /* Header section with geometric shapes */ .card-header { position: relative; height: 260px; overflow: hidden; background: var(--dark); } .geo-shapes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .shape { position: absolute; opacity: 0.7; transform-origin: center; animation: float 15s infinite ease-in-out; } .shape1 { top: 20%; left: 10%; width: 120px; height: 120px; background: var(--primary); clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); animation-delay: 0s; } .shape2 { top: 30%; right: 15%; width: 90px; height: 90px; background: var(--secondary); border-radius: 50%; animation-delay: 2s; } .shape3 { bottom: 10%; left: 35%; width: 70px; height: 70px; background: var(--accent); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); animation-delay: 4s; } /* Card content */ .card-content { padding: 2rem; position: relative; z-index: 1; } /* Typography */ h1 { font-size: 2.5rem; font-weight: 900; color: var(--dark); margin-bottom: 1rem; line-height: 1.1; text-transform: uppercase; letter-spacing: -1px; position: relative; overflow: hidden; } h1 span { display: inline-block; animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; transform: translateY(100%); opacity: 0; } h1 span:nth-child(1) { animation-delay: 0.1s; } h1 span:nth-child(2) { animation-delay: 0.2s; } h1 span:nth-child(3) { animation-delay: 0.3s; } .category { display: inline-block; padding: 5px 12px; background: var(--primary); color: white; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; border-radius: 30px; margin-bottom: 1rem; transform: translateY(20px); opacity: 0; animation: fadeIn 0.6s 0.6s forwards; } .excerpt { font-size: 1rem; line-height: 1.6; color: #566174; margin-bottom: 1.5rem; transform: translateY(20px); opacity: 0; animation: fadeIn 0.6s 0.8s forwards; } /* Interactive elements */ .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; transform: translateY(20px); opacity: 0; animation: fadeIn 0.6s 1s forwards; } .tag { padding: 4px 12px; background: rgba(89, 50, 234, 0.1); color: var(--secondary); font-size: 0.8rem; border-radius: 20px; transition: all 0.3s ease; } .tag:hover { background: var(--secondary); color: white; transform: scale(1.05); } .read-more { position: relative; display: inline-flex; align-items: center; padding: 0.7rem 1.5rem; background: var(--secondary); color: white; font-weight: 600; border-radius: 30px; text-decoration: none; margin-top: 1.5rem; overflow: hidden; transition: all 0.3s ease; border: none; cursor: pointer; font-size: 1rem; transform: translateY(20px); opacity: 0; animation: fadeIn 0.6s 1.2s forwards; z-index: 2; } .read-more:hover { background: var(--primary); transform: translateY(-5px); box-shadow: 0 10px 25px rgba(255, 51, 102, 0.3); } .read-more::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: all 0.6s; } .read-more:hover::before { left: 100%; } .read-more .icon { margin-left: 8px; transition: transform 0.3s ease; } .read-more:hover .icon { transform: translateX(4px); } /* Overlay content */ .overlay-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(35, 41, 70, 0.95); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; z-index: 10; color: white; text-align: center; border-radius: 16px; } .overlay-content.active { opacity: 1; pointer-events: auto; } .overlay-content h2 { font-size: 2rem; margin-bottom: 1rem; font-weight: 800; transform: translateY(20px); opacity: 0; transition: all 0.5s ease 0.2s; } .overlay-content p { font-size: 1.1rem; line-height: 1.7; margin-bottom: 2rem; max-width: 90%; transform: translateY(20px); opacity: 0; transition: all 0.5s ease 0.4s; } .overlay-content.active h2, .overlay-content.active p { transform: translateY(0); opacity: 1; } .close-btn { position: absolute; top: 20px; right: 20px; background: transparent; border: none; color: white; font-size: 1.5rem; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.3s ease; } .close-btn:hover { background: rgba(255, 255, 255, 0.1); } /* Progress indicator */ .progress-container { position: absolute; bottom: 40px; left: 0; width: 100%; height: 4px; background: rgba(255, 255, 255, 0.2); z-index: 2; transform: translateY(20px); opacity: 0; animation: fadeIn 0.6s 1.4s forwards; } .progress-bar { height: 100%; background: var(--accent); width: 40%; border-radius: 4px; position: relative; } .progress-bar::after { content: ''; position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); width: 10px; height: 10px; background: var(--accent); border-radius: 50%; } /* Animations */ @keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-20px) rotate(10deg); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Responsive adjustments */ @media (max-width: 600px) { .container { height: 600px; } .card-header { height: 200px; } h1 { font-size: 2rem; } .card-content { padding: 1.5rem; } .shape1 { width: 80px; height: 80px; } .shape2 { width: 60px; height: 60px; } .shape3 { width: 50px; height: 50px; } } </style> </head> <body> <div class="container"> <div class="card"> <div class="card-header"> <div class="geo-shapes"> <div class="shape shape1"></div> <div class="shape shape2"></div> <div class="shape shape3"></div> </div> </div> <div class="card-content"> <div class="category">Digital Design</div> <h1> <span>Geometric</span> <span>Visual</span> <span>Systems</span> </h1> <p class="excerpt">Exploring how geometric abstractions can create powerful visual systems for brand identity. A deep dive into the intersection of mathematics and design principles.</p> <div class="tags"> <span class="tag">Design Theory</span> <span class="tag">Geometry</span> <span class="tag">Brand Identity</span> <span class="tag">Visual Systems</span> </div> <button class="read-more" id="expand-btn"> Explore Case Study <span class="icon">→</span> </button> <div class="progress-container"> <div class="progress-bar"></div> </div> </div> <div class="overlay-content" id="overlay"> <button class="close-btn" id="close-btn">×</button> <h2>Geometric Systems in Modern Brand Design</h2> <p>Geometric systems provide a mathematical foundation that brings harmony and consistency to visual identities. By utilizing shapes, grids, and proportional relationships, designers can create flexible yet cohesive brand systems that scale across various touchpoints while maintaining visual integrity.</p> <p>This case study examines how companies like Spotify, Airbnb, and Google have leveraged geometric principles to build distinctive and adaptable visual languages that remain recognizable even as they evolve over time.</p> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Interactive elements const card = document.querySelector('.card'); const expandBtn = document.getElementById('expand-btn'); const overlay = document.getElementById('overlay'); const closeBtn = document.getElementById('close-btn'); // Shapes animation on mousemove document.addEventListener('mousemove', (e) => { const shapes = document.querySelectorAll('.shape'); const x = e.clientX / window.innerWidth; const y = e.clientY / window.innerHeight; shapes.forEach((shape, index) => { const offsetX = (index + 1) * 10; const offsetY = (index + 1) * 8; shape.style.transform = `translate(${x * offsetX}px, ${y * offsetY}px) rotate(${x * y * 20}deg)`; }); }); // Expand overlay expandBtn.addEventListener('click', () => { overlay.classList.add('active'); }); // Close overlay closeBtn.addEventListener('click', () => { overlay.classList.remove('active'); }); // Animated progress bar const progressBar = document.querySelector('.progress-bar'); let width = 40; let increasing = true; setInterval(() => { if (increasing) { width += 1; if (width >= 85) { increasing = false; } } else { width -= 1; if (width <= 15) { increasing = true; } } progressBar.style.width = `${width}%`; }, 150); // Add hover effect to card card.addEventListener('mouseenter', () => { card.style.transform = 'translateY(-10px) rotateX(2deg)'; }); card.addEventListener('mouseleave', () => { card.style.transform = 'translateY(0) rotateX(0)'; }); // Animate title on load const titleSpans = document.querySelectorAll('h1 span'); titleSpans.forEach((span, index) => { setTimeout(() => { span.style.opacity = '1'; span.style.transform = 'translateY(0)'; }, 100 * (index + 1)); }); // Tag click effect const tags = document.querySelectorAll('.tag'); tags.forEach(tag => { tag.addEventListener('click', () => { // Remove active class from all tags tags.forEach(t => t.classList.remove('active')); // Add active class to clicked tag tag.classList.add('active'); // Flash animation tag.style.transform = 'scale(1.1)'; setTimeout(() => { tag.style.transform = 'scale(1)'; }, 300); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Quantum Leap Tech Blog</title> <style> @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@100;200;400;700&display=swap'); :root { --bg-color: #0A0E17; --card-bg: #111827; --neon-blue: #00F0FF; --neon-purple: #8A2BE2; --neon-pink: #FF0080; --text-primary: #E2E8F0; --text-secondary: #94A3B8; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Space Grotesk', sans-serif; background-color: var(--bg-color); color: var(--text-primary); display: flex; justify-content: center; align-items: center; min-height: 700px; overflow-x: hidden; padding: 20px; } .container { width: 100%; max-width: 700px; display: flex; flex-direction: column; gap: 20px; height: 660px; overflow-y: auto; padding: 10px; scrollbar-width: thin; scrollbar-color: var(--neon-blue) var(--bg-color); } .container::-webkit-scrollbar { width: 6px; } .container::-webkit-scrollbar-track { background: var(--bg-color); } .container::-webkit-scrollbar-thumb { background-color: var(--neon-blue); border-radius: 20px; } .blog-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; position: sticky; top: 0; background: var(--bg-color); padding: 10px 0; z-index: 100; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .blog-logo { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 24px; background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -1px; position: relative; } .blog-logo::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple)); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .blog-logo:hover::after { transform: scaleX(1); } .search-bar { position: relative; width: 180px; } .search-bar input { width: 100%; background-color: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 8px 12px 8px 30px; color: var(--text-primary); font-family: 'Space Grotesk', sans-serif; font-size: 14px; transition: all 0.3s ease; } .search-bar input:focus { outline: none; border-color: var(--neon-blue); box-shadow: 0 0 5px rgba(0, 240, 255, 0.5); width: 200px; } .search-bar::before { content: "⌕"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 14px; } .blog-card { background: var(--card-bg); border-radius: 12px; padding: 20px; position: relative; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid rgba(255, 255, 255, 0.05); overflow: hidden; margin-bottom: 25px; cursor: pointer; } .blog-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple), var(--neon-pink)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease; } .blog-card:hover::before { transform: scaleX(1); } .blog-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 240, 255, 0.2), 0 0 20px rgba(138, 43, 226, 0.1); } .card-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .card-tag { background: rgba(138, 43, 226, 0.2); color: var(--neon-purple); font-size: 12px; padding: 3px 8px; border-radius: 4px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; display: inline-flex; align-items: center; } .tag-icon { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; background: var(--neon-purple); animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(138, 43, 226, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(138, 43, 226, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(138, 43, 226, 0); } } .card-date { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-secondary); } .card-title { font-size: 22px; font-weight: 700; margin-bottom: 10px; color: var(--text-primary); line-height: 1.3; } .card-preview { font-size: 15px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 15px; position: relative; overflow: hidden; max-height: 4.5em; transition: max-height 0.5s cubic-bezier(0.44, 0.05, 0.55, 0.95); } .card-expanded .card-preview { max-height: 500px; } .card-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; } .card-metrics { display: flex; gap: 15px; } .metric { display: flex; align-items: center; gap: 5px; color: var(--text-secondary); font-size: 14px; transition: color 0.3s ease; } .metric:hover { color: var(--neon-blue); } .metric i { font-size: 16px; } .read-more { font-weight: 600; color: var(--neon-blue); display: flex; align-items: center; gap: 5px; cursor: pointer; position: relative; transition: all 0.3s ease; } .read-more:hover { color: var(--neon-purple); } .read-more:after { content: "»"; opacity: 0; margin-left: 0; transition: all 0.3s ease; } .read-more:hover:after { opacity: 1; margin-left: 5px; } .card-author { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .author-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple)); display: flex; align-items: center; justify-content: center; font-weight: 700; color: white; font-size: 16px; } .author-info { display: flex; flex-direction: column; } .author-name { font-weight: 600; font-size: 14px; } .author-role { font-size: 12px; color: var(--text-secondary); } .card-hidden-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.44, 0.05, 0.55, 0.95); } .card-expanded .card-hidden-content { max-height: 1000px; margin-top: 15px; } .tech-stack { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; } .tech-badge { background: rgba(0, 240, 255, 0.1); color: var(--neon-blue); font-size: 12px; padding: 4px 10px; border-radius: 20px; font-family: 'JetBrains Mono', monospace; position: relative; overflow: hidden; } .tech-badge::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: 0.5s; } .tech-badge:hover::before { left: 100%; } .featured-section { position: relative; margin-bottom: 30px; } .section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .section-title { font-size: 20px; font-weight: 700; color: var(--text-primary); position: relative; } .section-title::after { content: ""; position: absolute; bottom: -5px; left: 0; width: 40px; height: 3px; background: var(--neon-pink); } .glow-effect { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(138, 43, 226, 0.15) 0%, rgba(0, 240, 255, 0.05) 50%, transparent 70%); pointer-events: none; z-index: -1; opacity: 0; transition: opacity 0.3s ease; } .tech-details { margin-top: 15px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); } .code-snippet { background: rgba(0, 0, 0, 0.3); border-radius: 6px; padding: 15px; margin: 15px 0; font-family: 'JetBrains Mono', monospace; font-size: 13px; overflow-x: auto; white-space: pre; line-height: 1.5; color: #E2E8F0; border-left: 3px solid var(--neon-blue); } .syntax-highlight { color: var(--neon-pink); } .keyword { color: var(--neon-purple); } .string { color: var(--neon-blue); } .progress-bar { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple), var(--neon-pink)); z-index: 1000; transition: width 0.3s ease; } @media (max-width: 600px) { .blog-header { flex-direction: column; gap: 15px; align-items: flex-start; } .search-bar { width: 100%; } .search-bar input:focus { width: 100%; } .card-title { font-size: 18px; } .blog-card { padding: 15px; } } </style> </head> <body> <div class="progress-bar" id="progressBar"></div> <div class="glow-effect" id="glowEffect"></div> <div class="container"> <div class="blog-header"> <div class="blog-logo">QUANTUM LEAP</div> <div class="search-bar"> <input type="text" placeholder="Search posts..."> </div> </div> <div class="featured-section"> <div class="section-header"> <div class="section-title">Featured Posts</div> </div> <div class="blog-card" data-id="1"> <div class="card-meta"> <div class="card-tag"><span class="tag-icon"></span>AI & ML</div> <div class="card-date">NOV 28, 2023</div> </div> <h2 class="card-title">GPT-4 Turbo: Breaking the Tokens Barrier With 128K Context</h2> <div class="card-preview"> OpenAI's latest LLM has quadrupled context length while slashing costs by 3x. We analyze the architectural improvements, tradeoffs, and performance metrics from our integration tests. </div> <div class="card-hidden-content"> <div class="tech-stack"> <span class="tech-badge">Python</span> <span class="tech-badge">TensorFlow</span> <span class="tech-badge">OpenAI API</span> <span class="tech-badge">LangChain</span> </div> <div class="tech-details"> <p>The extended context window is a game-changer for document analysis workflows, enabling single-pass processing of documents up to ~300 pages. Our benchmark tests show 22% improved reasoning over complex datasets compared to previous models.</p> <div class="code-snippet"> <span class="keyword">import</span> openai client = openai.OpenAI(api_key=<span class="string">"your-api-key"</span>) <span class="keyword">def</span> <span class="syntax-highlight">process_large_document</span>(document_text): response = client.chat.completions.create( model=<span class="string">"gpt-4-turbo"</span>, messages=[ {<span class="string">"role"</span>: <span class="string">"system"</span>, <span class="string">"content"</span>: <span class="string">"Analyze this document and extract key insights."</span>}, {<span class="string">"role"</span>: <span class="string">"user"</span>, <span class="string">"content"</span>: document_text} ], max_tokens=4096 ) <span class="keyword">return</span> response.choices[0].message.content</div> </div> </div> <div class="card-actions"> <div class="card-metrics"> <div class="metric"><i>👁️</i> 1.4k</div> <div class="metric"><i>💬</i> 42</div> </div> <div class="read-more">Read more</div> </div> <div class="card-author"> <div class="author-avatar">SL</div> <div class="author-info"> <div class="author-name">Sarah Lin</div> <div class="author-role">Chief AI Engineer</div> </div> </div> </div> <div class="blog-card" data-id="2"> <div class="card-meta"> <div class="card-tag"><span class="tag-icon"></span>DevOps</div> <div class="card-date">NOV 24, 2023</div> </div> <h2 class="card-title">Zero-Downtime K8s Migrations: Our Production Database Switchover Strategy</h2> <div class="card-preview"> We migrated a 2TB production PostgreSQL cluster to a new infrastructure without a single request failure. Here's our 7-step process and the custom tools we built to make it happen. </div> <div class="card-hidden-content"> <div class="tech-stack"> <span class="tech-badge">Kubernetes</span> <span class="tech-badge">PostgreSQL</span> <span class="tech-badge">Go</span> <span class="tech-badge">Terraform</span> </div> <div class="tech-details"> <p>Our shadow traffic approach allowed us to validate the new system under identical load conditions before the actual cutover. The traffic mirroring proxy we developed introduces only 1.3ms of additional latency while duplicating all write operations.</p> <div class="code-snippet"> <span class="keyword">package</span> main <span class="keyword">import</span> ( <span class="string">"context"</span> <span class="string">"github.com/jackc/pgx/v4/pgxpool"</span> <span class="string">"log"</span> ) <span class="keyword">func</span> <span class="syntax-highlight">mirrorDatabaseWrites</span>(primaryPool, shadowPool *pgxpool.Pool, query string, args ...interface{}) error { <span class="comment">// Execute on primary DB</span> primaryResult, err := primaryPool.Exec(context.Background(), query, args...) <span class="keyword">if</span> err != nil { <span class="keyword">return</span> err } <span class="comment">// Mirror to shadow DB but don't block</span> <span class="keyword">go func</span>() { _, err := shadowPool.Exec(context.Background(), query, args...) <span class="keyword">if</span> err != nil { log.Printf(<span class="string">"Shadow write error: %v"</span>, err) } }() <span class="keyword">return</span> nil }</div> </div> </div> <div class="card-actions"> <div class="card-metrics"> <div class="metric"><i>👁️</i> 876</div> <div class="metric"><i>💬</i> 23</div> </div> <div class="read-more">Read more</div> </div> <div class="card-author"> <div class="author-avatar">RK</div> <div class="author-info"> <div class="author-name">Raj Kumar</div> <div class="author-role">DevOps Lead</div> </div> </div> </div> <div class="blog-card" data-id="3"> <div class="card-meta"> <div class="card-tag"><span class="tag-icon"></span>Frontend</div> <div class="card-date">NOV 18, 2023</div> </div> <h2 class="card-title">Virtual DOM is Dead: 60% Performance Boost Using Signals Over React</h2> <div class="card-preview"> We've rewired our frontend to use fine-grained reactivity with signals instead of React's VDOM diffing. The results? 60% faster renders, 40% less memory usage, and much smoother UX for data-intensive dashboards. </div> <div class="card-hidden-content"> <div class="tech-stack"> <span class="tech-badge">SolidJS</span> <span class="tech-badge">TypeScript</span> <span class="tech-badge">WebGL</span> <span class="tech-badge">WebAssembly</span> </div> <div class="tech-details"> <p>The signal-based approach eliminated unnecessary re-renders completely, particularly important for our data visualization components that need to update at 60fps while processing streaming market data.</p> <div class="code-snippet"> <span class="keyword">import</span> { createSignal, createEffect } from <span class="string">'solid-js'</span>; <span class="keyword">function</span> <span class="syntax-highlight">DataVisualization</span>() { <span class="comment">// Create reactive signals</span> <span class="keyword">const</span> [dataPoints, setDataPoints] = createSignal([]); <span class="keyword">const</span> [isLoading, setIsLoading] = createSignal(<span class="keyword">true</span>); <span class="comment">// Computed value that only updates when dependencies change</span> <span class="keyword">const</span> processedData = () => { <span class="keyword">return</span> dataPoints().map(point => ({ x: point.timestamp, y: point.value * coefficient(), radius: Math.sqrt(point.confidence) * 2 })); }; <span class="comment">// Effect runs only when dataPoints change</span> createEffect(() => { <span class="keyword">const</span> canvas = document.getElementById(<span class="string">'visualization'</span>); renderToCanvas(canvas, processedData()); }); <span class="keyword">return</span> (<span class="syntax-highlight"><div></span> {isLoading() ? <span class="syntax-highlight"><LoadingSpinner /></span> : <span class="syntax-highlight"><canvas id="visualization" /></span>} <span class="syntax-highlight"></div></span>); }</div> </div> </div> <div class="card-actions"> <div class="card-metrics"> <div class="metric"><i>👁️</i> 2.1k</div> <div class="metric"><i>💬</i> 78</div> </div> <div class="read-more">Read more</div> </div> <div class="card-author"> <div class="author-avatar">AK</div> <div class="author-info"> <div class="author-name">Alex Kim</div> <div class="author-role">Frontend Architect</div> </div> </div> </div> <div class="blog-card" data-id="4"> <div class="card-meta"> <div class="card-tag"><span class="tag-icon"></span>Security</div> <div class="card-date">NOV 10, 2023</div> </div> <h2 class="card-title">We Found an OAuth Zero-Day in Our Own Auth System (CVE-2023-41892)</h2> <div class="card-preview"> During our quarterly security audit, we discovered a novel OAuth bypass vulnerability in our own authentication system. Here's how we caught it, patched it, and the lessons for all OAuth implementations. </div> <div class="card-hidden-content"> <div class="tech-stack"> <span class="tech-badge">OAuth 2.0</span> <span class="tech-badge">Rust</span> <span class="tech-badge">JWT</span> <span class="tech-badge">Burp Suite</span> </div> <div class="tech-details"> <p>The vulnerability involved improper state parameter validation during the authorization code flow, allowing attackers to perform a time-of-check to time-of-use (TOCTOU) attack to hijack authentication sessions.</p> <div class="code-snippet"> <span class="comment">// Vulnerable code - DO NOT USE</span> <span class="keyword">async fn</span> <span class="syntax-highlight">handle_callback</span>( query: web::Query<CallbackParams>, session: Session, ) -> Result<HttpResponse, Error> { <span class="keyword">let</span> state = query.state.clone(); <span class="keyword">let</span> code = query.code.clone(); <span class="comment">// VULNERABILITY: Basic string comparison of state parameter</span> <span class="comment">// without constant-time comparison or expiration check</span> <span class="keyword">if</span> <span class="keyword">let</span> Some(stored_state) = session.get::<String>(<span class="string">"oauth_state"</span>)? { <span class="keyword">if</span> state == stored_state { <span class="comment">// Non-constant time comparison!</span> <span class="comment">// Exchange code for token...</span> <span class="keyword">let</span> token = exchange_code_for_token(code).await?; <span class="comment">// ...</span> } } <span class="comment">// ...</span> } <span class="comment">// Fixed implementation</span> <span class="keyword">async fn</span> <span class="syntax-highlight">handle_callback_secure</span>( query: web::Query<CallbackParams>, session: Session, ) -> Result<HttpResponse, Error> { <span class="keyword">let</span> state = query.state.clone(); <span class="keyword">let</span> code = query.code.clone(); <span class="comment">// 1. Get and remove state from session atomically</span> <span class="keyword">let</span> stored_state = session.get_and_remove::<OAuthState>(<span class="string">"oauth_state"</span>)?; <span class="keyword">match</span> stored_state { Some(state_obj) => { <span class="comment">// 2. Check expiration</span> <span class="keyword">if</span> Utc::now() > state_obj.expires_at { <span class="keyword">return</span> Err(Error::Unauthorized(<span class="string">"OAuth state expired"</span>)); } <span class="comment">// 3. Use constant-time comparison</span> <span class="keyword">if</span> !crypto::constant_time_eq(state.as_bytes(), state_obj.value.as_bytes()) { <span class="keyword">return</span> Err(Error::Unauthorized(<span class="string">"Invalid OAuth state"</span>)); } <span class="comment">// Exchange code for token...</span> <span class="keyword">let</span> token = exchange_code_for_token(code).await?; <span class="comment">// ...</span> } None => <span class="keyword">return</span> Err(Error::Unauthorized(<span class="string">"Invalid OAuth session"</span>)), } <span class="comment">// ...</span> }</div> </div> </div> <div class="card-actions"> <div class="card-metrics"> <div class="metric"><i>👁️</i> 3.4k</div> <div class="metric"><i>💬</i> 91</div> </div> <div class="read-more">Read more</div> </div> <div class="card-author"> <div class="author-avatar">JD</div> <div class="author-info"> <div class="author-name">Jamie Dawson</div> <div class="author-role">Security Engineer</div> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const cards = document.querySelectorAll('.blog-card'); const glowEffect = document.getElementById('glowEffect'); const progressBar = document.getElementById('progressBar'); // Scroll progress bar window.addEventListener('scroll', () => { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; const scrollPercentage = (scrollTop / scrollHeight) * 100; progressBar.style.width = `${scrollPercentage}%`; }); // Card expansion toggle cards.forEach(card => { card.addEventListener('click', function(e) { // Don't toggle if clicking on a link or button if (e.target.tagName === 'A' || e.target.tagName === 'BUTTON') return; // Toggle expanded class this.classList.toggle('card-expanded'); // Update read more text const readMoreBtn = this.querySelector('.read-more'); if (this.classList.contains('card-expanded')) { readMoreBtn.textContent = 'Show less'; } else { readMoreBtn.textContent = 'Read more'; } }); // Read more button click const readMoreBtn = card.querySelector('.read-more'); readMoreBtn.addEventListener('click', function(e) { e.stopPropagation(); // Prevent card click event const parentCard = this.closest('.blog-card'); parentCard.classList.toggle('card-expanded'); if (parentCard.classList.contains('card-expanded')) { this.textContent = 'Show less'; } else { this.textContent = 'Read more'; } }); }); // Glow effect following cursor document.addEventListener('mousemove', (e) => { const mouseX = e.clientX; const mouseY = e.clientY; glowEffect.style.opacity = '1'; glowEffect.style.left = `${mouseX}px`; glowEffect.style.top = `${mouseY}px`; glowEffect.style.transform = 'translate(-50%, -50%)'; }); // Hide glow effect when cursor leaves window document.addEventListener('mouseleave', () => { glowEffect.style.opacity = '0'; }); // Add hover effect to tech badges const techBadges = document.querySelectorAll('.tech-badge'); techBadges.forEach(badge => { badge.addEventListener('mouseenter', function() { this.style.backgroundColor = 'rgba(0, 240, 255, 0.2)'; }); badge.addEventListener('mouseleave', function() { this.style.backgroundColor = 'rgba(0, 240, 255, 0.1)'; }); }); // Add typing effect to search const searchInput = document.querySelector('.search-bar input'); const searchPlaceholder = "Search posts..."; let i = 0; searchInput.placeholder = ""; const typeWriter = () => { if (i < searchPlaceholder.length) { searchInput.placeholder += searchPlaceholder.charAt(i); i++; setTimeout(typeWriter, 100); } }; setTimeout(typeWriter, 1000); // Search functionality searchInput.addEventListener('input', function() { const searchTerm = this.value.toLowerCase(); cards.forEach(card => { const title = card.querySelector('.card-title').textContent.toLowerCase(); const preview = card.querySelector('.card-preview').textContent.toLowerCase(); const tag = card.querySelector('.card-tag').textContent.toLowerCase(); if (title.includes(searchTerm) || preview.includes(searchTerm) || tag.includes(searchTerm)) { card.style.display = 'block'; } else { card.style.display = 'none'; } }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Travel & Adventure Blog Card</title> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Montserrat', sans-serif; background-color: #f9f5f0; display: flex; justify-content: center; align-items: center; min-height: 700px; padding: 20px; perspective: 1000px; } .container { width: 100%; max-width: 650px; height: auto; max-height: 650px; position: relative; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .card { width: 100%; height: 100%; background-color: #fff; border-radius: 12px; box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); overflow: hidden; position: relative; transform-style: preserve-3d; cursor: pointer; } .card-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .card:hover .card-inner { transform: rotateY(25deg); } .card-front { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; overflow: hidden; } .image-container { width: 100%; height: 100%; position: relative; overflow: hidden; } .image-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; filter: brightness(0.85) saturate(1.2) contrast(1.1); } .card:hover .image-container img { transform: scale(1.05); } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(97, 54, 21, 0.8) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; color: #fff; z-index: 2; } .location-tag { display: inline-block; padding: 6px 12px; background-color: #e67e22; color: white; border-radius: 20px; font-size: 12px; font-weight: 600; letter-spacing: 1px; transform: translateY(50px); opacity: 0; transition: all 0.3s ease 0.1s; margin-bottom: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .card:hover .location-tag { transform: translateY(0); opacity: 1; } .card-title { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 700; margin-bottom: 15px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); transform: translateY(30px); opacity: 0; transition: all 0.3s ease 0.2s; } .card:hover .card-title { transform: translateY(0); opacity: 1; } .card-description { font-size: 16px; line-height: 1.6; margin-bottom: 20px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transform: translateY(20px); opacity: 0; transition: all 0.3s ease 0.3s; } .card:hover .card-description { transform: translateY(0); opacity: 1; } .postcard-flap { position: absolute; right: -20px; top: 0; height: 100%; width: 60px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 100%); transform: skewX(-5deg) translateX(100%); transition: transform 0.4s ease; z-index: 3; pointer-events: none; } .card:hover .postcard-flap { transform: skewX(-5deg) translateX(0%); } .stats { display: flex; font-size: 14px; color: rgba(255, 255, 255, 0.9); transform: translateY(20px); opacity: 0; transition: all 0.3s ease 0.4s; } .card:hover .stats { transform: translateY(0); opacity: 1; } .stats span { display: flex; align-items: center; margin-right: 20px; } .stats i { margin-right: 5px; } .explore-button { display: inline-flex; align-items: center; padding: 10px 20px; background-color: #e67e22; color: white; border: none; border-radius: 25px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.3s ease; transform: translateY(20px); opacity: 0; transition: all 0.3s ease 0.5s; text-decoration: none; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .card:hover .explore-button { transform: translateY(0); opacity: 1; } .explore-button:hover { background-color: #d35400; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } .explore-button i { margin-left: 8px; transition: transform 0.3s ease; } .explore-button:hover i { transform: translateX(4px); } .stamp { position: absolute; top: 30px; right: 30px; width: 80px; height: 80px; background-color: rgba(255, 255, 255, 0.9); border-radius: 8px; transform: rotate(10deg); display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 3; overflow: hidden; border: 1px dashed #e67e22; transition: all 0.3s ease; } .stamp:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( 45deg, transparent, transparent 5px, rgba(230, 126, 34, 0.1) 5px, rgba(230, 126, 34, 0.1) 10px ); } .stamp-content { font-family: 'Playfair Display', serif; color: #e67e22; font-size: 12px; font-weight: bold; transform: rotate(-10deg); text-align: center; line-height: 1.2; } .card:hover .stamp { transform: rotate(5deg) scale(1.1); } .texture-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/png;base64,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'); background-size: cover; mix-blend-mode: overlay; opacity: 0.4; z-index: 1; pointer-events: none; } /* Animation for the compass */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .compass { position: absolute; top: 28px; left: 28px; width: 60px; height: 60px; background-color: rgba(255, 255, 255, 0.9); border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); z-index: 3; animation: pulse 3s infinite ease-in-out; transition: all 0.3s ease; } .compass svg { width: 40px; height: 40px; fill: #e67e22; } .card:hover .compass { transform: rotate(360deg); } /* Responsive styles */ @media (max-width: 600px) { .card-title { font-size: 24px; } .card-description { font-size: 14px; } .overlay { padding: 20px; } .stamp { width: 60px; height: 60px; top: 20px; right: 20px; } .compass { width: 50px; height: 50px; top: 20px; left: 20px; } .compass svg { width: 30px; height: 30px; } } </style> </head> <body> <div class="container"> <div class="card"> <div class="card-inner"> <div class="card-front"> <div class="image-container"> <img src="https://images.unsplash.com/photo-1490806843957-31f4c9a91c65?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="Ancient Temples of Bali"> <div class="texture-overlay"></div> </div> <div class="overlay"> <span class="location-tag">SOUTH ASIA</span> <h2 class="card-title">Ancient Temples of Bali</h2> <p class="card-description">Exploring the mist-shrouded temples nestled among emerald rice terraces. Where incense and history intertwine under centuries-old stone gates.</p> <div class="stats"> <span><i>🗓️</i> 10 days</span> <span><i>🌡️</i> 29°C</span> <span><i>⭐</i> 4.8/5</span> </div> <button class="explore-button">EXPLORE JOURNEY <i>→</i></button> </div> <div class="compass"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/> <path d="m17.688 7.313-8 3c-.234.085-.43.281-.515.515l-3 8c-.187.5.325 1.012.825.825l8-3c.234-.085.43-.281.515-.515l3-8c.187-.5-.325-1.012-.825-.825zM12 14c-1.104 0-2-.896-2-2s.896-2 2-2 2 .896 2 2-.896 2-2 2z"/> </svg> </div> <div class="stamp"> <div class="stamp-content">BALI<br>2023</div> </div> <div class="postcard-flap"></div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const card = document.querySelector('.card'); const cardInner = document.querySelector('.card-inner'); // 3D rotation effect card.addEventListener('mousemove', function(e) { const xAxis = (window.innerWidth / 2 - e.pageX) / 25; const yAxis = (window.innerHeight / 2 - e.pageY) / 25; cardInner.style.transform = `rotateY(${-xAxis}deg) rotateX(${yAxis}deg)`; }); card.addEventListener('mouseenter', function() { cardInner.style.transition = 'none'; }); card.addEventListener('mouseleave', function() { cardInner.style.transition = 'transform 0.8s cubic-bezier(0.23, 1, 0.32, 1)'; cardInner.style.transform = 'rotateY(0) rotateX(0)'; }); // Prevent default button behavior const exploreButton = document.querySelector('.explore-button'); exploreButton.addEventListener('click', function(e) { e.preventDefault(); // Add a ripple effect const ripple = document.createElement('div'); ripple.className = 'ripple'; ripple.style.position = 'absolute'; ripple.style.width = '20px'; ripple.style.height = '20px'; ripple.style.background = 'rgba(255, 255, 255, 0.7)'; ripple.style.borderRadius = '50%'; ripple.style.transform = 'scale(0)'; ripple.style.transition = 'transform 0.6s ease-out'; ripple.style.pointerEvents = 'none'; const buttonRect = exploreButton.getBoundingClientRect(); ripple.style.left = (e.clientX - buttonRect.left) + 'px'; ripple.style.top = (e.clientY - buttonRect.top) + 'px'; exploreButton.appendChild(ripple); requestAnimationFrame(() => { ripple.style.transform = 'scale(10)'; ripple.style.opacity = '0'; setTimeout(() => { ripple.remove(); }, 600); }); // Add a nice flip animation to simulate "turning the postcard over" cardInner.style.transform = 'rotateY(25deg) scale(0.95)'; setTimeout(() => { cardInner.style.transform = 'rotateY(0) scale(1)'; }, 600); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary: #2b6cb0; --primary-dark: #1a4a7c; --secondary: #edf2f7; --accent: #f0b429; --text: #2d3748; --text-light: #4a5568; --background: #ffffff; --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1); --hover-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); --transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); --radius: 8px; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--secondary); color: var(--text); line-height: 1.6; padding: var(--spacing-md); display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { max-width: 700px; width: 100%; padding: var(--spacing-md); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--spacing-lg); } .card { background-color: var(--background); border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden; transition: var(--transition); position: relative; display: flex; flex-direction: column; height: 100%; } .card:hover { transform: translateY(-5px); box-shadow: var(--hover-shadow); } .card:hover .card__category::after { width: 100%; } .card__header { position: relative; overflow: hidden; } .card__image { display: block; width: 100%; height: 160px; object-fit: cover; transition: var(--transition); } .card:hover .card__image { transform: scale(1.05); } .card__category { position: absolute; top: var(--spacing-md); left: var(--spacing-md); background-color: var(--primary); color: white; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: var(--transition); z-index: 2; } .card__category::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--accent); transition: var(--transition); } .card__body { padding: var(--spacing-lg); flex-grow: 1; display: flex; flex-direction: column; } .card__title { font-size: 1.25rem; font-weight: 700; margin-bottom: var(--spacing-sm); color: var(--text); line-height: 1.4; transition: var(--transition); } .card:hover .card__title { color: var(--primary); } .card__excerpt { color: var(--text-light); font-size: 0.95rem; margin-bottom: var(--spacing-md); position: relative; z-index: 1; } .card__metadata { display: flex; align-items: center; margin-top: auto; font-size: 0.85rem; color: var(--text-light); } .card__metadata-item { display: flex; align-items: center; margin-right: var(--spacing-md); } .card__metadata-item svg { width: 16px; height: 16px; margin-right: 0.25rem; fill: var(--primary); } .card__tooltip { position: absolute; right: var(--spacing-md); bottom: var(--spacing-md); width: 24px; height: 24px; background-color: var(--secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); } .card__tooltip:hover { background-color: var(--primary); } .card__tooltip:hover svg { fill: white; } .card__tooltip svg { width: 14px; height: 14px; fill: var(--primary); transition: var(--transition); } .card__tooltip-content { position: absolute; bottom: 100%; right: 0; width: 200px; background-color: var(--primary); color: white; padding: var(--spacing-md); border-radius: var(--radius); box-shadow: var(--card-shadow); opacity: 0; visibility: hidden; transform: translateY(10px); transition: var(--transition); z-index: 10; font-size: 0.85rem; } .card__tooltip:hover .card__tooltip-content { opacity: 1; visibility: visible; transform: translateY(0); } .card__footer { padding: var(--spacing-md) var(--spacing-lg); border-top: 1px solid var(--secondary); display: flex; align-items: center; justify-content: space-between; } .card__author { display: flex; align-items: center; } .card__author-image { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; margin-right: 0.5rem; border: 2px solid var(--secondary); } .card__author-name { font-size: 0.85rem; font-weight: 600; color: var(--text); } .card__read-more { display: inline-flex; align-items: center; font-size: 0.85rem; font-weight: 600; color: var(--primary); text-decoration: none; transition: var(--transition); position: relative; } .card__read-more::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: var(--primary); transition: var(--transition); } .card__read-more:hover { color: var(--primary-dark); } .card__read-more:hover::after { width: 100%; } .card__read-more svg { width: 14px; height: 14px; margin-left: 0.25rem; fill: currentColor; transition: var(--transition); } .card__read-more:hover svg { transform: translateX(3px); } .highlight-text { background: linear-gradient(transparent 60%, rgba(240, 180, 41, 0.2) 40%); padding: 0 0.15rem; } /* Accessibility focus styles */ .card:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; } .card__read-more:focus { outline: 2px solid var(--primary); outline-offset: 2px; } /* Responsive styles */ @media (max-width: 680px) { .grid { grid-template-columns: 1fr; } .card__image { height: 180px; } } /* Animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .card { animation: fadeIn 0.5s ease forwards; } .card:nth-child(2) { animation-delay: 0.1s; } .card:nth-child(3) { animation-delay: 0.2s; } /* Progress indicator */ .progress-container { height: 4px; width: 100%; position: absolute; top: 0; left: 0; overflow: hidden; z-index: 3; } .progress-bar { height: 100%; width: 0; background-color: var(--accent); transition: width 0.3s ease; } .card:hover .progress-bar { width: 100%; } /* Card states */ .card--new::before { content: 'New'; position: absolute; top: 0; right: 0; background-color: var(--accent); color: var(--text); font-size: 0.7rem; font-weight: 700; padding: 0.25rem 0.5rem; border-radius: 0 var(--radius) 0 var(--radius); z-index: 2; } </style> </head> <body> <div class="container"> <div class="grid"> <article class="card card--new"> <div class="progress-container"> <div class="progress-bar"></div> </div> <header class="card__header"> <img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Educational neuroscience concept" class="card__image"> <span class="card__category">Neuroscience</span> </header> <div class="card__body"> <h2 class="card__title">The Cognitive Science Behind Effective Learning Methods</h2> <p class="card__excerpt">Exploring how <span class="highlight-text">spaced repetition</span> and active recall can improve information retention by up to 300% compared to traditional study methods.</p> <div class="card__metadata"> <span class="card__metadata-item"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/> <path d="M13 7h-2v5.414l3.293 3.293 1.414-1.414L13 11.586z"/> </svg> 8 min read </span> <span class="card__metadata-item"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M21 4h-2v2h-2V4h-2v2h-2V4h-2v2H9V4H7v2H5V4H3v18h18V4zm-2 16H5V10h14v10z"/> <path d="M11 15h6v2h-6z"/> <path d="M7 15h2v2H7z"/> <path d="M11 12h6v2h-6z"/> <path d="M7 12h2v2H7z"/> </svg> May 12, 2023 </span> </div> </div> <div class="card__tooltip"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/> <path d="M11 11h2v6h-2zm0-4h2v2h-2z"/> </svg> <div class="card__tooltip-content"> This article includes interactive diagrams and a downloadable study planner based on cognitive science research from Stanford University. </div> </div> <footer class="card__footer"> <div class="card__author"> <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Dr. Elena Markova" class="card__author-image"> <span class="card__author-name">Dr. Elena Markova</span> </div> <a href="#" class="card__read-more"> Read article <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M5 12h14M12 5l7 7-7 7"/> </svg> </a> </footer> </article> <article class="card"> <div class="progress-container"> <div class="progress-bar"></div> </div> <header class="card__header"> <img src="https://images.unsplash.com/photo-1551033406-611cf9a28f67?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Data visualization example" class="card__image"> <span class="card__category">Data Literacy</span> </header> <div class="card__body"> <h2 class="card__title">Teaching Critical Evaluation of Statistical Claims</h2> <p class="card__excerpt">How to develop <span class="highlight-text">data literacy skills</span> in students through practical exercises that examine real-world statistical misconceptions and misrepresentations.</p> <div class="card__metadata"> <span class="card__metadata-item"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/> <path d="M13 7h-2v5.414l3.293 3.293 1.414-1.414L13 11.586z"/> </svg> 12 min read </span> <span class="card__metadata-item"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M21 4h-2v2h-2V4h-2v2h-2V4h-2v2H9V4H7v2H5V4H3v18h18V4zm-2 16H5V10h14v10z"/> <path d="M11 15h6v2h-6z"/> <path d="M7 15h2v2H7z"/> <path d="M11 12h6v2h-6z"/> <path d="M7 12h2v2H7z"/> </svg> April 28, 2023 </span> </div> </div> <div class="card__tooltip"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/> <path d="M11 11h2v6h-2zm0-4h2v2h-2z"/> </svg> <div class="card__tooltip-content"> Includes 5 classroom-ready exercises with manipulable data visualizations that demonstrate common statistical fallacies. </div> </div> <footer class="card__footer"> <div class="card__author"> <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Prof. James Chen" class="card__author-image"> <span class="card__author-name">Prof. James Chen</span> </div> <a href="#" class="card__read-more"> Read article <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M5 12h14M12 5l7 7-7 7"/> </svg> </a> </footer> </article> <article class="card"> <div class="progress-container"> <div class="progress-bar"></div> </div> <header class="card__header"> <img src="https://images.unsplash.com/photo-1591017403286-fd8493524e1e?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Collaborative learning environment" class="card__image"> <span class="card__category">Pedagogy</span> </header> <div class="card__body"> <h2 class="card__title">Designing for Cognitive Accessibility in Educational Materials</h2> <p class="card__excerpt">Research-backed strategies for creating learning materials that support <span class="highlight-text">neurodivergent students</span> while enhancing learning outcomes for all students.</p> <div class="card__metadata"> <span class="card__metadata-item"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/> <path d="M13 7h-2v5.414l3.293 3.293 1.414-1.414L13 11.586z"/> </svg> 10 min read </span> <span class="card__metadata-item"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M21 4h-2v2h-2V4h-2v2h-2V4h-2v2H9V4H7v2H5V4H3v18h18V4zm-2 16H5V10h14v10z"/> <path d="M11 15h6v2h-6z"/> <path d="M7 15h2v2H7z"/> <path d="M11 12h6v2h-6z"/> <path d="M7 12h2v2H7z"/> </svg> May 3, 2023 </span> </div> </div> <div class="card__tooltip"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/> <path d="M11 11h2v6h-2zm0-4h2v2h-2z"/> </svg> <div class="card__tooltip-content"> Based on a three-year study across 24 classrooms with implementation examples for both digital and print materials. </div> </div> <footer class="card__footer"> <div class="card__author"> <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Dr. Sarah Thompson" class="card__author-image"> <span class="card__author-name">Dr. Sarah Thompson</span> </div> <a href="#" class="card__read-more"> Read article <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M5 12h14M12 5l7 7-7 7"/> </svg> </a> </footer> </article> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Staggered animation for cards const cards = document.querySelectorAll('.card'); cards.forEach((card, index) => { card.style.opacity = '0'; setTimeout(() => { card.style.opacity = '1'; }, 100 * index); }); // Interactive card hover effects cards.forEach(card => { card.addEventListener('mouseenter', function() { // Create a subtle glow effect on hover this.style.boxShadow = '0 10px 20px rgba(43, 108, 176, 0.1), 0 6px 6px rgba(43, 108, 176, 0.1)'; // Animate the progress bar const progressBar = this.querySelector('.progress-bar'); progressBar.style.width = '100%'; }); card.addEventListener('mouseleave', function() { // Reset the shadow this.style.boxShadow = 'var(--card-shadow)'; // Reset the progress bar const progressBar = this.querySelector('.progress-bar'); progressBar.style.width = '0'; }); // Add touch interactions for mobile card.addEventListener('touchstart', function() { this.classList.add('touch-active'); }); card.addEventListener('touchend', function() { this.classList.remove('touch-active'); }); }); // Handle read more button interactions const readMoreButtons = document.querySelectorAll('.card__read-more'); readMoreButtons.forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); // Get the parent card const card = this.closest('.card'); // Add a ripple effect const ripple = document.createElement('span'); ripple.classList.add('ripple'); this.appendChild(ripple); // Animate the ripple setTimeout(() => { ripple.remove(); }, 600); // Show a "saved" indicator briefly const savedIndicator = document.createElement('span'); savedIndicator.textContent = 'Saved for later'; savedIndicator.classList.add('saved-indicator'); savedIndicator.style.position = 'absolute'; savedIndicator.style.top = '-30px'; savedIndicator.style.right = '0'; savedIndicator.style.background = 'var(--primary)'; savedIndicator.style.color = 'white'; savedIndicator.style.padding = '4px 8px'; savedIndicator.style.borderRadius = '4px'; savedIndicator.style.fontSize = '0.75rem'; savedIndicator.style.opacity = '0'; savedIndicator.style.transform = 'translateY(10px)'; savedIndicator.style.transition = 'all 0.3s ease'; this.style.position = 'relative'; this.appendChild(savedIndicator); setTimeout(() => { savedIndicator.style.opacity = '1'; savedIndicator.style.transform = 'translateY(0)'; }, 10); setTimeout(() => { savedIndicator.style.opacity = '0'; savedIndicator.style.transform = 'translateY(-10px)'; setTimeout(() => { savedIndicator.remove(); }, 300); }, 2000); }); }); // Make tooltips accessible with keyboard const tooltips = document.querySelectorAll('.card__tooltip'); tooltips.forEach(tooltip => { tooltip.setAttribute('tabindex', '0'); tooltip.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); const tooltipContent = this.querySelector('.card__tooltip-content'); if (tooltipContent.style.opacity === '1') { tooltipContent.style.opacity = '0'; tooltipContent.style.visibility = 'hidden'; } else { tooltipContent.style.opacity = '1'; tooltipContent.style.visibility = 'visible'; } } }); }); }); </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=Poppins:wght@300;400;500;600;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f8f9fa; padding: 20px; } .container { max-width: 700px; width: 100%; padding: 20px; } .section-title { font-size: 28px; font-weight: 700; margin-bottom: 20px; color: #212529; position: relative; padding-bottom: 10px; } .section-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 60px; height: 3px; background: linear-gradient(90deg, #ff7e5f, #feb47b); border-radius: 3px; } .vlog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; margin-top: 30px; } .vlog-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; cursor: pointer; } .vlog-card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); } .vlog-thumbnail { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ overflow: hidden; } .vlog-thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .vlog-card:hover .vlog-thumbnail img { transform: scale(1.08); } .play-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.2); opacity: 0; transition: opacity 0.3s ease; } .vlog-card:hover .play-overlay { opacity: 1; } .play-icon { width: 60px; height: 60px; background: rgba(255, 255, 255, 0.9); border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transform: scale(0.8); transition: all 0.3s ease; } .play-icon svg { width: 24px; height: 24px; fill: #ff7e5f; margin-left: 4px; } .vlog-card:hover .play-icon { transform: scale(1); background: #fff; } .vlog-content { padding: 20px; } .vlog-category { display: inline-block; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 30px; margin-bottom: 10px; color: #fff; background: linear-gradient(90deg, #ff7e5f, #feb47b); box-shadow: 0 4px 10px rgba(255, 126, 95, 0.2); } .vlog-title { font-size: 18px; font-weight: 600; color: #212529; margin-bottom: 8px; line-height: 1.4; transition: color 0.3s ease; } .vlog-card:hover .vlog-title { color: #ff7e5f; } .vlog-meta { display: flex; align-items: center; margin-top: 15px; padding-top: 15px; border-top: 1px solid #f2f2f2; } .vlog-author { display: flex; align-items: center; } .author-avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; margin-right: 10px; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .author-avatar img { width: 100%; height: 100%; object-fit: cover; } .author-name { font-size: 13px; font-weight: 500; color: #495057; } .vlog-stats { margin-left: auto; display: flex; align-items: center; } .stat-item { display: flex; align-items: center; margin-left: 15px; font-size: 13px; color: #6c757d; } .stat-item svg { width: 14px; height: 14px; margin-right: 5px; fill: #adb5bd; } .duration-badge { position: absolute; bottom: 10px; right: 10px; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; z-index: 2; } .ribbon { position: absolute; top: 10px; left: -15px; padding: 5px 15px; background: #4361ee; color: white; font-size: 11px; font-weight: 600; z-index: 5; transform: rotate(-3deg); box-shadow: 0 2px 5px rgba(0,0,0,0.2); } .ribbon::after { content: ''; position: absolute; bottom: -10px; left: 0; border-top: 10px solid #2a3eb1; border-left: 15px solid transparent; } .fresh { background: #4361ee; } .trending { background: #f72585; } .trending::after { border-top-color: #c01a69; } @media (max-width: 700px) { .vlog-grid { grid-template-columns: 1fr; } .section-title { font-size: 24px; } } /* Shimmer animation on hover */ .vlog-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.2), transparent ); z-index: 1; transition: all 0.6s ease; } .vlog-card:hover::before { left: 100%; } </style> </head> <body> <div class="container"> <h2 class="section-title">Trending Vlogs</h2> <div class="vlog-grid"> <div class="vlog-card"> <div class="ribbon trending">TRENDING</div> <div class="vlog-thumbnail"> <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Morning Routine Vlog"> <div class="play-overlay"> <div class="play-icon"> <svg viewBox="0 0 24 24"> <path d="M8 5v14l11-7z"/> </svg> </div> </div> <div class="duration-badge">12:47</div> </div> <div class="vlog-content"> <span class="vlog-category">Morning Routine</span> <h3 class="vlog-title">5 AM Productivity Ritual That Changed My Life</h3> <div class="vlog-meta"> <div class="vlog-author"> <div class="author-avatar"> <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Sophie Chen"> </div> <span class="author-name">Sophie Chen</span> </div> <div class="vlog-stats"> <div class="stat-item"> <svg viewBox="0 0 24 24"> <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/> </svg> <span>8.2K</span> </div> <div class="stat-item"> <svg viewBox="0 0 24 24"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </svg> <span>426</span> </div> </div> </div> </div> </div> <div class="vlog-card"> <div class="vlog-thumbnail"> <img src="https://images.unsplash.com/photo-1515378960530-7c0da6231fb1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Home Office Setup"> <div class="play-overlay"> <div class="play-icon"> <svg viewBox="0 0 24 24"> <path d="M8 5v14l11-7z"/> </svg> </div> </div> <div class="duration-badge">18:23</div> </div> <div class="vlog-content"> <span class="vlog-category">Workspace</span> <h3 class="vlog-title">Complete WFH Setup Tour: Productivity & Comfort</h3> <div class="vlog-meta"> <div class="vlog-author"> <div class="author-avatar"> <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Alex Rivera"> </div> <span class="author-name">Alex Rivera</span> </div> <div class="vlog-stats"> <div class="stat-item"> <svg viewBox="0 0 24 24"> <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/> </svg> <span>5.7K</span> </div> <div class="stat-item"> <svg viewBox="0 0 24 24"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </svg> <span>312</span> </div> </div> </div> </div> </div> <div class="vlog-card"> <div class="ribbon fresh">NEW</div> <div class="vlog-thumbnail"> <img src="https://images.unsplash.com/photo-1536304993881-ff6e9eefa2a6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Travel Journaling"> <div class="play-overlay"> <div class="play-icon"> <svg viewBox="0 0 24 24"> <path d="M8 5v14l11-7z"/> </svg> </div> </div> <div class="duration-badge">22:05</div> </div> <div class="vlog-content"> <span class="vlog-category">Travel</span> <h3 class="vlog-title">Hidden Gems of Tokyo: Local's Guide to Secret Spots</h3> <div class="vlog-meta"> <div class="vlog-author"> <div class="author-avatar"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Mia Wong"> </div> <span class="author-name">Mia Wong</span> </div> <div class="vlog-stats"> <div class="stat-item"> <svg viewBox="0 0 24 24"> <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/> </svg> <span>3.4K</span> </div> <div class="stat-item"> <svg viewBox="0 0 24 24"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </svg> <span>198</span> </div> </div> </div> </div> </div> </div> </div> <script> // Add interactive hover effects document.querySelectorAll('.vlog-card').forEach(card => { // Create ripple effect on click card.addEventListener('click', function(e) { let ripple = document.createElement('span'); ripple.classList.add('ripple'); let x = e.clientX - e.target.getBoundingClientRect().left; let y = e.clientY - e.target.getBoundingClientRect().top; ripple.style.cssText = ` position: absolute; background-color: rgba(255, 255, 255, 0.7); border-radius: 50%; width: 5px; height: 5px; top: ${y}px; left: ${x}px; transform: scale(0); animation: ripple-effect 0.6s linear; z-index: 10; `; card.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); }); // Add CSS for ripple animation let style = document.createElement('style'); style.innerHTML = ` @keyframes ripple-effect { to { transform: scale(20); opacity: 0; } } .vlog-category { position: relative; overflow: hidden; } .vlog-category::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: all 0.6s ease; } .vlog-card:hover .vlog-category::before { left: 100%; } `; document.head.appendChild(style); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NUANCE | Fashion Blog</title> <style> @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Montserrat:wght@300;400;500;600&display=swap'); :root { --main-bg: #f8f8f8; --card-bg: #ffffff; --text-primary: #1a1a1a; --text-secondary: #555555; --accent: #ff3366; --border: #e0e0e0; --shadow: rgba(0, 0, 0, 0.05); --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--main-bg); font-family: 'Montserrat', sans-serif; color: var(--text-primary); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .container { width: 100%; max-width: 700px; height: 700px; perspective: 1000px; overflow-y: auto; scrollbar-width: none; } .container::-webkit-scrollbar { display: none; } .blog-card { position: relative; width: 100%; background: var(--card-bg); border-radius: 2px; box-shadow: 0 15px 35px var(--shadow); overflow: hidden; transform-style: preserve-3d; margin-bottom: 40px; } .image-container { position: relative; width: 100%; height: 380px; overflow: hidden; } .image-container img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: var(--transition); } .blog-card:hover .image-container img { transform: scale(1.05); filter: grayscale(0%); } .accent-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background-color: var(--accent); transform: scaleX(0); transform-origin: left; transition: var(--transition); } .blog-card:hover .accent-overlay { transform: scaleX(1); } .content { padding: 30px; position: relative; z-index: 1; } .category { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; color: var(--accent); font-weight: 500; position: relative; overflow: hidden; } .category::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: var(--accent); transform: scaleX(0); transform-origin: right; transition: var(--transition); } .blog-card:hover .category::after { transform: scaleX(1); transform-origin: left; } .title { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 500; line-height: 1.2; margin-bottom: 16px; transition: var(--transition); } .excerpt { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 25px; } .meta { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-secondary); } .author { display: flex; align-items: center; } .author-avatar { width: 28px; height: 28px; border-radius: 50%; margin-right: 10px; overflow: hidden; } .author-avatar img { width: 100%; height: 100%; object-fit: cover; } .read-more { display: inline-flex; align-items: center; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-primary); transition: var(--transition); cursor: pointer; } .read-more:hover { color: var(--accent); } .read-more svg { margin-left: 8px; width: 14px; height: 14px; transition: var(--transition); } .read-more:hover svg { transform: translateX(4px); } .extra-content { max-height: 0; overflow: hidden; transition: var(--transition); margin-top: 0; opacity: 0; } .expanded .extra-content { max-height: 500px; margin-top: 25px; opacity: 1; } .workshop-info { background-color: rgba(255, 51, 102, 0.05); border-left: 3px solid var(--accent); padding: 20px; margin-bottom: 20px; } .workshop-title { font-family: 'Cormorant Garamond', serif; font-size: 18px; margin-bottom: 10px; } .workshop-details { font-size: 13px; color: var(--text-secondary); line-height: 1.6; } .products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px; } .product { position: relative; overflow: hidden; border-radius: 2px; cursor: pointer; } .product-image { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: var(--transition); } .product:hover .product-image { transform: scale(1.1); } .product-info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); color: white; transform: translateY(100%); transition: var(--transition); } .product:hover .product-info { transform: translateY(0); } .product-name { font-size: 12px; font-weight: 500; margin-bottom: 4px; } .product-price { font-size: 11px; opacity: 0.8; } .blog-footer { padding: 20px 30px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .social-icons { display: flex; gap: 15px; } .social-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--main-bg); color: var(--text-secondary); transition: var(--transition); cursor: pointer; } .social-icon:hover { background-color: var(--accent); color: white; transform: translateY(-3px); } .social-icon svg { width: 16px; height: 16px; } .newsletter { display: flex; align-items: center; } .newsletter-input { width: 180px; height: 36px; border: 1px solid var(--border); border-radius: 2px 0 0 2px; padding: 0 12px; font-family: 'Montserrat', sans-serif; font-size: 12px; transition: var(--transition); } .newsletter-input:focus { outline: none; border-color: var(--accent); } .newsletter-btn { height: 36px; padding: 0 15px; background-color: var(--text-primary); color: white; border: none; border-radius: 0 2px 2px 0; font-family: 'Montserrat', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: var(--transition); } .newsletter-btn:hover { background-color: var(--accent); } .page-indicator { position: fixed; top: 50%; right: 20px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 10; } .indicator-dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--border); transition: var(--transition); cursor: pointer; } .indicator-dot.active { background-color: var(--accent); transform: scale(1.5); } /* Responsive adjustments */ @media (max-width: 600px) { .image-container { height: 250px; } .content { padding: 20px; } .title { font-size: 22px; } .products { grid-template-columns: repeat(2, 1fr); } .blog-footer { flex-direction: column; gap: 15px; } .newsletter { width: 100%; } .newsletter-input { flex: 1; } .page-indicator { display: none; } } @media (max-width: 400px) { .products { grid-template-columns: 1fr; } } </style> </head> <body> <div class="container"> <article class="blog-card" id="card1"> <div class="image-container"> <img src="https://images.unsplash.com/photo-1583074211430-e025d29d7d55?q=80&w=2070&auto=format&fit=crop" alt="Sustainable Fashion"> <div class="accent-overlay"></div> </div> <div class="content"> <span class="category">Sustainable Style</span> <h2 class="title">Minimalism Meets Consciousness: The Rise of Slow Fashion</h2> <p class="excerpt">In an era of overconsumption, the quiet rebellion of minimalist slow fashion offers a thoughtful alternative. Discover how design houses are reimagining timeless silhouettes with eco-conscious materials, creating pieces that transcend seasonal trends.</p> <div class="meta"> <div class="author"> <div class="author-avatar"> <img src="https://images.unsplash.com/photo-1589571894960-20bbe2828d0a?q=80&w=1586&auto=format&fit=crop" alt="Author"> </div> <span>By Claire Fontaine • May 18, 2023</span> </div> <div class="read-more" onclick="toggleExpand('card1')"> <span class="read-more-text">Read More</span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="5" y1="12" x2="19" y2="12"></line> <polyline points="12 5 19 12 12 19"></polyline> </svg> </div> </div> <div class="extra-content"> <div class="workshop-info"> <h3 class="workshop-title">Upcoming Workshop: Capsule Wardrobe Mastery</h3> <p class="workshop-details">Join our exclusive virtual workshop with stylist Emma Laurent to learn how to curate a 30-piece capsule wardrobe that works seamlessly for all seasons. Discover fabric selection techniques, color theory, and sustainable brand recommendations.</p> <p class="workshop-details"><strong>Date:</strong> June 12, 2023 • <strong>Time:</strong> 7:00 PM CET • <strong>Duration:</strong> 90 minutes</p> </div> <p>The principles of minimalist fashion extend beyond aesthetics—they represent a philosophy of intentional consumption and appreciation for craftsmanship. Leading this movement are independent studios focusing on natural fibers, zero-waste pattern cutting, and transparent production cycles.</p> <div class="products"> <div class="product"> <img class="product-image" src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?q=80&w=1587&auto=format&fit=crop" alt="Linen Blazer"> <div class="product-info"> <h4 class="product-name">Organic Linen Blazer</h4> <p class="product-price">€289</p> </div> </div> <div class="product"> <img class="product-image" src="https://images.unsplash.com/photo-1543076447-215ad9ba6923?q=80&w=1587&auto=format&fit=crop" alt="Silk Scarf"> <div class="product-info"> <h4 class="product-name">Peace Silk Scarf</h4> <p class="product-price">€120</p> </div> </div> <div class="product"> <img class="product-image" src="https://images.unsplash.com/photo-1603808033192-082d6919d3e1?q=80&w=1615&auto=format&fit=crop" alt="Hemp Trousers"> <div class="product-info"> <h4 class="product-name">Hemp Canvas Trousers</h4> <p class="product-price">€175</p> </div> </div> </div> </div> </div> <div class="blog-footer"> <div class="social-icons"> <div class="social-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path> </svg> </div> <div class="social-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect> <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path> <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line> </svg> </div> <div class="social-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path> </svg> </div> </div> <div class="newsletter"> <input type="email" class="newsletter-input" placeholder="Your email for updates"> <button class="newsletter-btn">Subscribe</button> </div> </div> </article> <article class="blog-card" id="card2"> <div class="image-container"> <img src="https://images.unsplash.com/photo-1509631179647-0177331693ae?q=80&w=1976&auto=format&fit=crop" alt="Parisian Style"> <div class="accent-overlay"></div> </div> <div class="content"> <span class="category">Style Guide</span> <h2 class="title">Parisian Effortlessness: The Enduring Allure of French Minimalism</h2> <p class="excerpt">The French approach to style has always embraced the philosophy that less is more. We examine how contemporary Parisian designers are redefining the iconic French silhouette while maintaining its core principles of quality, simplicity, and subtle sophistication.</p> <div class="meta"> <div class="author"> <div class="author-avatar"> <img src="https://images.unsplash.com/photo-1567532939604-b6b5b0db2604?q=80&w=1587&auto=format&fit=crop" alt="Author"> </div> <span>By Mathilde Laurent • May 10, 2023</span> </div> <div class="read-more" onclick="toggleExpand('card2')"> <span class="read-more-text">Read More</span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="5" y1="12" x2="19" y2="12"></line> <polyline points="12 5 19 12 12 19"></polyline> </svg> </div> </div> <div class="extra-content"> <div class="workshop-info"> <h3 class="workshop-title">Paris Fashion Week Highlights: Insider's View</h3> <p class="workshop-details">Get exclusive access to our curated digital presentation featuring backstage moments, designer interviews, and trend analysis from this season's most influential Parisian runway shows.</p> <p class="workshop-details"><strong>Release Date:</strong> May 25, 2023 • <strong>Access:</strong> Premium Subscribers</p> </div> <p>The quintessential Parisian wardrobe revolves around investment pieces that transcend trends—the perfectly cut blazer, the impeccable white shirt, and the tailored trouser. Yet what distinguishes contemporary French minimalism is its subtle incorporation of architectural elements and asymmetrical details that create interest without overwhelming the silhouette.</p> <div class="products"> <div class="product"> <img class="product-image" src="https://images.unsplash.com/photo-1591369822096-ffd140ec948f?q=80&w=1587&auto=format&fit=crop" alt="Wool Coat"> <div class="product-info"> <h4 class="product-name">Merino Wool Coat</h4> <p class="product-price">€495</p> </div> </div> <div class="product"> <img class="product-image" src="https://images.unsplash.com/photo-1565084888279-aca607ecce0c?q=80&w=1470&auto=format&fit=crop" alt="Cashmere Scarf"> <div class="product-info"> <h4 class="product-name">Cashmere Neck Scarf</h4> <p class="product-price">€165</p> </div> </div> <div class="product"> <img class="product-image" src="https://images.unsplash.com/photo-1553062407-98eeb64c6a62?q=80&w=1587&auto=format&fit=crop" alt="Leather Boots"> <div class="product-info"> <h4 class="product-name">Calfskin Ankle Boots</h4> <p class="product-price">€320</p> </div> </div> </div> </div> </div> <div class="blog-footer"> <div class="social-icons"> <div class="social-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path> </svg> </div> <div class="social-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect> <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path> <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line> </svg> </div> <div class="social-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path> </svg> </div> </div> <div class="newsletter"> <input type="email" class="newsletter-input" placeholder="Your email for updates"> <button class="newsletter-btn">Subscribe</button> </div> </div> </article> </div> <div class="page-indicator"> <div class="indicator-dot active" data-card="card1"></div> <div class="indicator-dot" data-card="card2"></div> </div> <script> function toggleExpand(cardId) { const card = document.getElementById(cardId); card.classList.toggle('expanded'); const readMoreText = card.querySelector('.read-more-text'); if (card.classList.contains('expanded')) { readMoreText.textContent = 'Read Less'; } else { readMoreText.textContent = 'Read More'; } } // Page indicator functionality const indicators = document.querySelectorAll('.indicator-dot'); const cards = document.querySelectorAll('.blog-card'); const container = document.querySelector('.container'); indicators.forEach(dot => { dot.addEventListener('click', () => { const targetCard = document.getElementById(dot.dataset.card); targetCard.scrollIntoView({ behavior: 'smooth' }); }); }); // Update active indicator on scroll container.addEventListener('scroll', () => { const scrollPosition = container.scrollTop; const threshold = 300; cards.forEach((card, index) => { const cardPosition = card.offsetTop; if (scrollPosition >= cardPosition - threshold) { indicators.forEach(dot => dot.classList.remove('active')); indicators[index].classList.add('active'); } }); }); // Prevent form submission document.querySelectorAll('.newsletter').forEach(form => { form.addEventListener('submit', (e) => { e.preventDefault(); }); }); // Newsletter button click handler document.querySelectorAll('.newsletter-btn').forEach(btn => { btn.addEventListener('click', (e) => { e.preventDefault(); const input = btn.previousElementSibling; if (input.value.trim() !== '') { input.value = ''; input.placeholder = 'Thanks for subscribing!'; setTimeout(() => { input.placeholder = 'Your email for updates'; }, 3000); } }); }); </script> </body> </html>
