In today's digital age, a well-designed business card remains a powerful tool for making a lasting impression. Whether you're a seasoned professional or just starting out, the right business card can set you apart from the competition.
From minimalist designs to bold, creative layouts, we've curated a list of 10 business card examples that showcase the best in contemporary design. These examples will inspire you to create a card that truly represents your brand.
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 business card game with Subframe's drag-and-drop interface. Its intuitive, responsive canvas ensures pixel-perfect UI every time.
Loved by creatives, Subframe makes designing seamless and fun. Start for free and bring your vision to life 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 design game? With Subframe, you can create stunning, pixel-perfect UIs, including business cards, in minutes. Its drag-and-drop interface ensures efficiency and precision.
Don't wait! Start for free and bring your creative vision to life immediately.
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nexus Tech Business Card</title> <style> :root { --primary-color: #000; --secondary-color: #fff; --accent-color: #00c2ff; --font-primary: 'Manrope', sans-serif; --card-width: 350px; --card-height: 200px; } * { margin: 0; padding: 0; box-sizing: border-box; } @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap'); body { font-family: var(--font-primary); background: #f5f5f5; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .container { width: 100%; max-width: 700px; height: 700px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(145deg, #e6e6e6, #ffffff); border-radius: 20px; padding: 20px; position: relative; overflow: hidden; } .card-container { perspective: 1000px; margin-bottom: 30px; } .card { width: var(--card-width); height: var(--card-height); position: relative; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .card.flipped { transform: rotateY(180deg); } .front, .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; padding: 20px; overflow: hidden; } .front { background-color: var(--secondary-color); color: var(--primary-color); } .back { background-color: var(--primary-color); color: var(--secondary-color); transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: space-between; } .logo { font-size: 24px; font-weight: 800; margin-bottom: 10px; display: flex; align-items: center; position: relative; } .logo-icon { width: 30px; height: 30px; border-radius: 5px; background-color: var(--accent-color); margin-right: 10px; position: relative; overflow: hidden; } .logo-icon::before { content: ""; position: absolute; width: 60%; height: 60%; background-color: var(--secondary-color); top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); animation: pulse 3s infinite; } .embossed { position: relative; color: var(--primary-color); text-shadow: 0 1px 0 rgba(255,255,255,0.5); } .embossed::after { content: "NEXUS"; position: absolute; top: 1px; left: 1px; color: rgba(0,0,0,0.3); z-index: -1; } .name { font-size: 18px; font-weight: 600; margin-bottom: 5px; } .title { font-size: 14px; font-weight: 300; color: #555; margin-bottom: 15px; } .contact { font-size: 12px; margin-bottom: 5px; display: flex; align-items: center; } .contact-icon { margin-right: 5px; color: var(--accent-color); } .qr-container { display: flex; justify-content: flex-end; margin-top: 20px; } .qr-code { width: 70px; height: 70px; background-color: var(--secondary-color); border-radius: 5px; position: relative; overflow: hidden; } .qr-code canvas { width: 100%; height: 100%; } .back-content { padding: 10px 0; } .tagline { font-size: 12px; font-weight: 300; margin-bottom: 15px; color: #aaa; } .socials { display: flex; gap: 10px; margin-top: 10px; } .social-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgba(255,255,255,0.1); color: var(--secondary-color); transition: all 0.3s ease; cursor: pointer; } .social-icon:hover { background-color: var(--accent-color); transform: translateY(-3px); } .info-text { text-align: center; font-size: 14px; margin: 20px 0; color: #555; max-width: 450px; } .cta-button { padding: 10px 20px; background-color: var(--primary-color); color: var(--secondary-color); border: none; border-radius: 5px; font-family: var(--font-primary); font-weight: 600; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .cta-button::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 ease; } .cta-button:hover { background-color: var(--accent-color); } .cta-button:hover::before { left: 100%; } .accent-circle { position: absolute; width: 200px; height: 200px; border-radius: 50%; background-color: var(--accent-color); opacity: 0.05; z-index: -1; } .circle-1 { top: -100px; right: -100px; } .circle-2 { bottom: -50px; left: -100px; } @keyframes pulse { 0% { transform: translate(-50%, -50%) rotate(45deg) scale(1); } 50% { transform: translate(-50%, -50%) rotate(45deg) scale(1.1); } 100% { transform: translate(-50%, -50%) rotate(45deg) scale(1); } } .digital-effect { position: absolute; width: 100%; height: 2px; background: linear-gradient(to right, transparent, var(--accent-color), transparent); top: 50%; left: 0; opacity: 0; transform: translateY(-50%); animation: scanEffect 3s infinite; } @keyframes scanEffect { 0% { top: 0; opacity: 0.5; } 50% { opacity: 0.8; } 100% { top: 100%; opacity: 0.5; } } @media (max-width: 550px) { .container { padding: 15px; } .card { width: calc(var(--card-width) * 0.9); height: calc(var(--card-height) * 0.9); } .info-text { font-size: 12px; padding: 0 15px; } } </style> </head> <body> <div class="container"> <div class="accent-circle circle-1"></div> <div class="accent-circle circle-2"></div> <div class="card-container"> <div class="card" id="businessCard"> <div class="front"> <div class="digital-effect"></div> <div class="logo"> <div class="logo-icon"></div> <span class="embossed">NEXUS</span> </div> <div class="name">Alex Morgan</div> <div class="title">Chief Technology Officer</div> <div class="contact"> <span class="contact-icon">✉</span> [email protected] </div> <div class="contact"> <span class="contact-icon">☏</span> +1 (415) 555-8732 </div> <div class="qr-container"> <div class="qr-code" id="qrCode"></div> </div> </div> <div class="back"> <div class="digital-effect"></div> <div class="back-content"> <div class="logo"> <div class="logo-icon"></div> <span>NEXUS</span> </div> <div class="tagline">Simplifying complexity through elegant technology</div> <div>nexustech.io</div> <div class="socials"> <div class="social-icon">in</div> <div class="social-icon">tw</div> <div class="social-icon">gh</div> </div> </div> <div> <div>101 Innovation Way</div> <div>San Francisco, CA 94103</div> </div> </div> </div> </div> <div class="info-text"> Click on the business card to see both sides. Our minimalist design emphasizes what matters most — your digital presence and core identity. </div> <button class="cta-button" id="downloadBtn">Save Digital Card</button> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { // Initialize QR Code new QRCode(document.getElementById("qrCode"), { text: "https://nexustech.io/alex", width: 70, height: 70, colorDark : "#000000", colorLight : "#ffffff", correctLevel : QRCode.CorrectLevel.H }); // Card flip animation const card = document.getElementById('businessCard'); card.addEventListener('click', function() { card.classList.toggle('flipped'); }); // Download button animation const downloadBtn = document.getElementById('downloadBtn'); downloadBtn.addEventListener('click', function(e) { e.preventDefault(); // Add animation class this.classList.add('clicked'); // Show success feedback this.textContent = "Card Saved ✓"; // Reset after animation setTimeout(() => { this.textContent = "Save Digital Card"; this.classList.remove('clicked'); }, 2000); }); // Add hover animation to social icons const socialIcons = document.querySelectorAll('.social-icon'); socialIcons.forEach(icon => { icon.addEventListener('mouseover', function() { this.style.transform = 'translateY(-3px)'; this.style.backgroundColor = 'var(--accent-color)'; }); icon.addEventListener('mouseout', function() { this.style.transform = 'translateY(0)'; this.style.backgroundColor = 'rgba(255,255,255,0.1)'; }); }); // Add subtle floating animation to card let floatAnimation; function startFloating() { let angle = 0; floatAnimation = setInterval(() => { const translateY = Math.sin(angle) * 5; card.style.transform = `translateY(${translateY}px) rotateY(${card.classList.contains('flipped') ? '180deg' : '0deg'})`; angle += 0.05; }, 50); } function stopFloating() { clearInterval(floatAnimation); card.style.transform = card.classList.contains('flipped') ? 'rotateY(180deg)' : 'rotateY(0deg)'; } const cardContainer = document.querySelector('.card-container'); cardContainer.addEventListener('mouseenter', startFloating); cardContainer.addEventListener('mouseleave', stopFloating); // Add random digital glitch effect occasionally setInterval(() => { const digitalEffects = document.querySelectorAll('.digital-effect'); digitalEffects.forEach(effect => { effect.style.opacity = '1'; setTimeout(() => { effect.style.opacity = '0'; }, 1000); }); }, 8000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --neon-pink: #ff00ff; --neon-blue: #00ffff; --neon-green: #00ff7f; --dark-bg: #0a0a0a; --card-bg: #111111; --text-color: #f0f0f0; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; } body { background-color: var(--dark-bg); color: var(--text-color); display: flex; justify-content: center; align-items: center; min-height: 700px; width: 100%; overflow: hidden; } .container { width: 90%; max-width: 600px; height: 600px; position: relative; perspective: 1000px; } .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1); background-color: var(--card-bg); border-radius: 10px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); overflow: hidden; } .card:hover { transform: rotateY(180deg); } .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; padding: 40px; overflow: hidden; } .card-front { background-color: var(--card-bg); } .card-back { background-color: var(--card-bg); transform: rotateY(180deg); } .laser-cut { position: absolute; pointer-events: none; } .laser-cut.square { width: 250px; height: 250px; border: 2px solid var(--neon-pink); top: -60px; right: -100px; transform: rotate(15deg); box-shadow: 0 0 20px var(--neon-pink); opacity: 0.4; } .laser-cut.circle { width: 300px; height: 300px; border: 2px solid var(--neon-blue); border-radius: 50%; bottom: -150px; left: -100px; box-shadow: 0 0 20px var(--neon-blue); opacity: 0.4; } .laser-cut.triangle { width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 200px solid var(--neon-green); top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 20px var(--neon-green); opacity: 0.15; } .logo { font-size: 24px; font-weight: 800; margin-bottom: 20px; position: relative; z-index: 2; } .neon-text { text-shadow: 0 0 8px currentColor; transition: color 0.3s ease; } .logo .neon-text:nth-child(1) { color: var(--neon-pink); } .logo .neon-text:nth-child(2) { color: var(--neon-blue); } .job-title { font-size: 14px; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 40px; opacity: 0.7; } .name { font-size: 32px; font-weight: 700; margin-bottom: 8px; background: linear-gradient(90deg, var(--neon-pink), var(--neon-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; } .tagline { font-size: 16px; margin-bottom: 40px; line-height: 1.5; max-width: 300px; } .contact { margin-top: auto; } .contact-item { display: flex; align-items: center; margin-bottom: 15px; transition: transform 0.3s ease; } .contact-item:hover { transform: translateX(10px); } .icon { width: 20px; height: 20px; margin-right: 15px; display: flex; justify-content: center; align-items: center; } .icon svg { width: 100%; height: 100%; } .contact-text { font-size: 14px; } .social-links { display: flex; gap: 15px; margin-top: 30px; } .social-link { width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; position: relative; z-index: 2; } .social-link svg { width: 20px; height: 20px; fill: var(--text-color); transition: fill 0.3s ease; } .social-link:nth-child(1) { background-color: rgba(255, 0, 255, 0.2); } .social-link:nth-child(2) { background-color: rgba(0, 255, 255, 0.2); } .social-link:nth-child(3) { background-color: rgba(0, 255, 127, 0.2); } .social-link:hover { transform: translateY(-5px); } .social-link:nth-child(1):hover { background-color: var(--neon-pink); } .social-link:nth-child(2):hover { background-color: var(--neon-blue); } .social-link:nth-child(3):hover { background-color: var(--neon-green); } .social-link:hover svg { fill: var(--dark-bg); } .services { margin-top: 20px; position: relative; z-index: 2; } .services-title { font-size: 20px; margin-bottom: 20px; font-weight: 700; color: var(--neon-blue); } .service-list { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .service-item { font-size: 14px; position: relative; padding-left: 20px; } .service-item::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 10px; height: 2px; background-color: var(--neon-pink); } .back-info { margin-top: auto; font-size: 14px; line-height: 1.5; position: relative; z-index: 2; } .back-tagline { color: var(--neon-green); font-weight: 700; margin-bottom: 10px; } .glow-border { position: absolute; inset: 0; pointer-events: none; } .glow-border .border { position: absolute; background: linear-gradient(90deg, var(--neon-pink), var(--neon-blue), var(--neon-green), var(--neon-pink)); background-size: 400% 400%; animation: borderGlow 8s ease infinite; } .glow-border .border-top, .glow-border .border-bottom { height: 2px; width: 100%; left: 0; } .glow-border .border-left, .glow-border .border-right { width: 2px; height: 100%; top: 0; } .glow-border .border-top { top: 0; } .glow-border .border-bottom { bottom: 0; } .glow-border .border-left { left: 0; } .glow-border .border-right { right: 0; } .light-particles { position: absolute; width: 100%; height: 100%; pointer-events: none; overflow: hidden; } .particle { position: absolute; width: 2px; height: 2px; border-radius: 50%; opacity: 0; animation: floating 3s infinite ease-in; } @keyframes borderGlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes floating { 0% { transform: translateY(0) translateX(0); opacity: 0; } 25% { opacity: 0.8; } 75% { opacity: 0.4; } 100% { transform: translateY(-100px) translateX(30px); opacity: 0; } } .flip-hint { position: absolute; right: 20px; bottom: 20px; font-size: 12px; opacity: 0.6; display: flex; align-items: center; gap: 5px; z-index: 5; } .flip-icon { animation: flipHint 2s infinite ease-in-out; display: inline-block; } @keyframes flipHint { 0%, 100% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } } @media (max-width: 500px) { .container { width: 95%; } .card-face { padding: 25px; } .name { font-size: 28px; } .service-list { grid-template-columns: 1fr; } } </style> </head> <body> <div class="container"> <div class="card"> <div class="card-face card-front"> <div class="laser-cut square"></div> <div class="laser-cut circle"></div> <div class="laser-cut triangle"></div> <div class="logo"> <span class="neon-text">NOVA</span><span class="neon-text">SPARK</span> </div> <div class="job-title">Creative Director</div> <div class="name">Alex Reynolds</div> <div class="tagline">Crafting digital experiences that push boundaries and challenge the status quo.</div> <div class="contact"> <div class="contact-item"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/> </svg> </div> <div class="contact-text">[email protected]</div> </div> <div class="contact-item"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/> </svg> </div> <div class="contact-text">(555) 923-7801</div> </div> <div class="contact-item"> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/> </svg> </div> <div class="contact-text">San Francisco, CA</div> </div> <div class="social-links"> <a href="#" class="social-link"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z"/> </svg> </a> <a href="#" class="social-link"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/> </svg> </a> <a href="#" class="social-link"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"/> </svg> </a> </div> </div> <div class="flip-hint"> <span>Flip card</span> <span class="flip-icon">↻</span> </div> <div class="glow-border"> <div class="border border-top"></div> <div class="border border-right"></div> <div class="border border-bottom"></div> <div class="border border-left"></div> </div> <div class="light-particles" id="particles-front"></div> </div> <div class="card-face card-back"> <div class="laser-cut square"></div> <div class="laser-cut circle"></div> <div class="laser-cut triangle"></div> <div class="logo"> <span class="neon-text">NOVA</span><span class="neon-text">SPARK</span> </div> <div class="services"> <div class="services-title">Services</div> <div class="service-list"> <div class="service-item">Brand Strategy</div> <div class="service-item">UI/UX Design</div> <div class="service-item">Interactive Media</div> <div class="service-item">Motion Graphics</div> <div class="service-item">Web Development</div> <div class="service-item">Digital Marketing</div> </div> </div> <div class="back-info"> <div class="back-tagline">Where Digital Arts Meets Innovation</div> <p>NovaSpark transforms ideas into memorable visual experiences through cutting-edge design and innovative thinking. We bring laser-cut precision to every project, merging technical excellence with creative vision.</p> </div> <div class="flip-hint"> <span>Flip card</span> <span class="flip-icon">↻</span> </div> <div class="glow-border"> <div class="border border-top"></div> <div class="border border-right"></div> <div class="border border-bottom"></div> <div class="border border-left"></div> </div> <div class="light-particles" id="particles-back"></div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Create particles function createParticles(containerId, count, colors) { const container = document.getElementById(containerId); for (let i = 0; i < count; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); // Random position const x = Math.random() * 100; const y = Math.random() * 100; // Random color const color = colors[Math.floor(Math.random() * colors.length)]; // Random duration and delay const duration = 3 + Math.random() * 4; const delay = Math.random() * 5; particle.style.left = `${x}%`; particle.style.top = `${y}%`; particle.style.backgroundColor = color; particle.style.animationDuration = `${duration}s`; particle.style.animationDelay = `${delay}s`; container.appendChild(particle); } } const colors = ['#ff00ff', '#00ffff', '#00ff7f']; createParticles('particles-front', 25, colors); createParticles('particles-back', 25, colors); // Mouse move effect for neon elements document.querySelector('.card').addEventListener('mousemove', function(e) { const card = this.getBoundingClientRect(); const x = e.clientX - card.left; const y = e.clientY - card.top; // Calculate distance from center const centerX = card.width / 2; const centerY = card.height / 2; const distanceX = (x - centerX) / 20; const distanceY = (y - centerY) / 20; // Apply subtle transform to laser cut elements const laserCuts = document.querySelectorAll('.laser-cut'); laserCuts.forEach(cut => { cut.style.transform = `translate(${distanceX}px, ${distanceY}px) ${cut.classList.contains('square') ? 'rotate(15deg)' : cut.classList.contains('circle') ? '' : 'rotate(45deg)'}`; }); // Adjust glow intensity based on cursor position const neonTexts = document.querySelectorAll('.neon-text'); neonTexts.forEach(text => { const distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2)); const maxDistance = Math.sqrt(Math.pow(centerX, 2) + Math.pow(centerY, 2)); const intensity = 8 + (12 * (1 - distance / maxDistance)); text.style.textShadow = `0 0 ${intensity}px currentColor`; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Children's Educational Fun Card</title> <style> :root { --primary: #FF6B6B; --secondary: #4ECDC4; --yellow: #FFD166; --purple: #9A7ECC; --blue: #118AB2; --light: #F8F9FA; --dark: #343A40; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Comic Sans MS', 'Chalkboard SE', 'Marker Felt', sans-serif; } body { background-color: #F8F9FA; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; } .container { width: 100%; max-width: 700px; height: 700px; padding: 20px; perspective: 1000px; position: relative; } .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); border-radius: 30px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); } .card.flipped { transform: rotateY(180deg); } .card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 30px; padding: 30px; display: flex; flex-direction: column; overflow: hidden; } .card-front { background: radial-gradient(circle at top left, var(--yellow), var(--primary) 70%); color: var(--dark); z-index: 2; } .card-back { background: linear-gradient(135deg, var(--blue), var(--purple)); color: white; transform: rotateY(180deg); } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .logo { font-size: 28px; font-weight: bold; color: white; background-color: var(--blue); padding: 10px 20px; border-radius: 20px; transform: rotate(-3deg); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1); animation: bounce 2s infinite; } @keyframes bounce { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-10px); } } .flip-btn { background-color: var(--yellow); color: var(--dark); border: none; padding: 8px 16px; border-radius: 50px; cursor: pointer; font-weight: bold; font-size: 16px; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1); transition: all 0.3s; position: relative; z-index: 10; } .flip-btn:hover { transform: translateY(-3px); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1); } .flip-btn:active { transform: translateY(0); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1); } .main-content { flex: 1; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 1; } .title { font-size: 32px; font-weight: bold; margin-bottom: 15px; text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.3); } .fact-area { background-color: white; border-radius: 20px; padding: 20px; margin: 20px 0; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); position: relative; min-height: 120px; display: flex; align-items: center; justify-content: center; text-align: center; } .scratch-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; 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 width="100" height="100" fill="%23FFD166"/><path d="M10 50 L50 10 L90 50 L50 90 Z" fill="%23FF6B6B"/><circle cx="50" cy="50" r="20" fill="%234ECDC4"/></svg>'); background-size: cover; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--dark); font-weight: bold; font-size: 18px; overflow: hidden; } .illustrations { display: flex; justify-content: space-around; margin-top: 20px; } .illustration { width: 80px; height: 80px; background-color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transform: rotate(5deg); transition: all 0.3s; } .illustration:hover { transform: rotate(0) scale(1.1); } .illustration img { width: 60%; height: 60%; object-fit: contain; } .decorations { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; opacity: 0.5; z-index: 0; } .bubble { position: absolute; background-color: rgba(255, 255, 255, 0.2); border-radius: 50%; } .back-title { font-size: 28px; margin-bottom: 20px; color: white; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2); } .fact-collection { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .fact-card { background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); padding: 15px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); font-size: 14px; cursor: pointer; transition: all 0.3s; height: 100%; } .fact-card:hover { transform: translateY(-5px); background-color: rgba(255, 255, 255, 0.3); } .fact-title { font-weight: bold; margin-bottom: 8px; color: var(--yellow); } .age-selector { display: flex; justify-content: center; gap: 10px; margin-top: 20px; } .age-btn { background-color: rgba(255, 255, 255, 0.2); border: none; color: white; padding: 10px 20px; border-radius: 30px; cursor: pointer; transition: all 0.3s; } .age-btn.active { background-color: var(--yellow); color: var(--dark); font-weight: bold; } .floating { animation: float 4s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-10px) rotate(5deg); } 100% { transform: translateY(0px) rotate(0deg); } } .fade-in { opacity: 0; animation: fadeIn 0.5s forwards; } @keyframes fadeIn { to { opacity: 1; } } .character { position: absolute; bottom: -20px; right: -20px; width: 150px; height: 150px; z-index: 0; transform-origin: bottom right; transition: transform 0.3s; } .character:hover { transform: scale(1.1); } @media (max-width: 600px) { .title { font-size: 24px; } .illustrations { margin-top: 10px; } .illustration { width: 60px; height: 60px; } .fact-collection { grid-template-columns: 1fr; } .age-selector { flex-wrap: wrap; } } </style> </head> <body> <div class="container"> <div class="card"> <div class="card-front"> <div class="header"> <div class="logo">BrainPlay</div> <button class="flip-btn" id="flip-to-back">Flip Card</button> </div> <div class="main-content"> <h1 class="title">Curious Minds Explorer</h1> <p>Scratch below to discover an amazing fact!</p> <div class="fact-area"> <p id="fact-text">Did you know that octopuses have three hearts and their blood is blue?</p> <div class="scratch-area" id="scratch-area"> <p>Scratch here for a fun fact!</p> </div> </div> <div class="illustrations"> <div class="illustration floating" style="animation-delay: 0.2s"> <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="#4ECDC4"/> <path d="M8 14C9.10457 14 10 13.1046 10 12C10 10.8954 9.10457 10 8 10C6.89543 10 6 10.8954 6 12C6 13.1046 6.89543 14 8 14Z" fill="white"/> <path d="M16 14C17.1046 14 18 13.1046 18 12C18 10.8954 17.1046 10 16 10C14.8954 10 14 10.8954 14 12C14 13.1046 14.8954 14 16 14Z" fill="white"/> <path d="M15.5 17C15.5 17 14.5 15 12 15C9.5 15 8.5 17 8.5 17" stroke="white" stroke-width="1.5" stroke-linecap="round"/> </svg> </div> <div class="illustration floating" style="animation-delay: 0.4s"> <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17 3L22 7L17 11V3Z" fill="#FF6B6B"/> <path d="M7 3L2 7L7 11V3Z" fill="#FF6B6B"/> <rect x="7" y="1" width="10" height="22" rx="5" fill="#FF6B6B"/> <circle cx="12" cy="7" r="2" fill="white"/> <circle cx="12" cy="16" r="2" fill="white"/> </svg> </div> <div class="illustration floating" style="animation-delay: 0.6s"> <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="#FFD166"/> </svg> </div> <div class="illustration floating" style="animation-delay: 0.8s"> <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2 6H4V18H2V6Z" fill="#9A7ECC"/> <path d="M20 6H22V18H20V6Z" fill="#9A7ECC"/> <path d="M5 2H19C19.5523 2 20 2.44772 20 3V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V3C4 2.44772 4.44772 2 5 2Z" fill="#9A7ECC"/> <rect x="7" y="5" width="10" height="5" rx="1" fill="white"/> <rect x="7" y="12" width="10" height="1" rx="0.5" fill="white"/> <rect x="7" y="15" width="10" height="1" rx="0.5" fill="white"/> <rect x="7" y="18" width="6" height="1" rx="0.5" fill="white"/> </svg> </div> </div> </div> <div class="decorations"> <div class="bubble" style="width: 50px; height: 50px; top: 10%; left: 80%;"></div> <div class="bubble" style="width: 30px; height: 30px; top: 20%; left: 10%;"></div> <div class="bubble" style="width: 40px; height: 40px; top: 70%; left: 85%;"></div> <div class="bubble" style="width: 25px; height: 25px; top: 40%; left: 65%;"></div> <div class="bubble" style="width: 35px; height: 35px; top: 80%; left: 30%;"></div> </div> <div class="character"> <svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M90 120C115.376 120 136 99.3757 136 74C136 48.6243 115.376 28 90 28C64.6243 28 44 48.6243 44 74C44 99.3757 64.6243 120 90 120Z" fill="#4ECDC4"/> <path d="M90 110C110.22 110 126.5 93.7157 126.5 73.5C126.5 53.2843 110.22 37 90 37C69.7843 37 53.5 53.2843 53.5 73.5C53.5 93.7157 69.7843 110 90 110Z" fill="#5adacf"/> <circle cx="75" cy="65" r="8" fill="white"/> <circle cx="105" cy="65" r="8" fill="white"/> <circle cx="75" cy="65" r="3" fill="#343A40"/> <circle cx="105" cy="65" r="3" fill="#343A40"/> <path d="M80 85C80 85 85 90 90 90C95 90 100 85 100 85" stroke="#343A40" stroke-width="3" stroke-linecap="round"/> <path d="M50 40C40 35 36 50 50 53" stroke="#4ECDC4" stroke-width="3"/> <path d="M130 40C140 35 144 50 130 53" stroke="#4ECDC4" stroke-width="3"/> </svg> </div> </div> <div class="card-back"> <div class="header"> <div class="logo">BrainPlay</div> <button class="flip-btn" id="flip-to-front">Flip Card</button> </div> <h2 class="back-title">More Awesome Facts</h2> <div class="age-selector" id="age-selector"> <button class="age-btn active" data-age="5-7">Ages 5-7</button> <button class="age-btn" data-age="8-10">Ages 8-10</button> <button class="age-btn" data-age="11+">Ages 11+</button> </div> <div class="fact-collection" id="fact-collection"> <!-- Facts will be populated by JavaScript --> </div> <div class="decorations"> <div class="bubble" style="width: 60px; height: 60px; top: 5%; right: 10%;"></div> <div class="bubble" style="width: 40px; height: 40px; top: 30%; left: 5%;"></div> <div class="bubble" style="width: 50px; height: 50px; bottom: 10%; right: 15%;"></div> <div class="bubble" style="width: 30px; height: 30px; bottom: 20%; left: 20%;"></div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Card flip functionality const card = document.querySelector('.card'); const flipToBackBtn = document.getElementById('flip-to-back'); const flipToFrontBtn = document.getElementById('flip-to-front'); flipToBackBtn.addEventListener('click', function() { card.classList.add('flipped'); }); flipToFrontBtn.addEventListener('click', function() { card.classList.remove('flipped'); }); // Scratch-off functionality const scratchArea = document.getElementById('scratch-area'); const factText = document.getElementById('fact-text'); let isRevealing = false; scratchArea.addEventListener('mousedown', startRevealing); scratchArea.addEventListener('touchstart', startRevealing, { passive: true }); function startRevealing() { isRevealing = true; // Create reveal effect by reducing opacity scratchArea.style.transition = 'opacity 0.8s ease-out'; scratchArea.style.opacity = '0'; // After animation completes, hide the scratch area completely setTimeout(() => { scratchArea.style.display = 'none'; factText.classList.add('fade-in'); }, 800); } // Facts by age group const factsByAge = { '5-7': [ { title: "Animal Facts", content: "A group of flamingos is called a 'flamboyance'!" }, { title: "Space Wonder", content: "The Sun is so big that about 1 million Earths could fit inside it!" }, { title: "Rainbow Magic", content: "Rainbows form when sunlight passes through water droplets in the air." }, { title: "Butterfly Journey", content: "Caterpillars have to shed their skin 4-5 times before becoming a butterfly." } ], '8-10': [ { title: "Ocean Depths", content: "The Mariana Trench is the deepest part of the oceans, at nearly 11,000 meters deep!" }, { title: "Brain Power", content: "Your brain uses about 20% of all the oxygen you breathe." }, { title: "Honey Wonder", content: "Honey never spoils! Archaeologists have found pots of honey in ancient Egyptian tombs that are over 3,000 years old and still perfectly good to eat." }, { title: "Plant Sounds", content: "Plants make tiny clicking sounds that humans can't hear when they're thirsty!" } ], '11+': [ { title: "Heart Facts", content: "Your heart creates enough pressure to squirt blood 30 feet across a room!" }, { title: "Light Speed", content: "Light from the Sun takes about 8 minutes and 20 seconds to reach Earth." }, { title: "Diamond Rain", content: "Scientists believe it rains diamonds on Jupiter and Saturn due to their atmospheric conditions!" }, { title: "DNA Wonder", content: "If you uncoiled all the DNA in your body, it would stretch out to about twice the diameter of the Solar System." } ] }; const factCollection = document.getElementById('fact-collection'); const ageSelector = document.getElementById('age-selector'); let currentAge = '5-7'; // Initialize facts updateFacts(currentAge); // Handle age selector clicks ageSelector.addEventListener('click', function(e) { if (e.target.classList.contains('age-btn')) { // Update active button document.querySelectorAll('.age-btn').forEach(btn => { btn.classList.remove('active'); }); e.target.classList.add('active'); // Update facts currentAge = e.target.dataset.age; updateFacts(currentAge); } }); function updateFacts(ageGroup) { // Clear current facts factCollection.innerHTML = ''; // Add new facts factsByAge[ageGroup].forEach(fact => { const factCard = document.createElement('div'); factCard.className = 'fact-card'; factCard.innerHTML = ` <div class="fact-title">${fact.title}</div> <p>${fact.content}</p> `; factCollection.appendChild(factCard); // Add staggered animation setTimeout(() => { factCard.classList.add('fade-in'); }, factCollection.children.length * 100); }); } // Add new fact on fact card click factCollection.addEventListener('click', function(e) { const factCard = e.target.closest('.fact-card'); if (factCard) { // Flip back to front card.classList.remove('flipped'); // Reset scratch area setTimeout(() => { // Show new fact const selectedFact = factCard.querySelector('p').textContent; factText.textContent = selectedFact; // Reset scratch area scratchArea.style.transition = 'none'; scratchArea.style.opacity = '1'; scratchArea.style.display = 'flex'; factText.classList.remove('fade-in'); }, 400); } }); // Create floating bubbles animation const bubbles = document.querySelectorAll('.bubble'); bubbles.forEach((bubble, index) => { bubble.style.animation = `float ${3 + index % 3}s ease-in-out infinite`; bubble.style.animationDelay = `${index * 0.5}s`; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Architectural Firm Business Card</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f5f5f5; overflow: hidden; } .container { width: 100%; max-width: 600px; height: 600px; position: relative; perspective: 1000px; } .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .card.flipped { transform: rotateY(180deg); } .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 1fr); background-color: #fafafa; box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); overflow: hidden; padding: 2rem; cursor: pointer; } .back { transform: rotateY(180deg); } .grid-lines { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } .grid-line { position: absolute; background-color: rgba(200, 200, 200, 0.1); } /* Horizontal grid lines */ .grid-line.horizontal { height: 1px; width: 100%; left: 0; } /* Vertical grid lines */ .grid-line.vertical { width: 1px; height: 100%; top: 0; } .logo { grid-column: 1 / 5; grid-row: 1 / 4; display: flex; align-items: center; } .logo-square { width: 60px; height: 60px; position: relative; transform: rotate(45deg); background: linear-gradient(135deg, #405563, #2e3e48); animation: rotate 12s infinite linear; } @keyframes rotate { 0% { transform: rotate(45deg); } 100% { transform: rotate(405deg); } } .logo-inner { position: absolute; top: 6px; left: 6px; right: 6px; bottom: 6px; background-color: #fafafa; display: flex; justify-content: center; align-items: center; transform: rotate(-45deg); } .name { grid-column: 5 / 13; grid-row: 1 / 3; font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 700; letter-spacing: 1px; color: #2e3e48; display: flex; align-items: center; padding-left: 1rem; } .title { grid-column: 5 / 13; grid-row: 3 / 4; font-family: 'Roboto', sans-serif; font-size: 0.9rem; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; color: #7c8c98; padding-left: 1rem; display: flex; align-items: center; } .separator { grid-column: 1 / 13; grid-row: 5 / 6; align-self: center; height: 1px; background: linear-gradient(to right, rgba(46, 62, 72, 0.1), rgba(46, 62, 72, 0.3), rgba(46, 62, 72, 0.1)); } .contact { grid-column: 1 / 13; grid-row: 7 / 11; display: flex; flex-direction: column; justify-content: space-evenly; } .contact-item { display: flex; align-items: center; margin-bottom: 0.8rem; } .icon { width: 20px; height: 20px; margin-right: 1rem; opacity: 0.7; transition: opacity 0.3s; } .contact-item:hover .icon { opacity: 1; } .contact-text { font-family: 'Roboto', sans-serif; font-size: 0.9rem; color: #405563; } .tagline { grid-column: 1 / 13; grid-row: 12 / 13; font-family: 'Playfair Display', serif; font-size: 0.85rem; font-style: italic; color: #7c8c98; align-self: end; } /* Back of the card */ .back .grid-pattern { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.05; pointer-events: none; } .firm-description { grid-column: 2 / 12; grid-row: 2 / 5; font-family: 'Playfair Display', serif; font-size: 1.2rem; color: #2e3e48; text-align: center; display: flex; flex-direction: column; justify-content: center; } .firm-description strong { color: #405563; } .services { grid-column: 2 / 12; grid-row: 6 / 10; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); gap: 1rem; } .service-item { display: flex; align-items: center; font-family: 'Roboto', sans-serif; font-size: 0.9rem; color: #405563; } .service-item:before { content: '—'; margin-right: 0.5rem; color: #7c8c98; } .back-logo { grid-column: 5 / 9; grid-row: 10 / 12; display: flex; justify-content: center; align-items: center; } .back-logo-text { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 700; letter-spacing: 2px; color: #2e3e48; position: relative; } .back-logo-text:after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 1px; background-color: #7c8c98; } .flip-instructions { position: absolute; bottom: 1rem; left: 0; width: 100%; text-align: center; font-size: 0.75rem; color: #7c8c98; opacity: 0.8; } @media (max-width: 600px) { .container { height: 500px; } .name { font-size: 1.5rem; } .title { font-size: 0.8rem; } .contact-text, .service-item { font-size: 0.8rem; } .tagline, .firm-description { font-size: 0.8rem; } .logo-square { width: 50px; height: 50px; } } @media (max-width: 400px) { .card-face { padding: 1.5rem; } .name { font-size: 1.3rem; } .services { grid-template-columns: 1fr; grid-template-rows: repeat(6, 1fr); } } </style> </head> <body> <div class="container"> <div class="card"> <div class="card-face front"> <div class="grid-lines"> <!-- Horizontal grid lines --> <div class="grid-line horizontal" style="top: 8.33%"></div> <div class="grid-line horizontal" style="top: 16.66%"></div> <div class="grid-line horizontal" style="top: 25%"></div> <div class="grid-line horizontal" style="top: 33.33%"></div> <div class="grid-line horizontal" style="top: 41.66%"></div> <div class="grid-line horizontal" style="top: 50%"></div> <div class="grid-line horizontal" style="top: 58.33%"></div> <div class="grid-line horizontal" style="top: 66.66%"></div> <div class="grid-line horizontal" style="top: 75%"></div> <div class="grid-line horizontal" style="top: 83.33%"></div> <div class="grid-line horizontal" style="top: 91.66%"></div> <!-- Vertical grid lines --> <div class="grid-line vertical" style="left: 8.33%"></div> <div class="grid-line vertical" style="left: 16.66%"></div> <div class="grid-line vertical" style="left: 25%"></div> <div class="grid-line vertical" style="left: 33.33%"></div> <div class="grid-line vertical" style="left: 41.66%"></div> <div class="grid-line vertical" style="left: 50%"></div> <div class="grid-line vertical" style="left: 58.33%"></div> <div class="grid-line vertical" style="left: 66.66%"></div> <div class="grid-line vertical" style="left: 75%"></div> <div class="grid-line vertical" style="left: 83.33%"></div> <div class="grid-line vertical" style="left: 91.66%"></div> </div> <div class="logo"> <div class="logo-square"> <div class="logo-inner">P</div> </div> </div> <div class="name">PRECISION ARCHITECTS</div> <div class="title">Architectural Design & Planning</div> <div class="separator"></div> <div class="contact"> <div class="contact-item"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#405563" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"></path> </svg> <span class="contact-text">+1 (617) 555-4200</span> </div> <div class="contact-item"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#405563" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path> <polyline points="22,6 12,13 2,6"></polyline> </svg> <span class="contact-text">[email protected]</span> </div> <div class="contact-item"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#405563" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"></path> <circle cx="12" cy="10" r="3"></circle> </svg> <span class="contact-text">125 Newbury St, Boston, MA 02116</span> </div> <div class="contact-item"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#405563" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect> <line x1="16" y1="2" x2="16" y2="6"></line> <line x1="8" y1="2" x2="8" y2="6"></line> <line x1="3" y1="10" x2="21" y2="10"></line> </svg> <span class="contact-text">Mon-Fri: 9AM - 6PM</span> </div> </div> <div class="tagline">"Where precision meets imagination"</div> <div class="flip-instructions">Click to flip</div> </div> <div class="card-face back"> <div class="grid-lines"> <!-- Horizontal grid lines --> <div class="grid-line horizontal" style="top: 8.33%"></div> <div class="grid-line horizontal" style="top: 16.66%"></div> <div class="grid-line horizontal" style="top: 25%"></div> <div class="grid-line horizontal" style="top: 33.33%"></div> <div class="grid-line horizontal" style="top: 41.66%"></div> <div class="grid-line horizontal" style="top: 50%"></div> <div class="grid-line horizontal" style="top: 58.33%"></div> <div class="grid-line horizontal" style="top: 66.66%"></div> <div class="grid-line horizontal" style="top: 75%"></div> <div class="grid-line horizontal" style="top: 83.33%"></div> <div class="grid-line horizontal" style="top: 91.66%"></div> <!-- Vertical grid lines --> <div class="grid-line vertical" style="left: 8.33%"></div> <div class="grid-line vertical" style="left: 16.66%"></div> <div class="grid-line vertical" style="left: 25%"></div> <div class="grid-line vertical" style="left: 33.33%"></div> <div class="grid-line vertical" style="left: 41.66%"></div> <div class="grid-line vertical" style="left: 50%"></div> <div class="grid-line vertical" style="left: 58.33%"></div> <div class="grid-line vertical" style="left: 66.66%"></div> <div class="grid-line vertical" style="left: 75%"></div> <div class="grid-line vertical" style="left: 83.33%"></div> <div class="grid-line vertical" style="left: 91.66%"></div> </div> <svg class="grid-pattern" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> <pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse"> <path d="M 8 0 L 0 0 0 8" fill="none" stroke="#2e3e48" stroke-width="0.5"/> </pattern> <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse"> <rect width="80" height="80" fill="url(#smallGrid)"/> <path d="M 80 0 L 0 0 0 80" fill="none" stroke="#2e3e48" stroke-width="1"/> </pattern> <rect width="100%" height="100%" fill="url(#grid)" /> </svg> <div class="firm-description"> Delivering <strong>meticulously crafted</strong> architectural solutions with geometric precision and mathematical harmony since 2005. </div> <div class="services"> <div class="service-item">Architectural Design</div> <div class="service-item">Urban Planning</div> <div class="service-item">Interior Spaces</div> <div class="service-item">Structural Engineering</div> <div class="service-item">Sustainable Solutions</div> <div class="service-item">Project Management</div> </div> <div class="back-logo"> <div class="back-logo-text">PRECISION</div> </div> <div class="flip-instructions">Click to flip</div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const card = document.querySelector('.card'); card.addEventListener('click', function() { card.classList.toggle('flipped'); }); // Create animated grid pattern function createGrid() { const gridLines = document.querySelectorAll('.grid-line'); gridLines.forEach((line, index) => { const delay = index * 50; setTimeout(() => { line.style.transition = 'opacity 0.5s ease'; line.style.opacity = '1'; }, delay); }); } // Initialize grid with animation document.querySelectorAll('.grid-line').forEach(line => { line.style.opacity = '0'; }); setTimeout(createGrid, 500); // Custom cursor effect const container = document.querySelector('.container'); container.addEventListener('mousemove', function(e) { const rect = container.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const xPercent = (x / rect.width) * 100; const yPercent = (y / rect.height) * 100; // Subtle tilt effect if (!card.classList.contains('flipped')) { card.style.transform = `rotateY(${(xPercent - 50) * 0.05}deg) rotateX(${(50 - yPercent) * 0.05}deg)`; } else { card.style.transform = `rotateY(180deg) rotateY(${(xPercent - 50) * 0.05}deg) rotateX(${(50 - yPercent) * 0.05}deg)`; } }); container.addEventListener('mouseleave', function() { if (!card.classList.contains('flipped')) { card.style.transform = ''; } else { card.style.transform = 'rotateY(180deg)'; } }); }); </script> </body> </html>
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Times New Roman', serif; } body { display: flex; justify-content: center; align-items: center; height: 700px; width: 700px; background-color: #f5f5f5; overflow: hidden; } .container { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #f5f5f5; overflow: hidden; } .card-container { width: 90%; max-width: 600px; transform-style: preserve-3d; perspective: 1500px; } .business-card { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 aspect ratio */ transition: transform 1.2s cubic-bezier(0.33, 1, 0.68, 1); transform-style: preserve-3d; box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); cursor: pointer; border-radius: 4px; margin-bottom: 40px; } .business-card.flip { transform: rotateY(180deg); } .card-face { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px; border-radius: 4px; } .card-front { background-color: #1a2f4b; /* Navy */ color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23223a5e' fill-opacity='0.2'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .card-back { background-color: #ffffff; color: #333; transform: rotateY(180deg); border: 1px solid #e0e0e0; } .logo { margin-bottom: 20px; position: relative; } .logo-text { font-size: 26px; letter-spacing: 2px; font-weight: normal; text-transform: uppercase; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); position: relative; } .logo-text::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 40px; height: 2px; background-color: #d4af37; /* Gold accent */ } .tagline { font-style: italic; color: #d4d4d4; margin-top: 20px; font-size: 14px; letter-spacing: 1px; } .name { font-size: 24px; margin-bottom: 5px; letter-spacing: 1px; color: #1a2f4b; position: relative; padding-bottom: 10px; } .name::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background-color: #1a2f4b; } .title { font-size: 14px; color: #666; margin-bottom: 20px; font-style: italic; } .contact-info { text-align: left; width: 100%; margin-top: 15px; } .contact-item { display: flex; align-items: center; margin-bottom: 8px; font-size: 14px; color: #444; } .contact-icon { width: 18px; margin-right: 10px; color: #1a2f4b; display: inline-flex; justify-content: center; } .instructions { text-align: center; margin-top: 20px; color: #666; font-size: 14px; font-style: italic; } .emboss-effect { position: absolute; width: 60px; height: 60px; background-color: rgba(255, 255, 255, 0.04); border-radius: 50%; top: 20px; right: 20px; box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.2), inset -1px -1px 3px rgba(0, 0, 0, 0.2); display: flex; justify-content: center; align-items: center; } .emboss-effect::before { content: "EST. 1978"; font-size: 7px; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.5px; } .pattern-line { position: absolute; width: 100%; height: 1px; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent); top: 75%; } .back-logo { position: absolute; top: 15px; left: 15px; font-size: 14px; letter-spacing: 1px; color: #1a2f4b; } .qr-code { position: absolute; top: 15px; right: 15px; width: 50px; height: 50px; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; font-size: 8px; color: #666; text-align: center; border: 1px solid #ddd; } @media (max-width: 600px) { .card-container { width: 85%; } .card-face { padding: 20px; } .logo-text { font-size: 22px; } .name { font-size: 20px; } .emboss-effect { width: 50px; height: 50px; } } .flip-hint { margin-top: 15px; padding: 10px 15px; background-color: #1a2f4b; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; letter-spacing: 0.5px; transition: all 0.3s ease; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .flip-hint:hover { background-color: #2c4366; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* Hover effect on business card */ .business-card:hover { box-shadow: 0 20px 40px rgba(50, 50, 93, 0.15), 0 10px 20px rgba(0, 0, 0, 0.1); } /* Animated shine effect on the front */ .card-front::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0) 100% ); transform: rotate(30deg); transition: transform 1.5s; pointer-events: none; } .card-front:hover::after { transform: rotate(30deg) translate(0, 150%); } </style> </head> <body> <div class="container"> <div class="card-container"> <div class="business-card"> <div class="card-face card-front"> <div class="emboss-effect"></div> <div class="pattern-line"></div> <div class="logo"> <h1 class="logo-text">Whitman & Pierce</h1> </div> <div class="tagline">Excellence in Corporate & Litigation Law</div> </div> <div class="card-face card-back"> <div class="back-logo">W&P</div> <div class="qr-code">Digital<br>contact<br>card</div> <h2 class="name">Eleanor J. Whitman</h2> <div class="title">Managing Partner, Corporate Litigation</div> <div class="contact-info"> <div class="contact-item"> <span class="contact-icon">📱</span> <span>(212) 555-4789</span> </div> <div class="contact-item"> <span class="contact-icon">✉️</span> <span>[email protected]</span> </div> <div class="contact-item"> <span class="contact-icon">🌐</span> <span>whitmanpierce.law</span> </div> <div class="contact-item"> <span class="contact-icon">📍</span> <span>350 Madison Avenue, New York, NY 10017</span> </div> </div> </div> </div> </div> <button class="flip-hint">Click to Flip Card</button> </div> <script> document.addEventListener('DOMContentLoaded', function() { const card = document.querySelector('.business-card'); const flipButton = document.querySelector('.flip-hint'); // Flip card on click card.addEventListener('click', function() { this.classList.toggle('flip'); }); // Flip card with button flipButton.addEventListener('click', function(e) { e.stopPropagation(); card.classList.toggle('flip'); if (card.classList.contains('flip')) { flipButton.textContent = 'View Front Side'; } else { flipButton.textContent = 'Click to Flip Card'; } }); // Create floating effect let lastX = 0; let lastY = 0; const container = document.querySelector('.container'); container.addEventListener('mousemove', function(e) { if (!card.classList.contains('flip')) { const rect = card.getBoundingClientRect(); const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; const deltaX = (e.clientX - centerX) / 25; const deltaY = (e.clientY - centerY) / 25; // Smooth transition between positions lastX = lastX * 0.8 + deltaX * 0.2; lastY = lastY * 0.8 + deltaY * 0.2; card.style.transform = `rotateY(${lastX}deg) rotateX(${-lastY}deg)`; } }); container.addEventListener('mouseleave', function() { if (!card.classList.contains('flip')) { card.style.transform = 'rotateY(0deg) rotateX(0deg)'; lastX = 0; lastY = 0; } }); // Add subtle animation on load setTimeout(() => { card.style.transform = 'rotateY(5deg) rotateX(-2deg)'; setTimeout(() => { card.style.transform = 'rotateY(0deg) rotateX(0deg)'; }, 800); }, 500); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Futuristic IT Innovator Business Card</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rajdhani', 'Space Grotesk', sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); body { display: flex; justify-content: center; align-items: center; min-height: 700px; width: 100%; max-width: 700px; background: #000; overflow: hidden; margin: 0 auto; perspective: 1000px; } .business-card-container { width: 100%; height: 100%; max-width: 550px; position: relative; transform-style: preserve-3d; transition: transform 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .business-card { width: 100%; height: 300px; border-radius: 16px; position: absolute; top: 0; left: 0; overflow: hidden; transform-style: preserve-3d; backface-visibility: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .front { background: linear-gradient(135deg, #1a1a1a, #0d0d0d); padding: 30px; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 1; } .back { background: linear-gradient(135deg, #0d0d0d, #1a1a1a); padding: 30px; transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 0; } .hologram { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(125deg, transparent 30%, rgba(116, 255, 241, 0.1) 40%, rgba(116, 255, 241, 0.1) 60%, transparent 70%); background-size: 300% 300%; animation: hologramShift 6s ease infinite; z-index: 0; pointer-events: none; } .card-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .logo { font-size: 28px; font-weight: 700; letter-spacing: 2px; margin-bottom: 10px; color: #fff; text-transform: uppercase; display: flex; align-items: center; } .logo span { background: linear-gradient(90deg, #00f9ff, #5e17eb); -webkit-background-clip: text; background-clip: text; color: transparent; margin-left: 5px; } .logo-icon { margin-right: 12px; background: linear-gradient(135deg, #00f9ff, #5e17eb); border-radius: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(94, 23, 235, 0.5); } .title { font-size: 14px; color: #00f9ff; letter-spacing: 1px; text-transform: uppercase; font-weight: 500; margin-top: -5px; } .metallic-bar { height: 3px; width: 80px; background: linear-gradient(90deg, #5e17eb, #00f9ff); margin: 15px 0; position: relative; border-radius: 4px; box-shadow: 0 0 10px rgba(0, 249, 255, 0.5); } .contact-info { margin-top: auto; } .contact-item { display: flex; align-items: center; margin-bottom: 8px; color: #fff; font-size: 14px; } .contact-item i { width: 20px; margin-right: 10px; color: #00f9ff; } .nfc-chip { position: absolute; bottom: 30px; right: 30px; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #1a1a1a, #0d0d0d); border: 2px solid #5e17eb; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0 15px rgba(94, 23, 235, 0.5); animation: pulse 2s infinite; z-index: 3; } .nfc-chip::before { content: ''; position: absolute; width: 70%; height: 70%; border-radius: 50%; border: 2px solid rgba(0, 249, 255, 0.5); } .nfc-chip::after { content: ''; position: absolute; width: 35%; height: 35%; border-radius: 50%; background: #00f9ff; opacity: 0.8; } .nfc-tooltip { position: absolute; bottom: 90px; right: 0; background: rgba(10, 10, 10, 0.9); color: #fff; padding: 10px 15px; border-radius: 8px; font-size: 12px; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; pointer-events: none; box-shadow: 0 0 10px rgba(0, 249, 255, 0.3); border: 1px solid rgba(0, 249, 255, 0.3); width: 200px; text-align: center; } .nfc-chip:hover .nfc-tooltip { opacity: 1; transform: translateY(0); } .nfc-chip:hover { transform: scale(1.1); box-shadow: 0 0 25px rgba(94, 23, 235, 0.7); } .circuit-pattern { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTAgMTBoODB2ODBIMTB6IiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMCwyNDksMjU1LDAuMSkiIHN0cm9rZS13aWR0aD0iMC41Ii8+CiAgPHBhdGggZD0iTTUwIDEwdjgwIiBzdHJva2U9InJnYmEoMCwyNDksMjU1LDAuMSkiIHN0cm9rZS13aWR0aD0iMC41Ii8+CiAgPHBhdGggZD0iTTEwIDUwaDgwIiBzdHJva2U9InJnYmEoMCwyNDksMjU1LDAuMSkiIHN0cm9rZS13aWR0aD0iMC41Ii8+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgwLDI0OSwyNTUsMC4xKSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDAsMjQ5LDI1NSwwLjEpIiBzdHJva2Utd2lkdGg9IjAuNSIvPgogIDxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjMwIiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMCwyNDksMjU1LDAuMSkiIHN0cm9rZS13aWR0aD0iMC41Ii8+CiAgPHBhdGggZD0iTTIwIDIwaDYwdjYwSDIweiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDAsMjQ5LDI1NSwwLjEpIiBzdHJva2Utd2lkdGg9IjAuNSIvPgo8L3N2Zz4='); opacity: 0.2; pointer-events: none; } .skills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .skill-pill { background: rgba(94, 23, 235, 0.2); color: #00f9ff; padding: 5px 10px; border-radius: 20px; font-size: 11px; border: 1px solid rgba(0, 249, 255, 0.3); backdrop-filter: blur(5px); } .social-links { display: flex; gap: 12px; margin-top: 20px; } .social-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; cursor: pointer; border: 1px solid rgba(0, 249, 255, 0.3); } .social-icon:hover { transform: translateY(-5px); background: rgba(0, 249, 255, 0.2); } .social-icon i { color: #fff; font-size: 15px; } .qr-code { position: absolute; top: 30px; right: 30px; width: 80px; height: 80px; background: #fff; padding: 5px; border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 15px rgba(0, 249, 255, 0.3); } .qr-code img { width: 100%; height: 100%; } .card-slogan { font-size: 16px; color: #fff; letter-spacing: 1px; margin-top: 20px; font-weight: 300; text-transform: uppercase; } .flip-instruction { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.5); font-size: 12px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 5px; } .flip-instruction:hover { color: #00f9ff; } .glitch-effect { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(90deg, transparent 0%, rgba(0, 249, 255, 0.1) 5%, transparent 5.5%, transparent 10%, rgba(94, 23, 235, 0.1) 10.5%, transparent 11%); animation: glitch 5s linear infinite; pointer-events: none; opacity: 0; z-index: 2; mix-blend-mode: overlay; } .business-card:hover .glitch-effect { opacity: 1; } /* Back content styling */ .back-title { font-size: 20px; color: #fff; font-weight: 600; margin-bottom: 10px; letter-spacing: 1px; } .back-description { color: rgba(255, 255, 255, 0.7); font-size: 13px; line-height: 1.6; margin-bottom: 20px; } /* Media Queries */ @media (max-width: 500px) { .business-card { height: 250px; } .qr-code { width: 60px; height: 60px; top: 20px; right: 20px; } .logo { font-size: 22px; } .nfc-chip { width: 40px; height: 40px; bottom: 20px; right: 20px; } .contact-item { font-size: 12px; } .back-title { font-size: 18px; } .back-description { font-size: 12px; } .skills { gap: 6px; } .skill-pill { font-size: 10px; padding: 4px 8px; } } /* Animations */ @keyframes hologramShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes pulse { 0% { box-shadow: 0 0 10px rgba(94, 23, 235, 0.5); } 50% { box-shadow: 0 0 20px rgba(94, 23, 235, 0.8); } 100% { box-shadow: 0 0 10px rgba(94, 23, 235, 0.5); } } @keyframes glitch { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .rotating-planet { position: absolute; bottom: -350px; left: -350px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(94, 23, 235, 0.1), rgba(0, 249, 255, 0.1)); box-shadow: 0 0 50px rgba(0, 249, 255, 0.3); z-index: -1; animation: rotate 60s linear infinite; } .rotating-planet::before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(0, 249, 255, 0.2); box-sizing: border-box; } .rotating-planet::after { content: ''; position: absolute; width: 110%; height: 20px; background: linear-gradient(90deg, transparent, rgba(0, 249, 255, 0.2), transparent); top: 50%; left: -5%; transform: rotate(30deg); } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="rotating-planet"></div> <div class="business-card-container"> <div class="business-card front"> <div class="hologram"></div> <div class="circuit-pattern"></div> <div class="glitch-effect"></div> <div class="card-content"> <div> <div class="logo"> <div class="logo-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 4V20M4 12H20" stroke="white" stroke-width="2" stroke-linecap="round"/> <circle cx="12" cy="12" r="2" fill="white"/> </svg> </div> NOVA<span>FLUX</span> </div> <div class="title">Quantum AI Systems Architect</div> <div class="metallic-bar"></div> <div class="card-slogan">Crafting tomorrow's interfaces today</div> </div> <div class="contact-info"> <div class="contact-item"> <i> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4Z" stroke="#00F9FF" stroke-width="2"/> <path d="M2 6L12 13L22 6" stroke="#00F9FF" stroke-width="2"/> </svg> </i> [email protected] </div> <div class="contact-item"> <i> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 10.999H22C22 5.869 18.127 2 12.99 2V4C17.052 4 20 6.943 20 10.999Z" stroke="#00F9FF" stroke-width="2"/> <path d="M16 10.999H18C18 7.999 15.756 5.748 12.99 5.748V7.748C14.711 7.748 16 9.099 16 10.999Z" stroke="#00F9FF" stroke-width="2"/> <path d="M15.5 17.5L12.5 14.5C12.5 14.5 11 12 8.5 14.5C6 17 6 17 4.5 17.5C3 18 2 22 6.5 20C11 18 15.5 17.5 15.5 17.5Z" stroke="#00F9FF" stroke-width="2"/> </svg> </i> (877) 555-0123 </div> </div> </div> <div class="nfc-chip"> <div class="nfc-tooltip">Tap for instant contact transfer via NFC</div> </div> </div> <div class="business-card back"> <div class="hologram"></div> <div class="circuit-pattern"></div> <div class="glitch-effect"></div> <div class="card-content"> <div> <div class="back-title">Alex Quantum</div> <div class="metallic-bar"></div> <div class="back-description">Pioneering neural interfaces and quantum computing solutions that transform how humans interact with technology. Creating immersive digital experiences that blur the line between reality and virtuality.</div> <div class="skills"> <div class="skill-pill">Quantum Computing</div> <div class="skill-pill">Neural Interfaces</div> <div class="skill-pill">Holographic UX</div> <div class="skill-pill">AI Systems</div> <div class="skill-pill">AR/VR</div> </div> </div> <div class="social-links"> <div class="social-icon"> <i> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16 8C17.5913 8 19.1174 8.63214 20.2426 9.75736C21.3679 10.8826 22 12.4087 22 14V21H18V14C18 13.4696 17.7893 12.9609 17.4142 12.5858C17.0391 12.2107 16.5304 12 16 12C15.4696 12 14.9609 12.2107 14.5858 12.5858C14.2107 12.9609 14 13.4696 14 14V21H10V14C10 12.4087 10.6321 10.8826 11.7574 9.75736C12.8826 8.63214 14.4087 8 16 8Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6 9H2V21H6V9Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M4 6C5.10457 6 6 5.10457 6 4C6 2.89543 5.10457 2 4 2C2.89543 2 2 2.89543 2 4C2 5.10457 2.89543 6 4 6Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </i> </div> <div class="social-icon"> <i> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M23 3.01006C22.0424 3.68553 20.9821 4.20217 19.86 4.54006C19.2577 3.84757 18.4573 3.35675 17.567 3.13398C16.6767 2.91122 15.7395 2.96725 14.8821 3.29451C14.0247 3.62177 13.2884 4.20446 12.773 4.96377C12.2575 5.72309 11.9877 6.62239 12 7.54006V8.54006C10.2426 8.58562 8.50127 8.19587 6.93101 7.4055C5.36074 6.61513 4.01032 5.44869 3 4.01006C3 4.01006 -1 13.0101 8 17.0101C5.94053 18.408 3.48716 19.109 1 19.0101C10 24.0101 21 19.0101 21 7.51006C20.9991 7.23151 20.9723 6.95365 20.92 6.68006C21.9406 5.67355 22.6608 4.40277 23 3.01006Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </i> </div> <div class="social-icon"> <i> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2H8C5.79086 2 4 3.79086 4 6V18C4 20.2091 5.79086 22 8 22H16C18.2091 22 20 20.2091 20 18V8M12 2L20 8M12 2V8H20" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </i> </div> <div class="social-icon"> <i> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.24 7.76001L14.12 14.12L7.76001 16.24L9.88001 9.88001L16.24 7.76001Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </i> </div> </div> </div> <div class="qr-code"> <svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="70" height="70" fill="white"/> <rect x="10" y="10" width="5" height="5" fill="black"/> <rect x="15" y="10" width="5" height="5" fill="black"/> <rect x="20" y="10" width="5" height="5" fill="black"/> <rect x="25" y="10" width="5" height="5" fill="black"/> <rect x="30" y="10" width="5" height="5" fill="black"/> <rect x="40" y="10" width="5" height="5" fill="black"/> <rect x="50" y="10" width="5" height="5" fill="black"/> <rect x="55" y="10" width="5" height="5" fill="black"/> <rect x="10" y="15" width="5" height="5" fill="black"/> <rect x="30" y="15" width="5" height="5" fill="black"/> <rect x="40" y="15" width="5" height="5" fill="black"/> <rect x="45" y="15" width="5" height="5" fill="black"/> <rect x="55" y="15" width="5" height="5" fill="black"/> <rect x="10" y="20" width="5" height="5" fill="black"/> <rect x="20" y="20" width="5" height="5" fill="black"/> <rect x="25" y="20" width="5" height="5" fill="black"/> <rect x="30" y="20" width="5" height="5" fill="black"/> <rect x="40" y="20" width="5" height="5" fill="black"/> <rect x="55" y="20" width="5" height="5" fill="black"/> <rect x="10" y="25" width="5" height="5" fill="black"/> <rect x="20" y="25" width="5" height="5" fill="black"/> <rect x="25" y="25" width="5" height="5" fill="black"/> <rect x="30" y="25" width="5" height="5" fill="black"/> <rect x="35" y="25" width="5" height="5" fill="black"/> <rect x="45" y="25" width="5" height="5" fill="black"/> <rect x="55" y="25" width="5" height="5" fill="black"/> <rect x="10" y="30" width="5" height="5" fill="black"/> <rect x="20" y="30" width="5" height="5" fill="black"/> <rect x="25" y="30" width="5" height="5" fill="black"/> <rect x="30" y="30" width="5" height="5" fill="black"/> <rect x="40" y="30" width="5" height="5" fill="black"/> <rect x="55" y="30" width="5" height="5" fill="black"/> <rect x="10" y="35" width="5" height="5" fill="black"/> <rect x="15" y="35" width="5" height="5" fill="black"/> <rect x="20" y="35" width="5" height="5" fill="black"/> <rect x="25" y="35" width="5" height="5" fill="black"/> <rect x="30" y="35" width="5" height="5" fill="black"/> <rect x="35" y="35" width="5" height="5" fill="black"/> <rect x="40" y="35" width="5" height="5" fill="black"/> <rect x="45" y="35" width="5" height="5" fill="black"/> <rect x="50" y="35" width="5" height="5" fill="black"/> <rect x="55" y="35" width="5" height="5" fill="black"/> <rect x="15" y="40" width="5" height="5" fill="black"/> <rect x="25" y="40" width="5" height="5" fill="black"/> <rect x="35" y="40" width="5" height="5" fill="black"/> <rect x="40" y="40" width="5" height="5" fill="black"/> <rect x="45" y="40" width="5" height="5" fill="black"/> <rect x="10" y="45" width="5" height="5" fill="black"/> <rect x="20" y="45" width="5" height="5" fill="black"/> <rect x="35" y="45" width="5" height="5" fill="black"/> <rect x="50" y="45" width="5" height="5" fill="black"/> <rect x="15" y="50" width="5" height="5" fill="black"/> <rect x="20" y="50" width="5" height="5" fill="black"/> <rect x="25" y="50" width="5" height="5" fill="black"/> <rect x="30" y="50" width="5" height="5" fill="black"/> <rect x="40" y="50" width="5" height="5" fill="black"/> <rect x="45" y="50" width="5" height="5" fill="black"/> <rect x="50" y="50" width="5" height="5" fill="black"/> <rect x="10" y="55" width="5" height="5" fill="black"/> <rect x="15" y="55" width="5" height="5" fill="black"/> <rect x="25" y="55" width="5" height="5" fill="black"/> <rect x="30" y="55" width="5" height="5" fill="black"/> <rect x="35" y="55" width="5" height="5" fill="black"/> <rect x="40" y="55" width="5" height="5" fill="black"/> <rect x="45" y="55" width="5" height="5" fill="black"/> <rect x="50" y="55" width="5" height="5" fill="black"/> </svg> </div> </div> </div> <div class="flip-instruction"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 5H6C4.89543 5 4 5.89543 4 7V19C4 20.1046 4.89543 21 6 21H18C19.1046 21 20 20.1046 20 19V7C20 5.89543 19.1046 5 18 5H16M12 12V3M12 3L16 7M12 3L8 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Click to flip card </div> <script> document.addEventListener('DOMContentLoaded', function() { const container = document.querySelector('.business-card-container'); const flipInstruction = document.querySelector('.flip-instruction'); const nfcChip = document.querySelector('.nfc-chip'); let isFlipped = false; // Function to handle card flip function flipCard() { isFlipped = !isFlipped; container.style.transform = isFlipped ? 'rotateY(180deg)' : 'rotateY(0)'; } // Flip card when container is clicked container.addEventListener('click', function(e) { // Don't flip if clicking on the NFC chip if (!e.target.closest('.nfc-chip')) { flipCard(); } }); // Flip card when flip instruction is clicked flipInstruction.addEventListener('click', flipCard); // NFC tap simulation nfcChip.addEventListener('click', function(e) { e.stopPropagation(); // Prevent card flip // Add pulse animation this.classList.add('nfc-tapped'); // Create a confirmation message const confirmation = document.createElement('div'); confirmation.style.position = 'fixed'; confirmation.style.top = '50%'; confirmation.style.left = '50%'; confirmation.style.transform = 'translate(-50%, -50%)'; confirmation.style.background = 'rgba(10, 10, 10, 0.9)'; confirmation.style.color = '#00f9ff'; confirmation.style.padding = '15px 20px'; confirmation.style.borderRadius = '8px'; confirmation.style.boxShadow = '0 0 20px rgba(0, 249, 255, 0.5)'; confirmation.style.zIndex = '9999'; confirmation.style.textAlign = 'center'; confirmation.style.fontSize = '14px'; confirmation.style.fontWeight = '500'; confirmation.style.border = '1px solid rgba(0, 249, 255, 0.5)'; confirmation.textContent = 'Contact details transferred successfully!'; document.body.appendChild(confirmation); // Remove confirmation after 2 seconds setTimeout(() => { document.body.removeChild(confirmation); this.classList.remove('nfc-tapped'); }, 2000); }); // Mouse move effect for hologram document.addEventListener('mousemove', function(e) { const cards = document.querySelectorAll('.business-card'); cards.forEach(card => { const rect
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sustainable Business Card</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 700px; width: 100%; max-width: 700px; margin: 0 auto; background-color: #f5f2e8; overflow: hidden; position: relative; } .forest-bg { position: absolute; bottom: -5px; left: 0; width: 100%; height: 120px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%234a6741" fill-opacity="0.3" d="M0,256L48,229.3C96,203,192,149,288,138.7C384,128,480,160,576,181.3C672,203,768,213,864,208C960,203,1056,181,1152,181.3C1248,181,1344,203,1392,213.3L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>'); background-size: cover; background-repeat: no-repeat; z-index: -1; opacity: 0.7; } .card-container { position: relative; width: 350px; height: 200px; margin: 20px; perspective: 1500px; } .business-card { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s ease-in-out; box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1); border-radius: 10px; cursor: pointer; background: radial-gradient(#e8e2d1, #d8d0b8); } .business-card.flipped { transform: rotateY(180deg); } .card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 10px; padding: 20px; overflow: hidden; } .card-front { display: flex; flex-direction: column; justify-content: space-between; } .card-back { transform: rotateY(180deg); background: #d8d0b8; display: flex; flex-direction: column; justify-content: space-between; } .logo-container { display: flex; align-items: center; margin-bottom: 15px; } .logo { width: 40px; height: 40px; margin-right: 10px; background-color: #4a6741; display: flex; justify-content: center; align-items: center; border-radius: 50%; } .logo svg { width: 24px; height: 24px; fill: #e8e2d1; } .company-name { font-size: 22px; font-weight: 600; color: #4a6741; letter-spacing: 1px; } .tagline { font-size: 10px; color: #667b68; letter-spacing: 1px; text-transform: uppercase; margin-top: -5px; } .contact-info { margin-top: 10px; color: #4a6741; font-size: 11px; } .info-item { display: flex; align-items: center; margin-bottom: 5px; } .info-item svg { width: 14px; height: 14px; margin-right: 8px; fill: #4a6741; } .eco-badge { position: absolute; bottom: 20px; right: 20px; display: flex; align-items: center; font-size: 8px; color: #667b68; text-transform: uppercase; letter-spacing: 0.5px; } .eco-badge::before { content: ""; width: 10px; height: 10px; background-color: #667b68; border-radius: 50%; margin-right: 5px; opacity: 0.7; } .texture-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%234a6741" stroke-width="0.5" stroke-opacity="0.05"/></svg>'); z-index: 1; pointer-events: none; opacity: 0.4; border-radius: 10px; } .name-title { margin-top: 10px; } .person-name { font-size: 18px; font-weight: 600; color: #4a6741; } .position { font-size: 12px; color: #667b68; margin-top: 2px; } .back-content { height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .back-top { text-align: center; margin-top: 10px; } .back-company { font-size: 18px; font-weight: 600; color: #4a6741; margin-bottom: 5px; } .values-title { font-size: 10px; color: #667b68; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; } .values-list { list-style-type: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .value-item { background-color: rgba(74, 103, 65, 0.1); border-radius: 15px; padding: 4px 10px; font-size: 10px; color: #4a6741; display: flex; align-items: center; } .value-item svg { width: 10px; height: 10px; margin-right: 4px; fill: #4a6741; } .recycled-banner { position: absolute; bottom: 15px; width: calc(100% - 40px); text-align: center; font-size: 9px; color: #667b68; padding: 4px; border-top: 1px solid rgba(74, 103, 65, 0.2); } .flip-instruction { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); color: #4a6741; font-size: 14px; opacity: 0.8; display: flex; align-items: center; white-space: nowrap; } .flip-instruction svg { width: 16px; height: 16px; margin-right: 6px; fill: #4a6741; animation: bounce 2s infinite; } .leaf { position: absolute; width: 20px; height: 20px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%234a6741" fill-opacity="0.1" d="M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z"/></svg>'); background-repeat: no-repeat; background-size: contain; opacity: 0.8; z-index: -1; animation: float 8s ease-in-out infinite; } .leaf:nth-child(1) { top: 10%; left: 70%; animation-delay: 0s; } .leaf:nth-child(2) { top: 60%; left: 20%; animation-delay: 1s; } .leaf:nth-child(3) { top: 30%; left: 30%; animation-delay: 2s; } .leaf:nth-child(4) { top: 70%; left: 80%; animation-delay: 3s; } .leaf:nth-child(5) { top: 40%; left: 90%; animation-delay: 4s; } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(15px) rotate(5deg); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 60% { transform: translateY(-2px); } } .qr-code { width: 60px; height: 60px; margin: 0 auto; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="none"/><rect x="10" y="10" width="30" height="30" fill="%234a6741"/><rect x="15" y="15" width="20" height="20" fill="%23d8d0b8"/><rect x="20" y="20" width="10" height="10" fill="%234a6741"/><rect x="60" y="10" width="30" height="30" fill="%234a6741"/><rect x="65" y="15" width="20" height="20" fill="%23d8d0b8"/><rect x="70" y="20" width="10" height="10" fill="%234a6741"/><rect x="10" y="60" width="30" height="30" fill="%234a6741"/><rect x="15" y="65" width="20" height="20" fill="%23d8d0b8"/><rect x="20" y="70" width="10" height="10" fill="%234a6741"/><rect x="60" y="60" width="10" height="10" fill="%234a6741"/><rect x="80" y="60" width="10" height="10" fill="%234a6741"/><rect x="60" y="80" width="10" height="10" fill="%234a6741"/><rect x="80" y="80" width="10" height="10" fill="%234a6741"/><rect x="70" y="70" width="10" height="10" fill="%234a6741"/></svg>'); background-size: cover; opacity: 0.9; } .seeds-effect { position: absolute; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: hidden; border-radius: 10px; } .seed { position: absolute; width: 3px; height: 3px; background-color: #4a6741; border-radius: 50%; opacity: 0; } @media (max-width: 400px) { .card-container { width: 300px; height: 180px; } .company-name { font-size: 18px; } .logo { width: 35px; height: 35px; } } </style> </head> <body> <div class="forest-bg"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="flip-instruction"> <svg viewBox="0 0 24 24"> <path d="M16,18H6V12H8V16H16V12L20,16L16,20V18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /> </svg> Tap to flip card </div> <div class="card-container"> <div class="business-card"> <div class="card-front"> <div class="texture-overlay"></div> <div class="seeds-effect"></div> <div class="logo-container"> <div class="logo"> <svg viewBox="0 0 24 24"> <path d="M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z" /> </svg> </div> <div> <div class="company-name">Terra Verdant</div> <div class="tagline">Sustainable Design Solutions</div> </div> </div> <div class="name-title"> <div class="person-name">Emma Blackwood</div> <div class="position">Environmental Design Consultant</div> </div> <div class="contact-info"> <div class="info-item"> <svg viewBox="0 0 24 24"> <path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" /> </svg> [email protected] </div> <div class="info-item"> <svg viewBox="0 0 24 24"> <path d="M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z" /> </svg> (555) 123-4567 </div> <div class="info-item"> <svg viewBox="0 0 24 24"> <path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" /> </svg> Portland, Oregon </div> </div> <div class="eco-badge">Made with recycled paper</div> </div> <div class="card-back"> <div class="texture-overlay"></div> <div class="seeds-effect"></div> <div class="back-content"> <div class="back-top"> <div class="back-company">Terra Verdant</div> <div class="values-title">Our Sustainable Commitments</div> </div> <ul class="values-list"> <li class="value-item"> <svg viewBox="0 0 24 24"> <path d="M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L5,8.09V15.91L12,19.85L19,15.91V8.09L12,4.15Z" /> </svg> Zero Waste </li> <li class="value-item"> <svg viewBox="0 0 24 24"> <path d="M5.12,5H18.87L17.93,4H5.93L5.12,5M20.54,5.23C20.83,5.57 21,6 21,6.5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V6.5C3,6 3.17,5.57 3.46,5.23L4.84,3.55C5.12,3.21 5.53,3 6,3H18C18.47,3 18.88,3.21 19.15,3.55L20.54,5.23M6,18H12V15H6V18Z" /> </svg> Plant-based Inks </li> <li class="value-item"> <svg viewBox="0 0 24 24"> <path d="M15,8C12.79,8 11,9.79 11,12V13H9V12C9,8.69 11.69,6 15,6V8M15,2C9.48,2 5,6.48 5,12C5,17.52 9.48,22 15,22C20.52,22 25,17.52 25,12C25,6.48 20.52,2 15,2M15,20C10.58,20 7,16.42 7,12C7,7.58 10.58,4 15,4C19.42,4 23,7.58 23,12C23,16.42 19.42,20 15,20M16.5,14.74C17.84,14.33 18.33,14.04 18.33,13.14C18.33,12.41 17.73,11.97 16.74,11.97C15.73,11.97 15.11,12.45 15.11,13.24H13.97C13.97,11.97 14.92,10.89 16.69,10.89C18.47,10.89 19.5,11.76 19.5,13.09C19.5,14.31 18.71,14.83 17.61,15.18C16.39,15.56 16.09,15.73 16.03,16.34H14.95C14.94,15.84 15,15.5 15.33,15.24C15.5,15.1 15.63,15 16.5,14.74Z" /> </svg> Carbon Neutral </li> <li class="value-item"> <svg viewBox="0 0 24 24"> <path d="M12,3L2,12H5V20H19V12H22L12,3M12,8.5C14.34,8.5 16.46,9.43 18,10.94L16.8,12.12C15.58,10.91 13.88,10.17 12,10.17C10.12,10.17 8.42,10.91 7.2,12.12L6,10.94C7.54,9.43 9.66,8.5 12,8.5M12,11.83C13.4,11.83 14.67,12.39 15.6,13.3L14.4,14.47C13.79,13.87 12.94,13.5 12,13.5C11.06,13.5 10.21,13.87 9.6,14.47L8.4,13.3C9.33,12.39 10.6,11.83 12,11.83M12,15.17C12.94,15.17 13.7,15.91 13.7,16.83C13.7,17.75 12.94,18.5 12,18.5C11.06,18.5 10.3,17.75 10.3,16.83C10.3,15.91 11.06,15.17 12,15.17Z" /> </svg> Renewable Energy </li> <li class="value-item"> <svg viewBox="0 0 24 24"> <path d="M8,13.65L6.5,14.83L9,18L6.5,21.17L8,22.35L11,18.5L8,13.65M13.75,7L15,9L16.25,7L13.75,3L15,1L11,1L9,5L10.25,7H13.75M6,2L1.5,9L3,10.5L8,5.5L6,2M16,11.25L14.75,12.5L16,13.75L20,11.25V8.75L16,11.25M23,9.5L18.5,14L20,15.5L23,13.5L23,9.5Z" /> </svg> Biodegradable </li> </ul> <div class="qr-code"></div> <div class="recycled-banner">Printed on 100% post-consumer recycled paper with soy-based inks</div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const card = document.querySelector('.business-card'); const seedsEffects = document.querySelectorAll('.seeds-effect'); // Create seeds for a natural paper texture seedsEffects.forEach(seedsEffect => { for (let i = 0; i < 50; i++) { const seed = document.createElement('div'); seed.classList.add('seed'); seed.style.left = `${Math.random() * 100}%`; seed.style.top = `${Math.random() * 100}%`; seed.style.opacity = (Math.random() * 0.2).toFixed(2); seedsEffect.appendChild(seed); } }); // Handle card flip card.addEventListener('click', function() { this.classList.toggle('flipped'); // Create seed animation effect when flipping const side = this.classList.contains('flipped') ? document.querySelector('.card-back .seeds-effect') : document.querySelector('.card-front .seeds-effect'); const seeds = []; for (let i = 0; i < 15; i++) { const seed = document.createElement('div'); seed.classList.add('seed'); seed.style.left = `${50 + (Math.random() * 20 - 10)}%`; seed.style.top = `${50 + (Math.random() * 20 - 10)}%`; seed.style.opacity = '0.8'; side.appendChild(seed); // Animate the seed const angle = Math.random() * Math.PI * 2; const distance = 30 + Math.random() * 70; const destinationX = 50 + Math.cos(angle) * distance; const destinationY = 50 + Math.sin(angle) * distance; seed.animate([ { transform: 'scale(0.5)', opacity: 0.8 }, { transform: `translate(${destinationX - 50}%, ${destinationY - 50}%) scale(1)`, opacity: 0 } ], { duration: 1000 + Math.random() * 1000, easing: 'cubic-bezier(0.1, 0.7, 1.0, 0.1)', fill: 'forwards' }); seeds.push(seed); } // Clean up seeds after animation setTimeout(() => { seeds.forEach(seed => seed.remove()); }, 2000); }); // Add hover effect to enhance the natural feel card.addEventListener('mousemove', function(e) { const rect = this.getBoundingClientRect(); const x = ((e.clientX - rect.left) / rect.width) * 2 - 1; const y = ((e.clientY - rect.top) / rect.height) * 2 - 1; this.style.transform = `rotateY(${x * 5}deg) rotateX(${-y * 5}deg) ${this.classList.contains('flipped') ? 'rotateY(180deg)' : ''}`; }); card.addEventListener('mouseleave', function() { this.style.transform = this.classList.contains('flipped') ? 'rotateY(180deg)' : ''; }); // Make sure touch devices can still use this effect if ('ontouchstart' in window) { card.addEventListener('touchstart', function(e) { e.preventDefault(); this.classList.toggle('flipped'); }); } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Avant-Garde Business Card</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&family=Playfair+Display:ital,wght@0,700;1,400&display=swap'); body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; overflow: hidden; } .container { position: relative; width: 100%; height: 100%; max-width: 700px; max-height: 700px; display: flex; justify-content: center; align-items: center; perspective: 1000px; } .card-container { width: 90%; height: 90%; max-width: 500px; max-height: 550px; position: relative; transform-style: preserve-3d; transition: transform 1s ease-in-out; } .card-container.flipped { transform: rotateY(180deg); } .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 15px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); overflow: hidden; cursor: pointer; } .card-front { background-color: #fff; padding: 30px; transform-style: preserve-3d; } .card-back { background-color: #222; transform: rotateY(180deg); padding: 30px; } .sketch-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.25; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath fill='none' stroke='%23FF6B6B' stroke-width='2' d='M50,50 C100,30 150,70 200,50 S250,90 280,60'/%3E%3Cpath fill='none' stroke='%234ECDC4' stroke-width='2' d='M30,150 C80,130 130,170 180,150 S230,190 260,160'/%3E%3Cpath fill='none' stroke='%23FFE66D' stroke-width='1.5' d='M70,220 C120,200 170,240 220,220 S270,260 300,230'/%3E%3Ccircle cx='100' cy='100' r='20' fill='none' stroke='%23FF6B6B' stroke-width='1'/%3E%3Ccircle cx='200' cy='200' r='15' fill='none' stroke='%234ECDC4' stroke-width='1'/%3E%3Crect x='150' y='100' width='30' height='30' fill='none' stroke='%23FFE66D' stroke-width='1'/%3E%3C/svg%3E"); background-size: cover; z-index: 1; pointer-events: none; } .digital-dots { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle, #FF6B6B 1px, transparent 1px), radial-gradient(circle, #4ECDC4 1px, transparent 1px); background-size: 20px 20px; background-position: 0 0, 10px 10px; opacity: 0.1; z-index: 0; pointer-events: none; } .logo { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 700; letter-spacing: -1px; margin-bottom: 25px; color: #1A1A1A; position: relative; z-index: 2; transform: translateZ(30px); text-shadow: 2px 2px 0px rgba(255, 107, 107, 0.7); } .tagline { font-size: 14px; font-weight: 300; font-style: italic; letter-spacing: 1px; margin-bottom: 30px; color: #555; font-family: 'Playfair Display', serif; position: relative; z-index: 2; transform: translateZ(20px); } .info { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; position: relative; z-index: 2; transform: translateZ(15px); width: 100%; } .info-item { display: flex; align-items: center; margin-bottom: 10px; transition: transform 0.3s ease, color 0.3s ease; font-weight: 400; font-size: 13px; color: #555; } .info-item:hover { transform: translateX(5px); color: #FF6B6B; } .info-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 10px; border-radius: 50%; background-color: #f0f0f0; font-size: 12px; color: #333; } .services { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 20px; max-width: 100%; position: relative; z-index: 2; transform: translateZ(10px); } .service-tag { background-color: rgba(78, 205, 196, 0.2); padding: 5px 12px; border-radius: 15px; margin: 5px; font-size: 11px; color: #333; transition: all 0.3s ease; border: 1px solid rgba(78, 205, 196, 0.3); } .service-tag:hover { background-color: rgba(78, 205, 196, 0.5); transform: scale(1.05); } .flip-prompt { position: absolute; bottom: 15px; right: 15px; font-size: 11px; color: #999; display: flex; align-items: center; justify-content: center; z-index: 2; animation: pulse 2s infinite; } @keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } } .back-content { width: 100%; color: #fff; z-index: 2; position: relative; } .back-title { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; margin-bottom: 20px; letter-spacing: -0.5px; color: #4ECDC4; } .back-desc { font-size: 13px; line-height: 1.6; margin-bottom: 20px; font-weight: 300; } .color-palette { display: flex; justify-content: space-between; width: 100%; margin-top: 30px; } .color-dot { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; transition: transform 0.3s ease; border: 2px solid rgba(255, 255, 255, 0.3); } .color-dot:hover { transform: scale(1.2); } .social-links { display: flex; justify-content: space-between; width: 60%; margin-top: 30px; } .social-link { width: 36px; height: 36px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; color: #fff; transition: all 0.3s ease; font-size: 16px; } .social-link:hover { background-color: #FF6B6B; transform: translateY(-5px); } .sketch-element { position: absolute; opacity: 0.7; z-index: 1; pointer-events: none; } #sketch1 { top: 10%; left: 10%; width: 60px; height: 60px; border: 2px solid #FF6B6B; border-radius: 50%; animation: rotate 20s linear infinite; } #sketch2 { bottom: 15%; right: 15%; width: 40px; height: 40px; border: 2px solid #4ECDC4; transform: rotate(45deg); animation: pulse-size 7s ease infinite; } #sketch3 { top: 60%; right: 25%; width: 30px; height: 30px; border: 2px dashed #FFE66D; border-radius: 4px; animation: float 8s ease infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pulse-size { 0%, 100% { transform: rotate(45deg) scale(1); } 50% { transform: rotate(45deg) scale(1.2); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .digital-lines { position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; background: linear-gradient(90deg, rgba(255,107,107,0) 0%, rgba(255,107,107,0.5) 20%, rgba(78,205,196,0.5) 80%, rgba(78,205,196,0) 100%); z-index: 1; opacity: 0.2; transform: skewY(-5deg); } /* Responsive Adjustments */ @media (max-width: 500px) { .card-container { width: 90%; height: 80%; } .logo { font-size: 28px; } .tagline { font-size: 12px; } .info-item { font-size: 12px; } .service-tag { font-size: 10px; padding: 4px 8px; } .back-title { font-size: 20px; } .back-desc { font-size: 12px; } } .back-to-front { position: absolute; top: 20px; left: 20px; color: rgba(255,255,255,0.7); font-size: 12px; z-index: 5; display: flex; align-items: center; cursor: pointer; transition: color 0.3s ease; } .back-to-front:hover { color: #FFE66D; } </style> </head> <body> <div class="container"> <div class="card-container"> <div class="card-face card-front"> <div class="sketch-layer"></div> <div class="digital-dots"></div> <div class="sketch-element" id="sketch1"></div> <div class="sketch-element" id="sketch2"></div> <div class="sketch-element" id="sketch3"></div> <div class="digital-lines"></div> <h1 class="logo">ARTISTRY</h1> <p class="tagline">where digital dreams meet handcrafted reality</p> <div class="info"> <div class="info-item"> <span class="info-icon">✉</span> <span>[email protected]</span> </div> <div class="info-item"> <span class="info-icon">☎</span> <span>+1 (415) 789-2345</span> </div> <div class="info-item"> <span class="info-icon">⌖</span> <span>125 Creative Alley, San Francisco</span> </div> <div class="info-item"> <span class="info-icon">⌨</span> <span>www.artistry-studio.com</span> </div> </div> <div class="services"> <span class="service-tag">Brand Identity</span> <span class="service-tag">Illustration</span> <span class="service-tag">UI/UX Design</span> <span class="service-tag">Print Media</span> <span class="service-tag">Motion Graphics</span> </div> <div class="flip-prompt">tap to see our process →</div> </div> <div class="card-face card-back"> <div class="sketch-layer"></div> <div class="digital-dots"></div> <div class="back-to-front">← back</div> <div class="back-content"> <h2 class="back-title">Our Design Philosophy</h2> <p class="back-desc"> We blend raw hand-sketched elements with precise digital execution, creating dynamic visual narratives that transcend conventional boundaries. Our asymmetrical compositions embrace imperfection while maintaining meticulous attention to detail. </p> <p class="back-desc"> Each project is approached as a unique canvas where traditional artistry meets cutting-edge technology, resulting in designs that feel both timeless and contemporary. </p> <div class="color-palette"> <div class="color-dot" style="background-color: #FF6B6B;"></div> <div class="color-dot" style="background-color: #4ECDC4;"></div> <div class="color-dot" style="background-color: #FFE66D;"></div> <div class="color-dot" style="background-color: #1A535C;"></div> <div class="color-dot" style="background-color: #F7FFF7;"></div> </div> <div class="social-links"> <div class="social-link">in</div> <div class="social-link">ig</div> <div class="social-link">be</div> <div class="social-link">dr</div> </div> </div> </div> </div> </div> <script> const cardContainer = document.querySelector('.card-container'); const cardFront = document.querySelector('.card-front'); const cardBack = document.querySelector('.card-back'); const backToFront = document.querySelector('.back-to-front'); // 3D effect on mouse move for front card cardFront.addEventListener('mousemove', (e) => { if (cardContainer.classList.contains('flipped')) return; const rect = cardFront.getBoundingClientRect(); const x = e.clientX - rect.left; // x position within the element const y = e.clientY - rect.top; // y position within the element const centerX = rect.width / 2; const centerY = rect.height / 2; const deltaX = (x - centerX) / 25; const deltaY = (y - centerY) / 25; cardContainer.style.transform = `rotateY(${deltaX}deg) rotateX(${-deltaY}deg)`; }); // Reset position when mouse leaves cardFront.addEventListener('mouseleave', () => { if (cardContainer.classList.contains('flipped')) return; cardContainer.style.transform = 'rotateX(0) rotateY(0)'; }); // Flip card when clicking front cardFront.addEventListener('click', () => { cardContainer.classList.add('flipped'); }); // Go back to front when clicking the back button backToFront.addEventListener('click', (e) => { e.stopPropagation(); cardContainer.classList.remove('flipped'); }); // Color dots interaction const colorDots = document.querySelectorAll('.color-dot'); colorDots.forEach(dot => { dot.addEventListener('click', (e) => { e.stopPropagation(); const color = getComputedStyle(dot).backgroundColor; const tempElement = document.createElement('div'); tempElement.style.position = 'fixed'; tempElement.style.top = '50%'; tempElement.style.left = '50%'; tempElement.style.transform = 'translate(-50%, -50%)'; tempElement.style.padding = '10px 20px'; tempElement.style.backgroundColor = 'rgba(0,0,0,0.8)'; tempElement.style.color = '#fff'; tempElement.style.borderRadius = '5px'; tempElement.style.fontSize = '12px'; tempElement.style.zIndex = '1000'; tempElement.textContent = `Color copied: ${colorToHex(color)}`; document.body.appendChild(tempElement); setTimeout(() => { tempElement.remove(); }, 1500); // Visual feedback dot.style.transform = 'scale(1.5)'; setTimeout(() => { dot.style.transform = ''; }, 300); }); }); // Helper function to convert RGB to HEX function colorToHex(color) { // Remove everything except the RGB values const rgb = color.replace(/[^\d,]/g, '').split(','); // Convert RGB to HEX return `#${parseInt(rgb[0]).toString(16).padStart(2, '0')}${parseInt(rgb[1]).toString(16).padStart(2, '0')}${parseInt(rgb[2]).toString(16).padStart(2, '0')}`; } // Touch events for mobile cardFront.addEventListener('touchstart', () => { cardContainer.classList.add('flipped'); }); backToFront.addEventListener('touchstart', (e) => { e.stopPropagation(); cardContainer.classList.remove('flipped'); }); // Initialize hover effects for service tags const serviceTags = document.querySelectorAll('.service-tag'); serviceTags.forEach(tag => { tag.addEventListener('mouseenter', () => { serviceTags.forEach(otherTag => { if (otherTag !== tag) { otherTag.style.opacity = '0.5'; } }); }); tag.addEventListener('mouseleave', () => { serviceTags.forEach(otherTag => { otherTag.style.opacity = '1'; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Industrial Manufacturing Robustness Card</title> <style> :root { --primary-color: #242424; --secondary-color: #424242; --accent-color: #a8a8a8; --metallic-silver: linear-gradient(145deg, #c0c0c0, #e0e0e0, #a0a0a0); --highlight-color: #707070; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', 'Arial', sans-serif; } body { background-color: #1a1a1a; display: flex; justify-content: center; align-items: center; min-height: 700px; perspective: 1000px; overflow: hidden; } .card-container { width: 400px; max-width: 90%; position: relative; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .card-container.flipped { transform: rotateY(180deg); } .card { width: 100%; height: 220px; background-color: var(--primary-color); border-radius: 2px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); position: relative; backface-visibility: hidden; transform-style: preserve-3d; overflow: hidden; } .card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="100" height="100" fill="%23242424"/><rect x="0" y="0" width="50" height="50" fill="%23262626"/><rect x="50" y="50" width="50" height="50" fill="%23262626"/></svg>'); background-size: 10px; opacity: 0.05; z-index: 0; } .front, .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 30px; } .back { transform: rotateY(180deg); background-color: var(--secondary-color); } .logo { width: 80px; height: 80px; background: var(--metallic-silver); position: relative; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); display: flex; justify-content: center; align-items: center; transform: translateZ(20px); margin-bottom: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .logo::after { content: "FORGE"; font-weight: 900; font-size: 16px; letter-spacing: 1px; color: var(--primary-color); } .name { font-size: 24px; font-weight: 900; text-transform: uppercase; color: white; letter-spacing: 2px; transform: translateZ(15px); position: relative; margin-bottom: 10px; } .name::after { content: ""; position: absolute; bottom: -6px; left: 0; width: 60px; height: 3px; background: var(--metallic-silver); } .title { font-size: 14px; font-weight: 600; color: var(--accent-color); text-transform: uppercase; letter-spacing: 1px; transform: translateZ(10px); margin-bottom: 20px; } .contact-info { margin-top: 20px; transform: translateZ(5px); } .contact-item { display: flex; align-items: center; margin-bottom: 8px; color: white; font-size: 13px; } .contact-item i { width: 20px; margin-right: 10px; color: var(--accent-color); } .texture-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; background: repeating-linear-gradient( 90deg, transparent, transparent 10px, var(--highlight-color) 10px, var(--highlight-color) 12px ); } .back .texture-line { top: 0; bottom: auto; } .tagline { font-size: 14px; font-weight: 700; text-transform: uppercase; color: white; letter-spacing: 1px; line-height: 1.4; text-align: center; margin: 30px 0; transform: translateZ(10px); } .services { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; transform: translateZ(15px); } .service-item { background-color: var(--primary-color); color: white; padding: 8px 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border-radius: 2px; position: relative; overflow: hidden; } .service-item::before { content: ""; position: absolute; left: -20px; top: 0; width: 20px; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); animation: shimmer 2s infinite; transform: skewX(-25deg); } @keyframes shimmer { 0% { left: -20px; } 100% { left: 100%; } } .flip-btn { position: absolute; right: 20px; bottom: 20px; width: 40px; height: 40px; background-color: var(--highlight-color); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 10; transform: translateZ(30px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); transition: transform 0.3s, background-color 0.3s; } .flip-btn:hover { transform: translateZ(30px) scale(1.1); background-color: var(--accent-color); } .flip-btn::before { content: ""; width: 12px; height: 12px; border-top: 2px solid white; border-right: 2px solid white; transform: rotate(45deg); } .back .flip-btn::before { transform: rotate(-135deg); } .metal-accent { position: absolute; width: 100px; height: 100px; background: var(--metallic-silver); top: -50px; right: -50px; transform: rotate(45deg); box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); z-index: 0; } .footer { position: absolute; bottom: 40px; left: 0; width: 100%; padding: 10px 30px; display: flex; justify-content: space-between; align-items: center; color: white; font-size: 12px; z-index: 2; } .website { font-weight: bold; letter-spacing: 1px; color: var(--accent-color); position: relative; } .website::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background-color: var(--accent-color); transition: width 0.3s ease; } .website:hover::after { width: 100%; } .screws { position: absolute; width: 10px; height: 10px; background: radial-gradient(circle at center, #6c6c6c, #424242); border-radius: 50%; z-index: 5; } .screw-1 { top: 15px; left: 15px; } .screw-2 { top: 15px; right: 15px; } .screw-3 { bottom: 15px; left: 15px; } .screw-4 { bottom: 15px; right: 15px; } .instruction { text-align: center; color: #a8a8a8; font-size: 14px; position: absolute; bottom: 15px; width: 100%; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } .loading-bar { position: absolute; top: 0; left: 0; height: 3px; background: var(--metallic-silver); width: 0%; transition: width 0.5s ease; z-index: 10; } @media (max-width: 500px) { .card { height: 190px; } .name { font-size: 20px; } .logo { width: 60px; height: 60px; } .contact-item { font-size: 12px; } .tagline { font-size: 12px; margin: 20px 0; } .service-item { font-size: 10px; padding: 6px 10px; } } </style> </head> <body> <div class="loading-bar" id="loadingBar"></div> <div class="card-container" id="cardContainer"> <div class="card front"> <div class="metal-accent"></div> <div class="screw-1 screws"></div> <div class="screw-2 screws"></div> <div class="screw-3 screws"></div> <div class="screw-4 screws"></div> <div class="texture-line"></div> <div class="logo"></div> <div class="name">Sarah Reynolds</div> <div class="title">Precision Systems Engineer</div> <div class="contact-info"> <div class="contact-item"> <i>📱</i> +1 (534) 289-6027 </div> <div class="contact-item"> <i>✉️</i> [email protected] </div> <div class="contact-item"> <i>📍</i> Pittsburgh, PA </div> </div> <div class="flip-btn" id="flipBtnFront"></div> </div> <div class="card back"> <div class="screw-1 screws"></div> <div class="screw-2 screws"></div> <div class="screw-3 screws"></div> <div class="screw-4 screws"></div> <div class="texture-line"></div> <div class="tagline"> ENGINEERING STRENGTH<br> MANUFACTURING PRECISION<br> INDUSTRIAL DURABILITY </div> <div class="services"> <div class="service-item">CNC Machining</div> <div class="service-item">Tool Design</div> <div class="service-item">Metal Fabrication</div> <div class="service-item">Robotic Systems</div> <div class="service-item">Quality Control</div> <div class="service-item">Process Automation</div> </div> <div class="footer"> <div class="website">FORGEMFG.COM</div> <div>EST. 1986</div> </div> <div class="flip-btn" id="flipBtnBack"></div> </div> </div> <div class="instruction">Click the circle button to flip the card</div> <script> document.addEventListener('DOMContentLoaded', function() { const cardContainer = document.getElementById('cardContainer'); const flipBtnFront = document.getElementById('flipBtnFront'); const flipBtnBack = document.getElementById('flipBtnBack'); const loadingBar = document.getElementById('loadingBar'); // Loading animation let width = 0; const loadingInterval = setInterval(() => { width += 5; loadingBar.style.width = width + '%'; if (width >= 100) { clearInterval(loadingInterval); setTimeout(() => { loadingBar.style.opacity = '0'; }, 300); } }, 50); // 3D effect on mouse move cardContainer.addEventListener('mousemove', function(e) { const rect = cardContainer.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; const rotateY = (x - centerX) / 20; const rotateX = (centerY - y) / 20; cardContainer.style.transform = `rotateY(${rotateY}deg) rotateX(${rotateX}deg) ${cardContainer.classList.contains('flipped') ? 'rotateY(180deg)' : ''}`; }); cardContainer.addEventListener('mouseleave', function() { cardContainer.style.transform = cardContainer.classList.contains('flipped') ? 'rotateY(180deg)' : ''; }); // Flip functionality flipBtnFront.addEventListener('click', function() { cardContainer.classList.add('flipped'); }); flipBtnBack.addEventListener('click', function() { cardContainer.classList.remove('flipped'); }); // Service items shimmer effect at different times const serviceItems = document.querySelectorAll('.service-item'); serviceItems.forEach((item, index) => { item.style.animationDelay = `${index * 0.5}s`; }); // Tactile feedback on card click cardContainer.addEventListener('click', function(e) { if (e.target !== flipBtnFront && e.target !== flipBtnBack) { cardContainer.classList.add('clicked'); setTimeout(() => { cardContainer.classList.remove('clicked'); }, 100); } }); // Add subtle animation to the metallic accents const metalAccent = document.querySelector('.metal-accent'); setInterval(() => { metalAccent.style.backgroundImage = `linear-gradient(${Math.random() * 360}deg, #c0c0c0, #e0e0e0, #a0a0a0)`; }, 3000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Finance Consulting Business Card</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f5f7fa; perspective: 1000px; } .container { width: 100%; max-width: 650px; height: 650px; display: flex; justify-content: center; align-items: center; } .card-container { width: 400px; height: 230px; position: relative; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .card-container:hover { transform: rotateY(180deg); cursor: pointer; } .card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 10px; box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); overflow: hidden; } .card-front { background: linear-gradient(145deg, #2c3e50, #1a5276); display: flex; flex-direction: column; justify-content: center; padding: 30px; position: relative; } .card-back { background: linear-gradient(145deg, #f5f7fa, #e4eaf1); transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; padding: 30px; color: #2c3e50; } .logo { position: absolute; top: 25px; left: 30px; font-size: 24px; font-weight: 700; color: #ffffff; letter-spacing: 1px; } .logo span { color: #3498db; } .name { font-size: 22px; font-weight: 700; color: #ffffff; margin-bottom: 5px; letter-spacing: 0.5px; } .title { font-size: 14px; color: #3498db; font-weight: 500; margin-bottom: 20px; letter-spacing: 1px; } .contact { margin-top: 25px; } .contact-item { display: flex; align-items: center; margin-bottom: 8px; color: #ecf0f1; font-size: 12px; } .contact-item i { margin-right: 10px; color: #3498db; width: 16px; } .tagline { position: absolute; bottom: 25px; right: 30px; font-size: 11px; color: #bdc3c7; font-style: italic; } .pattern { position: absolute; top: 0; right: 0; height: 100%; width: 40%; background: linear-gradient(45deg, rgba(52, 152, 219, 0.05) 25%, transparent 25%, transparent 50%, rgba(52, 152, 219, 0.05) 50%, rgba(52, 152, 219, 0.05) 75%, transparent 75%, transparent); background-size: 8px 8px; opacity: 0.3; } .service-title { font-size: 16px; font-weight: 600; color: #2c3e50; margin-bottom: 15px; border-bottom: 2px solid #3498db; padding-bottom: 5px; display: inline-block; } .services { list-style-type: none; margin-bottom: 20px; } .services li { position: relative; padding-left: 15px; margin-bottom: 6px; font-size: 13px; color: #34495e; } .services li:before { content: '•'; color: #3498db; position: absolute; left: 0; } .cta { font-size: 14px; color: #2c3e50; margin-top: 15px; font-weight: 600; } .back-logo { position: absolute; bottom: 25px; right: 30px; font-size: 18px; font-weight: 700; color: #2c3e50; opacity: 0.5; } .back-logo span { color: #3498db; } .social-icons { position: absolute; bottom: 25px; left: 30px; display: flex; } .social-icon { width: 24px; height: 24px; margin-right: 12px; display: flex; align-items: center; justify-content: center; background-color: #3498db; color: white; border-radius: 50%; font-size: 12px; transition: all 0.3s ease; } .social-icon:hover { transform: translateY(-3px); background-color: #2c3e50; } .floating-elements { position: absolute; width: 100%; height: 100%; pointer-events: none; } .floating-dot { position: absolute; background-color: rgba(52, 152, 219, 0.3); border-radius: 50%; } @media (max-width: 600px) { .card-container { width: 320px; height: 185px; } .logo { top: 15px; left: 20px; font-size: 20px; } .name { font-size: 18px; } .title { font-size: 12px; margin-bottom: 15px; } .contact-item { font-size: 10px; margin-bottom: 6px; } .tagline { bottom: 15px; right: 20px; font-size: 9px; } .service-title { font-size: 14px; margin-bottom: 10px; } .services li { font-size: 11px; margin-bottom: 4px; } .cta { font-size: 12px; margin-top: 10px; } .back-logo { bottom: 15px; right: 20px; font-size: 16px; } .social-icons { bottom: 15px; left: 20px; } .social-icon { width: 20px; height: 20px; font-size: 10px; margin-right: 8px; } } /* Subtle pulse animation for the logo */ @keyframes pulse { 0% { opacity: 0.8; } 50% { opacity: 1; } 100% { opacity: 0.8; } } .logo { animation: pulse 3s infinite ease-in-out; } /* Gradient shift animation */ @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .card-front { background-size: 200% 200%; animation: gradientShift 15s ease infinite; } </style> </head> <body> <div class="container"> <div class="card-container"> <div class="card-front"> <div class="pattern"></div> <div class="floating-elements" id="floatingElements"></div> <div class="logo">ATLAS<span>CAPITAL</span></div> <h1 class="name">JONATHAN R. HARRINGTON</h1> <div class="title">SENIOR PORTFOLIO STRATEGIST</div> <div class="contact"> <div class="contact-item"> <i>📱</i> +1 (212) 555-7890 </div> <div class="contact-item"> <i>📧</i> [email protected] </div> <div class="contact-item"> <i>🌐</i> atlascapital.com </div> <div class="contact-item"> <i>📍</i> 350 Park Avenue, New York, NY 10022 </div> </div> <div class="tagline">Strategic financial solutions since 1995</div> </div> <div class="card-back"> <h2 class="service-title">SPECIALIZED SERVICES</h2> <ul class="services"> <li>Institutional Portfolio Optimization</li> <li>Risk-Adjusted Return Maximization</li> <li>Market Volatility Hedging Strategies</li> <li>Alternative Investment Integration</li> <li>Sustainable Investment Solutions</li> </ul> <div class="cta">Schedule a confidential consultation to optimize your investment strategy</div> <div class="social-icons"> <div class="social-icon">in</div> <div class="social-icon">tw</div> <div class="social-icon">fb</div> </div> <div class="back-logo">ATLAS<span>CAPITAL</span></div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Create floating dots const floatingElements = document.getElementById('floatingElements'); for (let i = 0; i < 20; i++) { createFloatingDot(floatingElements); } // Parallax effect on card hover const cardContainer = document.querySelector('.card-container'); const cardFront = document.querySelector('.card-front'); document.addEventListener('mousemove', function(e) { if (!cardContainer.classList.contains('is-flipped')) { const xAxis = (window.innerWidth / 2 - e.pageX) / 25; const yAxis = (window.innerHeight / 2 - e.pageY) / 25; cardContainer.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; } }); // Reset rotation when mouse leaves document.addEventListener('mouseleave', function() { cardContainer.style.transform = 'rotateY(0deg) rotateX(0deg)'; }); // Click to flip card cardContainer.addEventListener('click', function() { this.classList.toggle('is-flipped'); if (this.classList.contains('is-flipped')) { this.style.transform = 'rotateY(180deg)'; } else { this.style.transform = 'rotateY(0deg)'; } }); }); function createFloatingDot(container) { const dot = document.createElement('div'); dot.classList.add('floating-dot'); // Random size between 3 and 8px const size = Math.random() * 5 + 3; dot.style.width = `${size}px`; dot.style.height = `${size}px`; // Random position dot.style.left = `${Math.random() * 100}%`; dot.style.top = `${Math.random() * 100}%`; // Random opacity dot.style.opacity = Math.random() * 0.3 + 0.1; // Add animation with random duration const duration = Math.random() * 20 + 10; dot.style.animation = `float ${duration}s infinite ease-in-out`; // Add keyframe animation dynamically const keyframes = ` @keyframes float { 0% { transform: translate(0, 0); } 50% { transform: translate(${Math.random() * 30 - 15}px, ${Math.random() * 30 - 15}px); } 100% { transform: translate(0, 0); } } `; const style = document.createElement('style'); style.innerHTML = keyframes; document.head.appendChild(style); container.appendChild(dot); } </script> </body> </html>
