Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nexus Agency - Digital Innovation Partner</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary: #667eea; | |
| --secondary: #764ba2; | |
| --dark: #0f0f1e; | |
| --light: #ffffff; | |
| --gray: #6b7280; | |
| --success: #10b981; | |
| --warning: #f59e0b; | |
| --danger: #ef4444; | |
| --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; | |
| line-height: 1.6; | |
| color: var(--dark); | |
| overflow-x: hidden; | |
| background: var(--light); | |
| } | |
| /* Smooth Scrolling */ | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 10px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--gradient); | |
| border-radius: 5px; | |
| } | |
| /* Navigation */ | |
| nav { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| z-index: 1000; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| nav.scrolled { | |
| padding: 0.5rem 0; | |
| background: rgba(255, 255, 255, 0.98); | |
| } | |
| .nav-container { | |
| 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: 800; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .nav-links { | |
| display: flex; | |
| list-style: none; | |
| gap: 2rem; | |
| align-items: center; | |
| } | |
| .nav-links a { | |
| text-decoration: none; | |
| color: var(--dark); | |
| font-weight: 500; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--gradient); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .nav-cta { | |
| background: var(--gradient); | |
| color: white; | |
| padding: 0.5rem 1.5rem; | |
| border-radius: 50px; | |
| text-decoration: none; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .nav-cta:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow); | |
| } | |
| .menu-toggle { | |
| display: none; | |
| flex-direction: column; | |
| cursor: pointer; | |
| } | |
| .menu-toggle span { | |
| width: 25px; | |
| height: 3px; | |
| background: var(--dark); | |
| margin: 3px 0; | |
| transition: 0.3s; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| padding: 6rem 2rem 2rem; | |
| background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| right: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%); | |
| animation: float 20s infinite ease-in-out; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translate(0, 0) rotate(0deg); } | |
| 33% { transform: translate(30px, -30px) rotate(120deg); } | |
| 66% { transform: translate(-20px, 20px) rotate(240deg); } | |
| } | |
| .hero-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| align-items: center; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .hero-content h1 { | |
| font-size: clamp(2rem, 5vw, 3.5rem); | |
| font-weight: 800; | |
| line-height: 1.2; | |
| margin-bottom: 1.5rem; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| animation: slideInLeft 0.8s ease; | |
| } | |
| @keyframes slideInLeft { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-50px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| .hero-content p { | |
| font-size: 1.25rem; | |
| color: var(--gray); | |
| margin-bottom: 2rem; | |
| animation: slideInLeft 0.8s ease 0.2s backwards; | |
| } | |
| .hero-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| animation: slideInLeft 0.8s ease 0.4s backwards; | |
| } | |
| .btn-primary { | |
| background: var(--gradient); | |
| color: white; | |
| padding: 1rem 2rem; | |
| border-radius: 50px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| color: var(--primary); | |
| padding: 1rem 2rem; | |
| border-radius: 50px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| border: 2px solid var(--primary); | |
| transition: all 0.3s ease; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .btn-secondary:hover { | |
| background: var(--primary); | |
| color: white; | |
| transform: translateY(-3px); | |
| } | |
| .hero-image { | |
| position: relative; | |
| animation: slideInRight 0.8s ease; | |
| } | |
| @keyframes slideInRight { | |
| from { | |
| opacity: 0; | |
| transform: translateX(50px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| .hero-image img { | |
| width: 100%; | |
| height: auto; | |
| border-radius: 20px; | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .floating-cards { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| } | |
| .floating-card { | |
| position: absolute; | |
| background: white; | |
| padding: 1rem; | |
| border-radius: 10px; | |
| box-shadow: var(--shadow); | |
| animation: floatCard 10s infinite ease-in-out; | |
| } | |
| @keyframes floatCard { | |
| 0%, 100% { transform: translateY(0) rotate(0deg); } | |
| 50% { transform: translateY(-20px) rotate(5deg); } | |
| } | |
| .floating-card:nth-child(1) { | |
| top: 10%; | |
| right: 10%; | |
| animation-delay: 0s; | |
| } | |
| .floating-card:nth-child(2) { | |
| bottom: 20%; | |
| left: 5%; | |
| animation-delay: 2s; | |
| } | |
| .floating-card:nth-child(3) { | |
| top: 50%; | |
| right: 5%; | |
| animation-delay: 4s; | |
| } | |
| /* Stats Section */ | |
| .stats { | |
| padding: 4rem 2rem; | |
| background: var(--gradient); | |
| color: white; | |
| } | |
| .stats-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 2rem; | |
| text-align: center; | |
| } | |
| .stat-item { | |
| padding: 1rem; | |
| } | |
| .stat-number { | |
| font-size: 2.5rem; | |
| font-weight: 800; | |
| margin-bottom: 0.5rem; | |
| } | |
| .stat-label { | |
| font-size: 1rem; | |
| opacity: 0.9; | |
| } | |
| /* Services Section */ | |
| .services { | |
| padding: 5rem 2rem; | |
| background: #f9fafb; | |
| } | |
| .section-header { | |
| text-align: center; | |
| max-width: 600px; | |
| margin: 0 auto 3rem; | |
| } | |
| .section-header h2 { | |
| font-size: 2.5rem; | |
| font-weight: 800; | |
| margin-bottom: 1rem; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .section-header p { | |
| color: var(--gray); | |
| font-size: 1.1rem; | |
| } | |
| .services-grid { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .service-card { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: 15px; | |
| box-shadow: var(--shadow); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .service-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 4px; | |
| background: var(--gradient); | |
| transform: scaleX(0); | |
| transition: transform 0.3s ease; | |
| } | |
| .service-card:hover::before { | |
| transform: scaleX(1); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .service-icon { | |
| width: 60px; | |
| height: 60px; | |
| background: var(--gradient); | |
| border-radius: 15px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 1.5rem; | |
| font-size: 1.5rem; | |
| color: white; | |
| } | |
| .service-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| color: var(--dark); | |
| } | |
| .service-card p { | |
| color: var(--gray); | |
| line-height: 1.6; | |
| } | |
| /* Portfolio Section */ | |
| .portfolio { | |
| padding: 5rem 2rem; | |
| } | |
| .portfolio-grid { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .portfolio-item { | |
| position: relative; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| background: white; | |
| } | |
| .portfolio-item:hover { | |
| transform: scale(1.05); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .portfolio-image { | |
| width: 100%; | |
| height: 250px; | |
| background: var(--gradient); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .portfolio-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .portfolio-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8)); | |
| display: flex; | |
| align-items: flex-end; | |
| padding: 1.5rem; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .portfolio-item:hover .portfolio-overlay { | |
| opacity: 1; | |
| } | |
| .portfolio-info { | |
| color: white; | |
| } | |
| .portfolio-info h3 { | |
| font-size: 1.25rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .portfolio-info p { | |
| opacity: 0.9; | |
| font-size: 0.9rem; | |
| } | |
| /* Testimonials */ | |
| .testimonials { | |
| padding: 5rem 2rem; | |
| background: #f9fafb; | |
| } | |
| .testimonials-container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .testimonial-card { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: 15px; | |
| box-shadow: var(--shadow); | |
| margin-bottom: 2rem; | |
| } | |
| .testimonial-content { | |
| font-size: 1.1rem; | |
| color: var(--gray); | |
| margin-bottom: 1.5rem; | |
| font-style: italic; | |
| } | |
| .testimonial-author { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .author-avatar { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| background: var(--gradient); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-weight: bold; | |
| } | |
| .author-info h4 { | |
| color: var(--dark); | |
| margin-bottom: 0.25rem; | |
| } | |
| .author-info p { | |
| color: var(--gray); | |
| font-size: 0.9rem; | |
| } | |
| /* Contact Section */ | |
| .contact { | |
| padding: 5rem 2rem; | |
| background: var(--gradient); | |
| color: white; | |
| } | |
| .contact-container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| text-align: center; | |
| } | |
| .contact h2 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .contact p { | |
| font-size: 1.1rem; | |
| margin-bottom: 2rem; | |
| opacity: 0.9; | |
| } | |
| .contact-form { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: 15px; | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| text-align: left; | |
| } | |
| .form-group label { | |
| display: block; | |
| color: var(--dark); | |
| margin-bottom: 0.5rem; | |
| font-weight: 500; | |
| } | |
| .form-group input, | |
| .form-group textarea { | |
| width: 100%; | |
| padding: 0.75rem; | |
| border: 2px solid #e5e7eb; | |
| border-radius: 10px; | |
| font-size: 1rem; | |
| transition: border-color 0.3s ease; | |
| } | |
| .form-group input:focus, | |
| .form-group textarea:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| } | |
| .form-group textarea { | |
| resize: vertical; | |
| min-height: 120px; | |
| } | |
| .submit-btn { | |
| background: var(--gradient); | |
| color: white; | |
| padding: 1rem 2rem; | |
| border: none; | |
| border-radius: 50px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| width: 100%; | |
| } | |
| .submit-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow); | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--dark); | |
| color: white; | |
| padding: 3rem 2rem 1rem; | |
| } | |
| .footer-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .footer-section h3 { | |
| margin-bottom: 1rem; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .footer-section ul { | |
| list-style: none; | |
| } | |
| .footer-section ul li { | |
| margin-bottom: 0.5rem; | |
| } | |
| .footer-section a { | |
| color: #9ca3af; | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| } | |
| .footer-section a:hover { | |
| color: white; | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .social-links a { | |
| width: 40px; | |
| height: 40px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s ease; | |
| } | |
| .social-links a:hover { | |
| background: var(--gradient); | |
| transform: translateY(-3px); | |
| } | |
| .footer-bottom { | |
| text-align: center; | |
| padding-top: 2rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| color: #9ca3af; | |
| } | |
| .anycoder-link { | |
| color: var(--primary); | |
| text-decoration: none; | |
| font-weight: 600; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| display: none; | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| width: 100%; | |
| background: white; | |
| flex-direction: column; | |
| padding: 2rem; | |
| box-shadow: var(--shadow); | |
| } | |
| .nav-links.active { | |
| display: flex; | |
| } | |
| .menu-toggle { | |
| display: flex; | |
| } | |
| .hero-container { | |
| grid-template-columns: 1fr; | |
| text-align: center; | |
| } | |
| .hero-buttons { | |
| justify-content: center; | |
| } | |
| .stats-container { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .portfolio-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Loading Animation */ | |
| .fade-in { | |
| animation: fadeIn 1s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Notification Toast */ | |
| .toast { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| background: var(--gradient); | |
| color: white; | |
| padding: 1rem 1.5rem; | |
| border-radius: 10px; | |
| box-shadow: var(--shadow-lg); | |
| transform: translateX(400px); | |
| transition: transform 0.3s ease; | |
| z-index: 2000; | |
| } | |
| .toast.show { | |
| transform: translateX(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav id="navbar"> | |
| <div class="nav-container"> | |
| <div class="logo"> | |
| <i class="fas fa-rocket"></i> | |
| Nexus Agency | |
| </div> | |
| <ul class="nav-links" id="navLinks"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#services">Services</a></li> | |
| <li><a href="#portfolio">Portfolio</a></li> | |
| <li><a href="#testimonials">Testimonials</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| <li><a href="#" class="nav-cta">Get Started</a></li> | |
| </ul> | |
| <div class="menu-toggle" id="menuToggle"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero" id="home"> | |
| <div class="hero-container"> | |
| <div class="hero-content"> | |
| <h1>Transform Your Digital Presence with Innovation</h1> | |
| <p>We create stunning digital experiences that drive growth and engagement for your business.</p> | |
| <div class="hero-buttons"> | |
| <a href="#contact" class="btn-primary"> | |
| Start Your Project | |
| <i class="fas fa-arrow-right"></i> | |
| </a> | |
| <a href="#portfolio" class="btn-secondary"> | |
| View Our Work | |
| <i class="fas fa-eye"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="hero-image"> | |
| <div class="floating-cards"> | |
| <div class="floating-card"> | |
| <i class="fas fa-chart-line" style="color: var(--success); font-size: 1.5rem;"></i> | |
| </div> | |
| <div class="floating-card"> | |
| <i class="fas fa-code" style="color: var(--primary); font-size: 1.5rem;"></i> | |
| </div> | |
| <div class="floating-card"> | |
| <i class="fas fa-mobile-alt" style="color: var(--warning); font-size: 1.5rem;"></i> | |
| </div> | |
| </div> | |
| <img src="https://picsum.photos/seed/agency-hero/600/400" alt="Digital Agency"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="stats"> | |
| <div class="stats-container"> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-target="150">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">Happy Clients</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-target="12">0</div> | |
| <div class="stat-label">Years Experience</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-target="24">0</div> | |
| <div class="stat-label">Team Members</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section class="services" id="services"> | |
| <div class="section-header fade-in"> | |
| <h2>Our Services</h2> | |
| <p>We offer comprehensive digital solutions to help your business thrive in the modern world.</p> | |
| </div> | |
| <div class="services-grid"> | |
| <div class="service-card fade-in"> | |
| <div class="service-icon"> | |
| <i class="fas fa-palette"></i> | |
| </div> | |
| <h3>Web Design</h3> | |
| <p>Creating beautiful, user-centered designs that captivate your audience and drive engagement.</p> | |
| </div> | |
| <div class="service-card fade-in"> | |
| <div class="service-icon"> | |
| <i class="fas fa-laptop-code"></i> | |
| </div> | |
| <h3>Web Development</h3> | |
| <p>Building robust, scalable websites and applications with cutting-edge technologies.</p> | |
| </div> | |
| <div class="service-card fade-in"> | |
| <div class="service-icon"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <h3>Mobile Apps</h3> | |
| <p>Developing intuitive mobile applications for iOS and Android platforms.</p> | |
| </div> | |
| <div class="service-card fade-in"> | |
| <div class="service-icon"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3>Digital Marketing</h3> | |
| <p>Strategic marketing solutions to increase your online visibility and reach.</p> | |
| </div> | |
| <div class="service-card fade-in"> | |
| <div class="service-icon"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| <h3>SEO Optimization</h3> | |
| <p>Improving your search engine rankings to drive organic traffic to your website.</p> | |
| </div> | |
| <div class="service-card fade-in"> | |
| <div class="service-icon"> | |
| <i class="fas fa-cloud"></i> | |
| </div> | |
| <h3>Cloud Solutions</h3> | |
| <p>Providing scalable cloud infrastructure and migration services for modern businesses.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Portfolio Section --> | |
| <section class="portfolio" id="portfolio"> | |
| <div class="section-header fade-in"> | |
| <h2>Recent Projects</h2> | |
| <p>Explore our latest work and see how we've helped businesses achieve their goals.</p> | |
| </div> | |
| <div class="portfolio-grid"> | |
| <div class="portfolio-item fade-in"> | |
| <div class="portfolio-image"> | |
| <img src="https://picsum.photos/seed/project1/400/250" alt="E-commerce Platform"> | |
| <div class="portfolio-overlay"> | |
| <div class="portfolio-info"> | |
| <h3>E-commerce Platform</h3> | |
| <p>Modern online shopping experience</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="portfolio-item fade-in"> | |
| <div class="portfolio-image"> | |
| <img src="https://picsum.photos/seed/project2/400/250" alt="Banking App"> | |
| <div class="portfolio-overlay"> | |
| <div class="portfolio-info"> | |
| <h3>Banking App</h3> | |
| <p>Secure financial management solution</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="portfolio-item fade-in"> | |
| <div class="portfolio-image"> | |
| <img src="https://picsum.photos/seed/project3/400/250" alt="Healthcare Portal"> | |
| <div class="portfolio-overlay"> | |
| <div class="portfolio-info"> | |
| <h3>Healthcare Portal</h3> | |
| <p>Comprehensive patient management system</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="testimonials" id="testimonials"> | |
| <div class="section-header fade-in"> | |
| <h2>Client Testimonials</h2> | |
| <p>Don't just take our word for it - hear what our clients have to say.</p> | |
| </div> | |
| <div class="testimonials-container"> | |
| <div class="testimonial-card fade-in"> | |
| <div class="testimonial-content"> | |
| "Nexus Agency transformed our online presence completely. Their innovative approach and attention to detail resulted in a 200% increase in our conversion rates. Highly recommend!" | |
| </div> | |
| <div class="testimonial-author"> | |
| <div class="author-avatar">JD</div> | |
| <div class="author-info"> | |
| <h4>John Davidson</h4> | |
| <p>CEO, TechStart Inc.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-card fade-in"> | |
| <div class="testimonial-content"> | |
| "Working with Nexus Agency was a game-changer for our business. They delivered exceptional results on time and within budget. Their ongoing support is invaluable." | |
| </div> | |
| <div class="testimonial-author"> | |
| <div class="author-avatar">SM</div> | |
| <div class="author-info"> | |
| <h4>Sarah Mitchell</h4> | |
| <p>Marketing Director, Global Retail</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="contact" id="contact"> | |
| <div class="contact-container"> | |
| <h2>Let's Work Together</h2> | |
| <p>Ready to start your next project? Get in touch with us today.</p> | |
| <form class="contact-form" id="contactForm"> | |
| <div class="form-group"> | |
| <label for="name">Your 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="project">Project Type</label> | |
| <input type="text" id="project" name="project" placeholder="e.g., Web Design, Mobile App"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="message">Message</label> | |
| <textarea id="message" name="message" required></textarea> | |
| </div> | |
| <button type="submit" class="submit-btn"> | |
| Send Message | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="footer-container"> | |
| <div class="footer-section"> | |
| <h3>Nexus Agency</h3> | |
| <p>Your trusted partner for digital transformation and innovation.</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-linkedin-in"></i></a> | |
| <a href="#"><i class="fab fa-instagram"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Quick Links</h3> | |
| <ul> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#services">Services</a></li> | |
| <li><a href="#portfolio">Portfolio</a></li> | |
| <li><a href="#testimonials">Testimonials</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Services</h3> | |
| <ul> | |
| <li><a href="#">Web Design</a></li> | |
| <li><a href="#">Web Development</a></li> | |
| <li><a href="#">Mobile Apps</a></li> | |
| <li><a href="#">Digital Marketing</a></li> | |
| <li><a href="#">SEO Optimization</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Contact Info</h3> | |
| <ul> | |
| <li><i class="fas fa-envelope"></i> hello@nexusagency.com</li> | |
| <li><i class="fas fa-phone"></i> +1 (555) 123-4567</li> | |
| <li><i class="fas fa-map-marker-alt"></i> 123 Tech Street, Digital City</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2024 Nexus Agency. All rights reserved. | Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">anycoder</a></p> | |
| </div> | |
| </footer> | |
| <!-- Toast Notification --> | |
| <div class="toast" id="toast"> | |
| <i class="fas fa-check-circle"></i> Message sent successfully! | |
| </div> | |
| <script> | |
| // Mobile Menu Toggle | |
| const menuToggle = document.getElementById('menuToggle'); | |
| const navLinks = document.getElementById('navLinks'); | |
| menuToggle.addEventListener('click', () => { | |
| navLinks.classList.toggle('active'); | |
| }); | |
| // Close mobile menu when clicking on a link | |
| document.querySelectorAll('.nav-links a').forEach(link => { | |
| link.addEventListener('click', () => { | |
| navLinks.classList.remove('active'); | |
| }); | |
| }); | |
| // Navbar scroll effect | |
| window.addEventListener('scroll', () => { | |
| const navbar = document.getElementById('navbar'); | |
| if (window.scrollY > 50) { | |
| navbar.classList.add('scrolled'); | |
| } else { | |
| navbar.classList.remove('scrolled'); | |
| } | |
| }); | |
| // Counter Animation | |
| const counters = document.querySelectorAll('.stat-number'); | |
| const speed = 200; | |
| const countUp = () => { | |
| counters.forEach(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(countUp, 10); | |
| } else { | |
| counter.innerText = target; | |
| } | |
| }); | |
| }; | |
| // Trigger counter animation when stats section is in view | |
| const statsSection = document.querySelector('.stats'); | |
| const observerOptions = { | |
| threshold: 0.5 | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| countUp(); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, observerOptions); | |
| observer.observe(statsSection); | |
| // Fade in animation on scroll | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| const fadeObserver = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = '1'; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }, { | |
| threshold: 0.1 | |
| }); | |
| fadeElements.forEach(element => { | |
| element.style.opacity = '0'; | |
| element.style.transform = 'translateY(20px)'; | |
| element.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; | |
| fadeObserver.observe(element); | |
| }); | |
| // Contact Form Submission | |
| const contactForm = document.getElementById('contactForm'); | |
| const toast = document.getElementById('toast'); | |
| contactForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // Get form data | |
| const formData = new FormData(contactForm); | |
| const data = Object.fromEntries(formData); | |
| // Show success |