index.html

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

<head>
    <!-- Required meta tags-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Colorlib Templates">
    <meta name="author" content="Colorlib">
    <meta name="keywords" content="Colorlib Templates">

    <!-- Title Page-->
    <title>Clear My Record Tulsa</title>

    <!-- Icons font CSS-->
    <link href="vendor/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
    <link href="vendor/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
    <!-- Font special for pages-->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

    <!-- Vendor CSS-->
    <link href="vendor/select2/select2.min.css" rel="stylesheet" media="all">
    <link href="vendor/datepicker/daterangepicker.css" rel="stylesheet" media="all">

    <!-- Main CSS-->
    <link href="css/main.css" rel="stylesheet" media="all">
</head>
<script>
  // register ServiceWorker, remember to use absolute path!
  if (navigator.serviceWorker) {
    navigator.serviceWorker.register('/clear-my-record/sw.js', {scope: '/clear-my-record/'})
  }

</script>
<body>
    <div class="page-wrapper bg-blue p-t-100 p-b-100 font-robo">
        <div class="wrapper wrapper--w680">
            <div class="card card-1">
                <div class="card-heading"></div>
                <div class="card-body">
                    <h2 class="title">Petitioner Info</h2>
                    <form>
                        <section class="petitioner-name">
                                <h3>Name</h3>
                                <div class="row row-space">
                                    <div class="col-2">
                                        <div class="input-group">
                                            <input id="petitioner-first" class="input--style-1" type="text" placeholder="FIRST" name="firstname">
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <div class="input-group">
                                            <input id="petitioner-middle" class="input--style-1" type="text" placeholder="MIDDLE" name="middlename">
                                        </div>
                                    </div>
                                </div>
                                <div class="input-group">
                                        <input id="petitioner-last" class="input--style-1" type="text" placeholder="LAST" name="lastname">
                                </div>
                        </section>
                        <section class="petitioner-address">
                            <h3>Address</h3>
                            <div class="col-1">
                                <div class="input-group">
                                    <input id="petitioner-street1" class="input--style-1" type="text" placeholder="ADDRESS LINE 1" name="street1">
                                </div>
                            </div>
                            <div class="col-1">
                                <div class="input-group">
                                    <input id="petitioner-street2" class="input--style-1" type="text" placeholder="ADDRESS LINE 2" name="street2">
                                </div>
                            </div>
                            <div class="row row-space">
                                <div class="col-3">
                                    <div class="input-group">
                                        <input id="petitioner-city" class="input--style-1" type="text" placeholder="CITY" name="city">
                                    </div>
                                </div>
                                <div class="col-3">
                                        <div class="input-group">
                                            <div class="rs-select2 js-select-simple select--no-search">
                                                <select id='petitioner-state' name="state">
                                                    <option disabled="disabled" selected="selected">STATE</option>
                                                    <option value='AR'>AR</option>
                                                    <option value='OK'>OK</option>
                                                    <option value='TX'>TX</option>
                                                </select>
                                                <div class="select-dropdown"></div>
                                            </div>
                                        </div>
                                </div>
                                <div class="col-3">
                                    <div class="input-group">
                                        <input id="petitioner-zip" class="input--style-1" type="text" placeholder="ZIPCODE" name="ZIP">
                                    </div>
                                </div>
                            </div>
                        </section>
                        <section class="petitioner-information">
                            <h3>Personal Information</h3>
                            <div class="col-1">
                                <div class="input-group">
                                    <input id="petitioner-social" class="input--style-1" type="text" placeholder="SOCIAL SECURITY NUMBER" name="social">
                                </div>
                            </div>
                            <div class="col-1">
                                    <div class="input-group">
                                        <input id="petitioner-dateOfBirth" class="input--style-1 js-datepicker" type="text" placeholder="DATE OF BIRTH" name="dateOfBirth">
                                        <i class="zmdi zmdi-calendar-note input-icon js-btn-calendar"></i>
                                    </div>
                            </div>
                            <div class="col-1">
                                    <div class="input-group">
                                        <input id="petitioner-phone1" class="input--style-1" type="text" placeholder="PHONE NUMBER" name="phone1">
                                    </div>
                            </div>
                        </section>

                        <section class="petitioner-case">
                            <h3>Case Info</h3>
                                <div class="row row-space">
                                        <div class="col-2">
                                            <div class="input-group">
                                                <input id="petitioner-dateOfArrest" class="input--style-1 js-datepicker" type="text" placeholder="DATE OF ARREST" name="dateOfArrest">
                                                <i class="zmdi zmdi-calendar-note input-icon js-btn-calendar"></i>
                                            </div>
                                        </div>
                                        <div class="col-2">
                                            <div class="input-group">
                                                <div class="rs-select2 js-select-simple select--no-search">
                                                    <select id='petitioner-county' name="county">
                                                        <option disabled="disabled" selected="selected">COUNTY</option>
                                                        <option value="Tulsa">Tulsa</option>
                                                        <option value="Rodgers">Rodgers</option>
                                                        <option value="Osage">Osage</option>
                                                    </select>
                                                    <div class="select-dropdown"></div>
                                                </div>
                                            </div>
                                        </div>
                                </div>
                                <div class="input-group">
                                    <div class="rs-select2 js-select-simple select--no-search">
                                        <select id="petitioner-case-agency" name="class">
                                            <option disabled="disabled" selected="selected">ARRESTING AGENCY</option>
                                            <option value="Tulsa">Tulsa</option>
                                            <option value="Broken Arrow">Broken Arrow</option>
                                            <option value="Jenks">Jenks</option>
                                        </select>
                                        <div class="select-dropdown"></div>
                                    </div>
                                </div>
                                <div class="row row-space">
                                    <div class="col-2">
                                        <div class="input-group">
                                            <input id="petitioner-case-no" class="input--style-1" type="text" placeholder="CASE Number" name="caseNo">
                                        </div>
                                    </div>
                                </div>
                                <div class="input-group">
                                    <input id="petitioner-charges" class="input--style-1" type="textarea" placeholder="CHARGES" name="charges">
                                </div>
                        </section>

                        <div class="p-t-20">
                            <button class="btn btn--radius btn--green download-pdf" type="submit">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Jquery JS-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <!-- Vendor JS-->
    <script src="vendor/select2/select2.min.js"></script>
    <script src="vendor/datepicker/moment.min.js"></script>
    <script src="vendor/datepicker/daterangepicker.js"></script>

    <!-- Main JS-->
    <script src="js/global.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>

</body><!-- This templates was made by Colorlib (https://colorlib.com) -->

</html>
<!-- end document-->