Card by Javierrocadev
#212121
1.card { 2 width: 350px; 3 height: 300px; 4 display: flex; 5 flex-direction: column; 6 align-items: center; 7 justify-content: center; 8 text-align: center; 9 gap: 10px; 10 background-color: #fffffe; 11 border-radius: 15px; 12 position: relative; 13 overflow: hidden; 14 transition: all 0.5s ease; 15} 16 17.card::before { 18 content: ""; 19 width: 350px; 20 height: 100px; 21 position: absolute; 22 top: 0; 23 border-top-left-radius: 15px; 24 border-top-right-radius: 15px; 25 border-bottom: 3px solid #fefefe; 26 background: linear-gradient(40deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); 27 transition: all 0.3s ease; 28} 29 30.card * { 31 z-index: 1; 32} 33 34.image { 35 width: 90px; 36 height: 90px; 37 background-color: #1468BF; 38 border-radius: 50%; 39 border: 4px solid #fefefe; 40 margin-top: 30px; 41 transition: all 0.5s ease; 42} 43 44.card-info { 45 display: flex; 46 flex-direction: column; 47 align-items: center; 48 gap: 15px; 49 transition: all 0.5s ease; 50} 51 52.card-info span { 53 font-weight: 600; 54 font-size: 24px; 55 color: #161A42; 56 margin-top: 15px; 57 line-height: 5px; 58} 59 60.card-info p { 61 color: rgba(0, 0, 0, 0.5); 62} 63 64.button { 65 text-decoration: none; 66 background-color: #1468BF; 67 color: white; 68 padding: 5px 20px; 69 border-radius: 5px; 70 border: 1px solid white; 71 transition: all 0.5s ease; 72} 73 74.card:hover { 75 width: 300px; 76 border-radius: 250px; 77} 78 79.card:hover::before { 80 width: 300px; 81 height: 300px; 82 border-radius: 50%; 83 border-bottom: none; 84 transform: scale(0.95); 85} 86 87.card:hover .card-info { 88 transform: translate(0%,-15%); 89} 90 91.button:hover { 92 background-color: #FF6844; 93 transform: scale(1.1); 94}
1.1K views
Variation of acard
MIT License