Card by abrahamcalsin
#e8e8e8
1.plan-card { 2 background: #fff; 3 width: 15rem; 4 padding-left: 2rem; 5 padding-right: 2rem; 6 padding-top: 10px; 7 padding-bottom: 20px; 8 border-radius: 10px; 9 border-bottom: 4px solid #000446; 10 box-shadow: 0 6px 30px rgba(207, 212, 222, 0.3); 11 font-family: "Poppins", sans-serif; 12} 13 14.plan-card h2 { 15 margin-bottom: 15px; 16 font-size: 27px; 17 font-weight: 600; 18} 19 20.plan-card h2 span { 21 display: block; 22 margin-top: -4px; 23 color: #4d4d4d; 24 font-size: 12px; 25 font-weight: 400; 26} 27 28.etiquet-price { 29 position: relative; 30 background: #fdbd4a; 31 width: 14.46rem; 32 margin-left: -0.65rem; 33 padding: .2rem 1.2rem; 34 border-radius: 5px 0 0 5px; 35} 36 37.etiquet-price p { 38 margin: 0; 39 padding-top: .4rem; 40 display: flex; 41 font-size: 1.9rem; 42 font-weight: 500; 43} 44 45.etiquet-price p:before { 46 content: "$"; 47 margin-right: 5px; 48 font-size: 15px; 49 font-weight: 300; 50} 51 52.etiquet-price p:after { 53 content: "/ handle"; 54 margin-left: 5px; 55 font-size: 15px; 56 font-weight: 300; 57} 58 59.etiquet-price div { 60 position: absolute; 61 bottom: -23px; 62 right: 0px; 63 width: 0; 64 height: 0; 65 border-top: 13px solid #c58102; 66 border-bottom: 10px solid transparent; 67 border-right: 13px solid transparent; 68 z-index: -6; 69} 70 71.benefits-list { 72 margin-top: 16px; 73} 74 75.benefits-list ul { 76 padding: 0; 77 font-size: 14px; 78} 79 80.benefits-list ul li { 81 color: #4d4d4d; 82 list-style: none; 83 margin-bottom: .2rem; 84 display: flex; 85 align-items: center; 86 gap: .5rem; 87} 88 89.benefits-list ul li svg { 90 width: .9rem; 91 fill: currentColor; 92} 93 94.benefits-list ul li span { 95 font-weight: 300; 96} 97 98.button-get-plan { 99 display: flex; 100 justify-content: center; 101 margin-top: 1.2rem; 102} 103 104.button-get-plan a { 105 display: flex; 106 justify-content: center; 107 align-items: center; 108 background: #000446; 109 color: #fff; 110 padding: 10px 15px; 111 border-radius: 5px; 112 text-decoration: none; 113 font-size: .8rem; 114 letter-spacing: .05rem; 115 font-weight: 500; 116 transition: all 0.3s ease; 117} 118 119.button-get-plan a:hover { 120 transform: translateY(-3%); 121 box-shadow: 0 3px 10px rgba(207, 212, 222, 0.9); 122} 123 124.button-get-plan .svg-rocket { 125 margin-right: 10px; 126 width: .9rem; 127 fill: currentColor; 128}
4.7K views
4.7K views
MIT License