188 views
CSS
1.pack_card { 2 position: relative; 3 display: flex; 4 flex-direction: column; 5 border-radius: 0.5rem; 6 border: 2px solid rgb(99 102 241); 7 padding: 1.5rem 1rem 1rem 1rem; 8 margin-top: 1rem; 9 background-color: #fff; 10 max-width: 300px; 11} 12 13.banner { 14 position: absolute; 15 left: 0px; 16 right: 0px; 17 top: -2rem; 18 display: flex; 19 justify-content: center; 20} 21 22.banner_tag { 23 display: flex; 24 height: 1.5rem; 25 align-items: center; 26 justify-content: center; 27 border-radius: 9999px; 28 background-color: rgb(99 102 241); 29 padding: 0.25rem 0.75rem; 30 font-size: 0.75rem; 31 line-height: 1rem; 32 font-weight: 700; 33 text-transform: uppercase; 34 letter-spacing: 0.1em; 35 color: #fff; 36} 37 38.pack_name { 39 margin-bottom: 0.5rem; 40 text-align: center; 41 font-size: 1.5rem; 42 line-height: 2rem; 43 font-weight: 700; 44 color: rgb(31 41 55 ); 45} 46 47.description { 48 margin: 0 auto 2rem auto; 49 text-align: center; 50 color: rgb(107 114 128 ); 51} 52 53.lists > :not([hidden]) ~ :not([hidden]) { 54 margin-top: 0.5rem; 55} 56 57.list { 58 display: flex; 59 gap: 0.5rem; 60} 61 62.list svg { 63 height: 1.5rem; 64 width: 1.5rem; 65 flex-shrink: 0; 66 color: rgb(99 102 241 ); 67} 68 69.list span { 70 color: rgb( 75 85 99 ); 71} 72 73.bottom { 74 margin-top: auto; 75 display: flex; 76 flex-direction: column; 77 gap: 2rem; 78} 79 80.price_container { 81 display: flex; 82 align-items: flex-end; 83 justify-content: center; 84 gap: 0.25rem; 85} 86 87.devise { 88 align-self: flex-start; 89 color: rgb( 75 85 99 ); 90} 91 92.price { 93 font-size: 2.25rem; 94 line-height: 2.5rem; 95 font-weight: 700; 96 color: rgb(31 41 55 ); 97} 98 99.date { 100 color: rgb(107 114 128 ); 101} 102 103.btn { 104 display: block; 105 border-radius: 0.5rem; 106 background-color: rgb(99 102 241 ); 107 padding: 0.75rem 2rem; 108 text-align: center; 109 font-size: 0.875rem; 110 line-height: 1.25rem; 111 font-weight: 600; 112 color: #fff; 113 outline: 2px solid transparent; 114 outline-offset: 2px; 115 transition: all .1s cubic-bezier(0.4, 0, 0.2, 1); 116} 117 118.btn:hover { 119 background-color: rgb(79 70 229 ); 120} 121 122.btn:active { 123 background-color: rgb(67 56 202 ); 124}
HTML
1<div class="pack_card"> 2 <div class="banner"> 3 <span class="banner_tag">most popular</span> 4 </div> 5 <div class="pack_name">Team</div> 6 7 <p class="description">Avanced feaures for Individuals and organizations</p> 8 9 <div class="lists"> 10 <div class="list"> 11 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 12 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> 13 </svg> 14 <span>Unlimited file storage</span> 15 </div> 16 <div class="list"> 17 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 18 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> 19 </svg> 20 <span>10 GB bandwidth per month</span> 21 </div> 22 <div class="list"> 23 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 24 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> 25 </svg> 26 27 <span>10.000 tasks per month</span> 28 </div> 29 <div class="list"> 30 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 31 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> 32 </svg> 33 34 <span>Email support</span> 35 </div> 36 <div class="list"> 37 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 38 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> 39 </svg> 40 41 <span>100 Webhooks</span> 42 </div> 43 44 </div> 45 <div class="bottom"> 46 <div class="price_container"> 47 <span class="devise">$</span> 48 <span class="price">19</span> 49 <span class="date">/month</span> 50 </div> 51 <a class="btn" href="#">Continue with Team</a> 52 </div> 53 </div>