Computer Repair Template
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 Pro - Computer Repair Services</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- Header --> <header> <nav> <div class="logo animated fadeIn"> <i class="fas fa-laptop-code"></i> <span>TechFix Pro</span> </div> <div class="nav-links animated fadeIn"> <a href="#home">Home</a> <a href="#services">Services</a> <a href="#about">About</a> <a href="#pricing">Pricing</a> <a href="#testimonials">Testimonials</a> <a href="#contact">Contact</a> </div> <button class="cta-button animated fadeIn">Get a Quote</button> <div class="mobile-menu"> <i class="fas fa-bars"></i> </div> </nav> </header> <!-- Hero Section --> <section class="hero" id="home"> <div class="hero-content animated slideInLeft"> <h1>Expert <span>Computer Repair</span> Services Near You</h1> <p>Fast, reliable, and affordable computer repair services for home and business. Our certified technicians can fix any issue you're facing with your devices.</p> <div style="display: flex; gap: 1rem;"> <button class="cta-button pulse">Book a Service</button> <button class="cta-button" style="background-color: transparent; color: var(--primary); border: 2px solid var(--primary);">Learn More</button> </div> </div> <div class="hero-image animated slideInRight"> <img src="https://images.unsplash.com/photo-1517430816045-df4b7de11d1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80" alt="Computer repair technician"> </div> </section> <!-- Services Section --> <section class="services" id="services"> <div class="section-header animated fadeIn"> <h2>Our Services</h2> <p>We offer a wide range of computer repair and maintenance services to keep your devices running smoothly.</p> </div> <div class="services-grid"> <div class="service-card animated fadeIn" style="animation-delay: 0.2s;"> <i class="fas fa-desktop"></i> <h3>Computer Repair</h3> <p>Diagnose and fix hardware and software issues on desktops and laptops of all brands.</p> <a href="#" style="color: var(--primary); font-weight: 500;">Learn More →</a> </div> <div class="service-card animated fadeIn" style="animation-delay: 0.4s;"> <i class="fas fa-virus"></i> <h3>Virus Removal</h3> <p>Remove malware, spyware, and viruses to protect your data and restore performance.</p> <a href="#" style="color: var(--primary); font-weight: 500;">Learn More →</a> </div> <div class="service-card animated fadeIn" style="animation-delay: 0.6s;"> <i class="fas fa-database"></i> <h3>Data Recovery</h3> <p>Recover lost or deleted files from hard drives, SSDs, USB drives, and other storage media.</p> <a href="#" style="color: var(--primary); font-weight: 500;">Learn More →</a> </div> <div class="service-card animated fadeIn" style="animation-delay: 0.8s;"> <i class="fas fa-network-wired"></i> <h3>Network Setup</h3> <p>Professional installation and configuration of home and office networks.</p> <a href="#" style="color: var(--primary); font-weight: 500;">Learn More →</a> </div> <div class="service-card animated fadeIn" style="animation-delay: 1s;"> <i class="fas fa-tools"></i> <h3>Hardware Upgrade</h3> <p>Boost your computer's performance with RAM, SSD, or other hardware upgrades.</p> <a href="#" style="color: var(--primary); font-weight: 500;">Learn More →</a> </div> <div class="service-card animated fadeIn" style="animation-delay: 1.2s;"> <i class="fas fa-cloud"></i> <h3>Cloud Services</h3> <p>Set up and optimize cloud storage and backup solutions for your business.</p> <a href="#" style="color: var(--primary); font-weight: 500;">Learn More →</a> </div> </div> </section> <!-- About Section --> <section class="about" id="about"> <div class="about-image animated slideInLeft"> <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Our team"> </div> <div class="about-content animated slideInRight"> <h2>About TechFix Pro</h2> <p>Founded in 2010, TechFix Pro has grown from a small local repair shop to one of the most trusted computer service providers in the region. Our team of certified technicians combines technical expertise with a passion for helping people.</p> <p>We believe in honest, transparent service with no hidden fees. Every repair comes with a 90-day warranty because we stand behind our work.</p> <div class="stats"> <div class="stat-item"> <h3>5,000+</h3> <p>Happy Customers</p> </div> <div class="stat-item"> <h3>12+</h3> <p>Years Experience</p> </div> <div class="stat-item"> <h3>98%</h3> <p>Satisfaction Rate</p> </div> </div> </div> </section> <!-- Pricing Section --> <section class="pricing" id="pricing"> <div class="section-header animated fadeIn"> <h2>Transparent Pricing</h2> <p>No hidden fees. Pay only for what you need with our straightforward pricing.</p> </div> <div class="pricing-grid"> <div class="pricing-card animated fadeIn" style="animation-delay: 0.2s;"> <h3>Basic Tune-Up</h3> <div class="price">$79<span>/one-time</span></div> <ul class="pricing-features"> <li>Virus & Malware Removal</li> <li>System Optimization</li> <li>Disk Cleanup</li> <li>Software Updates</li> <li>30-minute Consultation</li> </ul> <button class="cta-button" style="width: 100%;">Choose Plan</button> </div> <div class="pricing-card popular animated fadeIn" style="animation-delay: 0.4s;"> <div class="popular-badge">Most Popular</div> <h3>Hardware Repair</h3> <div class="price">$149<span>/one-time</span></div> <ul class="pricing-features"> <li>Diagnostic Included</li> <li>Hardware Replacement</li> <li>Data Backup</li> <li>90-Day Warranty</li> <li>1-hour Consultation</li> </ul> <button class="cta-button" style="width: 100%;">Choose Plan</button> </div> <div class="pricing-card animated fadeIn" style="animation-delay: 0.6s;"> <h3>Annual Maintenance</h3> <div class="price">$299<span>/year</span></div> <ul class="pricing-features"> <li>4 Quarterly Tune-Ups</li> <li>Priority Support</li> <li>Remote Assistance</li> <li>10% Discount on Repairs</li> <li>Unlimited Consultations</li> </ul> <button class="cta-button" style="width: 100%;">Choose Plan</button> </div> </div> </section> <!-- Testimonials Section --> <section class="testimonials" id="testimonials"> <div class="section-header animated fadeIn"> <h2>What Our Clients Say</h2> <p>Don't just take our word for it. Here's what our customers have to say about our services.</p> </div> <div class="testimonials-slider"> <div class="testimonial-card animated fadeIn" style="animation-delay: 0.2s;"> <p class="quote">"TechFix Pro saved my business when our server crashed. They recovered all our critical data and had us back up and running in less than a day. Their team is professional, knowledgeable, and reasonably priced."</p> <div class="client-info"> <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="Client" class="client-avatar"> <div> <div class="client-name">Michael Johnson</div> <div class="client-role">Small Business Owner</div> </div> </div> </div> <div class="testimonial-card animated fadeIn" style="animation-delay: 0.4s;"> <p class="quote">"I've used several computer repair services in the past, but TechFix Pro is by far the best. They explained everything in terms I could understand and didn't try to upsell me on services I didn't need."</p> <div class="client-info"> <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=988&q=80" alt="Client" class="client-avatar"> <div> <div class="client-name">Sarah Williams</div> <div class="client-role">Graphic Designer</div> </div> </div> </div> <div class="testimonial-card animated fadeIn" style="animation-delay: 0.6s;"> <p class="quote">"The technician arrived on time, diagnosed the problem quickly, and had my laptop fixed in under an hour. The whole process was seamless, and I'll definitely be using them for all my tech needs going forward."</p> <div class="client-info"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="Client" class="client-avatar"> <div> <div class="client-name">David Chen</div> <div class="client-role">College Student</div> </div> </div> </div> </div> </section> <!-- Contact Section --> <section class="contact" id="contact"> <div class="contact-info animated slideInLeft"> <h2>Get In Touch</h2> <p>Have questions about our services or need help with your device? Reach out to our friendly team today.</p> <div class="contact-details"> <div class="contact-item"> <i class="fas fa-map-marker-alt"></i> <div> <h4>Our Location</h4> <p>123 Tech Street, Suite 456<br>San Francisco, CA 94107</p> </div> </div> <div class="contact-item"> <i class="fas fa-phone-alt"></i> <div> <h4>Call Us</h4> <p>+1 (555) 123-4567<br>Mon-Fri: 9am-6pm</p> </div> </div> <div class="contact-item"> <i class="fas fa-envelope"></i> <div> <h4>Email Us</h4> <p>support@techfixpro.com<br>response within 24 hours</p> </div> </div> </div> </div> <div class="contact-form animated slideInRight"> <form> <div class="form-group"> <label for="name">Your Name</label> <input type="text" id="name" placeholder="John Doe"> </div> <div class="form-group"> <label for="email">Email Address</label> <input type="email" id="email" placeholder="john@example.com"> </div> <div class="form-group"> <label for="phone">Phone Number</label> <input type="tel" id="phone" placeholder="(555) 123-4567"> </div> <div class="form-group"> <label for="service">Service Needed</label> <select id="service" style="width: 100%; padding: 0.75rem 1rem; border: 1px solid #e2e8f0; border-radius: 0.5rem;"> <option value="">Select a service</option> <option value="repair">Computer Repair</option> <option value="virus">Virus Removal</option> <option value="data">Data Recovery</option> <option value="network">Network Setup</option> <option value="other">Other</option> </select> </div> <div class="form-group"> <label for="message">Message</label> <textarea id="message" placeholder="Describe your issue or question"></textarea> </div> <button type="submit" class="cta-button" style="width: 100%;">Send Message</button> </form> </div> </section> <!-- CTA Section --> <section class="cta-section animated fadeIn"> <h2>Ready to Fix Your Tech Problems?</h2> <p>Schedule a service today and experience the TechFix Pro difference. We offer same-day appointments and a 100% satisfaction guarantee.</p> <button class="cta-button pulse" style="background-color: var(--secondary);">Book Now</button> </section> <!-- Footer --> <footer> <div class="footer-content"> <div class="footer-column"> <h3>TechFix Pro</h3> <p>Your trusted partner for all computer repair and maintenance needs. Quality service at affordable prices.</p> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-linkedin-in"></i></a> </div> </div> <div class="footer-column"> <h3>Services</h3> <ul class="footer-links"> <li><a href="#">Computer Repair</a></li> <li><a href="#">Virus Removal</a></li> <li><a href="#">Data Recovery</a></li> <li><a href="#">Hardware Upgrade</a></li> <li><a href="#">Network Setup</a></li> </ul> </div> <div class="footer-column"> <h3>Company</h3> <ul class="footer-links"> <li><a href="#">About Us</a></li> <li><a href="#">Our Team</a></li> <li><a href="#">Careers</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="footer-column"> <h3>Support</h3> <ul class="footer-links"> <li><a href="#">FAQs</a></li> <li><a href="#">Help Center</a></li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Terms of Service</a></li> <li><a href="#">Warranty</a></li> </ul> </div> </div> <div class="copyright"> <p>© 2023 TechFix Pro. All rights reserved.</p> </div> </footer> <script src="script.js"></script> </body> </html>
CSS
:root { --primary: #2563eb; --primary-dark: #1d4ed8; --secondary: #f59e0b; --dark: #1e293b; --light: #f8fafc; --gray: #94a3b8; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { background-color: var(--light); color: var(--dark); overflow-x: hidden; } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .animated { opacity: 0; animation-fill-mode: both; } .fadeIn { animation-name: fadeIn; animation-duration: 1s; } .slideInLeft { animation-name: slideInLeft; animation-duration: 1s; } .slideInRight { animation-name: slideInRight; animation-duration: 1s; } .pulse { animation: pulse 2s infinite; } /* Header */ header { background-color: white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); position: fixed; width: 100%; z-index: 1000; } nav { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 5%; max-width: 1400px; margin: 0 auto; } .logo { display: flex; align-items: center; font-size: 1.5rem; font-weight: 700; color: var(--primary); } .logo i { margin-right: 0.5rem; color: var(--secondary); } .nav-links { display: flex; gap: 2rem; } .nav-links a { text-decoration: none; color: var(--dark); font-weight: 500; transition: color 0.3s; } .nav-links a:hover { color: var(--primary); } .cta-button { background-color: var(--primary); color: white; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; transition: all 0.3s; border: none; cursor: pointer; } .cta-button:hover { background-color: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .mobile-menu { display: none; font-size: 1.5rem; cursor: pointer; } /* Hero Section */ .hero { padding: 8rem 5% 5rem; display: flex; align-items: center; justify-content: space-between; max-width: 1400px; margin: 0 auto; min-height: 100vh; } .hero-content { flex: 1; padding-right: 2rem; } .hero-content h1 { font-size: 3.5rem; margin-bottom: 1.5rem; line-height: 1.2; } .hero-content h1 span { color: var(--primary); } .hero-content p { font-size: 1.1rem; color: var(--gray); margin-bottom: 2rem; max-width: 600px; } .hero-image { flex: 1; position: relative; } .hero-image img { width: 100%; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); transform: perspective(1000px) rotateY(-10deg); transition: transform 0.5s; } .hero-image:hover img { transform: perspective(1000px) rotateY(0); } /* Services Section */ .services { padding: 5rem 5%; background-color: white; } .section-header { text-align: center; margin-bottom: 3rem; } .section-header h2 { font-size: 2.5rem; margin-bottom: 1rem; } .section-header p { color: var(--gray); max-width: 700px; margin: 0 auto; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; } .service-card { background-color: var(--light); border-radius: 1rem; padding: 2rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transition: all 0.3s; border: 1px solid #e2e8f0; } .service-card:hover { transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); border-color: var(--primary); } .service-card i { font-size: 2.5rem; color: var(--primary); margin-bottom: 1.5rem; } .service-card h3 { font-size: 1.5rem; margin-bottom: 1rem; } .service-card p { color: var(--gray); margin-bottom: 1.5rem; } /* About Section */ .about { padding: 5rem 5%; display: flex; align-items: center; gap: 3rem; max-width: 1400px; margin: 0 auto; } .about-image { flex: 1; } .about-image img { width: 100%; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); } .about-content { flex: 1; } .about-content h2 { font-size: 2.5rem; margin-bottom: 1.5rem; } .about-content p { color: var(--gray); margin-bottom: 1.5rem; line-height: 1.6; } .stats { display: flex; gap: 2rem; margin-top: 2rem; } .stat-item { text-align: center; } .stat-item h3 { font-size: 2.5rem; color: var(--primary); margin-bottom: 0.5rem; } .stat-item p { color: var(--gray); font-size: 0.9rem; } /* Pricing Section */ .pricing { padding: 5rem 5%; background-color: white; } .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; } .pricing-card { background-color: var(--light); border-radius: 1rem; padding: 2.5rem 2rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transition: all 0.3s; text-align: center; border: 1px solid #e2e8f0; } .pricing-card.popular { border: 2px solid var(--primary); position: relative; transform: scale(1.05); } .popular-badge { position: absolute; top: -15px; right: 20px; background-color: var(--secondary); color: white; padding: 0.5rem 1rem; border-radius: 2rem; font-size: 0.8rem; font-weight: 600; } .pricing-card h3 { font-size: 1.5rem; margin-bottom: 1rem; } .price { font-size: 3rem; font-weight: 700; color: var(--primary); margin-bottom: 1.5rem; } .price span { font-size: 1rem; color: var(--gray); } .pricing-features { list-style: none; margin-bottom: 2rem; } .pricing-features li { padding: 0.75rem 0; border-bottom: 1px solid #e2e8f0; color: var(--gray); } .pricing-features li:last-child { border-bottom: none; } /* Testimonials Section */ .testimonials { padding: 5rem 5%; background-color: var(--light); } .testimonials-slider { max-width: 1000px; margin: 0 auto; position: relative; } .testimonial-card { background-color: white; border-radius: 1rem; padding: 2rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); margin: 1rem; text-align: center; } .testimonial-card .quote { font-size: 1.2rem; color: var(--dark); margin-bottom: 1.5rem; font-style: italic; line-height: 1.6; } .client-info { display: flex; align-items: center; justify-content: center; gap: 1rem; } .client-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; } .client-name { font-weight: 600; } .client-role { color: var(--gray); font-size: 0.9rem; } /* Contact Section */ .contact { padding: 5rem 5%; display: flex; gap: 3rem; max-width: 1400px; margin: 0 auto; background-color: white; } .contact-info { flex: 1; } .contact-info h2 { font-size: 2.5rem; margin-bottom: 1.5rem; } .contact-info p { color: var(--gray); margin-bottom: 2rem; line-height: 1.6; } .contact-details { margin-bottom: 2rem; } .contact-item { display: flex; align-items: center; margin-bottom: 1.5rem; } .contact-item i { font-size: 1.5rem; color: var(--primary); margin-right: 1rem; width: 40px; height: 40px; background-color: #e0e7ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .contact-form { flex: 1; background-color: var(--light); padding: 2rem; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; } .form-group input, .form-group textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid #e2e8f0; border-radius: 0.5rem; font-size: 1rem; transition: border-color 0.3s; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); } .form-group textarea { min-height: 150px; resize: vertical; } /* CTA Section */ .cta-section { padding: 5rem 5%; background-color: var(--primary); color: white; text-align: center; } .cta-section h2 { font-size: 2.5rem; margin-bottom: 1.5rem; } .cta-section p { max-width: 700px; margin: 0 auto 2rem; opacity: 0.9; } /* Footer */ footer { background-color: var(--dark); color: white; padding: 3rem 5%; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 3rem; max-width: 1400px; margin: 0 auto; } .footer-column h3 { font-size: 1.25rem; margin-bottom: 1.5rem; position: relative; padding-bottom: 0.5rem; } .footer-column h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 50px; height: 2px; background-color: var(--primary); } .footer-column p { color: var(--gray); margin-bottom: 1rem; line-height: 1.6; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 0.75rem; } .footer-links a { color: var(--gray); text-decoration: none; transition: color 0.3s; } .footer-links a:hover { color: white; } .social-links { display: flex; gap: 1rem; } .social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: #334155; border-radius: 50%; color: white; transition: all 0.3s; } .social-links a:hover { background-color: var(--primary); transform: translateY(-3px); } .copyright { text-align: center; padding-top: 3rem; margin-top: 3rem; border-top: 1px solid #334155; color: var(--gray); font-size: 0.9rem; } /* Responsive Styles */ @media (max-width: 1024px) { .hero { flex-direction: column; text-align: center; padding-top: 10rem; } .hero-content { padding-right: 0; margin-bottom: 3rem; } .about { flex-direction: column; } .contact { flex-direction: column; } } @media (max-width: 768px) { .nav-links { display: none; } .mobile-menu { display: block; } .hero-content h1 { font-size: 2.5rem; } .stats { flex-direction: column; gap: 1rem; } }
JavaScript
// Animation on scroll document.addEventListener('DOMContentLoaded', function() { const animatedElements = document.querySelectorAll('.animated'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = 1; } }); }, { threshold: 0.1 }); animatedElements.forEach(element => { observer.observe(element); }); // Mobile menu toggle const mobileMenu = document.querySelector('.mobile-menu'); const navLinks = document.querySelector('.nav-links'); mobileMenu.addEventListener('click', () => { navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex'; }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); // Close mobile menu if open if (navLinks.style.display === 'flex') { navLinks.style.display = 'none'; } } }); }); });
Output Preview
Desktop
Mobile
Fullscreen