<!DOCTYPE html>
<html lang="en">

    <head>
        <title>JubaBox BackOffice</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <meta name="description" content="Admin template that can be used to build dashboards for CRM, CMS, etc." />
        <meta name="author" content="Potenza Global Solutions" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!-- app favicon -->
        <link rel="shortcut icon" href="assets/img/favicon.ico">
        <!-- google fonts -->
        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
        <!-- plugin stylesheets -->
        <link rel="stylesheet" type="text/css" href="assets/css/vendors.css" />
        <!-- app style -->
        <link rel="stylesheet" type="text/css" href="assets/css/style.css" />
    </head>

    <body class="bg-white">
        <!-- begin app -->
        <div class="app">
            <!-- begin app-wrap -->
            <div class="app-wrap">
                <!-- begin pre-loader -->
                <div class="loader">
                    <div class="h-100 d-flex justify-content-center">
                        <div class="align-self-center">
                            <img src="assets/img/loader/loader.svg" alt="loader">
                        </div>
                    </div>
                </div>
                <!-- end pre-loader -->

                <!--start login contant-->
                <div class="app-contant">
                    <div class="bg-white">
                        <div class="container-fluid p-0">
                            <div class="row no-gutters">
                                <div class="col-sm-6 col-lg-5 col-xxl-3  align-self-center order-2 order-sm-1">
                                    <div class="d-flex align-items-center h-100-vh">
                                        <div class="login p-50">
                                            <h1 class="mb-2">JubaBox BackOffice</h1>
                                            <p>Welcome back, please login to your account.</p>
                                            <form action="/login" class="mt-3 mt-sm-5">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="form-group">
                                                            <label class="control-label">User Name*</label>
                                                            <input type="text" class="form-control" placeholder="Username" />
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="form-group">
                                                            <label class="control-label">Password*</label>
                                                            <input type="password" class="form-control" placeholder="Password" />
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="d-block d-sm-flex  align-items-center">
                                                            <div class="form-check">
                                                               
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 mt-3">
                                                        <a href="/login" class="btn btn-primary text-uppercase">Sign In</a>
                                                    </div>
                                                    <div class="col-12  mt-3">
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-xxl-9 col-lg-7  o-hidden order-1 order-sm-2" style="background-color:red; background-image: url('assets/img/bg/login.jpg');  background-size: 100% 100%;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end login contant-->
            </div>
            <!-- end app-wrap -->
        </div>
        <!-- end app -->



        <!-- plugins -->
        <script src="/assets/js/vendors.js"></script>

        <!-- custom app -->
        <script src="/assets/js/app.js"></script>
    </body>

</html>