Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Modern Web Application</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #6366f1; | |
| --secondary-color: #8b5cf6; | |
| --accent-color: #ec4899; | |
| --dark-color: #1f2937; | |
| --light-color: #f3f4f6; | |
| --text-color: #374151; | |
| --white-color: #ffffff; | |
| --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| --shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| --transition: all 0.3s ease; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| line-height: 1.6; | |
| color: var(--text-color); | |
| overflow-x: hidden; | |
| } | |
| /* Header Styles */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| box-shadow: var(--shadow); | |
| z-index: 1000; | |
| transition: var(--transition); | |
| } | |
| .header-content { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 1rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .nav-links { | |
| display: flex; | |
| list-style: none; | |
| gap: 2rem; | |
| } | |
| .nav-links a { | |
| text-decoration: none; | |
| color: var(--text-color); | |
| font-weight: 500; | |
| transition: var(--transition); | |
| position: relative; | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--primary-color); | |
| transition: var(--transition); | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .nav-links a:hover { | |
| color: var(--primary-color); | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--gradient); | |
| color: var(--white-color); | |
| padding: 0 2rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,138.7C960,139,1056,117,1152,112C1248,107,1344,117,1392,122.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom; | |
| background-size: cover; | |
| } | |
| .hero-content { | |
| max-width: 800px; | |
| text-align: center; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .hero h1 { | |
| font-size: 4rem; | |
| margin-bottom: 1rem; | |
| animation: fadeInUp 1s ease; | |
| } | |
| .hero p { | |
| font-size: 1.5rem; | |
| margin-bottom: 2rem; | |
| animation: fadeInUp 1s ease 0.2s both; | |
| } | |
| .cta-buttons { | |
| display: flex; | |
| gap: 1.5rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .btn { | |
| padding: 1rem 2rem; | |
| border-radius: 50px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: var(--transition); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .btn-primary { | |
| background: var(--white-color); | |
| color: var(--primary-color); | |
| box-shadow: var(--shadow); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| color: var(--white-color); | |
| border: 2px solid var(--white-color); | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| /* Features Section */ | |
| .features { | |
| padding: 5rem 2rem; | |
| background: var(--light-color); | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 4rem; | |
| } | |
| .section-title h2 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .section-title p { | |
| font-size: 1.1rem; | |
| color: var(--text-color); | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .feature-card { | |
| background: var(--white-color); | |
| padding: 2rem; | |
| border-radius: 15px; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .feature-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 4px; | |
| background: var(--gradient); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| } | |
| .feature-icon { | |
| font-size: 3rem; | |
| color: var(--primary-color); | |
| margin-bottom: 1.5rem; | |
| } | |
| .feature-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .feature-card p { | |
| color: var(--text-color); | |
| opacity: 0.8; | |
| } | |
| /* About Section */ | |
| .about { | |
| padding: 5rem 2rem; | |
| background: var(--white-color); | |
| } | |
| .about-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| align-items: center; | |
| } | |
| .about-text h3 { | |
| font-size: 2rem; | |
| margin-bottom: 1.5rem; | |
| color: var(--primary-color); | |
| } | |
| .about-text p { | |
| margin-bottom: 1.5rem; | |
| line-height: 1.8; | |
| } | |
| .stats { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .stat-item { | |
| text-align: center; | |
| } | |
| .stat-number { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| margin-bottom: 0.5rem; | |
| } | |
| .stat-label { | |
| font-size: 1rem; | |
| color: var(--text-color); | |
| } | |
| /* Services Section */ | |
| .services { | |
| padding: 5rem 2rem; | |
| background: var(--light-color); | |
| } | |
| .services-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .service-card { | |
| background: var(--white-color); | |
| border-radius: 15px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| position: relative; | |
| } | |
| .service-card:hover { | |
| transform: scale(1.02); | |
| } | |
| .service-image { | |
| height: 200px; | |
| background: var(--gradient); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .service-icon { | |
| font-size: 4rem; | |
| color: var(--white-color); | |
| } | |
| .service-content { | |
| padding: 2rem; | |
| } | |
| .service-content h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .service-content p { | |
| margin-bottom: 1.5rem; | |
| opacity: 0.8; | |
| } | |
| .service-tags { | |
| display: flex; | |
| gap: 0.5rem; | |
| flex-wrap: wrap; | |
| } | |
| .tag { | |
| background: var(--light-color); | |
| padding: 0.3rem 0.8rem; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| color: var(--text-color); | |
| } | |
| /* Testimonials Section */ | |
| .testimonials { | |
| padding: 5rem 2rem; | |
| background: var(--white-color); | |
| } | |
| .testimonials-slider { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| position: relative; | |
| } | |
| .testimonial-card { | |
| background: var(--light-color); | |
| padding: 2rem; | |
| border-radius: 15px; | |
| text-align: center; | |
| margin: 0 1rem; | |
| } | |
| .testimonial-avatar { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| margin: 0 auto 1.5rem; | |
| background: var(--gradient); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--white-color); | |
| font-size: 2rem; | |
| } | |
| .testimonial-text { | |
| font-style: italic; | |
| margin-bottom: 1.5rem; | |
| position: relative; | |
| } | |
| .testimonial-text::before, | |
| .testimonial-text::after { | |
| content: '"'; | |
| font-size: 2rem; | |
| color: var(--primary-color); | |
| position: absolute; | |
| } | |
| .testimonial-text::before { | |
| left: -10px; | |
| top: -10px; | |
| } | |
| .testimonial-text::after { | |
| right: -10px; | |
| bottom: -30px; | |
| } | |
| .testimonial-author { | |
| font-weight: 600; | |
| color: var(--primary-color); | |
| } | |
| .testimonial-role { | |
| font-size: 0.9rem; | |
| color: var(--text-color); | |
| opacity: 0.8; | |
| } | |
| .slider-dots { | |
| display: flex; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| margin-top: 2rem; | |
| } | |
| .dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background: var(--light-color); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .dot.active { | |
| background: var(--primary-color); | |
| width: 30px; | |
| border-radius: 5px; | |
| } | |
| /* Contact Section */ | |
| .contact { | |
| padding: 5rem 2rem; | |
| background: var(--gradient); | |
| color: var(--white-color); | |
| } | |
| .contact-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .contact-info h3 { | |
| font-size: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .contact-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .contact-icon { | |
| font-size: 1.5rem; | |
| color: var(--white-color); | |
| opacity: 0.8; | |
| } | |
| .contact-form { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| padding: 2rem; | |
| border-radius: 15px; | |
| } | |
| .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: 1rem; | |
| border: none; | |
| border-radius: 8px; | |
| background: rgba(255, 255, 255, 0.2); | |
| color: var(--white-color); | |
| font-size: 1rem; | |
| } | |
| .form-group input::placeholder, | |
| .form-group textarea::placeholder { | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| .form-group textarea { | |
| resize: vertical; | |
| min-height: 120px; | |
| } | |
| .submit-btn { | |
| background: var(--white-color); | |
| color: var(--primary-color); | |
| border: none; | |
| padding: 1rem 2rem; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| width: 100%; | |
| } | |
| .submit-btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--dark-color); | |
| color: var(--light-color); | |
| padding: 3rem 2rem; | |
| text-align: center; | |
| } | |
| .footer-content { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .social-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .social-link { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.1); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--white-color); | |
| transition: var(--transition); | |
| } | |
| .social-link:hover { | |
| background: var(--primary-color); | |
| transform: translateY(-3px); | |
| } | |
| .footer-bottom { | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| padding-top: 2rem; | |
| margin-top: 2rem; | |
| } | |
| .built-with { | |
| color: var(--light-color); | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| } | |
| .built-with:hover { | |
| color: var(--primary-color); | |
| } | |
| /* Animations */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-20px); | |
| } | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| } | |
| .about-content { | |
| grid-template-columns: 1fr; | |
| } | |
| .contact-content { | |
| grid-template-columns: 1fr; | |
| } | |
| .nav-links { | |
| display: none; | |
| } | |
| .menu-toggle { | |
| display: block; | |
| font-size: 1.5rem; | |
| color: var(--primary-color); | |
| cursor: pointer; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .hero h1 { | |
| font-size: 2rem; | |
| } | |
| .features-grid, | |
| .services-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .stats { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Scroll to top button */ | |
| .scroll-top { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| width: 50px; | |
| height: 50px; | |
| background: var(--primary-color); | |
| color: var(--white-color); | |
| border: none; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0; | |
| transition: var(--transition); | |
| z-index: 999; | |
| } | |
| .scroll-top.visible { | |
| opacity: 1; | |
| } | |
| .scroll-top:hover { | |
| background: var(--secondary-color); | |
| transform: translateY(-5px); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="header-content"> | |
| <div class="logo">Modern App</div> | |
| <nav> | |
| <ul class="nav-links"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#features">Features</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#services">Services</a></li> | |
| <li><a href="#testimonials">Testimonials</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </nav> | |
| <div class="menu-toggle"> | |
| <i class="fas fa-bars"></i> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero" id="home"> | |
| <div class="hero-content"> | |
| <h1>Welcome to Modern Web Application</h1> | |
| <p>Experience the future of web development with our cutting-edge technology and innovative solutions.</p> | |
| <div class="cta-buttons"> | |
| <a href="#features" class="btn btn-primary"> | |
| <i class="fas fa-rocket"></i> | |
| Get Started | |
| </a> | |
| <a href="#contact" class="btn btn-secondary"> | |
| <i class="fas fa-envelope"></i> | |
| Contact Us | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features" id="features"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Amazing Features</h2> | |
| <p>Discover the powerful features that make our application stand out from the crowd.</p> | |
| </div> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <h3>Lightning Fast</h3> | |
| <p>Optimized performance with blazing fast loading times and smooth animations.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <h3>Fully Responsive</h3> | |
| <p>Looks perfect on all devices from mobile phones to large desktop screens.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3>Secure & Reliable</h3> | |
| <p>Built with security in mind and backed by reliable infrastructure.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-palette"></i> | |
| </div> | |
| <h3>Modern Design</h3> | |
| <p>Clean, modern UI with beautiful gradients and smooth transitions.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| <h3>Easy to Customize</h3> | |
| <p>Flexible and easy to customize to fit your specific needs.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-headset"></i> | |
| </div> | |
| <h3>24/7 Support</h3> | |
| <p>Round-the-clock customer support to help you whenever you need.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="about" id="about"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>About Us</h2> | |
| <p>Learn more about our mission and what drives us to create amazing web experiences.</p> | |
| </div> | |
| <div class="about-content"> | |
| <div class="about-text"> | |
| <h3>We're on a mission to revolutionize web development</h3> | |
| <p>Our team of passionate developers and designers are dedicated to creating beautiful, functional, and user-friendly web applications. We believe in the power of technology to transform businesses and improve lives.</p> | |
| <p>With years of experience in the industry, we've helped countless clients achieve their digital goals. From startups to enterprise companies, we provide tailored solutions that drive results.</p> | |
| <div class="stats"> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-target="500">0</div> | |
| <div class="stat-label">Projects Completed</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-target="98">0</div> | |
| <div class="stat-label">Client Satisfaction</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-target="50">0</div> | |
| <div class="stat-label">Team Members</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="about-image"> | |
| <img src="https://picsum.photos/seed/modernapp/500/400" alt="About Us" style="border-radius: 15px; box-shadow: var(--shadow);"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section class="services" id="services"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Our Services</h2> | |
| <p>Comprehensive services to meet all your digital needs.</p> | |
| </div> | |
| <div class="services-grid"> | |
| <div class="service-card"> | |
| <div class="service-image"> | |
| <i class="fas fa-laptop-code service-icon"></i> | |
| </div> | |
| <div class="service-content"> | |
| <h3>Web Development</h3> | |
| <p>Custom web applications built with the latest technologies and best practices.</p> | |
| <div class="service-tags"> | |
| <span class="tag">React</span> | |
| <span class="tag">Node.js</span> | |
| <span class="tag">MongoDB</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-image"> | |
| <i class="fas fa-mobile-alt service-icon"></i> | |
| </div> | |
| <div class="service-content"> | |
| <h3>Mobile Development</h3> | |
| <p>Cross-platform mobile applications for iOS and Android.</p> | |
| <div class="service-tags"> | |
| <span class="tag">React Native</span> | |
| <span class="tag">Flutter</span> | |
| <span class="tag">Swift</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-image"> | |
| <i class="fas fa-cloud service-icon"></i> | |
| </div> | |
| <div class="service-content"> | |
| <h3>Cloud Solutions</h3> | |
| <p>Scalable cloud infrastructure and deployment services.</p> | |
| <div class="service-tags"> | |
| <span class="tag">AWS</span> | |
| <span class="tag">Azure</span> | |
| <span class="tag">GCP</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-image"> | |
| <i class="fas fa-paint-brush service-icon"></i> | |
| </div> | |
| <div class="service-content"> | |
| <h3>UI/UX Design</h3> | |
| <p>Beautiful and intuitive user interfaces that delight users.</p> | |
| <div class="service-tags"> | |
| <span class="tag">Figma</span> | |
| <span class="tag">Sketch</span> | |
| <span class="tag">Adobe XD</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-image"> | |
| <i class="fas fa-shield-alt service-icon"></i> | |
| </div> | |
| <div class="service-content"> | |
| <h3>Security</h3> | |
| <p>Comprehensive security audits and protection services.</p> | |
| <div class="service-tags"> | |
| <span class="tag">SSL</span> | |
| <span class="tag">Pen Testing</span> | |
| <span class="tag">Compliance</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-image"> | |
| <i class="fas fa-chart-line service-icon"></i> | |
| </div> | |
| <div class="service-content"> | |
| <h3>Analytics</h3> | |
| <p>Data-driven insights to optimize your digital presence.</p> | |
| <div class="service-tags"> | |
| <span class="tag">Google Analytics</span> | |
| <span class="tag">Hotjar</span> | |
| <span class="tag">Mixpanel</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="testimonials" id="testimonials"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>What Our Clients Say</h2> | |
| <p>Hear from satisfied customers who have experienced our services.</p> | |
| </div> | |
| <div class="testimonials-slider"> | |
| <div class="testimonial-card"> | |
| <div class="testimonial-avatar"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div class="testimonial-text"> | |
| "The team at Modern App transformed our business with their innovative solutions. The results exceeded our expectations!" | |
| </div> | |
| <div class="testimonial-author">John Doe</div> | |
| <div class="testimonial-role">CEO, TechCorp</div> | |
| </div> | |
| <div class="testimonial-card" style="display: none;"> | |
| <div class="testimonial-avatar"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div class="testimonial-text"> | |
| "Working with Modern App was a game-changer for our company. Their expertise and dedication are unmatched." | |
| </div> | |
| <div class="testimonial-author">Jane Smith</div> | |
| <div class="testimonial-role">Marketing Director, StartupXYZ</div> | |
| </div> | |
| <div class="testimonial-card" style="display: none;"> | |
| <div class="testimonial-avatar"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div class="testimonial-text"> | |
| "The quality of work and attention to detail is exceptional. We've seen significant growth since partnering with them." | |
| </div> | |
| <div class="testimonial-author">Mike Johnson</div> | |
| <div class="testimonial-role">Founder, InnovateCo</div> | |
| </div> | |
| <div class="slider-dots"> | |
| <div class="dot active"></div> | |
| <div class="dot"></div> | |
| <div class="dot"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="contact" id="contact"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Get In Touch</h2> | |
| <p>Have a project in mind? Let's discuss how we can help you achieve your goals.</p> | |
| </div> | |
| <div class="contact-content"> | |
| <div class="contact-info"> | |
| <h3>Contact Information</h3> | |
| <div class="contact-item"> | |
| <i class="fas fa-map-marker-alt contact-icon"></i> | |
| <span>123 Innovation Street, Tech City, TC 12345</span> | |
| </div> | |
| <div class="contact-item"> | |
| <i class="fas fa-phone contact-icon"></i> | |
| <span>+1 (555) 123-4567</span> | |
| </div> | |
| <div class="contact-item"> | |
| <i class="fas fa-envelope contact-icon"></i> | |
| <span>hello@modernapp.com</span> | |
| </div> | |
| <div class="contact-item"> | |
| <i class="fas fa-clock contact-icon"></i> | |
| <span>Monday - Friday: 9:00 AM - 6:00 PM</span> | |
| </div> | |
| </div> | |
| <div class="contact-form"> | |
| <form id="contactForm"> | |
| <div class="form-group"> | |
| <label for="name">Your Name</label> | |
| <input type="text" id="name" name="name" placeholder="Enter your name" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="email">Your Email</label> | |
| <input type="email" id="email" name="email" placeholder="Enter your email" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="subject">Subject</label> | |
| <input type="text" id="subject" name="subject" placeholder="Enter subject" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="message">Message</label> | |
| <textarea id="message" name="message" placeholder="Enter your message" required></textarea> | |
| </div> | |
| <button type="submit" class="submit-btn">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="footer-content"> | |
| <div class="social-links"> | |
| <a href="#" class="social-link"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="social-link"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="social-link"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="social-link"><i class="fab fa-github"></i></a> | |
| <a href="#" class="social-link"><i class="fab fa-instagram"></i></a> | |
| </div> | |
| <p>© 2023 Modern Web Application. All rights reserved.</p> | |
| <div class="footer-bottom"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with">Built with <span style="color: var(--primary-color);">anycoder</span></a> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Scroll to top button --> | |
| <button class="scroll-top"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Scroll to top button | |
| const scrollTopBtn = document.querySelector('.scroll-top'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| scrollTopBtn.classList.add('visible'); | |
| } else { | |
| scrollTopBtn.classList.remove('visible'); | |
| } | |
| }); | |
| scrollTopBtn.addEventListener('click', () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Testimonials slider | |
| const testimonials = document.querySelectorAll('.testimonial-card'); | |
| const dots = document.querySelectorAll('.dot'); | |
| let currentTestimonial = 0; | |
| function showTestimonial(index) { | |
| testimonials.forEach(testimonial => { | |
| testimonial.style.display = 'none'; | |
| }); | |
| dots.forEach(dot => { | |
| dot.classList.remove('active'); | |
| }); | |
| testimonials[index].style.display = 'block'; | |
| dots[index].classList.add('active'); | |
| } | |
| dots.forEach((dot, index) => { | |
| dot.addEventListener('click', () => { | |
| currentTestimonial = index; | |
| showTestimonial(currentTestimonial); | |
| }); | |
| }); | |
| // Auto-rotate testimonials | |
| setInterval(() => { | |
| currentTestimonial = (currentTestimonial + 1) % testimonials.length; | |
| showTestimonial(currentTestimonial); | |
| }, 5000); | |
| // Counter animation | |
| const counters = document.querySelectorAll('.stat-number'); | |
| const speed = 200; | |
| const animateCounter = (counter) => { | |
| const target = +counter.getAttribute('data-target'); | |
| const count = +counter.innerText; | |
| const increment = target / speed; | |
| if (count < target) { | |
| counter.innerText = Math.ceil(count + increment); | |
| setTimeout(() => animateCounter(counter), 10); | |
| } else { | |
| counter.innerText = target; | |
| } | |
| }; | |
| // Intersection Observer for counter animation | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| animateCounter(entry.target); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }); | |
| counters.forEach(counter => { | |
| observer.observe(counter); | |
| }); | |
| // Contact form submission | |
| const contactForm = document.getElementById('contactForm'); | |
| contactForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // Get form values | |
| const name = document.getElementById('name').value; | |
| const email = document.getElementById('email').value; | |
| const subject = document.getElementById('subject').value; | |
| const message = document.getElementById('message').value; | |
| // Simulate form submission | |
| alert(`Thank you for your message, ${name}! We'll get back to you soon.`); | |
| // Reset form | |
| contactForm.reset(); | |
| }); | |
| // Mobile menu toggle | |
| const menuToggle = document.querySelector('.menu-toggle'); | |
| const navLinks = document.querySelector('.nav-links'); | |
| menuToggle.addEventListener('click', () => { | |
| navLinks.classList.toggle('active'); | |
| }); | |
| // Add hover effect to feature cards | |
| const featureCards = document.querySelectorAll('.feature-card'); | |
| featureCards.forEach(card => { | |
| card.addEventListener('mouseenter', () => { | |
| card.style.transform = 'translateY(-10px)'; | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| card.style.transform = 'translateY(0)'; | |
| }); | |
| }); | |
| // Add scroll reveal animation | |
| const revealElements = document.querySelectorAll('.feature-card, .service-card, .testimonial-card'); | |
| const revealOnScroll = () => { | |
| revealElements.forEach(element => { | |
| const elementTop = element.getBoundingClientRect().top; | |
| const elementVisible = 150; | |
| if (elementTop < window.innerHeight - elementVisible) { | |
| element.style.opacity = '1'; | |
| element.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }; | |
| window.addEventListener('scroll', revealOnScroll); | |
| revealOnScroll(); // Initial check | |
| </script> | |
| </body> | |
| </html> |