CINXE.COM
JILLELLA - Photographer VCard
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JILLELLA - Photographer VCard</title> <link href="https://fonts.googleapis.com/css2?family=Poiret+One&family=Cormorant+Garamond:wght@300&family=Nunito+Sans:wght@200;400&display=swap" rel="stylesheet"> <style> body { font-family: 'Nunito Sans', sans-serif; background-color: #000; color: #fff; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .vcard { background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%); border-radius: 20px; padding: 40px; max-width: 320px; width: 100%; text-align: center; backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); transition: transform 0.3s ease; } .vcard:hover { transform: translateY(-5px); } h1 { font-family: 'Poiret One', cursive; font-size: 3.5em; margin: 20px 0 10px; letter-spacing: 3px; font-weight: normal; } .title { font-family: 'Cormorant Garamond', serif; font-size: 1.1em; letter-spacing: 8px; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 30px; font-weight: 300; } .photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: top; margin: 0 auto 20px; border: 1px solid rgba(255,255,255,0.2); padding: 5px; } .contact-info { margin: 30px 0; font-weight: 200; } .contact-info p { margin: 12px 0; font-size: 0.95em; color: rgba(255,255,255,0.8); transition: color 0.3s ease; -webkit-text-fill-color: rgba(255,255,255,0.8); text-decoration: none; } .contact-info p a { color: inherit; text-decoration: none; -webkit-text-fill-color: inherit; } .contact-info p:hover { color: #fff; } .download-btn { background: transparent; color: #fff; padding: 12px 30px; border: 1px solid rgba(255,255,255,0.2); border-radius: 25px; cursor: pointer; text-decoration: none; display: inline-block; font-size: 0.9em; letter-spacing: 1px; transition: all 0.3s ease; margin-top: 10px; } .download-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); transform: translateY(-2px); } .separator { width: 30px; height: 1px; background: rgba(255,255,255,0.2); margin: 25px auto; } .contact-info .full-name { font-weight: 400; letter-spacing: 1px; } </style> </head> <body> <div class="vcard"> <img src="images/photo.jpg" alt="JILLELLA" class="photo"> <h1>Jillella</h1> <div class="title">Photographer</div> <div class="separator"></div> <div class="contact-info"> <p class="full-name">Venkata Jillella</p> <p><a href="mailto:venkata@jillella.com">venkata@jillella.com</a></p> <p><a href="tel:+17742889713">+1 (774) 288-9713</a></p> <p>jillella.com</p> </div> <a href="jillella.vcf" download class="download-btn">SAVE CONTACT</a> </div> <script> // Generate VCF content const vcfContent = `BEGIN:VCARD VERSION:3.0 N:Jillella;Venkata;;; FN:Venkata Jillella ORG:JILLELLA Photography TITLE:Photographer TEL;TYPE=WORK,VOICE:+1 (774) 288-9713 EMAIL;TYPE=PREF,INTERNET:venkata@jillella.com URL:https://jillella.com END:VCARD`; // Create Blob and download link const blob = new Blob([vcfContent], { type: 'text/vcard' }); const downloadLink = document.querySelector('.download-btn'); downloadLink.href = URL.createObjectURL(blob); </script> </body> </html>