Card by aadium
#212121
1.card { 2 width: 230px; 3 height: 340px; 4 background: #131313; 5 border: 2px solid #bb6c74; 6 border-radius: 40px; 7} 8 9.image { 10 background-color: #1f1f1fa3; 11 border-radius: 2.5em 2.5em 0em 0em; 12 width: 100%; 13 height: 37%; 14 padding: 2px; 15} 16 17.image svg { 18 width: 75%; 19 margin-top: -25px; 20 margin-left: 30px; 21} 22 23.productTitle { 24 text-align: center; 25 font-size: 22px; 26 font-weight: bold; 27 color: #bb6c74; 28 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 29 margin-top: 10px; 30} 31 32.cost { 33 text-align: center; 34 margin-top: 10px; 35 font-weight: bold; 36 color: white; 37 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 38} 39 40.radio-inputs { 41 position: relative; 42 margin-top: 20px; 43 margin-left: 13px; 44 display: flex; 45 flex-wrap: wrap; 46 border-radius: 0.5rem; 47 background-color: #1c1c1c; 48 box-sizing: border-box; 49 box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06); 50 padding: 0.25rem; 51 width: 200px; 52 font-size: 14px; 53} 54 55.radio-inputs .radio { 56 flex: 1 1 auto; 57 text-align: center; 58} 59 60.radio-inputs .radio input { 61 display: none; 62} 63 64.radio-inputs .radio .name { 65 display: flex; 66 font-weight: 600; 67 cursor: pointer; 68 align-items: center; 69 justify-content: center; 70 border-radius: 0.5rem; 71 border: none; 72 padding: .5rem 0; 73 color: #bb6c74; 74 transition: all .15s ease-in-out; 75} 76 77.radio-inputs .radio input:checked + .name { 78 background-color: #000; 79 color: #fff; 80 font-weight: 600; 81} 82 83.addtocart { 84 width: 100%; 85 margin-top: 19px; 86 padding: 15px; 87 border: none; 88 border-top: 2px solid #bb6c74; 89 background-color: #131313; 90 color: #bb6c74; 91 font-weight: bold; 92 font-size: 15px; 93 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 94 border-radius: 0px 0px 38px 38px; 95 transition: 0.2s; 96} 97 98.addtocart:hover { 99 background-color: #bb6c74; 100 border-top: 2px solid transparent; 101 color: #111111; 102}
1.2K views
1.2K views
Variations
2684 views
MIT License