qinyu_0325
/
lmdWeb


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Service Cards Grid | ITAgency</title>
    <meta name="description" content="Discover our professional service cards grid showcasing IT solutions including web development, mobile app design, cloud infrastructure, digital marketing, UX/UI design, and data analytics.">
    <meta name="keywords" content="IT services, web development, mobile app development, cloud solutions, digital marketing, UX UI design, data analytics, tech agency, software solutions, IT consulting">
    

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

    <!-- CSS Files -->
    <link rel="stylesheet" href="assets/css/aos.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">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">Service Cards Grid</span>
                </div>
                
                <h1 class="page-title"
                    data-aos="fade-up" 
                    data-aos-duration="600" 
                    data-aos-delay="100">Service Cards Grid</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 -->
    <div class="main d-flex-center pt-5 pb-8">
        <!-- Main Content -->
        <div class="container main-content">
            <!-- Service Cards Grid Modern - Version 1 -->
            <section class="service-cards-modern">
                <div class="d-flex-baseline-between pb-5" 
                    data-aos="fade-down" 
                    data-aos-duration="600" 
                    data-aos-delay="0">
                    <h2>Our Services - Version 1</h2>
                    <a href="services.html" class="btn btn-primary">See Services</a>
                </div>

                <div class="services-grid">
                    <div class="service-card" 
                        data-aos="fade-up" 
                        data-aos-delay="0">
                        <div class="service-icon">
                            <svg><use xlink:href="#monitor-code"></use></svg>
                        </div>
                        <div class="service-description">
                            <h3>Web Development</h3>
                            <p>Professional web solutions with modern technologies and responsive designs.</p>
                        </div>
                        <a class="overlay-link" href="javascript:void(0)"></a>
                    </div>
                    
                    <div class="service-card" 
                        data-aos="fade-up" 
                        data-aos-delay="100">
                        <div class="service-icon">
                            <svg><use xlink:href="#phone"></use></svg>
                        </div>
                        <div class="service-description">
                            <h4>Mobile App Development</h4>
                            <p>Native and cross-platform mobile applications for iOS and Android.</p>
                        </div>
                        <a class="overlay-link" href="javascript:void(0)"></a>
                    </div>
                    
                    <div class="service-card" 
                        data-aos="fade-up" 
                        data-aos-delay="200">
                        <div class="service-icon">
                            <svg><use xlink:href="#cloud-iot-2"></use></svg>
                        </div>
                        <div class="service-description">
                            <h4>Cloud Solutions</h4>
                            <p>Scalable cloud infrastructure and deployment solutions for your business.</p>
                        </div>
                        <a class="overlay-link" href="javascript:void(0)"></a>
                    </div>

                    <div class="service-card" 
                        data-aos="fade-up" 
                        data-aos-delay="0">
                        <div class="service-icon">
                            <svg><use xlink:href="#seo-monitor"></use></svg>
                        </div>
                        <div class="service-description">
                            <h4>Digital Marketing</h4>
                            <p>Strategic digital marketing campaigns to boost your online presence.</p>
                        </div>
                        <a class="overlay-link" href="javascript:void(0)"></a>
                    </div>
                    
                    <div class="service-card" 
                        data-aos="fade-up" 
                        data-aos-delay="100">
                        <div class="service-icon">
                            <svg><use xlink:href="#vector-nodes-6"></use></svg>
                        </div>
                        <div class="service-description">
                            <h4>UX/UI Design</h4>
                            <p>User-centered design experiences that engage and convert your audience.</p>
                        </div>
                        <a class="overlay-link" href="javascript:void(0)"></a>
                    </div>
                    
                    <div class="service-card" 
                        data-aos="fade-up" 
                        data-aos-delay="200">
                        <div class="service-icon">
                            <svg><use xlink:href="#database-2"></use></svg>
                        </div>
                        <div class="service-description">
                            <h4>Data Analytics</h4>
                            <p>Transform your data into actionable insights for better business decisions.</p>
                        </div>
                        <a class="overlay-link" href="javascript:void(0)"></a>
                    </div>
                </div>
            </section>

            <!-- Service Cards Grid Classic - Version 2 -->
            <section class="service-cards-classic">
                <div class="d-flex-baseline-between pb-5" 
                    data-aos="fade-down" 
                    data-aos-duration="600" 
                    data-aos-delay="0">
                    <h2>Our Services - Version 2</h2>
                    <a href="services.html" class="btn btn-primary">See Services</a>
                </div>

                <div class="services-grid" 
                    data-hover-area=".service-cards-classic .services-grid" 
                    data-hover-color="var(--color-primary)" 
                    data-target=".service-icon" 
                    data-target-color="#FFFF">

                    <div class="service-card" 
                        data-aos="fade-up" 
                        data-aos-delay="0">
                        <div class="service-icon">
                            <svg><use xlink:href="#monitor-code"></use></svg>
                        </div>
                        <div class="service-description">
                            <h3>Web Development</h3>
                            <p>Professional web solutions with modern technologies and responsive designs.</p>
                        </div>
                        <a class="overlay-link" href="javascript:void(0)"></a>
                    </div>
                    
                    <div class="service-card" 
                        data-aos="fade-up" 
                        data-aos-delay="100">
                        <div class="service-icon">
                            <svg><use xlink:href="#phone"></use></svg>
                        </div>
                        <div class="service-description">
                            <h4>Mobile App Development</h4>
                            <p>Native and cross-platform mobile applications for iOS and Android.</p>
                        </div>
                        <a class="overlay-link" href="javascript:void(0)"></a>
                    </div>
                    
                    <div class="service-card" 
                        data-aos="fade-up" 
                        data-aos-delay="200">
                        <div class="service-icon">
                            <svg><use xlink:href="#cloud-iot-2"></use></svg>
                        </div>
                        <div class="service-description">
                            <h4>Cloud Solutions</h4>
                            <p>Scalable cloud infrastructure and deployment solutions for your business.</p>
                        </div>
                        <a class="overlay-link" href="javascript:void(0)"></a>
                    </div>

                    <div class="service-card" 
                        data-aos="fade-up" 
                        data-aos-delay="0">
                        <div class="service-icon">
                            <svg><use xlink:href="#seo-monitor"></use></svg>
                        </div>
                        <div class="service-description">
                            <h4>Digital Marketing</h4>
                            <p>Strategic digital marketing campaigns to boost your online presence.</p>
                        </div>
                        <a class="overlay-link" href="javascript:void(0)"></a>
                    </div>
                    
                    <div class="service-card" 
                        data-aos="fade-up" 
                        data-aos-delay="100">
                        <div class="service-icon">
                            <svg><use xlink:href="#vector-nodes-6"></use></svg>
                        </div>
                        <div class="service-description">
                            <h4>UX/UI Design</h4>
                            <p>User-centered design experiences that engage and convert your audience.</p>
                        </div>
                        <a class="overlay-link" href="javascript:void(0)"></a>
                    </div>
                    
                    <div class="service-card" 
                        data-aos="fade-up" 
                        data-aos-delay="200">
                        <div class="service-icon">
                            <svg><use xlink:href="#database-2"></use></svg>
                        </div>
                        <div class="service-description">
                            <h4>Data Analytics</h4>
                            <p>Transform your data into actionable insights for better business decisions.</p>
                        </div>
                        <a class="overlay-link" href="javascript:void(0)"></a>
                    </div>
                </div>
            </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/data-hover-area.js"></script>
    <script src="assets/js/main-01.js"></script>
</body>
</html>