<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 ----------> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel"><i class="fa-regular fa-pen-to-square mr-2"></i>Update Address</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore</p> <div class="form-group"> <label>Country</label> <input type="text" class="form-control"> </div> <div class="form-group"> <label>City</label> <input type="text" class="form-control"> </div> <div class="form-group"> <label>Email</label> <input type="email" class="form-control"> </div> <div class="form-group"> <label>Code</label> <input type="text" class="form-control"> </div> <div class="form-group"> <label>Address 1</label> <input type="text" class="form-control"> </div> <div class="form-group"> <label>Address 2</label> <input type="text" class="form-control"> </div> <div class="form-group"> <label>Country</label> <input type="text" class="form-control"> </div> <div class="form-group"> <label>12312</label> <input type="text" class="form-control"> </div> <div class="form-group select-option"> <label>Country</label> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> </select> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Update</button> </div> </div> </div> </div> <div class="wizard-setup"> <div class="banner" style="background: url('https://9mmwallpapers.com/wp-content/uploads/Abstract-Laptop-Wallpaper.jpg') center/cover no-repeat;"> <div class="title">RMA Request</div> </div> <div class="row justify-content-center"> <div class="col-md-10 col-lg-8"> <div class="h-timeline"> <ul class="nav nav-tabs nav-justified"> <li class="nav-item"> <a class="nav-link active completed" data-toggle="tab" href="#tab-1"> <div class="icon"> <i class="fas fa-check"></i> </div> <div class="heading">Step 1</div> <div class="description">RMA Request</div> </a> </li> <li class="nav-item"> <a class="nav-link completed" data-toggle="tab" href="#tab-2"> <div class="icon"> <i class="fas fa-check"></i> </div> <div class="heading">Step 2</div> <div class="description">Select Items for RMA</div> </a> </li> <li class="nav-item"> <a class="nav-link completed" data-toggle="tab" href="#tab-3"> <div class="icon"> <i class="fas fa-check"></i> </div> <div class="heading">Step 3</div> <div class="description">Review & Confirm</div> </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab-4"> <div class="icon"> <i class="fas fa-check"></i> </div> <div class="heading">Step 4</div> <div class="description">Print Label & Ship</div> </a> </li> </ul> </div> <div class="tab-content"> <div id="tab-1" class="tab-pane active"> <div class="form-row"> <div class="col"> <input type="text" class="form-control" placeholder="Search"> </div> <div class="col-auto"> <button type="submit" class="btn btn-primary btn-block">Search</button> </div> </div> <div class="row mt-5"> <div class="col-auto mx-auto"> <button type="submit" class="btn btn-secondary btn-block">Next</button> </div> </div> </div> <div id="tab-3" class="tab-pane fade"> <div class="text-center"> <h1>Thankyou!</h1> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</p> <img src="https://svgshare.com/i/hSY.svg" class="mt-5 img-fluid d-block mx-auto" style="max-width: 300px;"> </div> </div> <div id="tab-4" class="tab-pane fade"> <div class="alert-page d-flex align-items-center justify-content-center text-center h-100"> <div class="alert-page-holder"> <img src="https://svgshare.com/i/hRs.svg" class="mt-5 img-fluid d-block mx-auto" style="max-width: 300px;" alt="Alert Image"> <h1 class="mt-5 my-3">Oops!</h1> <p class="mb-0">Sorry, Nothing found here, See later...</p> </div> </div> </div> <div id="tab-2" class="tab-pane fade"> <div class="bg-white mb-4 p-4"> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p> <hr> <div class="row align-items-center"> <div class="col"> <div class="form-row"> <div class="col-auto font-weight-bold">Order #:</div> <div class="col-auto">PSS001</div> <div class="col-auto font-weight-bold ml-5">Order Date:</div> <div class="col-auto">20/04/2022</div> </div> </div> <div class="col-auto"> <div class="font-weight-bold"> <a href="" class="mr-2" data-toggle="modal" data-target="#exampleModal"> <i class="fa-regular fa-pen-to-square"></i> </a> Shipping Address </div> <div>City ABC, 723324</div> <div>Parkor, 1223</div> </div> </div> <hr> <p class="text-uppercase">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p> </div> <div class="table-responsive bg-white mb-4 px-3"> <table class="table"> <thead> <tr> <th scope="col" width="30"> <div class="custom-control custom-checkbox mt-n4"> <input type="checkbox" class="custom-control-input" id="customControlAutosizing1"> <label class="custom-control-label" for="customControlAutosizing1"></label> </div> </th> <th scope="col">First</th> <th scope="col" width="120">Last</th> <th scope="col" width="120">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customControlAutosizing2"> <label class="custom-control-label" for="customControlAutosizing2"></label> </div> </th> <td> <div class="form-row"> <div class="col-auto"> <img src="https://store-images.s-microsoft.com/image/apps.40607.14416131676512756.84314783-1c86-4403-b991-2e1da8525703.2e8ad7b8-ab24-46a8-bee7-57378f3fdbb5" class="img-fluid" alt=""> </div> <div class="col"> <div class="font-weight-bold">Jhon Doe</div> <div class="small"><span class="font-weight-bold">SKU:</span> <span class="text-muted">PSS001</span></DIV> <div class="font-weight-bold text-danger small"> <i class="fa-solid fa-triangle-exclamation"></i> Out of Warranty </div> </div> </div> </td> <td> <div class="select-option"> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> </select> </div> </td> <td> <div class="badge badge-danger">Damaged</div> </td> </tr> <tr> <th scope="row"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customControlAutosizing3"> <label class="custom-control-label" for="customControlAutosizing3"></label> </div> </th> <td> <div class="form-row"> <div class="col-auto"> <img src="https://store-images.s-microsoft.com/image/apps.40607.14416131676512756.84314783-1c86-4403-b991-2e1da8525703.2e8ad7b8-ab24-46a8-bee7-57378f3fdbb5" class="img-fluid" alt=""> </div> <div class="col"> <div class="font-weight-bold">Jhon Doe</div> <div class="small"><span class="font-weight-bold">SKU:</span> <span class="text-muted">PSS001</span></DIV> <div class="font-weight-bold text-danger small"> <i class="fa-solid fa-triangle-exclamation"></i> Out of Warranty </div> </div> </div> </td> <td> <div class="select-option"> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> </select> </div> </td> <td> <div class="badge badge-danger">Damaged</div> </td> </tr> <tr> <th scope="row"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customControlAutosizing4"> <label class="custom-control-label" for="customControlAutosizing4"></label> </div> </th> <td> <div class="form-row"> <div class="col-auto"> <img src="https://store-images.s-microsoft.com/image/apps.40607.14416131676512756.84314783-1c86-4403-b991-2e1da8525703.2e8ad7b8-ab24-46a8-bee7-57378f3fdbb5" class="img-fluid" alt=""> </div> <div class="col"> <div class="font-weight-bold">Jhon Doe</div> <div class="small"><span class="font-weight-bold">SKU:</span> <span class="text-muted">PSS001</span></DIV> <div class="font-weight-bold text-danger small"> <i class="fa-solid fa-triangle-exclamation"></i> Out of Warranty </div> </div> </div> </td> <td> <div class="select-option"> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> </select> </div> </td> <td> <div class="badge badge-success">Damaged</div> </td> </tr> </tbody> </table> </div> <div class="bg-white p-4"> <div class="custom-control custom-radio mb-4"> <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input"> <label class="custom-control-label pl-2" for="customRadio1">Toggle this custom radio</label> </div> <div class="custom-control custom-radio mb-4"> <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input"> <label class="custom-control-label pl-2" for="customRadio2">Or toggle this other custom radio</label> </div> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customControlAutosizing5"> <label class="custom-control-label pl-2" for="customControlAutosizing5">Or toggle this other custom Checkbox</label> </div> </div> </div> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap'); @import url('https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css'); :root { --primary: green; --secondary: black; --light: #f7f8f9; --border-color: #f2f2f2; --text-heading: #000; --text-muted: #9499a1; --font-base: 13px; --strong: 600; } .btn-primary { color: white; border-color: var(--primary)!important; background-color: var(--primary)!important; } .custom-control-label {font-weight: var(--strong);} .custom-control-label::before, .custom-control-label::after { width: 15px; height: 15px; } .custom-control-input:checked ~ .custom-control-label::before { color: white; border-color: var(--primary)!important; background-color: var(--primary)!important; } .custom-control-input:focus~.custom-control-label::before {box-shadow: none;} html,body { font-size: var(--font-base); font-family: 'Poppins', sans-serif; } ul,ol { padding: 0; margin: 0; } a,a:hover,a:focus,a:active {color: var(--primary);} .table th { border-top: 0; padding: 15px 5px; } .table td,.table th {border-color: var(--border-color)!important;} .badge {padding: 5px;} /*Wizard Setup*/ .wizard-setup { padding: 20px; border: 2px dashed var(--border-color); } .wizard-setup .tab-content { padding: 50px; margin-top: 50px; background: var(--light); } .wizard-setup .form-control, .wizard-setup .btn { font-size: var(--font-base); height: 40px; } .wizard-setup .form-control { padding-left: 15px; padding-right: 15px; border-color: var(--border-color); } .wizard-setup .btn { width: 100px; } .wizard-setup .table img { width: 30px; height: 30px; object-fit: cover; border-radius: 5px; } /*Banner*/ .banner { height: 200px; display: flex; position: relative; margin-bottom: 50px; align-items: center; justify-content: center; } .banner::before { content: ''; width: 100%; height: 100%; left: 0; right: 0; position: absolute; background: rgb(0 0 0 / 50%); } .banner .title { color: white; font-size: 42px; position: relative; } /*Horizontal Timeline*/ .h-timeline ul li::before { content: ''; width: 100%; height: 5px; top: 35px; left: 55%; right: 0; background: var(--border-color); display: block; position: absolute; } .h-timeline ul li:last-child::before {width: 0;} .h-timeline li { position: relative; list-style: none; } .h-timeline li .icon { width: 60px; height: 60px; z-index: 9; font-size: 13px; color: var(--text-muted); margin: auto; border-radius: 50px; display: flex; align-items: center; position: relative; justify-content: center; background: var(--light); box-shadow: inset 0 0 0 10px rgb(255 255 255 / 15%); } .h-timeline li a.active .icon, .h-timeline li a.completed .icon { color: white; background: var(--primary); } .h-timeline .nav-tabs, .h-timeline .nav-tabs li a, .h-timeline .nav-tabs li a:hover, .h-timeline .nav-tabs li a.active { border: 0; background: transparent; border-color: var(--border-color); } .h-timeline li .heading { margin-top: 5px; color: var(--text-heading); font-weight: var(--strong); } .h-timeline li .description { color: var(--text-muted); }