Card by NouvelleTechno
#e8e8e8
1.card { 2 width: 370px; 3 background: white; 4 position: relative; 5 display: flex; 6 flex-direction: column; 7 justify-content: space-between; 8 padding: 40px; 9 border-radius: 40px; 10 background-color: hsl(120deg 20% 95%); 11 box-shadow: 17px 17px 34px 0px rgb(124, 134, 124), 12 inset -8px -8px 16px 0px rgba(117, 133, 117, 0.7), 13 inset 0px 14px 28px 0px hsl(120deg 20% 95%); 14} 15 16.card .title { 17 color: black; 18 font-size: 2rem; 19 font-weight: 600; 20} 21 22.card .description { 23 color: black; 24 margin-top: 10px; 25 margin-bottom: 20px; 26} 27 28.card .prefs { 29 color: blue; 30 font-size: .8em; 31 margin-bottom: 20px; 32} 33 34.card .actions { 35 margin-top: 10px; 36 display: flex; 37 justify-content: space-between; 38 align-items: center; 39} 40 41.card button { 42 color: white; 43 border: none; 44 background: none; 45 padding: 20px; 46 border-radius: 15px; 47 cursor: pointer; 48 font-size: 1.2em; 49 font-weight: bold; 50} 51 52.card .decline { 53 color: rgb(255, 0, 0); 54 box-shadow: 4px 4px 8px 0px rgb(134, 124, 124), 55 inset -8px -8px 16px 0px rgba(92, 92, 92, 0.7), 56 inset 0px 14px 28px 0px hsl(120deg 20% 95%); 57} 58 59.card .valid { 60 color: rgb(0, 156, 0); 61 box-shadow: 4px 4px 8px 0px rgb(124, 134, 125), 62 inset -8px -8px 16px 0px rgba(121, 121, 121, 0.7), 63 inset 0px 14px 28px 0px hsl(120deg 20% 95%); 64} 65 66.card .decline:hover { 67 color: white; 68 background-color: rgb(255, 0, 0); 69 box-shadow: 4px 4px 8px 0px rgb(134, 124, 124), 70 inset -8px -8px 16px 0px rgba(134, 20, 20, 0.7), 71 inset 0px 14px 28px 0px hsl(120deg 20% 95%); 72} 73 74.card .valid:hover { 75 color: white; 76 background-color: rgb(0, 156, 0); 77 box-shadow: 4px 4px 8px 0px rgb(124, 134, 125), 78 inset -8px -8px 16px 0px rgba(47, 134, 20, 0.7), 79 inset 0px 14px 28px 0px hsl(120deg 20% 95%); 80} 81
891 views
891 views
MIT License