lemansky

Untitled

Dec 4th, 2021
809
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .container{
  9.              max-width: 1320px;
  10.              margin:0 auto;
  11.         }
  12.         .bg-blue{
  13.             background:#0d6efd;
  14.         }
  15.         .bg-yellow{
  16.             background:#ffc107;
  17.         }
  18.         .bg-gray{
  19.             background:#6c757d;
  20.         }
  21.         .bg-turquoise{
  22.             background:#0dcaf0;
  23.         }
  24.         .row{
  25.             display: flex;
  26.             flex-direction: row;
  27.         }
  28.         .col{
  29.             width:100%;
  30.         }
  31.         .heading{
  32.             font-size: 36px;
  33.             font-weight: bold;
  34.             line-height: 1.2;
  35.         }
  36.         .text-muted{
  37.             color: gray;
  38.         }
  39.         .text-white{
  40.             color:white;
  41.         }
  42.         .card{
  43.             position: relative;
  44.             display: flex;
  45.             flex-direction: column;
  46.             min-width: 0;
  47.             word-wrap: break-word;
  48.             background-clip: border-box;
  49.             border: 1px solid rgba(0, 0, 0, 0.125);
  50.             border-radius: 0.25rem;
  51.         }
  52.         .card-body {
  53.             flex: 1 1 auto;
  54.             padding: 16px;
  55.         }
  56.         .col-3{
  57.             width: 25%;
  58.         }
  59.         .fw-bold{
  60.             font-weight:bold;
  61.         }
  62.         .mt-40{
  63.             margin-top:40px;
  64.         }
  65.         .mx-12{
  66.             margin-left:12px;
  67.             margin-right:12px;
  68.         }
  69.         .p-16{
  70.             padding:16px;
  71.         }
  72.         .table{
  73.             width: 100%;
  74.             margin-bottom: 16px;
  75.             color: #212529;
  76.             vertical-align: top;
  77.  
  78.             border-collapse: collapse;
  79.         }
  80.  
  81.         .table-bordered td {
  82.             padding: 8px;
  83.             background-color: white;
  84.             border:solid 1px #e7e7e7;
  85.         }
  86.  
  87.         .btn{
  88.           display: inline-block;
  89.           color: white;
  90.           text-align: center;
  91.           vertical-align: middle;
  92.           border: 1px solid transparent;
  93.           padding: 8px 12px;
  94.           border-radius: 4px;
  95.           background:transparent;
  96.           cursor:pointer;
  97.         }
  98.  
  99.         .btn-outline-dark{
  100.             color: white;
  101.             border-color: #212529;
  102.         }
  103.  
  104.         .btn-outline-dark:hover {
  105.             color: #fff;
  106.             background-color: #212529;
  107.             border-color: #212529;
  108.         }
  109.  
  110.  
  111.     </style>
  112. </head>
  113. <body>
  114.     <div class="container">
  115.         <div class="row">
  116.             <div class="col">
  117.                 <div class="heading">Dashboard</div>
  118.                 <div class="text-muted">Sales overview & summary</div>
  119.             </div>
  120.         </div>
  121.         <div class="row mt-40">
  122.             <div class="col-3">
  123.                 <div class="bg-blue p-16 mx-12">
  124.                     <div class="text-white">
  125.                         <div class="heading">
  126.                             101.1k
  127.                         </div>
  128.                         <div>
  129.                             Downloads
  130.                         </div>
  131.                     </div>
  132.                 </div>
  133.             </div>
  134.             <div class="col-3">
  135.                 <div class="bg-yellow p-16 mx-12">
  136.                     <div class="text-white">
  137.                         <div class="heading">
  138.                             12.2k
  139.                         </div>
  140.                         <div>
  141.                             Purchases
  142.                         </div>
  143.                     </div>
  144.                 </div>
  145.             </div>
  146.             <div class="col-3">
  147.                 <div class="bg-gray p-16 mx-12">
  148.                     <div class="text-white">
  149.                         <div class="heading">
  150.                             5.3k
  151.                         </div>
  152.                         <div>
  153.                             Customers
  154.                         </div>
  155.                     </div>
  156.                 </div>
  157.             </div>
  158.             <div class="col-3">
  159.                 <div class="bg-turquoise p-16 mx-12">
  160.                     <div class="text-white">
  161.                         <div class="heading">
  162.                             7
  163.                         </div>
  164.                         <div>
  165.                             Channels
  166.                         </div>
  167.                     </div>
  168.                 </div>
  169.             </div>
  170.         </div>
  171.         <div class="row mt-40">
  172.             <div class="col">
  173.                 <div class="card">
  174.                     <div class="bg-blue">
  175.                         <div class="p-16">
  176.                             <div>
  177.                                 <button class="btn btn-outline-dark">Download</button>
  178.                                 <button class="btn btn-outline-dark">Print</button>
  179.                             </div>
  180.                         </div>
  181.                     </div>
  182.                     <div class="card-body table-bordered">
  183.                         <table class="table ">
  184.                             <tr>
  185.                                 <td class="fw-bold">item 1</td>
  186.                                 <td>item 2</td>
  187.                                 <td>item 3</td>
  188.                                 <td>item 4</td>
  189.                             </tr>
  190.                             <tr>
  191.                                 <td class="fw-bold">item 1</td>
  192.                                 <td>item 2</td>
  193.                                 <td>item 3</td>
  194.                                 <td>item 4</td>
  195.                             </tr>
  196.                             <tr>
  197.                                 <td class="fw-bold">item 1</td>
  198.                                 <td>item 2</td>
  199.                                 <td>item 3</td>
  200.                                 <td>item 4</td>
  201.                             </tr>
  202.                             <tr>
  203.                                 <td class="fw-bold">item 1</td>
  204.                                 <td>item 2</td>
  205.                                 <td>item 3</td>
  206.                                 <td>item 4</td>
  207.                             </tr>
  208.                             <tr>
  209.                                 <td class="fw-bold">item 1</td>
  210.                                 <td>item 2</td>
  211.                                 <td>item 3</td>
  212.                                 <td>item 4</td>
  213.                             </tr>
  214.                             <tr>
  215.                                 <td class="fw-bold">item 1</td>
  216.                                 <td>item 2</td>
  217.                                 <td>item 3</td>
  218.                                 <td>item 4</td>
  219.                             </tr>
  220.                         </table>
  221.                     </div>
  222.                 </div>
  223.             </div>
  224.         </div>
  225.     </div>
  226. </body>
  227. </html>
RAW Paste Data