439k
Users
Line 6: | Line 6: | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
− | <title> | + | <title>Admin - Free Bulma template</title> |
− | + | ||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> | ||
− | <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> | + | <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet"> |
<!-- Bulma Version 0.7.1--> | <!-- Bulma Version 0.7.1--> | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" /> | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" /> | ||
− | <link rel="stylesheet" type="text/css" href="../css/ | + | <link rel="stylesheet" type="text/css" href="../css/admin.css"> |
</head> | </head> | ||
<body> | <body> | ||
+ | |||
<!-- START NAV --> | <!-- START NAV --> | ||
− | <nav class="navbar"> | + | <nav class="navbar is-white"> |
<div class="container"> | <div class="container"> | ||
<div class="navbar-brand"> | <div class="navbar-brand"> | ||
− | <a class="navbar-item" href="../"> | + | <a class="navbar-item brand-text" href="../"> |
− | + | Bulma Admin | |
− | < | + | </a> |
− | + | <div class="navbar-burger burger" data-target="navMenu"> | |
− | + | <span></span> | |
− | + | <span></span> | |
− | </ | + | <span></span> |
+ | </div> | ||
</div> | </div> | ||
− | <div id=" | + | <div id="navMenu" class="navbar-menu"> |
− | <div class="navbar- | + | <div class="navbar-start"> |
− | <a class="navbar-item | + | <a class="navbar-item" href="admin.html"> |
− | + | Home | |
− | + | </a> | |
− | + | <a class="navbar-item" href="admin.html"> | |
− | + | Orders | |
− | + | </a> | |
− | <a class="navbar-item" | + | <a class="navbar-item" href="admin.html"> |
− | + | Payments | |
− | + | </a> | |
− | + | <a class="navbar-item" href="admin.html"> | |
− | + | Exceptions | |
− | + | </a> | |
− | <a class="navbar-item" | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
+ | |||
</div> | </div> | ||
</div> | </div> | ||
</nav> | </nav> | ||
<!-- END NAV --> | <!-- END NAV --> | ||
− | + | <div class="container"> | |
− | < | + | <div class="columns"> |
− | + | <div class="column is-3"> | |
− | + | <aside class="menu"> | |
− | + | <p class="menu-label"> | |
+ | General | ||
+ | </p> | ||
+ | <ul class="menu-list"> | ||
+ | <li><a class="is-active">Dashboard</a></li> | ||
+ | <li><a>Customers</a></li> | ||
+ | </ul> | ||
+ | <p class="menu-label"> | ||
+ | Administration | ||
+ | </p> | ||
+ | <ul class="menu-list"> | ||
+ | <li><a>Team Settings</a></li> | ||
+ | <li> | ||
+ | <a>Manage Your Team</a> | ||
+ | <ul> | ||
+ | <li><a>Members</a></li> | ||
+ | <li><a>Plugins</a></li> | ||
+ | <li><a>Add a member</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a>Invitations</a></li> | ||
+ | <li><a>Cloud Storage Environment Settings</a></li> | ||
+ | <li><a>Authentication</a></li> | ||
+ | </ul> | ||
+ | <p class="menu-label"> | ||
+ | Transactions | ||
+ | </p> | ||
+ | <ul class="menu-list"> | ||
+ | <li><a>Payments</a></li> | ||
+ | <li><a>Transfers</a></li> | ||
+ | <li><a>Balance</a></li> | ||
+ | </ul> | ||
+ | </aside> | ||
</div> | </div> | ||
− | + | <div class="column is-9"> | |
− | + | <nav class="breadcrumb" aria-label="breadcrumbs"> | |
− | + | <ul> | |
− | + | <li><a href="../">Bulma</a></li> | |
− | + | <li><a href="../">Templates</a></li> | |
− | + | <li><a href="../">Examples</a></li> | |
− | + | <li class="is-active"><a href="#" aria-current="page">Admin</a></li> | |
− | + | </ul> | |
− | + | </nav> | |
− | + | <section class="hero is-info welcome is-small"> | |
− | + | <div class="hero-body"> | |
− | < | + | <div class="container"> |
− | + | <h1 class="title"> | |
− | + | Hello, Admin. | |
− | + | </h1> | |
− | + | <h2 class="subtitle"> | |
− | + | I hope you are having a great day! | |
− | + | </h2> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
− | </ | + | </section> |
− | < | + | <section class="info-tiles"> |
− | + | <div class="tile is-ancestor has-text-centered"> | |
− | + | <div class="tile is-parent"> | |
− | <div class=" | + | <article class="tile is-child box"> |
− | <div class=" | + | <p class="title">439k</p> |
− | + | <p class="subtitle">Users</p> | |
− | + | </article> | |
− | < | + | |
− | + | ||
− | <p class=" | + | |
− | <p class=" | + | |
− | + | ||
− | + | ||
− | </ | + | |
</div> | </div> | ||
− | <div class=" | + | <div class="tile is-parent"> |
− | < | + | <article class="tile is-child box"> |
− | + | <p class="title">59k</p> | |
− | + | <p class="subtitle">Products</p> | |
− | + | </article> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
</div> | </div> | ||
− | + | <div class="tile is-parent"> | |
− | + | <article class="tile is-child box"> | |
− | + | <p class="title">3.4k</p> | |
− | + | <p class="subtitle">Open Orders</p> | |
− | + | </article> | |
− | + | </div> | |
− | <div class=" | + | <div class="tile is-parent"> |
− | < | + | <article class="tile is-child box"> |
− | < | + | <p class="title">19</p> |
− | + | <p class="subtitle">Exceptions</p> | |
− | + | </article> | |
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
</section> | </section> | ||
− | < | + | <div class="columns"> |
− | + | <div class="column is-6"> | |
− | <div class="card | + | <div class="card events-card"> |
− | + | <header class="card-header"> | |
− | + | <p class="card-header-title"> | |
− | + | Events | |
− | + | </p> | |
+ | <a href="#" class="card-header-icon" aria-label="more options"> | ||
+ | <span class="icon"> | ||
+ | <i class="fa fa-angle-down" aria-hidden="true"></i> | ||
+ | </span> | ||
+ | </a> | ||
+ | </header> | ||
+ | <div class="card-table"> | ||
+ | <div class="content"> | ||
+ | <table class="table is-fullwidth is-striped"> | ||
+ | <tbody> | ||
+ | <tr> | ||
+ | <td width="5%"><i class="fa fa-bell-o"></i></td> | ||
+ | <td>Lorum ipsum dolem aire</td> | ||
+ | <td><a class="button is-small is-primary" href="#">Action</a></td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td width="5%"><i class="fa fa-bell-o"></i></td> | ||
+ | <td>Lorum ipsum dolem aire</td> | ||
+ | <td><a class="button is-small is-primary" href="#">Action</a></td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td width="5%"><i class="fa fa-bell-o"></i></td> | ||
+ | <td>Lorum ipsum dolem aire</td> | ||
+ | <td><a class="button is-small is-primary" href="#">Action</a></td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td width="5%"><i class="fa fa-bell-o"></i></td> | ||
+ | <td>Lorum ipsum dolem aire</td> | ||
+ | <td><a class="button is-small is-primary" href="#">Action</a></td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td width="5%"><i class="fa fa-bell-o"></i></td> | ||
+ | <td>Lorum ipsum dolem aire</td> | ||
+ | <td><a class="button is-small is-primary" href="#">Action</a></td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td width="5%"><i class="fa fa-bell-o"></i></td> | ||
+ | <td>Lorum ipsum dolem aire</td> | ||
+ | <td><a class="button is-small is-primary" href="#">Action</a></td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td width="5%"><i class="fa fa-bell-o"></i></td> | ||
+ | <td>Lorum ipsum dolem aire</td> | ||
+ | <td><a class="button is-small is-primary" href="#">Action</a></td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td width="5%"><i class="fa fa-bell-o"></i></td> | ||
+ | <td>Lorum ipsum dolem aire</td> | ||
+ | <td><a class="button is-small is-primary" href="#">Action</a></td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td width="5%"><i class="fa fa-bell-o"></i></td> | ||
+ | <td>Lorum ipsum dolem aire</td> | ||
+ | <td><a class="button is-small is-primary" href="#">Action</a></td> | ||
+ | </tr> | ||
+ | </tbody> | ||
+ | </table> | ||
+ | </div> | ||
</div> | </div> | ||
− | < | + | <footer class="card-footer"> |
− | < | + | <a href="#" class="card-footer-item">View All</a> |
− | + | </footer> | |
− | + | </div> | |
+ | </div> | ||
+ | <div class="column is-6"> | ||
+ | <div class="card"> | ||
+ | <header class="card-header"> | ||
+ | <p class="card-header-title"> | ||
+ | Inventory Search | ||
</p> | </p> | ||
+ | <a href="#" class="card-header-icon" aria-label="more options"> | ||
+ | <span class="icon"> | ||
+ | <i class="fa fa-angle-down" aria-hidden="true"></i> | ||
+ | </span> | ||
+ | </a> | ||
+ | </header> | ||
+ | <div class="card-content"> | ||
+ | <div class="content"> | ||
+ | <div class="control has-icons-left has-icons-right"> | ||
+ | <input class="input is-large" type="text" placeholder=""> | ||
+ | <span class="icon is-medium is-left"> | ||
+ | <i class="fa fa-search"></i> | ||
+ | </span> | ||
+ | <span class="icon is-medium is-right"> | ||
+ | <i class="fa fa-check"></i> | ||
+ | </span> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
− | <div class=" | + | <div class="card"> |
− | < | + | <header class="card-header"> |
− | + | <p class="card-header-title"> | |
− | + | User Search | |
− | + | </p> | |
− | + | <a href="#" class="card-header-icon" aria-label="more options"> | |
− | </ | + | <span class="icon"> |
− | < | + | <i class="fa fa-angle-down" aria-hidden="true"></i> |
− | + | </span> | |
− | + | </a> | |
− | + | </header> | |
− | </ | + | <div class="card-content"> |
+ | <div class="content"> | ||
+ | <div class="control has-icons-left has-icons-right"> | ||
+ | <input class="input is-large" type="text" placeholder=""> | ||
+ | <span class="icon is-medium is-left"> | ||
+ | <i class="fa fa-search"></i> | ||
+ | </span> | ||
+ | <span class="icon is-medium is-right"> | ||
+ | <i class="fa fa-check"></i> | ||
+ | </span> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
− | + | </div> | |
− | + | ||
− | + | ||
</div> | </div> | ||
+ | </div> | ||
</body> | </body> | ||
</html> | </html> |
439k
Users
59k
Products
3.4k
Open Orders
19
Exceptions