Card by elijahwgummer-poc
#e8e8e8
1.card { 2 width: 300px; 3 height: 400px; 4 background-color: #F7F7F7; 5 border-radius: 10px; 6 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); 7 display: flex; 8 flex-direction: column; 9 justify-content: center; 10 align-items: center; 11 overflow: hidden; 12 position: relative; 13 transition: all 0.3s ease; 14} 15 16.card:before { 17 content: ""; 18 position: absolute; 19 top: -100%; 20 left: -100%; 21 width: 100%; 22 height: 100%; 23 background: linear-gradient(to bottom right, #FF5F6D, #FF9671); 24 transform: rotate(-45deg); 25 transition: all 0.3s ease; 26 z-index: -1; 27} 28 29.card:hover { 30 transform: scale(1.05); 31 box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2); 32} 33 34.card:hover:before { 35 top: 0; 36 left: 0; 37} 38 39.card-content { 40 padding: 20px; 41 text-align: center; 42} 43 44.card-title { 45 font-size: 24px; 46 font-weight: bold; 47 margin-bottom: 10px; 48 color: #333; 49} 50 51.card-description { 52 font-size: 16px; 53 color: #777; 54 margin-bottom: 20px; 55} 56 57.card-button { 58 padding: 10px 20px; 59 background-color: #FF5F6D; 60 color: #FFF; 61 border: none; 62 border-radius: 4px; 63 font-size: 18px; 64 cursor: pointer; 65 transition: background-color 0.3s ease; 66} 67 68.card-button:hover { 69 background-color: #FF3A4C; 70} 71
699 views
699 views
MIT License