#e8e8e8
1.card { 2 width: 190px; 3 height: 254px; 4 display: flex; 5 flex-direction: column; 6 align-items: center; 7 background: #f2f2f3; 8 border-radius: 12px; 9 box-shadow: inset 5px 5px 10px #a9a9aa77, 10 inset -5px -5px 10px #ffffff7e; 11} 12 13.card .img { 14 height: 100px; 15 margin-top: 1.6em; 16 aspect-ratio: 1; 17 border-radius: 30%; 18 background: #f2f2f3; 19 margin-bottom: 0.4em; 20 box-shadow: -5px -5px 8px #ffffff7a, 21 5px 5px 8px #a9a9aa7a; 22} 23 24.card .info { 25 text-align: center; 26 margin-top: 0.4em; 27 background: linear-gradient(120deg, rgba(0,194,255,1) 0%, rgba(0,86,255,1) 100%); 28 background-clip: border-box; 29 -webkit-background-clip: text; 30 -webkit-text-fill-color: transparent; 31} 32 33.card .info > span { 34 font-weight: bold; 35 font-size: 1.2em; 36} 37 38.card a { 39 margin-top: 1em; 40 color: #fff; 41 text-decoration: none; 42 background: linear-gradient(90deg, rgba(0,194,255,1) 0%, rgba(0,86,255,1) 100%); 43 padding: .5em 2em; 44 border-radius: 0.7em; 45} 46 47.card a:active { 48 box-shadow: inset 3px 3px 3px #0056ff, 49 inset -3px -3px 3px #00c2ff; 50}
5.9K views
5.9K views
Comments
MIT License