| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>NexaTech Solutions | Innovative Technology Services</title> |
| <meta name="description" content="NexaTech Solutions provides cutting-edge technology services and digital solutions to help businesses grow and thrive in the modern landscape."> |
| <style> |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| :root { |
| --primary: #2563eb; |
| --primary-dark: #1d4ed8; |
| --secondary: #f59e0b; |
| --dark: #1e293b; |
| --light: #f8fafc; |
| --gray: #64748b; |
| } |
| |
| body { |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
| line-height: 1.6; |
| color: var(--dark); |
| background-color: #ffffff; |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 0 20px; |
| } |
| |
| .btn { |
| display: inline-block; |
| padding: 12px 32px; |
| background: var(--primary); |
| color: white; |
| text-decoration: none; |
| border-radius: 8px; |
| font-weight: 600; |
| transition: all 0.3s ease; |
| border: none; |
| cursor: pointer; |
| } |
| |
| .btn:hover { |
| background: var(--primary-dark); |
| transform: translateY(-2px); |
| box-shadow: 0 10px 25px rgba(37, 99, 235, 0.2); |
| } |
| |
| .btn-secondary { |
| background: transparent; |
| border: 2px solid var(--primary); |
| color: var(--primary); |
| } |
| |
| .btn-secondary:hover { |
| background: var(--primary); |
| color: white; |
| } |
| |
| .section { |
| padding: 80px 0; |
| } |
| |
| .section-title { |
| text-align: center; |
| margin-bottom: 60px; |
| } |
| |
| .section-title h2 { |
| font-size: 2.5rem; |
| color: var(--dark); |
| margin-bottom: 16px; |
| } |
| |
| .section-title p { |
| font-size: 1.1rem; |
| color: var(--gray); |
| max-width: 600px; |
| margin: 0 auto; |
| } |
| |
| |
| header { |
| background: rgba(255, 255, 255, 0.95); |
| backdrop-filter: blur(10px); |
| position: fixed; |
| width: 100%; |
| top: 0; |
| z-index: 1000; |
| border-bottom: 1px solid rgba(0,0,0,0.1); |
| } |
| |
| nav { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 1rem 0; |
| } |
| |
| .logo { |
| font-size: 1.8rem; |
| font-weight: 700; |
| color: var(--primary); |
| text-decoration: none; |
| } |
| |
| .nav-links { |
| display: flex; |
| list-style: none; |
| gap: 2rem; |
| } |
| |
| .nav-links a { |
| text-decoration: none; |
| color: var(--dark); |
| font-weight: 500; |
| transition: color 0.3s; |
| position: relative; |
| } |
| |
| .nav-links a:hover { |
| color: var(--primary); |
| } |
| |
| .nav-links a::after { |
| content: ''; |
| position: absolute; |
| bottom: -5px; |
| left: 0; |
| width: 0; |
| height: 2px; |
| background: var(--primary); |
| transition: width 0.3s; |
| } |
| |
| .nav-links a:hover::after { |
| width: 100%; |
| } |
| |
| .mobile-menu { |
| display: none; |
| font-size: 1.5rem; |
| background: none; |
| border: none; |
| cursor: pointer; |
| color: var(--dark); |
| } |
| |
| |
| .hero { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| padding: 160px 0 100px; |
| text-align: center; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .hero::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="%23ffffff" opacity="0.1"><polygon points="1000,100 1000,0 0,100"/></svg>'); |
| background-size: cover; |
| } |
| |
| .hero-content { |
| position: relative; |
| z-index: 2; |
| max-width: 800px; |
| margin: 0 auto; |
| } |
| |
| .hero h1 { |
| font-size: 3.5rem; |
| margin-bottom: 1.5rem; |
| font-weight: 700; |
| } |
| |
| .hero p { |
| font-size: 1.3rem; |
| margin-bottom: 2.5rem; |
| opacity: 0.9; |
| } |
| |
| .hero-buttons { |
| display: flex; |
| gap: 1rem; |
| justify-content: center; |
| flex-wrap: wrap; |
| } |
| |
| |
| .services { |
| background: var(--light); |
| } |
| |
| .services-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); |
| gap: 2rem; |
| } |
| |
| .service-card { |
| background: white; |
| padding: 2.5rem; |
| border-radius: 12px; |
| box-shadow: 0 5px 20px rgba(0,0,0,0.08); |
| text-align: center; |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| border: 1px solid rgba(0,0,0,0.05); |
| } |
| |
| .service-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 20px 40px rgba(0,0,0,0.15); |
| } |
| |
| .service-icon { |
| width: 80px; |
| height: 80px; |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin: 0 auto 1.5rem; |
| font-size: 2rem; |
| color: white; |
| } |
| |
| .service-card h3 { |
| font-size: 1.5rem; |
| margin-bottom: 1rem; |
| color: var(--dark); |
| } |
| |
| .service-card p { |
| color: var(--gray); |
| margin-bottom: 1.5rem; |
| } |
| |
| |
| .products-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| gap: 2rem; |
| } |
| |
| .product-card { |
| background: white; |
| border-radius: 12px; |
| overflow: hidden; |
| box-shadow: 0 5px 20px rgba(0,0,0,0.08); |
| transition: transform 0.3s ease; |
| } |
| |
| .product-card:hover { |
| transform: translateY(-5px); |
| } |
| |
| .product-image { |
| height: 200px; |
| background: linear-gradient(135deg, #667eea, #764ba2); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| font-size: 3rem; |
| } |
| |
| .product-content { |
| padding: 1.5rem; |
| } |
| |
| .product-content h3 { |
| margin-bottom: 0.5rem; |
| font-size: 1.3rem; |
| } |
| |
| .product-content p { |
| color: var(--gray); |
| margin-bottom: 1rem; |
| } |
| |
| |
| .contact { |
| background: var(--light); |
| } |
| |
| .contact-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 3rem; |
| } |
| |
| .contact-info { |
| display: flex; |
| flex-direction: column; |
| gap: 2rem; |
| } |
| |
| .contact-item { |
| display: flex; |
| align-items: flex-start; |
| gap: 1rem; |
| } |
| |
| .contact-icon { |
| width: 50px; |
| height: 50px; |
| background: var(--primary); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| font-size: 1.2rem; |
| } |
| |
| .contact-form { |
| background: white; |
| padding: 2rem; |
| border-radius: 12px; |
| box-shadow: 0 5px 20px rgba(0,0,0,0.08); |
| } |
| |
| .form-group { |
| margin-bottom: 1.5rem; |
| } |
| |
| .form-group label { |
| display: block; |
| margin-bottom: 0.5rem; |
| font-weight: 500; |
| color: var(--dark); |
| } |
| |
| .form-group input, |
| .form-group textarea, |
| .form-group select { |
| width: 100%; |
| padding: 12px; |
| border: 1px solid #ddd; |
| border-radius: 8px; |
| font-size: 1rem; |
| transition: border-color 0.3s; |
| } |
| |
| .form-group input:focus, |
| .form-group textarea:focus, |
| .form-group select:focus { |
| outline: none; |
| border-color: var(--primary); |
| } |
| |
| .form-group textarea { |
| height: 120px; |
| resize: vertical; |
| } |
| |
| |
| footer { |
| background: var(--dark); |
| color: white; |
| padding: 60px 0 30px; |
| } |
| |
| .footer-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: 2rem; |
| margin-bottom: 3rem; |
| } |
| |
| .footer-column h3 { |
| margin-bottom: 1.5rem; |
| font-size: 1.3rem; |
| } |
| |
| .footer-links { |
| list-style: none; |
| } |
| |
| .footer-links li { |
| margin-bottom: 0.8rem; |
| } |
| |
| .footer-links a { |
| color: #cbd5e1; |
| text-decoration: none; |
| transition: color 0.3s; |
| } |
| |
| .footer-links a:hover { |
| color: white; |
| } |
| |
| .copyright { |
| text-align: center; |
| padding-top: 2rem; |
| border-top: 1px solid #334155; |
| color: #94a3b8; |
| } |
| |
| |
| @media (max-width: 768px) { |
| .nav-links { |
| display: none; |
| position: absolute; |
| top: 100%; |
| left: 0; |
| width: 100%; |
| background: white; |
| flex-direction: column; |
| padding: 1rem; |
| box-shadow: 0 5px 10px rgba(0,0,0,0.1); |
| } |
| |
| .nav-links.active { |
| display: flex; |
| } |
| |
| .mobile-menu { |
| display: block; |
| } |
| |
| .hero h1 { |
| font-size: 2.5rem; |
| } |
| |
| .hero p { |
| font-size: 1.1rem; |
| } |
| |
| .contact-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .section-title h2 { |
| font-size: 2rem; |
| } |
| } |
| |
| @media (max-width: 480px) { |
| .hero h1 { |
| font-size: 2rem; |
| } |
| |
| .services-grid, |
| .products-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .hero-buttons { |
| flex-direction: column; |
| align-items: center; |
| } |
| |
| .btn { |
| width: 100%; |
| text-align: center; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| |
| <header> |
| <div class="container"> |
| <nav> |
| <a href="#" class="logo">NexaTech</a> |
| <button class="mobile-menu">☰</button> |
| <ul class="nav-links"> |
| <li><a href="#home">Home</a></li> |
| <li><a href="#services">Services</a></li> |
| <li><a href="#products">Products</a></li> |
| <li><a href="#about">About</a></li> |
| <li><a href="#contact">Contact</a></li> |
| </ul> |
| </nav> |
| </div> |
| </header> |
|
|
| |
| <section class="hero" id="home"> |
| <div class="container"> |
| <div class="hero-content"> |
| <h1>Innovative Solutions for Modern Businesses</h1> |
| <p>We provide cutting-edge technology services and digital solutions to help your business thrive in the digital age. Experience the future today.</p> |
| <div class="hero-buttons"> |
| <a href="#contact" class="btn">Get Started</a> |
| <a href="#services" class="btn btn-secondary">Our Services</a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="section services" id="services"> |
| <div class="container"> |
| <div class="section-title"> |
| <h2>Our Premium Services</h2> |
| <p>Comprehensive solutions designed to drive your business forward</p> |
| </div> |
| <div class="services-grid"> |
| <div class="service-card"> |
| <div class="service-icon">💻</div> |
| <h3>Web Development</h3> |
| <p>Custom websites and web applications built with modern technologies, responsive design, and optimal performance.</p> |
| <a href="#contact" class="btn btn-secondary">Learn More</a> |
| </div> |
| <div class="service-card"> |
| <div class="service-icon">📱</div> |
| <h3>Mobile App Development</h3> |
| <p>Native and cross-platform mobile applications that deliver exceptional user experiences across all devices.</p> |
| <a href="#contact" class="btn btn-secondary">Learn More</a> |
| </div> |
| <div class="service-card"> |
| <div class="service-icon">☁️</div> |
| <h3>Cloud Solutions</h3> |
| <p>Scalable cloud infrastructure, migration services, and management solutions for businesses of all sizes.</p> |
| <a href="#contact" class="btn btn-secondary">Learn More</a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="section" id="products"> |
| <div class="container"> |
| <div class="section-title"> |
| <h2>Featured Products</h2> |
| <p>Discover our innovative product lineup designed to solve real business challenges</p> |
| </div> |
| <div class="products-grid"> |
| <div class="product-card"> |
| <div class="product-image">📊</div> |
| <div class="product-content"> |
| <h3>Analytics Pro</h3> |
| <p>Advanced business intelligence platform with real-time analytics and predictive insights.</p> |
| <a href="#contact" class="btn">View Details</a> |
| </div> |
| </div> |
| <div class="product-card"> |
| <div class="product-image">🔒</div> |
| <div class="product-content"> |
| <h3>SecureConnect</h3> |
| <p>Enterprise-grade security solution with end-to-end encryption and threat protection.</p> |
| <a href="#contact" class="btn">View Details</a> |
| </div> |
| </div> |
| <div class="product-card"> |
| <div class="product-image">🤖</div> |
| <div class="product-content"> |
| <h3>AutoFlow</h3> |
| <p>Intelligent workflow automation platform that streamlines your business processes.</p> |
| <a href="#contact" class="btn">View Details</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="section contact" id="contact"> |
| <div class="container"> |
| <div class="section-title"> |
| <h2>Get In Touch</h2> |
| <p>Ready to transform your business? Contact us today for a free consultation</p> |
| </div> |
| <div class="contact-grid"> |
| <div class="contact-info"> |
| <div class="contact-item"> |
| <div class="contact-icon">📧</div> |
| <div> |
| <h3>Email Us</h3> |
| <p>info@nexatech.com</p> |
| </div> |
| </div> |
| <div class="contact-item"> |
| <div class="contact-icon">📞</div> |
| <div> |
| <h3>Call Us</h3> |
| <p>+1 (555) 123-4567</p> |
| </div> |
| </div> |
| <div class="contact-item"> |
| <div class="contact-icon">📍</div> |
| <div> |
| <h3>Visit Us</h3> |
| <p>123 Tech Avenue, Suite 100<br>San Francisco, CA 94107</p> |
| </div> |
| </div> |
| </div> |
| <form class="contact-form" id="contactForm"> |
| <div class="form-group"> |
| <label for="name">Full Name</label> |
| <input type="text" id="name" name="name" required> |
| </div> |
| <div class="form-group"> |
| <label for="email">Email Address</label> |
| <input type="email" id="email" name="email" required> |
| </div> |
| <div class="form-group"> |
| <label for="service">Service Interest</label> |
| <select id="service" name="service"> |
| <option value="">Select a service</option> |
| <option value="web-dev">Web Development</option> |
| <option value="mobile-dev">Mobile App Development</option> |
| <option value="cloud">Cloud Solutions</option> |
| <option value="consulting">Consulting</option> |
| </select> |
| </div> |
| <div class="form-group"> |
| <label for="message">Message</label> |
| <textarea id="message" name="message" required></textarea> |
| </div> |
| <button type="submit" class="btn">Send Message</button> |
| </form> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer> |
| <div class="container"> |
| <div class="footer-grid"> |
| <div class="footer-column"> |
| <h3>NexaTech</h3> |
| <p>Innovative technology solutions for modern businesses. We help you stay ahead in the digital landscape.</p> |
| </div> |
| <div class="footer-column"> |
| <h3>Quick Links</h3> |
| <ul class="footer-links"> |
| <li><a href="#home">Home</a></li> |
| <li><a href="#services">Services</a></li> |
| <li><a href="#products">Products</a></li> |
| <li><a href="#about">About Us</a></li> |
| <li><a href="#contact">Contact</a></li> |
| </ul> |
| </div> |
| <div class="footer-column"> |
| <h3>Services</h3> |
| <ul class="footer-links"> |
| <li><a href="#">Web Development</a></li> |
| <li><a href="#">Mobile Apps</a></li> |
| <li><a href="#">Cloud Solutions</a></li> |
| <li><a href="#">Digital Consulting</a></li> |
| <li><a href="#">Support & Maintenance</a></li> |
| </ul> |
| </div> |
| <div class="footer-column"> |
| <h3>Connect With Us</h3> |
| <ul class="footer-links"> |
| <li><a href="#">LinkedIn</a></li> |
| <li><a href="#">Twitter</a></li> |
| <li><a href="#">Facebook</a></li> |
| <li><a href="#">Instagram</a></li> |
| <li><a href="#">GitHub</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="copyright"> |
| <p>© 2024 NexaTech Solutions. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.querySelector('.mobile-menu').addEventListener('click', function() { |
| document.querySelector('.nav-links').classList.toggle('active'); |
| }); |
| |
| |
| 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' |
| }); |
| } |
| }); |
| }); |
| |
| |
| document.getElementById('contactForm').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| |
| |
| const formData = new FormData(this); |
| const name = formData.get('name'); |
| const email = formData.get('email'); |
| |
| |
| alert(`Thank you, ${name}! We have received your message and will contact you at ${email} shortly.`); |
| this.reset(); |
| }); |
| |
| |
| document.querySelectorAll('.nav-links a').forEach(link => { |
| link.addEventListener('click', () => { |
| document.querySelector('.nav-links').classList.remove('active'); |
| }); |
| }); |
| |
| |
| window.addEventListener('scroll', function() { |
| const header = document.querySelector('header'); |
| if (window.scrollY > 100) { |
| header.style.background = 'rgba(255, 255, 255, 0.98)'; |
| } else { |
| header.style.background = 'rgba(255, 255, 255, 0.95)'; |
| } |
| }); |
| </script> |
| </body> |
| </html> |
