qinyu_0325
/
lmdWeb


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us - Get in Touch with Our Team | ITAgency</title>
    <meta name="description" content="Have questions or ready to start your project? Contact ITAgency today. Our team is here to assist you with web development, app design, consulting, and more.">


    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="assets/images/ico-01.png">

    <!-- CSS Files -->
    <link rel="stylesheet" href="assets/css/aos.css">
    <link rel="stylesheet" href="assets/css/universal-slider.css">
    
    <!-- General CSS files -->
    <link rel="stylesheet" href="assets/css/globals.css">
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="body-1">    
    <!-- Tech Page Loader -->
    <div id="page-loader" class="page-loader">
        <div class="loader-container">
            <div class="loader-content">
                <!-- Advanced Tech Spinner Only -->
                <div class="loader-spinner">
                    <div class="spinner-ring">
                        <div></div>
                    </div>
                </div>
                
                <!-- Advanced Progress Bar -->
                <div class="loader-progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Header -->
    <header class="header">
        <div class="container d-flex-between">
            <!-- Logo -->
            <div class="logo position-relative">
                <img class="image" src="assets/images/logo-transparent-01.png" alt="Logo">
                <a class="overlay-link" href="index.html"></a>
            </div>

            <!-- Navigation -->
            <nav class="navbar" id="navbar">
                <ul class="nav-menu">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-dropdown="home-dropdown">Home</a>
                        <ul class="dropdown-menu" id="home-dropdown">
                            <li><a href="index.html" class="dropdown-item">Home 1</a></li>
                            <li><a href="heroedge.html" class="dropdown-item">Hero Edge</a></li>
                            <li><a href="home-page-2.html" class="dropdown-item">Home 2</a></li>
                            <li><a href="home-page-3.html" class="dropdown-item">Home 3</a></li>
                            <li><a href="home-page-4.html" class="dropdown-item">Home 4</a></li>
                        </ul>
                    </li>
                    <li><a href="about-us.html" class="nav-link">About Us</a></li>
                    <li><a href="services.html" class="nav-link">Services</a></li>
                    <li><a href="portfolio.html" class="nav-link">Portfolio</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-dropdown="blog-dropdown">Blog</a>
                        <ul class="dropdown-menu" id="blog-dropdown">
                            <li><a href="blog-column-1.html" class="dropdown-item">Blog Column 1</a></li>
                            <li><a href="blog-column-2.html" class="dropdown-item">Blog Column 2</a></li>
                            <li><a href="blog-column-3.html" class="dropdown-item">Blog Column 3</a></li>
                            <li><a href="article.html" class="dropdown-item">Blog Detail Page</a></li>
                        </ul>
                    </li> 
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-dropdown="pages-dropdown">Pages</a>
                        <ul class="dropdown-menu" id="pages-dropdown">
                            <li><a href="process.html" class="dropdown-item">Process</a></li>
                            <li><a href="pricing.html" class="dropdown-item">Pricing</a></li>
                            <li><a href="team.html" class="dropdown-item">Team</a></li>
                            <li><a href="team-member.html" class="dropdown-item">Team Member</a></li>
                            <li><a href="faqs.html" class="dropdown-item">FAQs</a></li>
                            <li><a href="terms-conditions.html" class="dropdown-item">Terms & Conditions</a></li>
                            <li><a href="privacy-policy.html" class="dropdown-item">Privacy Policy</a></li>
                            <li><a href="service-cards-grid.html" class="dropdown-item">Service Cards Grid</a></li>
                            <li><a href="buttons.html" class="dropdown-item">Buttons</a></li>
                            <li><a href="typography.html" class="dropdown-item">Fonts</a></li>
                        </ul>
                    </li>
                    <li><a href="contact-us.html" class="nav-link active">Contact Us</a></li>
                </ul>
            </nav>

            <!-- Get Quotes Button -->
            <div class="actions d-flex-center">
                <a pages/contact-us.html class="btn btn-get-quotes">Get Quotes</a>
                <div class="theme-switcher">
                    <button id="theme-toggle" class="theme-toggle-btn" aria-label="Toggle dark mode">
                        <svg id="theme-toggle-light-icon" class="sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.106a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.894 17.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.894 17.894a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM4.5 12a.75.75 0 01-.75.75H1.5a.75.75 0 010-1.5h2.25a.75.75 0 01.75.75zM6.106 6.106a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"/></svg>
                        <svg id="theme-toggle-dark-icon" class="moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 004.463-.69a.75.75 0 01.981.981A10.501 10.501 0 0118 19.5a10.5 10.5 0 01-10.5-10.5 10.5 10.5 0 011.718-5.528.75.75 0 01.81-.162z" clip-rule="evenodd" /></svg>
                    </button>
                </div>
            </div>

            <!-- Mobile Menu Toggle -->
            <button class="mobile-menu-toggle" id="mobile-menu-toggle">
                <span class="hamburger-line"></span>
                <span class="hamburger-line"></span>
                <span class="hamburger-line"></span>
            </button>
        </div>
    </header>

    <!-- Page Header Section -->
    <section class="page-header">
        <div class="page-header-bg">
            <!-- Animated particles/dots background -->
            <div class="particles-container">
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
            </div>
            
            <!-- Geometric patterns overlay -->
            <div class="geometric-overlay">
                <div class="geometric-shape shape-1"></div>
                <div class="geometric-shape shape-2"></div>
                <div class="geometric-shape shape-3"></div>
                <div class="geometric-shape shape-4"></div>
            </div>
            
            <!-- Digital grid pattern -->
            <div class="digital-grid"></div>
        </div>
        
        <div class="page-header-content">
            <div>
                <div class="breadcrumb"
                    data-aos="fade-down" 
                    data-aos-duration="600" 
                    data-aos-delay="0">
                    <a href="/" class="breadcrumb-link">Home</a>
                    <span class="breadcrumb-separator">
                        <svg viewBox="0 0 24 24">
                            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
                        </svg>
                    </span>
                    <span class="breadcrumb-current">Contact Us</span>
                </div>
                
                <h1 class="page-title"
                    data-aos="fade-up" 
                    data-aos-duration="600" 
                    data-aos-delay="100">Contact Us</h1>
                
                <p class="page-description"
                    data-aos="fade-up" 
                    data-aos-duration="600" 
                    data-aos-delay="200">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem similique doloremque molestiae quae.</p>
            </div>
        </div>
        
        <!-- Floating elements -->
        <div class="floating-elements">
            <div class="floating-circle floating-circle-1"></div>
            <div class="floating-circle floating-circle-2"></div>
            <div class="floating-circle floating-circle-3"></div>
        </div>
    </section>

    <!-- Main 1 -->
    <div class="main d-flex-center pt-8 pb-8">
        <!-- Main Content -->
        <div class="container main-content">
            <!-- Contact Form section -->
            <section class="contact-form pb-3">
                <div class="contact-form-container"
                    data-aos="fade-up" 
                    data-aos-delay="100">
                    
                    <div class="contact-form-content">
                        <!-- Contact Info -->
                        <div class="contact-info-card">
                            <div class="contact-info-header">
                                <h3>Let's Start a Conversation</h3>
                                <p>Let's build the future of your business together. Contact our experts and start your digital journey today.</p>
                            </div>

                            <div class="contact-details">
                                <div class="contact-detail-item">
                                    <div class="contact-icon">
                                        <svg><use xlink:href="#phone"></use></svg>
                                    </div>
                                    <div class="contact-text">
                                        <span class="label">Phone</span>
                                        <span class="value">+1 (800) 987-6543</span>
                                    </div>
                                </div>

                                <div class="contact-detail-item">
                                    <div class="contact-icon">
                                        <svg><use xlink:href="#envelope-1"></use></svg>
                                    </div>
                                    <div class="contact-text">
                                        <span class="label">Email</span>
                                        <span class="value">hello@itagency.com</span>
                                    </div>
                                </div>

                                <div class="contact-detail-item">
                                    <div class="contact-icon">
                                        <svg><use xlink:href="#map-marker-1"></use></svg>
                                    </div>
                                    <div class="contact-text">
                                        <span class="label">Address</span>
                                        <span class="value">One Apple Park Way, Cupertino, CA 95014</span>
                                    </div>
                                </div>

                                <div class="contact-detail-item">
                                    <div class="contact-icon">
                                        <svg><use xlink:href="#alarm-1"></use></svg>
                                    </div>
                                    <div class="contact-text">
                                        <span class="label">Business Hours</span>
                                        <span class="value">Mon - Fri: 9:00 AM - 6:00 PM</span>
                                    </div>
                                </div>
                            </div>

                            <div class="contact-social">
                                <span class="social-label">Follow Us</span>
                                <div class="social-links">
                                    <a href="javascript:void(0)" class="social-link icon-transition sm" >
                                        <svg><use xlink:href="#twitter-x"></use></svg>
                                    </a>
                                    <a href="javascript:void(0)" class="social-link icon-transition sm" >
                                        <svg><use xlink:href="#facebook"></use></svg>
                                    </a>
                                    <a href="javascript:void(0)" class="social-link icon-transition sm" >
                                        <svg><use xlink:href="#linkedin"></use></svg>
                                    </a>
                                    <a href="javascript:void(0)" class="social-link icon-transition sm" >
                                        <svg><use xlink:href="#instagram"></use></svg>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- Contact Form -->
                        <div class="contact-form-card">
                            <form id="contactForm" action="contact.php" method="POST" class="contact-form-fields">
                                <!-- Message sending notification -->
                                <div class="form-status">
                                    <div class="form-success" id="form-success" style="display: none;">
                                        <svg><use xlink:href="#lni-checkmark-circle"></use></svg>
                                        <span>Thank you! Your message has been sent successfully. We'll get back to you within 24 hours.</span>
                                    </div>
                                    <div class="form-error-general" id="form-error" style="display: none;">
                                        <svg><use xlink:href="#lni-warning"></use></svg>
                                        <span>Something went wrong. Please try again or contact us directly.</span>
                                    </div>
                                </div>

                                <!-- Form fields -->
                                <div class="form-group">
                                    <label for="name" class="form-label">Full Name *</label>
                                    <input type="text" id="name" name="name" class="form-input" required>
                                    <span class="form-error" id="name-error"></span>
                                </div>

                                <div class="form-group">
                                    <label for="email" class="form-label">Email Address *</label>
                                    <input type="email" id="email" name="email" class="form-input" required>
                                    <span class="form-error" id="email-error"></span>
                                </div>

                                <div class="form-group">
                                    <label for="phone" class="form-label">Phone Number</label>
                                    <input type="tel" id="phone" name="phone" class="form-input">
                                    <span class="form-error" id="phone-error"></span>
                                </div>

                                <div class="form-group">
                                    <label for="company" class="form-label">Company</label>
                                    <input type="text" id="company" name="company" class="form-input">
                                </div>

                                <div class="form-group">
                                    <label for="service" class="form-label">Service Interested In</label>
                                    <select id="service" name="service" class="form-select">
                                        <option value="">Select a service</option>
                                        <option value="web-development">Web Development</option>
                                        <option value="mobile-app">Mobile App Development</option>
                                        <option value="cloud-solutions">Cloud Solutions</option>
                                        <option value="digital-marketing">Digital Marketing</option>
                                        <option value="ui-ux-design">UI/UX Design</option>
                                        <option value="data-analytics">Data Analytics</option>
                                        <option value="other">Other</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="budget" class="form-label">Project Budget</label>
                                    <select id="budget" name="budget" class="form-select">
                                        <option value="">Select budget range</option>
                                        <option value="under-5k">Under $5,000</option>
                                        <option value="5k-15k">$5,000 - $15,000</option>
                                        <option value="15k-50k">$15,000 - $50,000</option>
                                        <option value="50k-100k">$50,000 - $100,000</option>
                                        <option value="over-100k">Over $100,000</option>
                                    </select>
                                </div>

                                <div class="form-group form-group-full">
                                    <label for="message" class="form-label">Project Details *</label>
                                    <textarea id="message" name="message" class="form-textarea" rows="5" 
                                            placeholder="Tell us about your project requirements, goals, and any specific features you need..." required></textarea>
                                    <span class="form-error" id="message-error"></span>
                                </div>

                                <div class="form-group form-group-full">
                                    <label class="form-checkbox-container">
                                        <input type="checkbox" name="newsletter" class="form-checkbox">
                                        <span class="form-checkmark"></span>
                                        <span class="form-checkbox-text">Subscribe to our newsletter for updates and tech insights</span>
                                    </label>
                                </div>

                                <div class="form-group form-group-full">
                                    <label class="form-checkbox-container">
                                        <input type="checkbox" name="privacy" class="form-checkbox" required>
                                        <span class="form-checkmark"></span>
                                        <span class="form-checkbox-text">I agree to the <a href="#privacy" class="form-link">Privacy Policy</a> and <a href="#terms" class="form-link">Terms of Service</a> *</span>
                                    </label>
                                    <span class="form-error" id="privacy-error"></span>
                                </div>

                                <div class="form-actions">
                                    <button type="submit" class="btn btn-primary form-submit-btn">
                                        <span>Send Message</span>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </section>

            <section>
                <h2 class="heading-lg text-primary">Our Location</h2>
                <iframe 
                    src="https://www.amap.com/" sandbox="" 
                    style="border:0; width: 100%; height: 600px;" 
                    allowfullscreen="" 
                    loading="lazy" 
                    referrerpolicy="no-referrer-when-downgrade">
                </iframe>
            </section>
        </div>
    </div>
    
    <!-- Footer -->
    <footer class="footer pb-5">
        <div class="footer-main">
            <div class="container">
                <div class="footer-content">
                    <!-- Company Info -->
                    <div class="footer-section footer-about" 
                        data-aos="fade-up" 
                        data-aos-delay="100">
                        <div class="footer-logo">
                            <img class="image" src="assets/images/logo-transparent-01.png" alt="ITAgency Logo">
                        </div>
                        <p class="footer-description">
                            Empowering businesses with smart, innovative tech solutions. 
                            We craft high-impact web development, mobile apps, and digital 
                            services that fuel your growth and success.
                        </p>
                        
                        <div class="footer-social">
                            <span class="social-label">Follow Us</span>
                            <div class="social-links">
                                <a href="javascript:void(0)" class="social-link icon-transition"  
                                data-aos="zoom-in" 
                                data-aos-delay="200">
                                    <svg><use xlink:href="#twitter-x"></use></svg>
                                </a>
                                <a href="javascript:void(0)" class="social-link icon-transition"  
                                data-aos="zoom-in" 
                                data-aos-delay="250">
                                    <svg><use xlink:href="#facebook"></use></svg>
                                </a>
                                <a href="javascript:void(0)" class="social-link icon-transition"  
                                data-aos="zoom-in" 
                                data-aos-delay="300">
                                    <svg><use xlink:href="#linkedin"></use></svg>
                                </a>
                                <a href="javascript:void(0)" class="social-link icon-transition"  
                                data-aos="zoom-in" 
                                data-aos-delay="350">
                                    <svg><use xlink:href="#instagram"></use></svg>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Navigation Links -->
                    <div class="footer-section footer-links" 
                        data-aos="fade-up" 
                        data-aos-delay="200">
                        <h4 class="footer-title">Navigation</h4>
                        <ul class="footer-menu">
                            <li><a href="index.html" class="footer-link">Home</a></li>
                            <li><a href="about-us.html" class="footer-link">About Us</a></li>
                            <li><a href="services.html" class="footer-link">Services</a></li>
                            <li><a href="portfolio.html" class="footer-link">Portfolio</a></li>
                            <li><a href="team.html" class="footer-link">Team</a></li>
                            <li><a href="pricing.html" class="footer-link">Pricing</a></li>
                            <li><a href="blog-column-2.html" class="footer-link">Blog</a></li>
                            <li><a href="privacy-policy.html" class="footer-link">Privacy Policy</a></li>
                            <li><a href="terms-conditions.html" class="footer-link">Terms of Service</a></li>
                        </ul>
                    </div>

                    <!-- Services -->
                    <div class="footer-section footer-services" 
                        data-aos="fade-up" 
                        data-aos-delay="300">
                        <h4 class="footer-title">Our Services</h4>
                        <ul class="footer-menu">
                            <li><a href="javascript:void(0)" class="footer-link">Web Development</a></li>
                            <li><a href="javascript:void(0)" class="footer-link">Mobile App Development</a></li>
                            <li><a href="javascript:void(0)" class="footer-link">Cloud Solutions</a></li>
                            <li><a href="javascript:void(0)" class="footer-link">Digital Marketing</a></li>
                            <li><a href="javascript:void(0)" class="footer-link">UI/UX Design</a></li>
                            <li><a href="javascript:void(0)" class="footer-link">Data Analytics</a></li>
                            <li><a href="javascript:void(0)" class="footer-link">Cybersecurity</a></li>
                            <li><a href="javascript:void(0)" class="footer-link">IT Consulting</a></li>
                        </ul>
                    </div>

                    <!-- Contact Info -->
                    <div class="footer-section footer-contact" 
                        data-aos="fade-up" 
                        data-aos-delay="400">
                        <h4 class="footer-title">Contact Info</h4>
                        <div class="footer-contact-info">
                            <div class="contact-item">
                                <div class="contact-icon">
                                    <svg><use xlink:href="#map-marker-1"></use></svg>
                                </div>
                                <div class="contact-text">
                                    <span class="contact-label">Address</span>
                                    <span class="contact-value">789 Innovation Avenue, Future Town, FT 67890</span>
                                </div>
                            </div>

                            <div class="contact-item">
                                <div class="contact-icon">
                                    <svg><use xlink:href="#phone"></use></svg>
                                </div>
                                <div class="contact-text">
                                    <span class="contact-label">Phone</span>
                                    <span class="contact-value">+1 (800) 987-6543</span>
                                </div>
                            </div>

                            <div class="contact-item">
                                <div class="contact-icon">
                                    <svg><use xlink:href="#envelope-1"></use></svg>
                                </div>
                                <div class="contact-text">
                                    <span class="contact-label">Email</span>
                                    <span class="contact-value">hello@itagency.com</span>
                                </div>
                            </div>

                            <div class="contact-item">
                                <div class="contact-icon">
                                    <svg><use xlink:href="#alarm-1"></use></svg>
                                </div>
                                <div class="contact-text">
                                    <span class="contact-label">Business Hours</span>
                                    <span class="contact-value">Mon - Fri: 9:00 AM - 6:00 PM</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Newsletter -->
                    <div class="footer-section footer-newsletter" 
                        data-aos="fade-up" 
                        data-aos-delay="500">
                        <h4 class="footer-title">Newsletter</h4>
                        <p class="newsletter-description">
                            Subscribe to our newsletter for the latest tech insights and updates.
                        </p>
                        <form class="newsletter-form" id="newsletterForm">
                            <div class="newsletter-input-group">
                                <input type="email" 
                                    class="newsletter-input" 
                                    placeholder="Enter your email address" 
                                    required>
                                <button type="submit" class="newsletter-btn">
                                    <svg><use xlink:href="#arrow-right"></use></svg>
                                </button>
                            </div>
                            <label class="newsletter-checkbox">
                                <input name="newsletter-agreement" type="checkbox">
                                <span class="checkmark"></span>
                                <span class="checkbox-text">I agree to the <a href="privacy-policy.html">Privacy Policy</a></span>
                            </label>
                        </form>

                        <!-- Copyright -->
                        <div class="footer-copyright" 
                            data-aos="fade-up" 
                            data-aos-delay="500">
                            <p>© 2026 <a target="_blank" href="https://www.mobanwang.com/" title="网站模板">网站模板</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Scroll to Top Button -->
    <button class="scroll-to-top" id="scrollToTop" aria-label="Scroll to top">
        <svg viewBox="0 0 24 24">
            <path d="M7 14l5-5 5 5z"/>
        </svg>
    </button>

    <!-- JavaScript -->
    <script src="assets/lib/aos/aos.js"></script>

    <script src="assets/js/custom-isotope.js"></script>
    <script src="assets/js/contact-form-demo.js"></script>
    <script src="assets/js/universal-slider.js"></script>
    <script src="assets/js/main-01.js"></script>
</body>
</html>