#e8e8e8
1.container { 2 height: 200px; 3 width: 350px; 4 border-radius: 1em; 5 overflow: hidden; 6 box-shadow: 0 10px 20px #dbdbdb; 7 font-family: sans-serif; 8} 9 10.palette { 11 display: flex; 12 height: 86%; 13 width: 100%; 14} 15 16.color { 17 height: 100%; 18 flex: 1; 19 display: flex; 20 align-items: center; 21 justify-content: center; 22 color: white; 23 font-weight: 600; 24 letter-spacing: 1px; 25 transition: flex 0.1s linear; 26} 27 28.color span { 29 opacity: 0; 30 transition: opacity 0.1s linear; 31} 32 33.color:nth-child(1) { 34 background: #264653; 35} 36 37.color:nth-child(2) { 38 background: #2a9d8f; 39} 40 41.color:nth-child(3) { 42 background: #e9c46a; 43} 44 45.color:nth-child(4) { 46 background: #f4a261; 47} 48 49.color:nth-child(5) { 50 background: #e76f51; 51} 52 53.color:hover { 54 flex: 2; 55 box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; 56} 57 58.color:hover span { 59 opacity: 1; 60} 61 62#stats { 63 height: 14%; 64 width: 100%; 65 background: white; 66 display: flex; 67 align-items: center; 68 justify-content: space-between; 69 padding: 0 1.5em; 70 box-sizing: border-box; 71 color: #bebebe; 72} 73 74#stats svg { 75 fill: #bebebe; 76 transform: scale(1.2); 77}
2.3K views
2.3K views
Comments
1GojoSatoru-r 17. October at 5:30
17. October at 5:30
change color
Variations
1 MIT License