Card by mi-series
#212121
1.container { 2 width: 300px; 3 padding: 15px; 4 background: #ffffff; 5 text-align: center; 6 border: 1px solid #000; 7 border-radius: 12px; 8 overflow: hidden; 9 box-shadow: 0 0 15px rgba(0, 0, 0, 0.05); 10 position: relative; 11} 12 13.container .title { 14 font-size: 2rem; 15 font-weight: 500; 16 color: #333; 17} 18 19.container .price { 20 color: #40B3A2; 21 font-weight: 700; 22 font-size: 2.2rem; 23 margin: 10px 0; 24} 25 26.container span { 27 font-size: 1.2rem; 28} 29 30.container .description { 31 color: #3b3b3b; 32 font-size: 1.1rem; 33 margin: 10px 0 10px; 34} 35 36.container .offer { 37 display: block; 38 color: #555; 39 font-size: 1rem; 40 margin-top: 10px; 41} 42 43.subscribe-button { 44 display: inline-block; 45 padding: 5px 0; 46 background-color: #40B3A2; 47 color: #fff; 48 text-decoration: none; 49 border: 1px solid #000; 50 border-radius: 30px; 51 font-size: 1.2rem; 52 margin-top: 20px; 53 width: 50%; 54 font-weight: 500; 55 transition: 0.2s ease; 56} 57 58.subscribe-button:hover { 59 opacity: .85; 60} 61 62.ribbon-wrap { 63 width: 80px; 64 height: 80px; 65 position: absolute; 66 top: -20px; 67 left: 50px; 68 pointer-events: none; 69} 70 71.ribbon { 72 width: 200px; 73 font-size: 0.8rem; 74 text-align: center; 75 padding: 4px 0; 76 border: 1px solid #000; 77 background: #40B3A2; 78 color: #fff; 79 position: absolute; 80 transform: rotate(-45deg); 81 right: -10px; 82 top: 55%; 83}
445 views
445 views
MIT License