<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/848b268776.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./assets/scss/index.css" />
    <link rel="stylesheet" href="./assets/scss/fancy.css" />
    <link rel="stylesheet" href="./assets/scss/animate.css" />
    <link rel="stylesheet" href="./assets/scss/slick.css" />
    <title>Xlabs | Mobile Development Agency</title>
</head>

<body>
    <div class="home">
        <div class="container">
            <div class="row">
                <nav>
                    <a class="wow fadeInDown" href="index.html"><img src="./assets/images/logo.svg" /></a>
                </nav>
            </div>
            <div class="row">
                <h1 class="mt-5" style="font-size:72px; line-height: 86px;">
                    <div id="demo" class="wow fadeIn"></div><span id="demo-span"></span>
                </h1>
                <p class="wow fadeInDown">We believe in designing products with best UX & UI is the key to <br> success
                    in
                    mobile applications.</p>
                <a href="#contact" class="home-btn wow fadeInDown">CONTACT US</a>

            </div>
        </div>
    </div>
    <div class="about">
        <div class="container">
            <div class="row">
                <div class="col-md-6 ">
                    <span class="head wow fadeInDown">ABOUT US</span>
                    <h2 class="title wow fadeInDown">What we do? What are we good at?</h2>
                    <p class="wow fadeInDown">We make highly scalable mobile apps. Our products have reached over 50
                        million users worldwide.
                        We are building mobile apps for Photo & Video, Lifestyle, Entertainment, Utilities and
                        Productivity categories.</p>
                </div>
                <div class="col-md-5 offset-md-1 images">
                    <div class="d-flex">
                        <a href="./assets/images/image1.png" data-fancybox="slider" class="wow fadeInDown">
                            <img src="./assets/images/image1.png" />
                        </a>
                        <a href="./assets/images/image2.png" data-fancybox="slider" class="wow fadeInLeft">
                            <img src="./assets/images/image2.png" />
                        </a>
                    </div>
                    <div class="d-flex">
                        <a href="./assets/images/image3.png" data-fancybox="slider" class="wow fadeInUp">
                            <img src="./assets/images/image3.png" />
                        </a>
                        <a href="./assets/images/image4.png" data-fancybox="slider" class="wow fadeInRight">
                            <img src="./assets/images/image4.png" />
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <hr>
        </div>
    </div>
    <div class="services">
        <div class="container">
            <div class="row">

                <div class="col-md-6 service-boxs">
                    <div class="service-item-left wow fadeInUp">
                        <div class="">
                            <img src="./assets/images/laptop-light.svg" alt="">
                            <h3 style="font-size: 16px;">UI/UX</h3>
                        </div>
                    </div>
                    <div class="service-item-left wow fadeInDown">
                        <div>
                            <img src="./assets/images/browser-light.svg" alt="">
                            <h3 style="font-size: 16px;">MARKETING</h3>
                        </div>
                    </div>
                    <div class="service-item-left wow fadeInUp">
                        <div>
                            <img src="./assets/images/frame.svg" alt="">
                            <h3 style="font-size: 16px;">DEVELOPMENT</h3>
                        </div>
                    </div>
                    <div class="service-item-left wow fadeInRight">
                        <div>
                            <img src="./assets/images/shopping-bag-light.svg" alt="">
                            <h3 style="font-size: 16px;">BRANDING</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-5 offset-md-1">
                    <span class="head">SERVICES</span>
                    <h2 class="title">We create digital products & brands</h2>
                    <ul class="service-list">
                        <li class="active wow fadeInDown">
                            <span>
                                <svg width="42" height="42" viewBox="0 0 42 42" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M6.5625 28.875V11.8125C6.5625 11.1163 6.83906 10.4486 7.33134 9.95634C7.82363 9.46406 8.49131 9.1875 9.1875 9.1875H32.8125C33.5087 9.1875 34.1764 9.46406 34.6687 9.95634C35.1609 10.4486 35.4375 11.1163 35.4375 11.8125V28.875"
                                        stroke="white" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path
                                        d="M3.9375 28.875H38.0625V31.5C38.0625 32.1962 37.7859 32.8639 37.2937 33.3562C36.8014 33.8484 36.1337 34.125 35.4375 34.125H6.5625C5.86631 34.125 5.19863 33.8484 4.70634 33.3562C4.21406 32.8639 3.9375 32.1962 3.9375 31.5V28.875Z"
                                        stroke="white" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M23.625 14.4375H18.375" stroke="white" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>

                                UI/UX</span>
                            <p>We design interfaces that bring joy to people while allowing them to get things done.</p>
                        </li>
                        <li class="wow fadeInDown">
                            <span>
                                <svg width="42" height="42" viewBox="0 0 42 42" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M35.4375 7.875H6.5625C5.83763 7.875 5.25 8.46263 5.25 9.1875V32.8125C5.25 33.5374 5.83763 34.125 6.5625 34.125H35.4375C36.1624 34.125 36.75 33.5374 36.75 32.8125V9.1875C36.75 8.46263 36.1624 7.875 35.4375 7.875Z"
                                        stroke="white" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M5.25 15.75H36.75" stroke="white" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </svg>

                                BRANDING</span>
                            <p>We identify needs and opportunities to innovate on the product and then provide a
                                strategy and a roadmap.</p>
                        </li>
                        <li class="wow fadeInDown">
                            <span>
                                <svg width="42" height="42" viewBox="0 0 42 42" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M34.4571 34.4571C37.2762 31.638 33.5366 23.3277 26.1044 15.8956C18.6722 8.46341 10.3619 4.72378 7.54284 7.54288C4.72375 10.362 8.46338 18.6723 15.8955 26.1044C23.3277 33.5366 31.638 37.2762 34.4571 34.4571Z"
                                        stroke="white" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path
                                        d="M26.1044 26.1044C33.5366 18.6723 37.2762 10.362 34.4571 7.54287C31.638 4.72377 23.3277 8.4634 15.8955 15.8956C8.46338 23.3277 4.72375 31.638 7.54284 34.4571C10.3619 37.2762 18.6722 33.5366 26.1044 26.1044Z"
                                        stroke="white" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path
                                        d="M21 22.9688C22.0873 22.9688 22.9688 22.0873 22.9688 21C22.9688 19.9127 22.0873 19.0312 21 19.0312C19.9127 19.0312 19.0312 19.9127 19.0312 21C19.0312 22.0873 19.9127 22.9688 21 22.9688Z"
                                        fill="white" />
                                </svg>


                                MARKETING</span>
                            <p>We reach to millions of users with our amazing performance marketing team.</p>
                        </li>
                        <li class="wow fadeInDown">
                            <span>
                                <svg width="42" height="42" viewBox="0 0 42 42" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M35.4375 7.875H6.5625C5.83763 7.875 5.25 8.46263 5.25 9.1875V32.8125C5.25 33.5374 5.83763 34.125 6.5625 34.125H35.4375C36.1624 34.125 36.75 33.5374 36.75 32.8125V9.1875C36.75 8.46263 36.1624 7.875 35.4375 7.875Z"
                                        stroke="white" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path
                                        d="M27.5625 14.4375C27.5625 16.178 26.8711 17.8472 25.6404 19.0779C24.4097 20.3086 22.7405 21 21 21C19.2595 21 17.5903 20.3086 16.3596 19.0779C15.1289 17.8472 14.4375 16.178 14.4375 14.4375"
                                        stroke="white" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </svg>


                                DEVELOPMENT</span>
                            <p>We use the latest technologies and use data to make critical decisions.</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <hr>
        </div>
    </div>
    <div class="works">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <span class="head wow fadeInUp">OUR WORKS</span>
                    <h2 class="title wow fadeInUp">What we did so far</h2>
                </div>
            </div>
            <div class="works-slider wow fadeInUp">
                <div class="row">
                    <div class="col-md-6 works-info mt-3">
                        <h3>Astro+</h3>
                        <span>Astro+ is your guide to get a deeper understanding of yourself and find out more about
                            those around you. Learn more with our daily horoscopes, compatibility reports, astrology
                            predictions, numerology and palm readings.
                        </span>
                        <div class="store">
                            <a href="https://apps.apple.com/us/app/horoscope-astrology-astro/id447709673">
                                <img src="./assets/images/appstore.svg" />
                            </a>
                            <a href="#">
                                <img src="./assets/images/googleplay.svg" />
                            </a>
                        </div>
                    </div>
                    <div class="col-md-5 offset-md-1 device">
                        <img class='a-left control-c prev slick-prev' src='./assets/images/left.svg'>
                        <img class="mobil" src="./assets/images/mobile-device.png" />
                        <img class="web" src="./assets/images/device.png" />
                        <img class='a-right control-c next slick-prev' src='./assets/images/right.svg'>
                        <div class="store">
                            <a href="#">
                                <img src="./assets/images/appstore.svg" />
                            </a>
                            <a href="#">
                                <img src="./assets/images/googleplay.svg" />
                            </a>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 works-info mt-3">
                        <h3>Magic FX</h3>
                        <span>MagicFX is the easiest video and photo editing tool that you
                            could edit and crop videos, make cartoon character and add magical effects.
                            MagicFX is a video editing app including lots of cool magic visual effects. Taking a magic
                            video was never be so easy. We tuned every step visually and operationally for you.
                        </span>
                        <div class="store">
                            <a href="https://apps.apple.com/us/app/magicfx-magic-video-effects/id1512758709">
                                <img src="./assets/images/appstore.svg" />
                            </a>
                        </div>
                    </div>
                    <div class="col-md-5 offset-md-1 device">
                        <img class='a-left control-c prev slick-prev' src='./assets/images/left.svg'>
                        <img class="mobil" src="./assets/images/mobile-device-magic.png" />
                        <img class="web" src="./assets/images/device-magic.png" />
                        <img class='a-right control-c next slick-prev' src='./assets/images/right.svg'>
                        <div class="store">
                            <a href="#">
                                <img src="./assets/images/appstore.svg" />
                            </a>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
    <div class="container">
        <div class="row">
            <hr>
        </div>
    </div>
    <div id="contact" class="contact wow fadeInUp">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <span class="head">CONTACT US</span>
                    <h2 class="title">Get in Touch</h2>
                    <p>Whatever your needs, we're looking forward to
                        hearing from you.</p>
                    <p>Contact us and let’s see what we can do together.</p>
                </div>
                <div class="col-md-5 offset-md-1">
                    <form class="row">
                        <span class="head"> </span>
                        <div class="col-md-12">
                            <input type="text" class="form-control" placeholder="YOUR NAME">
                        </div>
                        <div class="col-md-6">
                            <input type="text" class="form-control" placeholder="E-MAIL">
                        </div>
                        <div class="col-md-6">
                            <input type="text" class="form-control" placeholder="MESSAGE">
                        </div>
                        <div class="col-md-12 text-right">
                            <button class="btn" type="submit">SEND</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <div class="container wow fadeInUp">
            <div class="row">
                <div class="col-md-6">
                    © 2021 Xlabs. All rights reserved.
                </div>
                <div class="col-md-6 text-right">
                    <div class="mobil">
                        <img src="./assets/images/logo-2-white.svg" />
                        <span>Follow us on</span>
                    </div>
                    <div class="social">
                        <a href="#">
                            <img src="./assets/images/instagram-logo-fill.svg" />
                        </a>
                        <a href="#">
                            <img src="./assets/images/linkedin-logo-fill.svg" />
                        </a>
                        <a href="#">
                            <img src="./assets/images/dribbble-logo-fill.svg" />
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </footer>


    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
    <script src="./assets/js/slick.js" type="text/javascript" charset="utf-8"></script>
    <script src="./assets/js/wow.js" type="text/javascript" charset="utf-8"></script>
    <script src="./assets/js/tilt.js" type="text/javascript" charset="utf-8"></script>
    <script src="./assets/js/fancy.js" type="text/javascript" charset="utf-8"></script>
    <script src="./assets/js/index.js" type="text/javascript" charset="utf-8"></script>
</body>

</html>