TechFix TV Repair
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TechFix TV Repair | Expert Television Repair Services | Professional TV Technicians</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;800;900&family=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-custom"> <div class="container"> <a class="navbar-brand tech-font" href="#home"> TechFix</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#services">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> <li class="nav-item"> <button class="btn btn-tech" onclick="openDiagnostic()"> <i class="fas fa-stethoscope me-2"></i>TV Diagnostic </button> </li> </ul> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="hero-section"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-7"> <div class="hero-content"> <div class="hero-badge"> Expert TV Repair Services</div> <h1 class="hero-title tech-font">TechFix TV Repair</h1> <p class="hero-subtitle">Professional television repair services for all brands and models. Expert diagnostics, quality parts, fast turnaround, and reliable solutions for your entertainment needs.</p> <div class="hero-features"> <span class="feature-badge">All Brands</span> <span class="feature-badge">Fast Service</span> <span class="feature-badge">Warranty Included</span> </div> <div class="hero-buttons"> <a href="#services" class="btn btn-custom btn-primary-custom">View Services</a> <a href="#contact" class="btn btn-custom btn-secondary-custom">Get Quote</a> </div> </div> </div> <div class="col-lg-5"> <div class="hero-image text-center"> <div class="tv-showcase"> <img src="https://images.unsplash.com/photo-1646821804389-9778ce2a4fd7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8VFYlMjBSZXBhaXJ8ZW58MHx8MHx8fDA%3D" alt=""> </div> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="services-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll tech-font">TV Repair Services</h2> <p class="section-subtitle animate-on-scroll">Comprehensive television repair solutions for all makes, models, and technical issues with professional expertise</p> </div> </div> <div class="services-grid"> <div class="service-card animate-on-scroll" onclick="selectService('Screen Repair')"> <div class="service-header"> <div class="service-icon"> <img src="https://plus.unsplash.com/premium_photo-1663013244412-1153aabaa1bc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8VFYlMjBSZXBhaXJ8ZW58MHx8MHx8fDA%3D" alt=""> </div> <div class="service-type">Screen Repair</div> <div class="service-overlay"> <a href="#" class="service-btn">Learn More</a> </div> </div> <div class="service-content"> <h4 class="service-name">Screen Repair</h4> <p class="service-description">Professional LCD, LED, OLED, and plasma screen repair services for cracked, damaged, or malfunctioning displays</p> <div class="service-price">$149<span style="font-size: 1rem; font-weight: 400;">+</span></div> <ul class="service-features"> <li>Cracked screen replacement</li> <li>Dead pixel repair</li> <li>Backlight issues</li> <li>Color distortion fixes</li> <li>Screen flickering solutions</li> <li>90-day warranty included</li> </ul> </div> </div> <div class="service-card animate-on-scroll" onclick="selectService('Power Issues')"> <div class="service-header"> <div class="service-icon"> <img src="https://images.unsplash.com/photo-1748932123709-7a340870408c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fFRWJTIwUmVwYWlyfGVufDB8fDB8fHww" alt=""> </div> <div class="service-type">Power Issues</div> <div class="service-overlay"> <a href="#" class="service-btn">Learn More</a> </div> </div> <div class="service-content"> <h4 class="service-name">Power Issues</h4> <p class="service-description">Complete power supply diagnosis and repair for TVs that won't turn on or have intermittent power problems</p> <div class="service-price">$89<span style="font-size: 1rem; font-weight: 400;">+</span></div> <ul class="service-features"> <li>Won't turn on diagnosis</li> <li>Power supply replacement</li> <li>Capacitor replacement</li> <li>Fuse and circuit repair</li> <li>Standby mode issues</li> <li>60-day warranty included</li> </ul> </div> </div> <div class="service-card animate-on-scroll" onclick="selectService('Audio Problems')"> <div class="service-header"> <div class="service-icon"> <img src="https://images.unsplash.com/photo-1639153697189-04bc5d043f64?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTEyfHxUViUyMFJlcGFpcnxlbnwwfHwwfHx8MA%3D%3D" alt=""> </div> <div class="service-type">Audio Problems</div> <div class="service-overlay"> <a href="#" class="service-btn">Learn More</a> </div> </div> <div class="service-content"> <h4 class="service-name">Audio Problems</h4> <p class="service-description">Expert audio repair services for sound issues, speaker problems, and audio circuit malfunctions</p> <div class="service-price">$79<span style="font-size: 1rem; font-weight: 400;">+</span></div> <ul class="service-features"> <li>No sound diagnosis</li> <li>Speaker replacement</li> <li>Audio board repair</li> <li>Volume control issues</li> <li>Distorted sound fixes</li> <li>60-day warranty included</li> </ul> </div> </div> <div class="service-card animate-on-scroll" onclick="selectService('Smart TV Issues')"> <div class="service-header"> <div class="service-icon"> <img src="https://images.unsplash.com/photo-1684390302469-33658af02ebd?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTE2fHxUViUyMFJlcGFpcnxlbnwwfHwwfHx8MA%3D%3D" alt=""> </div> <div class="service-type">Smart TV</div> <div class="service-overlay"> <a href="#" class="service-btn">Learn More</a> </div> </div> <div class="service-content"> <h4 class="service-name">Smart TV Issues</h4> <p class="service-description">Smart TV software troubleshooting, app issues, connectivity problems, and firmware updates</p> <div class="service-price">$69<span style="font-size: 1rem; font-weight: 400;">+</span></div> <ul class="service-features"> <li>WiFi connectivity issues</li> <li>App crashes and freezing</li> <li>Firmware updates</li> <li>Streaming problems</li> <li>Remote control pairing</li> <li>30-day warranty included</li> </ul> </div> </div> <div class="service-card animate-on-scroll" onclick="selectService('HDMI & Ports')"> <div class="service-header"> <div class="service-icon"> <img src="https://images.unsplash.com/photo-1697465379722-98040bb9c509?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTI3fHxUViUyMFJlcGFpcnxlbnwwfHwwfHx8MA%3D%3D" alt=""> </div> <div class="service-type">HDMI & Ports</div> <div class="service-overlay"> <a href="#" class="service-btn">Learn More</a> </div> </div> <div class="service-content"> <h4 class="service-name">HDMI & Ports</h4> <p class="service-description">HDMI port repair, USB port fixes, and input/output connection troubleshooting and replacement</p> <div class="service-price">$99<span style="font-size: 1rem; font-weight: 400;">+</span></div> <ul class="service-features"> <li>HDMI port replacement</li> <li>USB port repair</li> <li>Input switching issues</li> <li>Cable connection problems</li> <li>Port damage assessment</li> <li>60-day warranty included</li> </ul> </div> </div> <div class="service-card animate-on-scroll" onclick="selectService('Maintenance')"> <div class="service-header"> <div class="service-icon"> <img src="https://images.unsplash.com/photo-1646666478087-9cb25250dbf3?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTMwfHxUViUyMFJlcGFpcnxlbnwwfHwwfHx8MA%3D%3D" alt=""> </div> <div class="service-type">Maintenance</div> <div class="service-overlay"> <a href="#" class="service-btn">Learn More</a> </div> </div> <div class="service-content"> <h4 class="service-name">Maintenance</h4> <p class="service-description">Preventive maintenance, cleaning services, and performance optimization to extend TV lifespan</p> <div class="service-price">$49<span style="font-size: 1rem; font-weight: 400;">+</span></div> <ul class="service-features"> <li>Internal cleaning service</li> <li>Dust removal</li> <li>Ventilation check</li> <li>Performance optimization</li> <li>Preventive inspection</li> <li>30-day warranty included</li> </ul> </div> </div> </div> </div> </section> <!-- Brands Section --> <section id="brands" class="brands-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll tech-font">Supported Brands</h2> <p class="section-subtitle animate-on-scroll">Expert repair services for all major television brands with specialized knowledge and genuine parts</p> </div> </div> <div class="brands-grid"> <div class="brand-card animate-on-scroll" onclick="exploreBrand('Samsung')"> <div class="brand-icon"> <i class="fab fa-samsung"></i> </div> <h4 class="brand-name">Samsung</h4> <p class="brand-description">Complete Samsung TV repair services including QLED, Crystal UHD, and Smart TV models</p> <div class="brand-features">Certified Technicians</div> </div> <div class="brand-card animate-on-scroll" onclick="exploreBrand('LG')"> <div class="brand-icon"> <i class="fas fa-tv"></i> </div> <h4 class="brand-name">LG</h4> <p class="brand-description">Expert LG television repair including OLED, NanoCell, and webOS smart TV systems</p> <div class="brand-features">OLED Specialists</div> </div> <div class="brand-card animate-on-scroll" onclick="exploreBrand('Sony')"> <div class="brand-icon"> <i class="fas fa-desktop"></i> </div> <h4 class="brand-name">Sony</h4> <p class="brand-description">Professional Sony TV repair services for Bravia, Android TV, and 4K HDR models</p> <div class="brand-features">Bravia Experts</div> </div> <div class="brand-card animate-on-scroll" onclick="exploreBrand('TCL')"> <div class="brand-icon"> <i class="fas fa-monitor"></i> </div> <h4 class="brand-name">TCL</h4> <p class="brand-description">Comprehensive TCL television repair including Roku TV and Android TV platforms</p> <div class="brand-features">Roku TV Certified</div> </div> <div class="brand-card animate-on-scroll" onclick="exploreBrand('Hisense')"> <div class="brand-icon"> <i class="fas fa-display"></i> </div> <h4 class="brand-name">Hisense</h4> <p class="brand-description">Expert Hisense TV repair services for ULED, Laser TV, and smart TV models</p> <div class="brand-features">ULED Technology</div> </div> <div class="brand-card animate-on-scroll" onclick="exploreBrand('Vizio')"> <div class="brand-icon"> <i class="fas fa-tv-retro"></i> </div> <h4 class="brand-name">Vizio</h4> <p class="brand-description">Professional Vizio television repair including SmartCast and quantum dot displays</p> <div class="brand-features">SmartCast Experts</div> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll tech-font">Our Expertise</h2> <p class="section-subtitle animate-on-scroll">Professional TV repair services with certified technicians, quality parts, and reliable solutions</p> </div> </div> <div class="about-content animate-on-scroll"> <div class="about-info"> <h3 class="about-title tech-font">TechFix TV Repair</h3> <p class="about-description">Since 2010, TechFix has been the trusted choice for television repair services. Our certified technicians specialize in all major brands and use only genuine parts to ensure lasting repairs and customer satisfaction.</p> <div class="about-stats"> <div class="stat-item"> <span class="stat-number">15K+</span> <span class="stat-label">TVs Repaired</span> </div> <div class="stat-item"> <span class="stat-number">98%</span> <span class="stat-label">Success Rate</span> </div> <div class="stat-item"> <span class="stat-number">24hr</span> <span class="stat-label">Turnaround</span> </div> <div class="stat-item"> <span class="stat-number">50+</span> <span class="stat-label">Brands Supported</span> </div> </div> <button class="btn btn-custom btn-primary-custom" onclick="learnMore()"> <i class="fas fa-tools me-2"></i>Our Process </button> </div> <div class="about-showcase"> <i class="fas fa-wrench"></i> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title section-title-new animate-on-scroll tech-font">Get Your TV Fixed</h2> <p class="section-subtitle section-title-new animate-on-scroll">Contact our expert technicians for fast, reliable TV repair services with warranty included</p> </div> </div> <div class="contact-content animate-on-scroll"> <div class="contact-info"> <h3 class="contact-title tech-font">TechFix TV Repair</h3> <p class="contact-description">Your trusted television repair specialists. We provide fast, reliable, and affordable TV repair services for all brands and models with expert diagnosis and quality parts.</p> <div class="contact-methods"> <div class="contact-method"> <div class="contact-icon"> <i class="fas fa-phone"></i> </div> <div> <div><strong>Repair Hotline</strong></div> <div>(555) TV-REPAIR</div> </div> </div> <div class="contact-method"> <div class="contact-icon"> <i class="fas fa-envelope"></i> </div> <div> <div><strong>Service Email</strong></div> <div>service@techfixtvrepair.com</div> </div> </div> <div class="contact-method"> <div class="contact-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div> <div><strong>Service Center</strong></div> <div>456 Tech Avenue, Repair City, RC 12345</div> </div> </div> <div class="contact-method"> <div class="contact-icon"> <i class="fas fa-clock"></i> </div> <div> <div><strong>Service Hours</strong></div> <div>Mon-Fri: 8AM-6PM, Sat: 9AM-4PM</div> </div> </div> </div> </div> <div class="contact-form"> <form id="contactForm"> <div class="row"> <div class="col-md-6"> <label class="form-label">Full Name *</label> <input type="text" class="form-control" placeholder="Your name" required> </div> <div class="col-md-6"> <label class="form-label">Phone Number *</label> <input type="tel" class="form-control" placeholder="(555) 123-4567" required> </div> </div> <div class="row"> <div class="col-md-6"> <label class="form-label">Email Address *</label> <input type="email" class="form-control" placeholder="your@email.com" required> </div> <div class="col-md-6"> <label class="form-label">TV Brand</label> <select class="form-control"> <option value="">Select TV brand</option> <option value="samsung">Samsung</option> <option value="lg">LG</option> <option value="sony">Sony</option> <option value="tcl">TCL</option> <option value="hisense">Hisense</option> <option value="vizio">Vizio</option> <option value="other">Other Brand</option> </select> </div> </div> <label class="form-label">TV Model</label> <input type="text" class="form-control" placeholder="TV model number (if known)"> <div class="row"> <div class="col-md-6"> <label class="form-label">Screen Size</label> <select class="form-control"> <option value="">Select screen size</option> <option value="32-43">32" - 43"</option> <option value="50-55">50" - 55"</option> <option value="65-75">65" - 75"</option> <option value="85-plus">85" and larger</option> <option value="unknown">Not sure</option> </select> </div> <div class="col-md-6"> <label class="form-label">Service Type</label> <select class="form-control"> <option value="">Select service needed</option> <option value="screen">Screen Repair</option> <option value="power">Power Issues</option> <option value="audio">Audio Problems</option> <option value="smart">Smart TV Issues</option> <option value="hdmi">HDMI/Port Issues</option> <option value="maintenance">Maintenance</option> <option value="diagnostic">Diagnostic Only</option> </select> </div> </div> <label class="form-label">Problem Description</label> <textarea class="form-control" rows="4" placeholder="Describe the TV problem in detail. Include when it started, what symptoms you're seeing, any error messages, and what troubleshooting you've already tried..."></textarea> <button type="submit" class="btn-submit"> <i class="fas fa-tools me-2"></i>Schedule Repair </button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="footer-section"> <div class="container"> <div class="social-links"> <a href="#" onclick="openSocial('Facebook')"><i class="fab fa-facebook-f"></i></a> <a href="#" onclick="openSocial('Instagram')"><i class="fab fa-instagram"></i></a> <a href="#" onclick="openSocial('Twitter')"><i class="fab fa-twitter"></i></a> <a href="#" onclick="openSocial('YouTube')"><i class="fab fa-youtube"></i></a> <a href="#" onclick="openSocial('LinkedIn')"><i class="fab fa-linkedin-in"></i></a> </div> <p class="mb-0">© 2024 TechFix TV Repair. All rights reserved. | Expert TV Repair Services ?</p> </div> </footer> <!-- Diagnostic Modal --> <div class="diagnostic-modal" id="diagnosticModal"> <div class="diagnostic-content"> <div class="diagnostic-header"> <h3 class="diagnostic-title">TV Diagnostic Tool</h3> <button class="diagnostic-close" onclick="closeDiagnostic()">×</button> </div> <div class="text-center"> <div class="mb-4"> <i class="fas fa-stethoscope" style="font-size: 4rem; color: var(--electric-cyan);"></i> </div> <h4 class="mb-3">TV Problem Diagnostic</h4> <p class="mb-4">Answer a few questions about your TV's symptoms and we'll help identify the likely issue and repair cost estimate.</p> <button class="btn btn-custom btn-primary-custom" onclick="startDiagnostic()"> <i class="fas fa-play me-2"></i>Start Diagnostic </button> <div id="diagnosticResults" class="mt-4" style="display: none;"> <div class="row"> <div class="col-md-4"> <div class="text-center p-3 bg-light rounded"> <h5>Likely Issue</h5> <div id="diagnosticIssue" style="font-size: 1.5rem; font-weight: bold; color: var(--error-red);">--</div> </div> </div> <div class="col-md-4"> <div class="text-center p-3 bg-light rounded"> <h5>Repair Type</h5> <div id="repairType" style="font-size: 1.5rem; font-weight: bold; color: var(--tech-blue);">--</div> </div> </div> <div class="col-md-4"> <div class="text-center p-3 bg-light rounded"> <h5>Est. Cost</h5> <div id="estimatedCost" style="font-size: 1.5rem; font-weight: bold; color: var(--circuit-green);">--</div> </div> </div> </div> </div> </div> </div> </div> <!-- Success Message --> <div class="success-message" id="successMessage"> <i class="fas fa-check-circle me-2"></i> <span id="successText">Success!</span> </div> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
CSS
:root { --tech-blue: #1E3A8A; --electric-cyan: #06B6D4; --circuit-green: #10B981; --warning-orange: #F59E0B; --error-red: #EF4444; --screen-black: #111827; --metal-gray: #6B7280; --bright-white: #FFFFFF; --panel-silver: #F3F4F6; --led-blue: #3B82F6; --gradient-tech: linear-gradient(135deg, #1E3A8A 0%, #06B6D4 50%, #10B981 100%); --gradient-screen: linear-gradient(135deg, #111827 0%, #374151 50%, #6B7280 100%); --gradient-electric: linear-gradient(135deg, #06B6D4 0%, #3B82F6 50%, #8B5CF6 100%); --gradient-hero: linear-gradient(135deg, #111827 0%, #1E3A8A 30%, #06B6D4 60%, #10B981 100%); --shadow-soft: 0 4px 20px rgba(17, 24, 39, 0.15); --shadow-medium: 0 8px 30px rgba(17, 24, 39, 0.2); --shadow-strong: 0 15px 40px rgba(17, 24, 39, 0.25); --border-radius: 20px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; line-height: 1.6; color: var(--screen-black); background: var(--panel-silver); overflow-x: hidden; } .tech-font { font-family: 'Orbitron', monospace; } /* Navigation */ .navbar-custom { background: rgba(243, 244, 246, 0.95); backdrop-filter: blur(20px); box-shadow: var(--shadow-soft); transition: all 0.3s ease; padding: 1rem 0; border-bottom: 3px solid var(--electric-cyan); } .navbar-brand { font-weight: 700; font-size: 2.5rem; color: var(--screen-black) !important; letter-spacing: -0.5px; } .nav-link { font-weight: 500; color: var(--screen-black) !important; margin: 0 1rem; transition: all 0.3s ease; position: relative; letter-spacing: 0.3px; text-transform: uppercase; font-size: 0.9rem; } .nav-link:hover { color: var(--tech-blue) !important; } .nav-link::after { content: ''; position: absolute; width: 0; height: 3px; bottom: -5px; left: 50%; background: var(--gradient-tech); transition: all 0.3s ease; transform: translateX(-50%); border-radius: 2px; } .nav-link:hover::after { width: 100%; } .btn-tech { background: var(--gradient-tech); color: white; border: none; padding: 12px 28px; border-radius: 25px; font-weight: 700; margin-left: 20px; transition: all 0.3s ease; letter-spacing: 0.5px; text-transform: uppercase; font-size: 0.9rem; } .btn-tech:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); color: white; } /* Hero Section */ .hero-section { min-height: 100vh; display: flex; align-items: center; background: var(--gradient-hero); position: relative; overflow: hidden; color: white; } .hero-content { position: relative; z-index: 2; } .hero-badge { font-size: 1.2rem; color: var(--electric-cyan); font-weight: 700; margin-bottom: 1rem; animation: fadeInUp 0.8s ease-out; text-transform: uppercase; letter-spacing: 2px; } .hero-title { font-size: 3.5rem; font-weight: 900; color: white; /* margin-bottom: 1.5rem; */ animation: fadeInUp 0.8s ease-out 0.2s both; line-height: 1.1; letter-spacing: -2px; } .hero-subtitle { font-size: 1.2rem; color: var(--electric-cyan); margin-bottom: 1rem; animation: fadeInUp 0.8s ease-out 0.4s both; font-weight: 400; max-width: 600px; } .hero-features { display: flex; gap: 1.5rem; margin-bottom: 2rem; animation: fadeInUp 0.8s ease-out 0.6s both; flex-wrap: wrap; } .feature-badge { background: rgba(255, 255, 255, 0.2); color: white; padding: 12px 20px; border-radius: 25px; font-weight: 700; font-size: 0.9rem; border: 2px solid rgba(255, 255, 255, 0.3); transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; } .feature-badge:hover { background: white; color: var(--screen-black); transform: translateY(-2px); } .hero-buttons { animation: fadeInUp 0.8s ease-out 0.8s both; } .hero-image { position: relative; animation: fadeInRight 1s ease-out 0.5s both; } .tv-showcase { width: 450px; height: 450px; border-radius: var(--border-radius); background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; font-size: 10rem; color: white; box-shadow: var(--shadow-strong); position: relative; overflow: hidden; backdrop-filter: blur(10px); } .tv-showcase::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent); animation: shimmer 3s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } .btn-custom { padding: 16px 35px; font-weight: 700; border-radius: 30px; letter-spacing: 0.5px; transition: all 0.3s ease; border: none; margin: 0 10px; text-decoration: none; display: inline-block; font-size: 1rem; text-transform: uppercase; } .btn-primary-custom { background: white; color: var(--screen-black); } .btn-primary-custom:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); color: var(--screen-black); } .btn-secondary-custom { background: transparent; color: white; border: 2px solid white; } .btn-secondary-custom:hover { background: white; color: var(--screen-black); transform: translateY(-3px); } /* Section Styling */ .section-padding { padding: 100px 0; } .section-title { font-size: 4rem; font-weight: 800; margin-bottom: 1rem; color: var(--screen-black); text-align: center; line-height: 1.2; letter-spacing: -1px; } .section-subtitle { font-size: 1.3rem; color: var(--tech-blue); margin-bottom: 4rem; text-align: center; font-weight: 400; max-width: 600px; margin-left: auto; margin-right: auto; } /* Services Section */ .services-section { background: white; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2.5rem; } .service-card { background: white; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: all 0.3s ease; cursor: pointer; position: relative; border: 3px solid transparent; } .service-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-strong); border-color: var(--electric-cyan); } .service-header { height: 220px; background: var(--gradient-tech); display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; position: relative; overflow: hidden; } .service-card:nth-child(2) .service-header { background: var(--gradient-screen); } .service-card:nth-child(3) .service-header { background: var(--gradient-electric); } .service-card:nth-child(4) .service-header { background: linear-gradient(135deg, #10B981 0%, #F59E0B 100%); } .service-card:nth-child(5) .service-header { background: linear-gradient(135deg, #EF4444 0%, #8B5CF6 100%); } .service-card:nth-child(6) .service-header { background: linear-gradient(135deg, #F59E0B 0%, #1E3A8A 100%); } .service-icon { font-size: 4rem; margin-bottom: 0.5rem; } .service-type { font-size: 1.3rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } .service-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.3s ease; } .service-card:hover .service-overlay { opacity: 1; } .service-btn { background: white; color: var(--screen-black); padding: 12px 25px; border-radius: 25px; text-decoration: none; font-weight: 700; transition: all 0.3s ease; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.5px; } .service-btn:hover { background: var(--electric-cyan); color: white; transform: translateY(-2px); } .service-content { padding: 2.5rem; } .service-name { font-size: 1.6rem; font-weight: 700; color: var(--screen-black); margin-bottom: 0.5rem; } .service-description { color: var(--tech-blue); margin-bottom: 1.5rem; line-height: 1.7; } .service-price { font-size: 2.2rem; font-weight: 800; color: var(--circuit-green); margin-bottom: 1rem; } .service-features { list-style: none; margin-bottom: 1.5rem; } .service-features li { padding: 0.5rem 0; color: var(--tech-blue); position: relative; padding-left: 1.5rem; } /* Brands Section */ .brands-section { background: var(--panel-silver); } .brands-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .brand-card { background: white; border-radius: var(--border-radius); padding: 2.5rem; text-align: center; box-shadow: var(--shadow-soft); transition: all 0.3s ease; cursor: pointer; border: 3px solid transparent; } .brand-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); border-color: var(--circuit-green); } .brand-icon { width: 90px; height: 90px; background: var(--gradient-tech); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 2.5rem; color: white; } .brand-card:nth-child(2) .brand-icon { background: var(--gradient-screen); } .brand-card:nth-child(3) .brand-icon { background: var(--gradient-electric); } .brand-card:nth-child(4) .brand-icon { background: linear-gradient(135deg, #10B981 0%, #F59E0B 100%); } .brand-card:nth-child(5) .brand-icon { background: linear-gradient(135deg, #EF4444 0%, #8B5CF6 100%); } .brand-card:nth-child(6) .brand-icon { background: linear-gradient(135deg, #F59E0B 0%, #1E3A8A 100%); } .brand-name { font-size: 1.4rem; font-weight: 700; color: var(--screen-black); margin-bottom: 0.5rem; } .brand-description { color: var(--tech-blue); font-size: 0.95rem; margin-bottom: 1rem; line-height: 1.6; } .brand-features { color: var(--circuit-green); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; } /* About Section */ .about-section { background: white; } .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .about-info { padding: 2rem; } .about-title { font-size: 3.5rem; font-weight: 800; margin-bottom: 1.5rem; color: var(--screen-black); } .about-description { font-size: 1.2rem; margin-bottom: 2rem; color: var(--tech-blue); line-height: 1.8; } .about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 2rem; } .stat-item { text-align: center; padding: 1.5rem; background: var(--panel-silver); border-radius: 15px; box-shadow: var(--shadow-soft); border: 2px solid var(--electric-cyan); } .stat-number { font-size: 2.5rem; font-weight: 800; color: var(--circuit-green); display: block; } .stat-label { font-size: 0.9rem; color: var(--tech-blue); text-transform: uppercase; letter-spacing: 0.5px; } .about-showcase { position: relative; height: 450px; background: var(--gradient-electric); border-radius: var(--border-radius); display: flex; align-items: center; justify-content: center; font-size: 8rem; color: white; box-shadow: var(--shadow-strong); } /* Contact Section */ .contact-section { background: var(--gradient-hero); color: white; } .contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .contact-info { padding: 2rem; } .contact-title { font-size: 3.5rem; font-weight: 800; margin-bottom: 1.5rem; color: white; } .contact-description { font-size: 1.2rem; margin-bottom: 2rem; color: var(--electric-cyan); line-height: 1.8; } .contact-methods { margin-bottom: 2rem; } .contact-method { display: flex; align-items: center; margin-bottom: 1.5rem; padding: 1rem; background: rgba(255, 255, 255, 0.1); border-radius: 15px; transition: all 0.3s ease; backdrop-filter: blur(10px); } .contact-method:hover { background: rgba(255, 255, 255, 0.2); transform: translateX(10px); } .contact-icon { width: 55px; height: 55px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 1rem; font-size: 1.3rem; color: var(--screen-black); } .contact-form { background: rgba(255, 255, 255, 0.1); padding: 2.5rem; border-radius: var(--border-radius); backdrop-filter: blur(10px); box-shadow: var(--shadow-soft); } .contact-form .form-control { background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.3); color: white; backdrop-filter: blur(10px); margin-bottom: 1rem; padding: 12px 16px; border-radius: 10px; } .contact-form .form-control::placeholder { color: rgba(255, 255, 255, 0.7); } .contact-form .form-control:focus { border-color: white; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.15); outline: none; } .contact-form .form-label { color: white; font-weight: 600; margin-bottom: 0.5rem; display: block; text-transform: uppercase; letter-spacing: 0.5px; } .btn-submit { background: white; color: var(--screen-black); border: none; padding: 16px 40px; border-radius: 30px; font-weight: 700; font-size: 1rem; transition: all 0.3s ease; width: 100%; letter-spacing: 0.5px; text-transform: uppercase; } .btn-submit:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); color: var(--screen-black); } /* Footer */ .footer-section { background: var(--screen-black); color: var(--electric-cyan); padding: 60px 0 30px; text-align: center; } .social-links { margin-bottom: 2rem; } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 55px; height: 55px; background: var(--gradient-tech); color: white; border-radius: 50%; margin: 0 10px; transition: all 0.3s ease; text-decoration: none; } .social-links a:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); } /* Success Messages */ .success-message { position: fixed; top: 100px; right: 30px; background: var(--gradient-tech); color: white; padding: 16px 25px; border-radius: 15px; box-shadow: var(--shadow-medium); z-index: 1060; transform: translateX(400px); transition: transform 0.3s ease; font-weight: 600; } .success-message.show { transform: translateX(0); } /* Loading Animation */ .loading-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Animations */ .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; } .animate-on-scroll.animated { opacity: 1; transform: translateY(0); } /* Diagnostic Modal */ .diagnostic-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 1050; } .diagnostic-modal.show { display: flex; align-items: center; justify-content: center; } .diagnostic-content { background: white; border-radius: var(--border-radius); padding: 2rem; max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto; } .diagnostic-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 3px solid var(--electric-cyan); } .diagnostic-title { font-size: 1.8rem; font-weight: 700; color: var(--screen-black); text-transform: uppercase; } .diagnostic-close { background: none; border: none; font-size: 1.5rem; color: var(--tech-blue); cursor: pointer; } /* Responsive Design */ @media (max-width: 768px) { .hero-title { font-size: 3.5rem; } .section-title { font-size: 2.8rem; } .contact-content { grid-template-columns: 1fr; gap: 2rem; } .about-content { grid-template-columns: 1fr; gap: 2rem; } .tv-showcase { width: 300px; height: 300px; font-size: 6rem; } .hero-features { justify-content: center; } } .section-title-new { color: white; }
JavaScript
// Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Animate elements on scroll function animateOnScroll() { const elements = document.querySelectorAll('.animate-on-scroll'); elements.forEach(element => { const elementTop = element.getBoundingClientRect().top; const elementVisible = 150; if (elementTop < window.innerHeight - elementVisible) { element.classList.add('animated'); } }); } // Navbar background on scroll window.addEventListener('scroll', function() { const navbar = document.querySelector('.navbar-custom'); if (window.scrollY > 50) { navbar.style.background = 'rgba(243, 244, 246, 0.98)'; navbar.style.boxShadow = '0 8px 30px rgba(17, 24, 39, 0.3)'; } else { navbar.style.background = 'rgba(243, 244, 246, 0.95)'; navbar.style.boxShadow = '0 4px 20px rgba(17, 24, 39, 0.15)'; } animateOnScroll(); }); // Show success message function showSuccessMessage(message) { const successMessage = document.getElementById('successMessage'); const successText = document.getElementById('successText'); successText.textContent = message; successMessage.classList.add('show'); setTimeout(() => { successMessage.classList.remove('show'); }, 3000); } // Initialize animations on page load document.addEventListener('DOMContentLoaded', function() { animateOnScroll(); }); // Close diagnostic modal when clicking outside document.getElementById('diagnosticModal').addEventListener('click', function(e) { if (e.target === this) { closeDiagnostic(); } });
Output Preview
Desktop
Mobile
Fullscreen