

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">

        <title>Ace Developers -About Us</title>


        <!-- Favicons -->
        <link href="img/logo2.jpg" rel="icon" type="image/png">


        <!-- Google Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>

        <!-- Vendor CSS Files -->
        <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="vendor/icofont/icofont.min.css" rel="stylesheet">
        <link href="vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
        <link href="vendor/remixicon/remixicon.css" rel="stylesheet">

        <!-- Template Main CSS File -->
        <link href="css/aboutus.css" rel="stylesheet">


    </head>


    <!-- ======= Header ======= -->
    <header id="header" class="fixed-top shadow">
        <div class="container d-flex align-items-center justify-content-between">

            <h1 class="logo"><a href="#" style="color: #434175;">Ace Developers</a></h1>
            <!-- Uncomment below if you prefer to use an image logo -->
            <a href="#" class="logo"><img src="img/logo2.jpg" alt="" class="img-fluid" style="border-radius: 10px;"></a>

        </div>
    </header><!-- End Header -->


    <!-- ======= Hero Section ======= -->
    <section id="hero" class="d-flex align-items-center">
        <div class="box1" id="hideonmobile1">
            <div class="middle animate__animated animate__fadeInLeft ">
                <div class="btn" >
                    <a href="#">
                       <img src="img/focebook.png" class="image" width="40" height="40" style="margin-top: 4px;">
                    </a>
                </div>
            </div>
            <div class="middle animate__animated animate__fadeInLeft animate__delay-1s" style="margin-top: 12px;">
                <div class="btn">
                    <a href="#">
                        <img src="img/git01.png" class="image" width="40" height="40" style="margin-top: 4px;">
                    </a>
                </div>
            </div>
            <div class="middle animate__animated animate__fadeInLeft animate__delay-2s" style="margin-top: 12px;">
                <div class="btn">
                    <a href="#">
                        <img src="img/linkedin-icon.png" class="iimg-thumbnail" width="40" height="40" style="margin-top: 4px;">
                    </a>
                </div>
            </div>
            <div class="middle animate__animated animate__fadeInLeft animate__delay-3s" style="margin-top: 12px;">
                <div class="btn">
                    <a href="#">
                        <img src="img/insta_final.png" class="image" width="40" height="40" style="margin-top: 4px;">
                    </a>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-lg-6 pt-2 pt-lg-0 order-2 order-lg-1 d-flex flex-column justify-content-center">
                    <h1 class="animate__animated animate__fadeInUp">About Us</h1>
                    <h5 style="margin-top: 20px;">There are two ways fo constructing a software design:
                        One way is to make it so simple that there are obviously no 
                        deficiences, and the other way is to make it so complicated that 
                        there are no obvious deficiences.The first method is far more difficut.</h5>
                    <div class="mt-3">
                        <a href="#about" class="btn-get-started scrollto">Get Started</a>
                        <a href="login.jsp" class="btn-get-quote">Login</a>
                    </div>

                </div>
                <div class="col-lg-6 order-1 order-lg-2 hero-img">
                    <img src="img/teamspirit.svg" class="img-fluid" alt="">
                </div>
            </div>
        </div>

    </section><!-- End Hero -->

    <main id="main">

        <!-- ======= About Section ======= -->
        <section id="about" class="about">
            <div class="container">

                <div class="row content">
                    <div class="col-lg-6">
                        <h2 class="animate__animated animate__fadeInUp">Ace Developers</h2>
                        <h3 class="animate__animated animate__fadeInUp">Ace Developers is the community which was build in 2019.
                        </h3>
                    </div>
                    <div class="col-lg-6 pt-4 pt-lg-0">
                        <p class="animate__animated animate__fadeInUp">
                            Ace Developers is the community which work on IT sector, It is developed web application, system software,
                            Mobile Application, Graphic design, product management and also provide the security system for schools.
                            It is situated at Indore in India.
                        </p>
                        <ul class="animate__animated animate__fadeInUp">
                            <li><i class="ri-check-double-line" style="color: red;"></i>application development</li>
                            <li><i class="ri-check-double-line" style="color: red;"></i>Graphic designing</li>
                            <li><i class="ri-check-double-line" style="color: red;"></i>Product Management</li>
                        </ul>
                        <!--<p class="font-italic animate__animated animate__fadeInUp">
                          
                        </p>-->
                    </div>
                </div>

            </div>
        </section><!-- End About Section -->

        <!-- ======= Why Us Section ======= -->
        <section id="why-us" class="why-us">
            <div class="container">

                <div class="row">

                    <div class="col-lg-4">
                        <div class="box animate__animated animate__backInRight" style="border-radius: 10px;">
                            <span style="color: red;">01</span>
                            <h4>Ankit Bhatia</h4>
                            <p>Full-Stack Developer</p>
                        </div>
                    </div>

                    <div class="col-lg-4 mt-4 mt-lg-0">
                        <div class="box animate__animated animate__backInRight" style="border-radius: 10px;">
                            <span style="color: red;">02</span>
                            <h4>Aalekh Karhadkar</h4>
                            <p>Full-Stack Developer</p>
                        </div>
                    </div>

                    <div class="col-lg-4 mt-4 mt-lg-0">
                        <div class="box animate__animated animate__backInRight" style="border-radius: 10px;">
                            <span style="color: red;">03</span>
                            <h4>Arpit Katiyar</h4>
                            <p>Front-end Developer</p>
                        </div>
                    </div>

                </div>

            </div>
        </section><!-- End Why Us Section -->

        <!-- ======= Services Section ======= -->
        <section id="services" class="services section-bg">
            <div class="container">

                <div class="section-title">
                    <h2 class="animate__animated animate__fadeInUp">Our Services</h2>
                </div>

                <div class="row">
                    <div class="content col-xl-5 d-flex flex-column justify-content-center">
                        <img src="img/ourgoal.svg" class="img-fluid" alt="">
                    </div>
                    <div class="col-xl-7">
                        <div class="icon-boxes d-flex flex-column justify-content-center">
                            <div class="row">
                                <div class="col-lg-6 d-flex align-items-stretch animate__animated animate__backInRight" data-aos="zoom-in" data-aos-delay="100">
                                    <div class="icon-box iconbox-blue" style="border-radius: 10px;" >
                                        <div class="icon">
                                            <svg width="100" height="100" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke="none" stroke-width="0" fill="#f5f5f5" d="M300,521.0016835830174C376.1290562159157,517.8887921683347,466.0731472004068,529.7835943286574,510.70327084640275,468.03025145048787C554.3714126377745,407.6079735673963,508.03601936045806,328.9844924480964,491.2728898941984,256.3432110539036C474.5976632858925,184.082847569629,479.9380746630129,96.60480741107993,416.23090153303,58.64404602377083C348.86323505073057,18.502131276798302,261.93793281208167,40.57373210992963,193.5410806939664,78.93577620505333C130.42746243093433,114.334589627462,98.30271207620316,179.96522072025542,76.75703585869454,249.04625023123273C51.97151888228291,328.5150500222984,13.704378332031375,421.85034740162234,66.52175969318436,486.19268352777647C119.04800174914682,550.1803526380478,217.28368757567262,524.383925680826,300,521.0016835830174"></path>
                                            </svg>
                                            <i class='bx bx-mobile-alt'></i>
                                        </div>
                                        <h4><a href="">App Development</a></h4>
                                        <p>Provide App development in java and Android, react.</p>
                                    </div>
                                </div>

                                <div class="col-lg-6 d-flex align-items-stretch mt-4 mt-lg-0 animate__animated animate__backInRight" data-aos="zoom-in" data-aos-delay="200">
                                    <div class="icon-box iconbox-orange " style="border-radius: 10px;" >
                                        <div class="icon">
                                            <svg width="100" height="100" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke="none" stroke-width="0" fill="#f5f5f5" d="M300,582.0697525312426C382.5290701553225,586.8405444964366,449.9789794690241,525.3245884688669,502.5850820975895,461.55621195738473C556.606425686781,396.0723002908107,615.8543463187945,314.28637112970534,586.6730223649479,234.56875336149918C558.9533121215079,158.8439757836574,454.9685369536778,164.00468322053177,381.49747125262974,130.76875717737553C312.15926192815925,99.40240125094834,248.97055460311594,18.661163978235184,179.8680185752513,50.54337015887873C110.5421016452524,82.52863877960104,119.82277516462835,180.83849132639028,109.12597500060166,256.43424936330496C100.08760227029461,320.3096726198365,92.17705696193138,384.0621239912766,124.79988738764834,439.7174275375508C164.83382741302287,508.01625554203684,220.96474134820875,577.5009287672846,300,582.0697525312426"></path>
                                            </svg>
                                            <i class='bx bx-laptop' ></i>
                                        </div>
                                        <h4><a href="">Web & System App</a></h4>
                                        <p>Provide Web development in angular js, jsp, backend in nodejs, java and Sytem development in JavaFX.</p>
                                    </div>
                                </div>

                                <div class="col-lg-6 d-flex align-items-stretch mt-4 animate__animated animate__backInRight" data-aos="zoom-in" data-aos-delay="300">
                                    <div class="icon-box iconbox-pink" style="border-radius: 10px;" >
                                        <div class="icon">
                                            <svg width="100" height="100" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke="none" stroke-width="0" fill="#f5f5f5" d="M300,541.5067337569781C382.14930387511276,545.0595476570109,479.8736841581634,548.3450877840088,526.4010558755058,480.5488172755941C571.5218469581645,414.80211281144784,517.5187510058486,332.0715597781072,496.52539010469104,255.14436215662573C477.37192572678356,184.95920475031193,473.57363656557914,105.61284051026155,413.0603344069578,65.22779650032875C343.27470386102294,18.654635553484475,251.2091493199835,5.337323636656869,175.0934190732945,40.62881213300186C97.87086631185822,76.43348514350839,51.98124368387456,156.15599469081315,36.44837278890362,239.84606092416172C21.716077023791087,319.22268207091537,43.775223500013084,401.1760424656574,96.891909868211,461.97329694683043C147.22146801428983,519.5804099606455,223.5754009179313,538.201503339737,300,541.5067337569781"></path>
                                            </svg>
                                            <i class='bx bx-tachometer'></i>
                                        </div>
                                        <h4><a href="">Product Management</a></h4>
                                        <p>Provide the testing, Update, Performance Management of the System</p>
                                    </div>
                                </div>

                                <div class="col-lg-6 d-flex align-items-stretch mt-4 animate__animated animate__backInRight" data-aos="zoom-in" data-aos-delay="100">
                                    <div class="icon-box iconbox-teal" style="border-radius: 10px;" >
                                        <div class="icon">
                                            <svg width="100" height="100" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke="none" stroke-width="0" fill="#f5f5f5" d="M300,503.46388370962813C374.79870501325706,506.71871716319447,464.8034551963731,527.1746412648533,510.4981551193396,467.86667711651364C555.9287308511215,408.9015244558933,512.6030010748507,327.5744911775523,490.211057578863,256.5855673507754C471.097692560561,195.9906835881958,447.69079081568157,138.11976852964426,395.19560036434837,102.3242989838813C329.3053358748298,57.3949838291264,248.02791733380457,8.279543830951368,175.87071277845988,42.242879143198664C103.41431057327972,76.34704239035025,93.79494320519305,170.9812938413882,81.28167332365135,250.07896920659033C70.17666984294237,320.27484674793965,64.84698225790005,396.69656628748305,111.28512138212992,450.4950937839243C156.20124167950087,502.5303643271138,231.32542653798444,500.4755392045468,300,503.46388370962813"></path>
                                            </svg>
                                            <i class='bx bx-shield-quarter' ></i>
                                        </div>
                                        <h4><a href="">Security System</a></h4>
                                        <p>Provide School Management System, College Management System</p>
                                    </div>
                                </div>
                            </div>
                        </div><!-- End .content-->
                    </div>
                </div>

            </div>
        </section><!-- End Services Section -->

        <!-- ======= Team Section ======= -->
        <section id="team" class="team">
            <div class="container">

                <div class="section-title">
                    <h2 class="animate__animated animate__fadeInUp">Our Team</h2>
                    <p>Everyone says it, but in our case it’s true: our team is the secret to our success. 
                        Each of our employees is amazing in their own right, but together they are what makes 
                        Rostrum such a fun and rewarding place to work.  The Rostrum team is a tight-knit, 
                        talented group with a shared vision of delivering consistently great results for our 
                        clients, as well as ensuring the agency is a fun, inclusive, challenging place to
                        work and develop a rewarding career.</p>
                </div>

                <div class="row justify-content-center">

                    <div class="col-lg-3 col-md-6 d-flex align-items-stretch animate__animated animate__backInRight">
                        <div class="member">
                            <div class="member-img">
                                <img src="img/Developer/ankit_600.png" class="img-fluid" alt="">
                            </div>
                            <div class="member-info">
                                <h4>Ankit Bhatia</h4>
                                <span>Full-Stack Developer</span>
                                <div>
                                    <a href="#" class="image" width="15" height="15"></a>
                                    <a href="#" style="margin-left: 10px;"><img src="img/fotterfacebook.png" class="image" width="15" height="15"></a>
                                    <a href="#" style="margin-left: 10px;"><img src="img/fotterInsta.png" class="image" width="15" height="15"></i></a>
                                    <a href="#" style="margin-left: 10px;"><img src="img/footerLinked.png" class="image" width="15" height="15"></a>
                                </div>
                            </div>
                        </div>
                    </div>


            </div>
        </section><!-- End Team Section -->

        <!-- ======= Contact Section ======= -->
        <section id="contact" class="contact section-bg">
            <div class="container">

                <div class="section-title">
                    <h2 class="animate__animated animate__fadeInUp">Our Values</h2>
                </div>

                <div class="row">

                    <div class="col-lg-3">
                        <div class="">
                            <div class="info-box mt-4 animate__animated animate__backInRight" style="height: 124px;">

                                <h3 style="margin-top: 20px;">Always creative</h3>                
                            </div>
                        </div>
                        <div class="">
                            <div class="info-box mt-4 animate__animated animate__backInRight" style="height: 124px;">

                                <h3 style="margin-top: 20px;">Stay young</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="">
                            <div class="info-box mt-4 animate__animated animate__backInRight" style="height: 124px;">

                                <h3 style="margin-top: 20px;">Be proactive</h3>
                            </div>
                        </div>
                        <div class="">
                            <div class="info-box mt-4 animate__animated animate__backInRight" style="height: 124px;">

                                <h3 style="margin-top: 10px;">Innovate in every way</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="">
                            <div class="info-box mt-4 animate__animated animate__backInRight" style="height: 124px;">

                                <h3 style="margin-top: 10px;">Never stop learning</h3>
                            </div>
                        </div>
                        <div class="">
                            <div class="info-box mt-4 animate__animated animate__backInRight" style="height: 124px;">

                                <h3 style="margin-top: 20px;">Always your best</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="">
                            <div class="info-box mt-4 animate__animated animate__backInRight" style="height: 124px;">

                                <h3 style="margin-top: 20px;">Communicate</h3>
                            </div>
                        </div>
                        <div class="">
                            <div class="info-box mt-4 animate__animated animate__backInRight" style="height: 124px;">

                                <h3 style="margin-top: 20px;">Transparency</h3>
                            </div>
                        </div>
                    </div>

                </div>




            </div>

            </div>
        </section><!-- End Contact Section -->

        <!-- ======= Contact Section ======= -->
        <section id="contact" class="contact">
            <div class="container">

                <div class="section-title">
                    <h2 class="animate__animated animate__fadeInUp">Contact Us</h2>
                </div>

                <div class="row justify-content-center">

                    <div class="col-lg-6">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="info-box animate__animated animate__backInRight">
                                    <i class="bx bx-map"></i>
                                    <h3>Our Address</h3>
                                    <p>A108  Super coridor 
                                        Indore, 452007
                                        India</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-box mt-4 animate__animated animate__backInRight">
                                    <i class="bx bx-envelope"></i>
                                    <h3>Email Us</h3>
                                    <p>info@example.com<br>contact@example.com</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-box mt-4 animate__animated animate__backInRight">
                                    <i class="bx bx-phone-call"></i>
                                    <h3>Call Us</h3>
                                    <p>+1 78549 82256<br>+1 66782 54445</p>
                                </div>
                            </div>
                        </div>

                    </div>



                </div>

            </div>
        </section><!-- End Contact Section -->

    </main><!-- End #main -->

    <!-- ======= Footer ======= -->
    <footer id="footer" >

        <div class="footer-top">
            <div class="container">
                <div class="row justify-content-center">

                    <div class="col-lg-3 col-md-6 footer-contact">
                        <h3 style="color: #434175;">Ace Developers</h3>
                        <p>
                            A108  Super coridor <br>
                            Indore, 452007<br>
                            India<br><br>
                            <strong>Phone:</strong> +1 78549 82256<br>
                            <strong>Email:</strong> info@example.com<br>
                        </p>
                    </div>

                    <div class="col-lg-2 col-md-6 footer-links">
                        <h4>Useful Links</h4>
                        <ul>
                            <li><img src="img/footergit.png" class="image" width="20" height="20"><a href="#" style="margin-left: 10px;">Github</a></li>
                            <li><img src="img/fotterfacebook.png" class="image" width="20" height="20"> <a href="#" style="margin-left: 10px;">facebook</a></li>
                            <li><img src="img/fotterInsta.png" class="image" width="20" height="20"> <a href="#" style="margin-left: 10px;">Instagram</a></li>
                            <li><img src="img/footerLinked.png" class="image" width="20" height="20"><a href="#" style="margin-left: 10px;">linkedin</a></li>
                        </ul>
                    </div>

                    <div class="col-lg-3 col-md-6 footer-links">
                        <h4>Our Services</h4>
                        <ul>
                            <li><i class="bx bx-chevron-right" style="color: #000;"></i> <a href="#">Application Development</a></li>
                            <li><i class="bx bx-chevron-right" style="color: #000;"></i> <a href="#">Web Development</a></li>
                            <li><i class="bx bx-chevron-right" style="color: #000;"></i> <a href="#">Product Management</a></li>
                            <li><i class="bx bx-chevron-right" style="color: #000;"></i> <a href="#">School Management System</a></li>
                            <li><i class="bx bx-chevron-right" style="color: #000;"></i> <a href="#">Graphic Design</a></li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>

        <div class="container d-md-flex py-4">

            <div class="mr-md-auto text-center text-md-left">
                <div class="copyright">
                    &copy; Copyright <strong><span>Ace Developers</span></strong>|All Rights Reserved
                </div>

            </div>
        </div>
    </footer><!-- End Footer -->

    <a href="#" class="back-to-top"><i class='bx bx-chevrons-up' ></i></a>

    <!-- Vendor JS Files -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="js/jquery.easing/jquery.easing.min.js"></script>

    <!-- Template Main JS File -->
    <script src="js/aboutus.js"></script>
</html>
