Card by Shoh2008
#e8e8e8
1.card { 2 margin: 20px; 3 padding: 20px; 4 width: 300px; 5 min-height: 200px; 6 display: grid; 7 grid-template-rows: 20px 50px 1fr 50px; 8 border-radius: 10px; 9 box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25); 10 transition: all 0.2s; 11} 12 13.card:hover { 14 box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.4); 15 transform: scale(1.01); 16} 17 18.card__link, 19.card__exit, 20.card__icon { 21 position: relative; 22 text-decoration: none; 23 color: rgba(255, 255, 255, 0.9); 24} 25 26.card__link::after { 27 position: absolute; 28 top: 25px; 29 left: 0; 30 content: ""; 31 width: 0%; 32 height: 3px; 33 background-color: rgba(255, 255, 255, 0.6); 34 transition: all 0.5s; 35} 36 37.card__link:hover::after { 38 width: 100%; 39} 40 41.text { 42 color: white; 43} 44 45.card__exit { 46 grid-row: 1/2; 47 justify-self: end; 48} 49 50.card__icon { 51 grid-row: 2/3; 52 font-size: 30px; 53} 54 55.card__title { 56 grid-row: 3/4; 57 font-weight: 400; 58 color: #ffffff; 59} 60 61.card__apply { 62 grid-row: 4/5; 63 align-self: center; 64} 65 66.card-5 { 67 background: radial-gradient(#f588d8, #c0a3e5); 68} 69 70@media (max-width: 1600px) { 71 .cards { 72 justify-content: center; 73 } 74} 75
1.8K views
1.8K views
MIT License