Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- .container{
- max-width: 1320px;
- margin:0 auto;
- }
- .bg-blue{
- background:#0d6efd;
- }
- .bg-yellow{
- background:#ffc107;
- }
- .bg-gray{
- background:#6c757d;
- }
- .bg-turquoise{
- background:#0dcaf0;
- }
- .row{
- display: flex;
- flex-direction: row;
- }
- .col{
- width:100%;
- }
- .heading{
- font-size: 36px;
- font-weight: bold;
- line-height: 1.2;
- }
- .text-muted{
- color: gray;
- }
- .text-white{
- color:white;
- }
- .card{
- position: relative;
- display: flex;
- flex-direction: column;
- min-width: 0;
- word-wrap: break-word;
- background-clip: border-box;
- border: 1px solid rgba(0, 0, 0, 0.125);
- border-radius: 0.25rem;
- }
- .card-body {
- flex: 1 1 auto;
- padding: 16px;
- }
- .col-3{
- width: 25%;
- }
- .fw-bold{
- font-weight:bold;
- }
- .mt-40{
- margin-top:40px;
- }
- .mx-12{
- margin-left:12px;
- margin-right:12px;
- }
- .p-16{
- padding:16px;
- }
- .table{
- width: 100%;
- margin-bottom: 16px;
- color: #212529;
- vertical-align: top;
- border-collapse: collapse;
- }
- .table-bordered td {
- padding: 8px;
- background-color: white;
- border:solid 1px #e7e7e7;
- }
- .btn{
- display: inline-block;
- color: white;
- text-align: center;
- vertical-align: middle;
- border: 1px solid transparent;
- padding: 8px 12px;
- border-radius: 4px;
- background:transparent;
- cursor:pointer;
- }
- .btn-outline-dark{
- color: white;
- border-color: #212529;
- }
- .btn-outline-dark:hover {
- color: #fff;
- background-color: #212529;
- border-color: #212529;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="row">
- <div class="col">
- <div class="heading">Dashboard</div>
- <div class="text-muted">Sales overview & summary</div>
- </div>
- </div>
- <div class="row mt-40">
- <div class="col-3">
- <div class="bg-blue p-16 mx-12">
- <div class="text-white">
- <div class="heading">
- 101.1k
- </div>
- <div>
- Downloads
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bg-yellow p-16 mx-12">
- <div class="text-white">
- <div class="heading">
- 12.2k
- </div>
- <div>
- Purchases
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bg-gray p-16 mx-12">
- <div class="text-white">
- <div class="heading">
- 5.3k
- </div>
- <div>
- Customers
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bg-turquoise p-16 mx-12">
- <div class="text-white">
- <div class="heading">
- 7
- </div>
- <div>
- Channels
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="row mt-40">
- <div class="col">
- <div class="card">
- <div class="bg-blue">
- <div class="p-16">
- <div>
- <button class="btn btn-outline-dark">Download</button>
- <button class="btn btn-outline-dark">Print</button>
- </div>
- </div>
- </div>
- <div class="card-body table-bordered">
- <table class="table ">
- <tr>
- <td class="fw-bold">item 1</td>
- <td>item 2</td>
- <td>item 3</td>
- <td>item 4</td>
- </tr>
- <tr>
- <td class="fw-bold">item 1</td>
- <td>item 2</td>
- <td>item 3</td>
- <td>item 4</td>
- </tr>
- <tr>
- <td class="fw-bold">item 1</td>
- <td>item 2</td>
- <td>item 3</td>
- <td>item 4</td>
- </tr>
- <tr>
- <td class="fw-bold">item 1</td>
- <td>item 2</td>
- <td>item 3</td>
- <td>item 4</td>
- </tr>
- <tr>
- <td class="fw-bold">item 1</td>
- <td>item 2</td>
- <td>item 3</td>
- <td>item 4</td>
- </tr>
- <tr>
- <td class="fw-bold">item 1</td>
- <td>item 2</td>
- <td>item 3</td>
- <td>item 4</td>
- </tr>
- </table>
- </div>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement