#e8e8e8
1.card { 2 width: 17em; 3 height: 22.5em; 4 background: #171717; 5 transition: 1s ease-in-out; 6 clip-path: polygon(30px 0%, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0% 30px); 7 border-top-right-radius: 20px; 8 border-bottom-left-radius: 20px; 9 display: flex; 10 flex-direction: column; 11} 12 13.card span { 14 font-weight: bold; 15 color: white; 16 text-align: center; 17 display: block; 18 font-size: 1em; 19} 20 21.card .info { 22 font-weight: 400; 23 color: white; 24 display: block; 25 text-align: center; 26 font-size: 0.72em; 27 margin: 1em; 28} 29 30.card .img { 31 width: 4.8em; 32 height: 4.8em; 33 background: white; 34 border-radius: 15px; 35 margin: auto; 36} 37 38.card .share { 39 margin-top: 1em; 40 display: flex; 41 justify-content: center; 42 gap: 1em; 43} 44 45.card a { 46 color: white; 47 transition: .4s ease-in-out; 48} 49 50.card a:hover { 51 color: red; 52} 53 54.card button { 55 padding: 0.8em 1.7em; 56 display: block; 57 margin: auto; 58 border-radius: 25px; 59 border: none; 60 font-weight: bold; 61 background: #ffffff; 62 color: rgb(0, 0, 0); 63 transition: .4s ease-in-out; 64} 65 66.card button:hover { 67 background: red; 68 color: white; 69 cursor: pointer; 70}
10K views
10K views
Comments
Variations
1 MIT License