dashboard.template.html (1680B)
1 <!doctype html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>Milion</title> 7 <style> 8 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@600;700&display=swap"); 9 10 * { 11 box-sizing: border-box; 12 } 13 14 body { 15 margin: 0; 16 font-family: monospace; 17 } 18 19 .mono { 20 font-family: monospace; 21 } 22 23 .page-contain { 24 display: flex; 25 min-height: 100vh; 26 flex-wrap: wrap; 27 align-items: center; 28 justify-content: center; 29 background: #627084; 30 font-family: "Open Sans", sans-serif; 31 } 32 33 .data-card { 34 display: flex; 35 flex-direction: column; 36 max-width: 20em; 37 overflow: hidden; 38 border-radius: 0.5em; 39 text-decoration: none; 40 background: white; 41 margin: 1em; 42 padding: 2em 2.5em; 43 box-shadow: 0 1.5em 2.5em -0.5em rgba(0, 0, 0, 0.1); 44 transition: transform 0.45s ease; 45 } 46 47 .data-card h3 { 48 color: #2e3c40; 49 font-size: 2em; 50 font-weight: 600; 51 line-height: 1; 52 padding-bottom: 0.5em; 53 margin: 0 0 0.142857143em; 54 border-bottom: 2px solid #363e49; 55 transition: border 0.45s ease; 56 } 57 58 .data-card h4 { 59 color: #627084; 60 text-transform: uppercase; 61 font-size: 1.125em; 62 font-weight: 700; 63 line-height: 1; 64 letter-spacing: 0.1em; 65 margin-top: 0; 66 } 67 68 .data-card p { 69 color: #627084; 70 margin: 0; 71 } 72 73 .data-card:hover { 74 transform: scale(1.02); 75 } 76 77 .data-card:hover h3 { 78 border-bottom-color: darkorange; 79 } 80 </style> 81 </head> 82 83 <body> 84 <section class="page-contain"> 85 {{CARDS}} 86 </section> 87 </body> 88 89 </html>