#e8e8e8
1.card { 2 width: 300px; 3 height: fit-content; 4 background: rgb(255, 255, 255); 5 border-radius: 20px; 6 display: flex; 7 flex-direction: column; 8 align-items: center; 9 justify-content: center; 10 gap: 20px; 11 padding: 30px; 12 position: relative; 13 box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.068); 14} 15.card-content { 16 width: 100%; 17 height: fit-content; 18 display: flex; 19 flex-direction: column; 20 gap: 5px; 21} 22.card-heading { 23 font-size: 20px; 24 font-weight: 700; 25 color: rgb(27, 27, 27); 26} 27.card-description { 28 font-weight: 100; 29 color: rgb(102, 102, 102); 30} 31.card-button-wrapper { 32 width: 100%; 33 display: flex; 34 align-items: center; 35 justify-content: center; 36 gap: 10px; 37} 38.card-button { 39 width: 50%; 40 height: 35px; 41 border-radius: 10px; 42 border: none; 43 cursor: pointer; 44 font-weight: 600; 45} 46.primary { 47 background-color: rgb(255, 114, 109); 48 color: white; 49} 50.primary:hover { 51 background-color: rgb(255, 73, 66); 52} 53.secondary { 54 background-color: #ddd; 55} 56.secondary:hover { 57 background-color: rgb(197, 197, 197); 58} 59.exit-button { 60 display: flex; 61 align-items: center; 62 justify-content: center; 63 border: none; 64 background-color: transparent; 65 position: absolute; 66 top: 20px; 67 right: 20px; 68 cursor: pointer; 69} 70.exit-button:hover svg { 71 fill: black; 72} 73.exit-button svg { 74 fill: rgb(175, 175, 175); 75} 76
135 views
135 views
Comments
MIT License