0x1998 - MANAGER
DΓΌzenlenen Dosya: webinars.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Webinars β Nexlance</title> <link rel="icon" type="image/png" href="images/fav.png"> <link rel="stylesheet" href="styles.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <style> .page-hero { padding:140px 0 60px; background:linear-gradient(135deg,#f8fafc 0%,#e0e7ff 50%,#f8fafc 100%); text-align:center; position:relative; overflow:hidden; } .page-hero::before { content:''; position:absolute; width:500px; height:500px; border-radius:50%; background:rgba(79,70,229,.07); top:-150px; right:-150px; } .page-hero::after { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(124,58,237,.07); bottom:-80px; left:-80px; } .page-hero .container { position:relative; z-index:1; } .page-hero-label { display:inline-block; font-size:var(--font-size-sm); font-weight:600; color:var(--color-secondary); text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem; } .page-hero h1 { font-size:var(--font-size-5xl); font-weight:800; line-height:1.15; margin-bottom:1rem; } .page-hero p { font-size:var(--font-size-lg); color:var(--color-text-light); max-width:580px; margin:0 auto; line-height:1.7; } /* Tabs */ .wb-tabs { display:flex; justify-content:center; gap:0; border-bottom:2px solid var(--color-border); margin-bottom:3rem; } .wb-tab { padding:1rem 2rem; font-size:var(--font-size-base); font-weight:600; color:var(--color-text-light); background:none; border:none; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s; } .wb-tab.active { color:var(--color-secondary); border-bottom-color:var(--color-secondary); } .wb-tab:hover:not(.active) { color:var(--color-text); } .wb-panel { display:none; } .wb-panel.active { display:block; } /* Upcoming webinar cards */ .wb-upcoming-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; } .wb-card { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-2xl); overflow:hidden; transition:all .2s; } .wb-card:hover { box-shadow:var(--shadow-xl); transform:translateY(-4px); } .wb-card-header { height:180px; display:flex; align-items:center; justify-content:center; font-size:4rem; position:relative; } .wb-live-badge { position:absolute; top:12px; left:12px; background:#ef4444; color:#fff; font-size:var(--font-size-xs); font-weight:700; padding:.3rem .75rem; border-radius:var(--radius-full); display:flex; align-items:center; gap:.4rem; } .wb-live-dot { width:7px; height:7px; background:#fff; border-radius:50%; animation:pulse 1.5s ease-in-out infinite; } .wb-date-badge { position:absolute; top:12px; right:12px; background:rgba(0,0,0,.6); color:#fff; font-size:var(--font-size-xs); font-weight:700; padding:.3rem .75rem; border-radius:var(--radius-full); } .wb-card-body { padding:1.75rem; } .wb-topic { font-size:var(--font-size-xs); font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--color-secondary); margin-bottom:.5rem; } .wb-card-body h3 { font-size:var(--font-size-xl); font-weight:800; margin-bottom:.75rem; line-height:1.3; } .wb-card-body p { font-size:var(--font-size-sm); color:var(--color-text-light); line-height:1.7; margin-bottom:1.25rem; } .wb-meta { display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; } .wb-meta-item { display:flex; align-items:center; gap:.4rem; font-size:var(--font-size-sm); color:var(--color-text-light); } .wb-speaker { display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem; } .wb-speaker-av { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--color-secondary),var(--color-accent)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:var(--font-size-sm); flex-shrink:0; } .wb-speaker-info strong { display:block; font-size:var(--font-size-sm); font-weight:700; } .wb-speaker-info span { font-size:var(--font-size-xs); color:var(--color-text-light); } /* Recorded grid */ .wb-rec-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } .wb-rec-card { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-xl); overflow:hidden; transition:all .2s; } .wb-rec-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); } .wb-rec-thumb { height:150px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; position:relative; cursor:pointer; } .play-overlay { position:absolute; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; } .wb-rec-card:hover .play-overlay { opacity:1; } .play-btn { width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; font-size:1.25rem; } .wb-rec-body { padding:1.25rem; } .wb-rec-body h4 { font-size:var(--font-size-base); font-weight:700; margin-bottom:.4rem; line-height:1.4; } .wb-rec-meta { display:flex; gap:1rem; font-size:var(--font-size-xs); color:var(--color-text-lighter); margin-bottom:.75rem; } .wb-rec-tags { display:flex; flex-wrap:wrap; gap:.4rem; } .wb-tag { font-size:var(--font-size-xs); font-weight:600; padding:.2rem .65rem; border-radius:var(--radius-full); background:rgba(79,70,229,.08); color:var(--color-secondary); } @media(max-width:1024px){ .wb-rec-grid{grid-template-columns:repeat(2,1fr);} } @media(max-width:768px){ .wb-upcoming-grid,.wb-rec-grid{grid-template-columns:1fr;} .page-hero h1{font-size:var(--font-size-4xl);} } </style> </head> <body> <nav class="navbar" id="navbar"> <div class="nav-container"> <a href="index.html" class="logo"><span class="logo-icon">β</span> Nexlance</a> <ul class="nav-menu" id="nav-menu"> <li class="nav-item has-dropdown"> <a href="#">Products <span class="arrow">βΎ</span></a> <div class="dropdown"><div class="dropdown-grid"> <a href="#" class="dropdown-item"><span class="dropdown-icon">π</span><div><h4>Websites</h4><p>Professional site builder</p></div></a> <a href="#" class="dropdown-item"><span class="dropdown-icon">π</span><div><h4>E-commerce</h4><p>Online store solutions</p></div></a> <a href="#" class="dropdown-item"><span class="dropdown-icon">π§</span><div><h4>Email Marketing</h4><p>Campaign tools</p></div></a> <a href="#" class="dropdown-item"><span class="dropdown-icon">π </span><div><h4>Scheduling</h4><p>Appointment booking</p></div></a> </div></div> </li> <li class="nav-item has-dropdown"> <a href="templates.html">Templates <span class="arrow">βΎ</span></a> <div class="dropdown dropdown-templates"> <div class="dropdown-grid templates-grid"> <a href="#" class="template-thumb"><div class="thumb-img" style="background:linear-gradient(135deg,#667eea,#764ba2);"><img src="images/f2.webp" alt="Portfolio Template" style="width:100%;height:100%;object-fit:cover;"></div><span>Portfolio</span></a> <a href="#" class="template-thumb"><div class="thumb-img" style="background:linear-gradient(135deg,#f093fb,#f5576c);"><img src="images/business.jpg" alt="Business Template" style="width:100%;height:100%;object-fit:cover;"></div><span>Business</span></a> <a href="#" class="template-thumb"><div class="thumb-img" style="background:linear-gradient(135deg,#4facfe,#00f2fe);"><img src="images/creative.jpg" alt="Blog Template" style="width:100%;height:100%;object-fit:cover;"></div><span>Blog</span></a> <a href="#" class="template-thumb"><div class="thumb-img" style="background:linear-gradient(135deg,#43e97b,#38f9d7);"><img src="images/store.avif" alt="Store Template" style="width:100%;height:100%;object-fit:cover;"></div><span>Store</span></a> </div> <a href="templates.html" class="dropdown-view-all">View All Templates β</a> </div> </li> <li class="nav-item"><a href="pricing.html">Pricing</a></li> <li class="nav-item"><a href="features.html">Features</a></li> <li class="nav-item"><a href="#">Resources</a></li> </ul> <div class="nav-actions"> <a href="login.html" class="btn-text">Log In</a> <a href="login.html" class="btn-primary">Get Started</a> </div> <button class="mobile-toggle" id="mobile-toggle"><span></span><span></span><span></span></button> </div> </nav> <section class="page-hero"> <div class="container"> <span class="page-hero-label">Webinars</span> <h1>Learn from <span class="gradient-text">the experts</span></h1> <p>Free live webinars and recorded sessions covering everything from launching your first website to scaling your online store.</p> </div> </section> <section style="background:#fff;"> <div class="container"> <div class="wb-tabs"> <button class="wb-tab active" data-panel="upcoming">Upcoming (3)</button> <button class="wb-tab" data-panel="recorded">Recorded Sessions</button> </div> <!-- Upcoming --> <div class="wb-panel active" id="panel-upcoming"> <div class="wb-upcoming-grid"> <div class="wb-card"> <div class="wb-card-header" style="background:linear-gradient(135deg,#e0e7ff,#c4b5fd);"> <img src="images/start.jpg" alt="Webinar Thumbnail" style="width:100%;height:100%;object-fit:cover;"> <span class="wb-date-badge">Mar 5 Β· 6PM IST</span> </div> <div class="wb-card-body"> <div class="wb-topic">Getting Started</div> <h3>Build a Professional Website in 60 Minutes</h3> <p>Watch our product expert build a complete business website live β from template selection to custom domain setup and going live.</p> <div class="wb-meta"> <span class="wb-meta-item">π 60 minutes</span> <span class="wb-meta-item">π Free</span> <span class="wb-meta-item">π₯ 342 registered</span> </div> <div class="wb-speaker"> <div class="wb-speaker-av">RN</div> <div class="wb-speaker-info"><strong>Rohan Nair</strong><span>Chief Product Officer, Nexlance</span></div> </div> <a href="login.html" class="btn-primary" style="width:100%;display:block;text-align:center;padding:.9rem;">Register Free</a> </div> </div> <div class="wb-card"> <div class="wb-card-header" style="background:linear-gradient(135deg,#d1fae5,#6ee7b7);"> <img src="images/ecommerce1.webp" alt="Webinar Thumbnail" style="width:100%;height:100%;object-fit:cover;"> <span class="wb-date-badge">Mar 12 Β· 7PM IST</span> </div> <div class="wb-card-body"> <div class="wb-topic">E-commerce</div> <h3>Launch Your Online Store: Payments, Shipping & SEO</h3> <p>Step-by-step walkthrough of setting up products, configuring Razorpay/Stripe, managing orders, and getting your store found on Google.</p> <div class="wb-meta"> <span class="wb-meta-item">π 90 minutes</span> <span class="wb-meta-item">π Free</span> <span class="wb-meta-item">π₯ 518 registered</span> </div> <div class="wb-speaker"> <div class="wb-speaker-av">SG</div> <div class="wb-speaker-info"><strong>Sunita Gupta</strong><span>VP Marketing, Nexlance</span></div> </div> <a href="login.html" class="btn-primary" style="width:100%;display:block;text-align:center;padding:.9rem;">Register Free</a> </div> </div> <div class="wb-card" style="grid-column:1/-1;"> <div style="display:grid; grid-template-columns:300px 1fr; overflow:hidden; border-radius:inherit;"> <div class="wb-card-header" style="background:linear-gradient(135deg,#1e1b4b,#7c3aed); height:auto; min-height:220px;"> <img src="images/ai-tools.webp" alt="Webinar Thumbnail" style="width:100%;height:100%;object-fit:cover;"> <span class="wb-date-badge">Mar 20 Β· 5PM IST</span> </div> <div class="wb-card-body"> <div class="wb-topic">AI Tools Β· Advanced</div> <h3>AI-Powered Web Design: Build Smarter, Not Harder</h3> <p>Deep dive into Nexlance's AI Design Assistant. Learn how to use AI to generate entire websites, write copy, create images, and optimize for SEO β all without design experience.</p> <div class="wb-meta"> <span class="wb-meta-item">π 75 minutes</span> <span class="wb-meta-item">π Free</span> <span class="wb-meta-item">π₯ 891 registered</span> </div> <div class="wb-speaker"> <div class="wb-speaker-av">AK</div> <div class="wb-speaker-info"><strong>Arjun Kapoor</strong><span>CEO & Co-Founder, Nexlance</span></div> </div> <a href="login.html" class="btn-primary">Register Free</a> </div> </div> </div> </div> </div> <!-- Recorded --> <div class="wb-panel" id="panel-recorded"> <div class="wb-rec-grid"> <div class="wb-rec-card"> <div class="wb-rec-thumb" style="background:linear-gradient(135deg,#e0e7ff,#c4b5fd);"> βοΈ <div class="play-overlay"><div class="play-btn">βΆ</div></div> </div> <div class="wb-rec-body"> <h4>Editor Masterclass: Advanced Layout Techniques</h4> <div class="wb-rec-meta"><span>π 52 min</span><span>π Jan 2026</span></div> <div class="wb-rec-tags"><span class="wb-tag">Editor</span><span class="wb-tag">Design</span></div> </div> </div> <div class="wb-rec-card"> <div class="wb-rec-thumb" style="background:linear-gradient(135deg,#fef3c7,#fcd34d);"> π <div class="play-overlay"><div class="play-btn">βΆ</div></div> </div> <div class="wb-rec-body"> <h4>SEO Fundamentals for Small Business Owners</h4> <div class="wb-rec-meta"><span>π 68 min</span><span>π Dec 2025</span></div> <div class="wb-rec-tags"><span class="wb-tag">SEO</span><span class="wb-tag">Marketing</span></div> </div> </div> <div class="wb-rec-card"> <div class="wb-rec-thumb" style="background:linear-gradient(135deg,#d1fae5,#6ee7b7);"> π° <div class="play-overlay"><div class="play-btn">βΆ</div></div> </div> <div class="wb-rec-body"> <h4>5 Ways to Increase Your Online Store Revenue</h4> <div class="wb-rec-meta"><span>π 44 min</span><span>π Dec 2025</span></div> <div class="wb-rec-tags"><span class="wb-tag">E-commerce</span><span class="wb-tag">Growth</span></div> </div> </div> <div class="wb-rec-card"> <div class="wb-rec-thumb" style="background:linear-gradient(135deg,#fee2e2,#fca5a5);"> π§ <div class="play-overlay"><div class="play-btn">βΆ</div></div> </div> <div class="wb-rec-body"> <h4>Email Marketing: Build & Nurture Your Subscriber List</h4> <div class="wb-rec-meta"><span>π 61 min</span><span>π Nov 2025</span></div> <div class="wb-rec-tags"><span class="wb-tag">Email</span><span class="wb-tag">Marketing</span></div> </div> </div> <div class="wb-rec-card"> <div class="wb-rec-thumb" style="background:linear-gradient(135deg,#ede9fe,#c4b5fd);"> π¨ <div class="play-overlay"><div class="play-btn">βΆ</div></div> </div> <div class="wb-rec-body"> <h4>Design Principles: Make Your Website Look Professional</h4> <div class="wb-rec-meta"><span>π 55 min</span><span>π Oct 2025</span></div> <div class="wb-rec-tags"><span class="wb-tag">Design</span><span class="wb-tag">Getting Started</span></div> </div> </div> <div class="wb-rec-card"> <div class="wb-rec-thumb" style="background:linear-gradient(135deg,#e0f2fe,#bae6fd);"> π <div class="play-overlay"><div class="play-btn">βΆ</div></div> </div> <div class="wb-rec-body"> <h4>Integrations & Automation with Zapier</h4> <div class="wb-rec-meta"><span>π 38 min</span><span>π Sep 2025</span></div> <div class="wb-rec-tags"><span class="wb-tag">Developer</span><span class="wb-tag">Automation</span></div> </div> </div> </div> </div> </div> </section> <section class="cta-section"> <div class="container"> <div class="cta-content"> <h2>Want us to cover a specific topic?</h2> <p>Tell us what webinar you'd like to see next and we'll make it happen.</p> <a href="contact.html" class="btn-primary btn-large">Suggest a Topic</a> </div> </div> </section> <footer class="footer"><div class="container"> <div class="footer-grid"> <div class="footer-brand"><a href="index.html" class="logo"><span class="logo-icon">β</span> Nexlance</a><p>Build beautiful websites without writing a single line of code.</p><div class="social-links"><a href="#">π</a><a href="#">in</a></div></div> <div class="footer-links"><h4>Product</h4><ul><li><a href="templates.html">Templates</a></li><li><a href="features.html">Features</a></li><li><a href="pricing.html">Pricing</a></li><li><a href="updates.html">Updates</a></li></ul></div> <div class="footer-links"><h4>Resources</h4><ul><li><a href="help-center.html">Help Center</a></li><li><a href="webinars.html">Webinars</a></li><li><a href="blog.html">Blog</a></li><li><a href="developers.html">Developers</a></li></ul></div> <div class="footer-links"><h4>Company</h4><ul><li><a href="about.html">About Us</a></li><li><a href="careers.html">Careers</a></li><li><a href="press.html">Press</a></li><li><a href="contact.html">Contact</a></li></ul></div> <div class="footer-links"><h4>Legal</h4><ul><li><a href="privacy.html">Privacy Policy</a></li><li><a href="terms.html">Terms of Service</a></li><li><a href="refund.html">Refund Policy</a></li></ul></div> </div> <div class="footer-bottom"><p>© 2026 Nexlance. All rights reserved.</p><div class="footer-bottom-links"><a href="terms.html">Terms & Services</a><a href="sitemap.html">Sitemap</a><a href="status.html">Status</a><a href="security.html">Security</a></div></div> </div></footer> <button class="back-to-top" id="back-to-top">β</button> <script src="main.js"></script> <script> document.querySelectorAll('.wb-tab').forEach(tab => { tab.addEventListener('click', () => { document.querySelectorAll('.wb-tab').forEach(t => t.classList.remove('active')); document.querySelectorAll('.wb-panel').forEach(p => p.classList.remove('active')); tab.classList.add('active'); document.getElementById('panel-' + tab.dataset.panel).classList.add('active'); }); }); document.querySelectorAll('.wb-rec-thumb').forEach(th => { th.addEventListener('click', () => alert('βΆ Video playback would open here in a production environment.')); }); </script> </body> </html>
geri dΓΆn