Card by sahilxkhadka
#e8e8e8
1.card { 2 padding: 2em 1em; 3 width: 260px; 4 background: #fff; 5 border-radius: 12px; 6 animation: shadow 1.8s infinite ease-in-out; 7 transition: box-shadow 200ms cubic-bezier(0.895, 0.03, 0.685, 0.22); 8} 9 10.card .heading { 11 color: royalblue; 12 font-size: 1em; 13 font-weight: 600; 14 text-align: center; 15 margin-bottom: 1.5em; 16} 17 18.card .heading span { 19 display: inline-block; 20 font-size: 0.8em; 21 font-weight: 500; 22} 23 24.card .icons { 25 display: inline-flex; 26 width: 48px; 27 height: 48px; 28 box-shadow: 25px 25px 50px rgba(9, 148, 255, 0.25), 29 -2px -2px 5px rgba(9, 148, 255, 0.25), 30 inset -2px -2px 55px rgba(9, 148, 255, 0.5); 31 justify-content: center; 32 align-items: center; 33 border-radius: 1em; 34} 35 36.card .icons-container { 37 width: fit-content; 38 margin: 0 auto; 39 display: flex; 40 justify-content: center; 41 align-items: center; 42 gap: 1em; 43} 44 45.card .icons svg { 46 fill: royalblue; 47 height: 24px; 48 width: 24px; 49} 50 51.card .code { 52 width: fit-content; 53 margin: 1.5em auto; 54} 55 56.card .code svg { 57 fill: royalblue; 58 width: 180px; 59 aspect-ratio: 16/9; 60} 61 62@keyframes shadow { 63 0% { 64 box-shadow: 5px 5px 20px rgba(9, 148, 255, 0.15), 65 -5px -5px 10px rgba(9, 148, 255, 0.1), 66 inset -5px -5px 5px rgba(9, 148, 255, 0.5); 67 } 68 69 50% { 70 box-shadow: 25px 25px 50px rgba(9, 148, 255, 0.25), 71 -10px -10px 30px rgba(9, 148, 255, 0.1), 72 inset -5px -5px 15px rgba(9, 148, 255, 0.5); 73 } 74 75 100% { 76 box-shadow: 5px 5px 20px rgba(9, 148, 255, 0.15), 77 -5px -5px 10px rgba(9, 148, 255, 0.1), 78 inset -5px -5px 5px rgba(9, 148, 255, 0.5); 79 } 80}
1.2K views
1.2K views
MIT License