#e8e8e8
1.card { 2 width: 300px; 3 height: 220px; 4 background-color: rgb(255, 255, 255); 5 display: flex; 6 flex-direction: column; 7 align-items: center; 8 justify-content: center; 9 padding: 20px 30px; 10 gap: 13px; 11 position: relative; 12 overflow: hidden; 13 box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.062); 14} 15 16#cookieSvg { 17 width: 50px; 18} 19 20#cookieSvg g path { 21 fill: rgb(97, 81, 81); 22} 23 24.cookieHeading { 25 font-size: 1.2em; 26 font-weight: 800; 27 color: rgb(26, 26, 26); 28} 29 30.cookieDescription { 31 text-align: center; 32 font-size: 0.7em; 33 font-weight: 600; 34 color: rgb(99, 99, 99); 35} 36 37.buttonContainer { 38 display: flex; 39 gap: 20px; 40 flex-direction: row; 41} 42 43.acceptButton { 44 width: 80px; 45 height: 30px; 46 background-color: #7b57ff; 47 transition-duration: .2s; 48 border: none; 49 color: rgb(241, 241, 241); 50 cursor: pointer; 51 font-weight: 600; 52 border-radius: 20px; 53} 54 55.declineButton { 56 width: 80px; 57 height: 30px; 58 background-color: rgb(218, 218, 218); 59 transition-duration: .2s; 60 color: rgb(46, 46, 46); 61 border: none; 62 cursor: pointer; 63 font-weight: 600; 64 border-radius: 20px; 65} 66 67.declineButton:hover { 68 background-color: #ebebeb; 69 transition-duration: .2s; 70} 71 72.acceptButton:hover { 73 background-color: #9173ff; 74 transition-duration: .2s; 75}
Comments
Variations
1 MIT License