1.1K views
1.wrapper { 2 position: relative; 3 display: flex; 4 flex-direction: row; 5 gap: 10px; 6} 7 8.card { 9 position: relative; 10 width: 150px; 11 height: 100px; 12 background: #fff; 13 border-radius: 10px; 14 transition: all 0.3s; 15} 16 17.card:hover { 18 transform: scale(1.05); 19} 20 21.input { 22 position: relative; 23 top: 0; 24 left: 0; 25 height: 100%; 26 width: 100%; 27 cursor: pointer; 28 appearance: none; 29 border: 1px solid #e5e5e5; 30 border-radius: 10px; 31 z-index: 10; 32 box-shadow: 1px 1px 10px #aaaaaa, 33 -1px -1px 10px #ffffff; 34} 35 36.input + .check::before { 37 content: ""; 38 position: absolute; 39 top: 15px; 40 right: 15px; 41 width: 16px; 42 height: 16px; 43 border: 2px solid #d0d0d0; 44 border-radius: 50%; 45 background-color: #E8E8E8; 46} 47 48.input:checked + .check::after { 49 content: ''; 50 position: absolute; 51 top: 19px; 52 right: 19px; 53 width: 12px; 54 height: 12px; 55 background-color: rgba(255,0,0,0.7); 56 border-radius: 50%; 57} 58 59.input[value="standart"]:checked + .check::after { 60 background-color: rgba(255,165,0,0.7); 61} 62 63.input[value="premium"]:checked + .check::after { 64 background-color: rgba(0,128,0,0.7); 65} 66 67.input[value="basic"]:checked { 68 border: 1.5px solid rgba(255,0,0,0.7); 69} 70 71.input[value="standart"]:checked { 72 border: 1.5px solid rgba(255,165,0,0.7); 73} 74 75.input[value="premium"]:checked { 76 border: 1.5px solid rgba(0,128,0,0.7); 77} 78 79.label { 80 color: #323232; 81 position: absolute; 82 top: 0; 83 left: 0; 84 z-index: 0; 85} 86 87.label .title { 88 margin: 15px 0 0 15px; 89 font-weight: 900; 90 font-size: 15px; 91 letter-spacing: 1.5px; 92} 93 94.label .price { 95 margin: 20px 0 0 15px; 96 font-size: 20px; 97 font-weight: 900; 98} 99 100.label .span { 101 color: gray; 102 font-weight: 700; 103 font-size: 15px; 104} 105
MIT License