#212121
1.card { 2 width: 280px; 3 height: 150px; 4 background: rgb(17, 4, 134); 5 border-radius: 15px; 6 box-shadow: rgb(0,0,0,0.7) 5px 10px 50px ,rgb(0,0,0,0.7) -5px 0px 250px; 7 display: flex; 8 color: white; 9 justify-content: center; 10 position: relative; 11 flex-direction: column; 12 background: linear-gradient(to right, rgb(20, 30, 48), rgb(36, 59, 85)); 13 cursor: pointer; 14 transition: all 0.3s ease-in-out; 15 overflow: hidden; 16} 17 18.card:hover { 19 box-shadow: rgb(0,0,0) 5px 10px 50px ,rgb(0,0,0) -5px 0px 250px; 20} 21 22.time-text { 23 font-size: 50px; 24 margin-top: 0px; 25 margin-left: 15px; 26 font-weight: 600; 27 font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 28} 29 30.time-sub-text { 31 font-size: 15px; 32 margin-left: 5px; 33} 34 35.day-text { 36 font-size: 18px; 37 margin-top: 0px; 38 margin-left: 15px; 39 font-weight: 500; 40 font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 41} 42 43.moon { 44 font-size: 20px; 45 position: absolute; 46 right: 15px; 47 top: 15px; 48 transition: all 0.3s ease-in-out; 49} 50 51.card:hover > .moon { 52 font-size: 23px; 53} 54
3.8K views
3.8K views
Comments
MIT License