Card by Admin12121
#e8e8e8
1.price-section { 2 color: #fff; 3} 4/* End basic CSS override */ 5.price-table { 6 background-color: #152148; 7 border-radius: 16px; 8 max-width: 355px; 9 padding: 25px; 10 display: flex; 11 flex-direction: column; 12 box-shadow: 0 15px 45px 0 rgba(0, 0, 0, 0.15); 13 position: relative; 14 background-image: linear-gradient(135deg, rgba(74, 222, 128, 0.15), rgba(29, 123, 219, 0.1) 20%, #152148 40%, #152148 100%); 15} 16 17.price-table:after { 18 content: ""; 19 display: block; 20 top: -3px; 21 left: -3px; 22 bottom: -3px; 23 right: -3px; 24 z-index: -1; 25 position: absolute; 26 border-radius: 16px; 27 background-image: linear-gradient(135deg, #4ade80, #1d7bdb 40%, #293359 60%, #152148 100%); 28} 29 30.price-table .price { 31 font-size: 3rem; 32 line-height: 1; 33 font-weight: 700; 34 display: inline-flex; 35 align-self: center; 36 align-items: center; 37 gap: 4px; 38 position: relative; 39 color: #fff; 40} 41 42.price-table .price small { 43 font-size: 1.25rem; 44 font-weight: 400; 45 position: absolute; 46 left: -1.5ch; 47} 48 49.price-table .title { 50 font-size: 1.25rem; 51 font-weight: 600; 52 line-height: 1.25; 53 text-align: center; 54 margin-top: 10px; 55 color: #fff; 56} 57 58.price-table .description { 59 font-size: 1rem; 60 text-align: center; 61 margin-top: 2px; 62} 63 64.features { 65 margin-top: 22px; 66} 67 68.feature { 69 position: relative; 70} 71 72.feature + .feature { 73 margin-top: 16px; 74} 75 76.feature summary { 77 display: inline-flex; 78 align-items: center; 79 list-style: none; 80} 81 82.feature summary::-webkit-details-marker { 83 display: none; 84} 85 86.feature[open] summary:after { 87 content: ""; 88 display: block; 89 top: 0; 90 left: 0; 91 right: 0; 92 bottom: 0; 93 position: fixed; 94 z-index: 50; 95} 96 97.feature[open] div { 98 -webkit-animation: scale 0.15s ease; 99 animation: scale 0.15s ease; 100} 101 102.feature .checkmark { 103 width: 24px; 104 height: 24px; 105 border-radius: 50%; 106 background-color: #4ade80; 107 display: flex; 108 align-items: center; 109 justify-content: center; 110 margin-right: 12px; 111} 112 113.feature .checkmark svg { 114 width: 18px; 115 height: 18px; 116 color: #fff; 117} 118 119.feature .question-icon { 120 display: flex; 121 align-items: center; 122 margin-left: 6px; 123 cursor: pointer; 124} 125 126.feature .answer { 127 padding: 12px; 128 background-color: #111b40; 129 border-radius: 6px; 130 position: absolute; 131 top: -12px; 132 z-index: 100; 133 transform: translatey(-100%) translatex(-50%); 134 transform-origin: bottom center; 135 width: 80%; 136 left: 50%; 137 border: 1px solid #293359; 138 box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.1); 139} 140 141@-webkit-keyframes scale { 142 0% { 143 transform: translatey(-100%) translatex(-50%) scale(0); 144 } 145 146 100% { 147 transform: translatey(-100%) translatex(-50%) scale(1); 148 } 149} 150 151@keyframes scale { 152 0% { 153 transform: translatey(-100%) translatex(-50%) scale(0); 154 } 155 156 100% { 157 transform: translatey(-100%) translatex(-50%) scale(1); 158 } 159}
599 views
599 views
MIT License