Card by SouravBandyopadhyay
This card was created for Social Banner
#e8e8e8
1.card { 2 background: linear-gradient( 3 112.1deg, 4 rgb(32, 38, 57) 11.4%, 5 rgb(63, 76, 119) 70.2% 6 ); 7 border-radius: 15px; 8 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); 9 overflow: hidden; 10 width: 350px; 11 text-align: center; 12 color: #fff; 13 padding: 20px; 14 box-sizing: border-box; 15 font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; 16} 17 18.card .image { 19 width: 100px; 20 height: 100px; 21 border-radius: 50%; 22 margin: 0 auto; 23 display: block; 24 margin-bottom: 15px; 25 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 26 object-fit: scale-down; 27 transition: transform 0.3s ease-in-out; 28} 29.card .image:hover { 30 animation: pendulum 1s infinite ease-in-out; 31} 32 33@keyframes pendulum { 34 0% { 35 transform: rotate(-10deg); 36 } 37 50% { 38 transform: rotate(10deg); 39 } 40 100% { 41 transform: rotate(-10deg); 42 } 43} 44 45.card .heading { 46 font-size: 1.5em; 47 font-weight: bold; 48 margin-bottom: 10px; 49} 50 51.card .icons { 52 display: flex; 53 justify-content: center; 54 gap: 15px; 55} 56 57.card .icons a { 58 display: flex; 59 align-items: center; 60 justify-content: center; 61 width: 40px; 62 height: 40px; 63 border-radius: 50%; 64 background: rgba(255, 255, 255, 0.2); 65 transition: background 0.3s ease; 66} 67 68.card .icons a:hover { 69 background: rgba(255, 255, 255, 0.4); 70} 71 72.card .icons svg { 73 fill: #f1f4ee; 74} 75 76.instagram svg, 77.x svg, 78.discord svg { 79 width: 24px; 80 height: 24px; 81} 82
48 views
48 views
MIT License