<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="content bg-secondary d-flex flex-column flex-column-fluid " id="kt_content"> <!--begin::Subheader--> <!--end::Subheader--> <!--begin::Entry--> <div class="d-flex flex-column-fluid mt-5"> <!--begin::Container--> <div class="container"> <!--begin::Dashboard--> <!--begin::Row--> <div class="row"> <div class="container"> <div class="col-12"> <div class="row"> <div class="col-3 col-md-3 "> <div class="bg-white p-3"> <h3 class="text-center">Rs 1000.00</h3> <h6 class="text-success text-center"><small>Draft</small></h6> </div> </div> <div class="col-3 col-md-3"> <div class="bg-white p-3"> <h3 class="text-center">Rs 1000.00</h3> <h6 class="text-warning text-center"><small>Draft</small></h6> </div> </div> <div class="col-3 col-md-3"> <div class="bg-white p-3"> <h3 class="text-center">Rs 1000.00</h3> <h6 class="text-primary text-center"><small>Draft</small></h6> </div> </div> <div class="col-3 col-md-3"> <div class="bg-white p-3"> <h3 class="text-center">Rs 1000.00</h3> <h6 class="text-danger text-center"><small>Draft</small></h6> </div> </div> </div> <!-----------> <div class="row mt-4"> <div class="col-3 col-md-3 "> <div class="bg-white p-3"> <div> <span class="float-left"><h6>Draft</h6></span> <span class="float-right"><h6>7/39</h6></span> </div> <div class="clearfix"></div> <div class="progress mt-2"> <div class="progress-bar bg-success" style="width:60%"></div> </div> </div> </div> <div class="col-3 col-md-3"> <div class="bg-white p-3"> <div> <span class="float-left"><h6>Draft</h6></span> <span class="float-right"><h6>7/39</h6></span> </div> <div class="clearfix"></div> <div class="progress mt-2"> <div class="progress-bar bg-info" style="width:60%"></div> </div> </div> </div> <div class="col-3 col-md-3"> <div class="bg-white p-3"> <div> <span class="float-left"><h6>Draft</h6></span> <span class="float-right"><h6>7/39</h6></span> </div> <div class="clearfix"></div> <div class="progress mt-2"> <div class="progress-bar bg-danger" style="width:60%"></div> </div> </div> </div> <div class="col-3 col-md-3"> <div class="bg-white p-3"> <div> <span class="float-left"><h6>Draft</h6></span> <span class="float-right"><h6>7/39</h6></span> </div> <div class="clearfix"></div> <div class="progress mt-2"> <div class="progress-bar" style="width:60%"></div> </div> </div> </div> </div> </div> <br/> <div class="col-12 bg-white pt-5 mt-5"> <ul class="nav nav-pills" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="pill" href="#home">All Proposals</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#menu1">New Proposals</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div id="home" class="container tab-pane active"><br> <div class="table-responsive bg-white"> <table id="example-datatable" class="table table-hover table-vcenter"> <thead class="bg-secondary"> <tr> <th class="text-center">Sno</th> <th class="text-center">Ref Nos</th> <th class="text-center">Assigned Users</th> <th class="text-center">Related To</th> <th class="text-center">Proposals Date </th> <th class="text-center">Select Leads</th> <th class="text-center">Expired Date</th> <th class="text-center">Action</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>xzdfd</td> <td>fdfdfd</td> <td>xzdfd</td> <td>fdfdfd</td> <td>xzdfd</td> <td>fdfdfd</td> <td><a href="">View</a>/<a href="">Edit</a></td> </tr> <tr> <td>1</td> <td>xzdfd</td> <td>fdfdfd</td> <td>xzdfd</td> <td>fdfdfd</td> <td>xzdfd</td> <td>fdfdfd</td> <td><a href="">View</a>/<a href="">Edit</a></td> </tr> </tbody> </table> <br/> </div> </div> <div id="menu1" class="container tab-pane fade"><br> <form class="" action="" method="post"> <div class="row input-my"> <div class="col-md-6 "> <div class="form-group"> <label for="">Ref No</label> <input type="text" name="name" class="form-control" id="" placeholder="Enter Ref No" value=""> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="">Assigned Users</label> <input name="phone" type="text" class="form-control" id="" placeholder="Enter Mobile number" value=""> </div> </div> </div> <div class="row input-my"> <div class="col-md-6"> <div class="form-group"> <label for="">Related To</label> <input type="email" name="email" class="form-control" id="" placeholder="Enter Email Id" value=""> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="">Proposals Date </label> <input type="date" name="dob" class="form-control" id="" placeholder="Enter date of birth" value=""> </div> </div> </div> <div class="row input-my"> <div class="col-md-6"> <div class="form-group"> <label for="">Select Leads</label> <select class="form-control" name="gender"> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="">Expired Date</label> <select class="form-control" name="blood"> <option value="AB">AB</option> <option value="O-">O-</option> <option value="O+">O+</option> </select> </div> </div> </div> <div class="row input-my"> <div class="col-md-6"> <div class="form-group"> <label for="">Permission</label> <input type="radio" name="permission" value="Permission"> <b>Permission</b> <input type="radio" name="c_permission" value="Customized Permission"> <b>Customized Permission</b> </div> </div> <div class="col-md-6"> </div> </div> <div class="row input-my"> <div class="col-md-12"> <div class="form-group"> <label for="">Enter Notes</label> <textarea class="form-control" placeholder="Enter Notes"></textarea> </div> </div> </div> <br/> <div class="table-responsive bg-white"> <table id="example-datatable" class="table table-hover table-vcenter"> <thead class="bg-secondary"> <tr> <th style="width:150px;" class="text-center">Item Name</th> <th style="width:150px;" class="text-center">Description</th> <th style="width:60px;" class="text-center">HSN/SAC Code</th> <th style="width:60px;" class="text-center">Qty </th> <th style="width:60px;" class="text-center">Price</th> <th style="width:60px;" class="text-center">Tax Price</th> <th style="width:60px;" class="text-center">Total</th> <th style="width:60px;" class="text-center">Action</th> </tr> </thead> <tbody> <tr> <td><input style="width:150px;" type="text" name="" placeholder="Item Name"></td> <td><textarea style="width:150px;" name="" placeholder="Description"></textarea></td> <td><input style="width:60px;" type="text" name="" placeholder="HSN/SAC Code" ></td> <td><input style="width:60px;" type="text" name="" placeholder="Qty" ></td> <td><input style="width:60px;" type="text" name="" placeholder="Price" ></td> <td><input style="width:60px;" type="text" name="" placeholder="Tax Price" ></td> <td><input style="width:60px;" type="text" name="" placeholder="Total" ></td> <td><input style="width:60px;" type="checkbox" name="" ></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td colspan=""><b>Subtotal</b></td> <td colspan="2"><b>Rs 1000.00</b></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td><b>Discount(%)</b></td> <td colspan=""><input style="width:60px;" type="number"></td> <td colspan="2"><b>Rs 1000.00</b></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td><b>Total</b></td> <td colspan="2"><b>Rs 1000.00</b></td> </tr> </tbody> </table> <center><input type="text" class="btn btn-primary" name="submit" value="submit"></center> <br/> </div> </form> </div> </div> </div> </div> </div> <!--end::Row--> <!--end::Dashboard--> </div> <!--end::Container--> </div> <!--end::Entry--> </div>