Card by rzouga001
#212121
1.card { 2 overflow: hidden; 3 position: relative; 4 text-align: left; 5 border-radius: 0.5rem; 6 max-width: 590px; 7 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); 8 background-color: #fff; 9} 10 11.div_image_v { 12 background: #47c9a2; 13 border-bottom: none; 14 position: relative; 15 text-align: center; 16 margin: -20px -20px 0; 17 border-radius: 5px 5px 0 0; 18 padding: 35px; 19} 20 21.dismiss { 22 position: absolute; 23 right: 10px; 24 top: 10px; 25 display: flex; 26 align-items: center; 27 justify-content: center; 28 padding: 0.5rem 1rem; 29 background-color: #fff; 30 color: black; 31 border: 2px solid #D1D5DB; 32 font-size: 1rem; 33 font-weight: 300; 34 width: 30px; 35 height: 30px; 36 border-radius: 7px; 37 transition: .3s ease; 38} 39 40.dismiss:hover { 41 background-color: #ee0d0d; 42 border: 2px solid #ee0d0d; 43 color: #fff; 44} 45 46.header { 47 padding: 1.25rem 1rem 1rem 1rem; 48} 49 50.image { 51 display: flex; 52 margin-left: auto; 53 margin-right: auto; 54 background-color: #e2feee; 55 flex-shrink: 0; 56 justify-content: center; 57 align-items: center; 58 width: 3rem; 59 height: 3rem; 60 border-radius: 9999px; 61 animation: animate .6s linear alternate-reverse infinite; 62 transition: .6s ease; 63} 64 65.image svg { 66 color: #0afa2a; 67 width: 2rem; 68 height: 2rem; 69} 70 71.content { 72 margin-top: 0.75rem; 73 text-align: center; 74} 75 76.title { 77 color: #066e29; 78 font-size: 1rem; 79 font-weight: 600; 80 line-height: 1.5rem; 81} 82 83.message { 84 margin-top: 0.5rem; 85 color: #595b5f; 86 font-size: 0.875rem; 87 line-height: 1.25rem; 88} 89 90@keyframes animate { 91 from { 92 transform: scale(1); 93 } 94 95 to { 96 transform: scale(1.09); 97 } 98}
1.1K views
Variation of acard
MIT License