324 views
1.card { 2 box-sizing: border-box; 3 display: flex; 4 max-width: 320px; 5 background-color: rgba(255, 255, 255, 1); 6 transition: all .15s cubic-bezier(0.4, 0, 0.2, 1); 7} 8 9.card:hover { 10 box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.081); 11} 12 13.date-time-container { 14 writing-mode: vertical-lr; 15 transform: rotate(180deg); 16 padding: 0.5rem; 17} 18 19.date-time { 20 display: flex; 21 align-items: center; 22 justify-content: space-between; 23 grid-gap: 1rem; 24 gap: 1rem; 25 font-size: 0.75rem; 26 line-height: 1rem; 27 font-weight: 700; 28 text-transform: uppercase; 29 color: rgba(17, 24, 39, 1); 30} 31 32.separator { 33 width: 1px; 34 flex: 1 1 0%; 35 background-color: rgba(17, 24, 39, 0.1); 36} 37 38.content { 39 display: flex; 40 flex: 1 1 0%; 41 flex-direction: column; 42 justify-content: space-between; 43} 44 45.infos { 46 border-left: 1px solid rgba(17, 24, 39, 0.1); 47 padding: 1rem; 48} 49 50.title { 51 font-weight: 700; 52 text-transform: uppercase; 53 font-size: 18.72px; 54 color: rgba(17, 24, 39, 1); 55} 56 57.description { 58 overflow: hidden; 59 display: -webkit-box; 60 -webkit-box-orient: vertical; 61 -webkit-line-clamp: 5; 62 line-clamp: 5; 63 margin-top: 0.5rem; 64 font-size: 0.875rem; 65 line-height: 1.25rem; 66 color: rgba(55, 65, 81, 1); 67} 68 69.action { 70 display: block; 71 background-color: rgba(253, 224, 71, 1); 72 padding: 0.75rem 1.25rem; 73 text-align: center; 74 font-size: 0.75rem; 75 line-height: 1rem; 76 font-weight: 700; 77 text-transform: uppercase; 78 color: rgba(17, 24, 39, 1); 79 transition: all .15s cubic-bezier(0.4, 0, 0.2, 1); 80} 81 82.action:hover { 83 background-color: rgba(250, 204, 21, 1); 84}
MIT License