Card by gharsh11032000
#212121
1.card { 2 position: relative; 3 display: flex; 4 align-items: center; 5 justify-content: center; 6 width: 320px; 7 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 8 padding: 32px; 9 overflow: hidden; 10 border-radius: 10px; 11 background: #212121; 12 border: 2px solid #313131; 13 transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1); 14} 15 16.content { 17 display: flex; 18 flex-direction: column; 19 align-items: flex-start; 20 gap: 20px; 21 color: #e8e8e8; 22 transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1); 23} 24 25.content .heading { 26 font-weight: 700; 27 font-size: 32px; 28} 29 30.content .para { 31 line-height: 1.5; 32} 33 34.content .btn { 35 color: #e8e8e8; 36 text-decoration: none; 37 padding: 10px; 38 font-weight: 600; 39 border: none; 40 cursor: pointer; 41 background: #0974f1; 42 border-radius: 5px; 43 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 44} 45 46.card:hover { 47 box-shadow: 0 0 20px rgba(9, 117, 241, 0.8); 48 border-color: #0974f1; 49} 50 51.content .btn:hover { 52 outline: 2px solid #e8e8e8; 53 background: transparent; 54 color: #e8e8e8; 55} 56 57.content .btn:active { 58 box-shadow: none; 59} 60
2.3K views
2.3K views
MIT License