#e8e8e8
1.pack-container { 2 position: relative; 3 display: flex; 4 max-width: 350px; 5 flex-direction: column; 6 border-radius: 12px; 7 background-color: #212121; 8 border: 1px solid #fff; 9 padding: 1.6rem; 10 color: #fff; 11 box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); 12} 13 14.header { 15 position: relative; 16 margin: 0; 17 margin-bottom: 2rem; 18 overflow: hidden; 19 border-radius: 0; 20 border-bottom: 1px solid #fff; 21 background: transparent; 22 padding-bottom: 1rem; 23 text-align: center; 24} 25 26.title { 27 display: block; 28 font-family: sans-serif; 29 font-size: 0.875rem; 30 line-height: 1.25rem; 31 text-transform: uppercase; 32 color: #fff 33} 34 35.price-container { 36 margin-top: 10px; 37 display: flex; 38 justify-content: center; 39 align-items: flex-start; 40 gap: 4px; 41 font-family: sans-serif; 42 font-size: 4.5rem; 43 line-height: 1; 44} 45 46.price-container span:first-child { 47 margin-top: 10px; 48 font-size: 2.25rem; 49 line-height: 2.5rem; 50} 51 52.price-container span:last-child { 53 align-self: flex-end; 54 font-size: 2.25rem; 55 line-height: 2.5rem; 56} 57 58.lists { 59 display: flex; 60 flex-direction: column; 61 gap: 8px; 62} 63 64.list { 65 display: flex; 66 align-items: center; 67 gap: 10px; 68} 69 70.list span { 71 border-radius: 50%; 72 border: 1px solid rgba(255, 255, 255, 0.24); 73 background-color: rgba(255, 255, 255, 0.185); 74 height: 30px; 75 width: 30px; 76 display: flex; 77 align-items: center; 78 justify-content: center; 79} 80 81.list span svg { 82 height: 12px; 83 width: 12px; 84} 85 86.list p { 87 display: block; 88 font-family: sans-serif; 89} 90 91.button-container { 92 margin-top: 20px; 93 padding: 0; 94} 95 96.button-container button { 97 display: block; 98 width: 100%; 99 background-color: #fff; 100 padding: 10px 20px; 101 text-transform: uppercase; 102 color: #000; 103 outline: 0; 104 border: 0; 105 border-radius: 10px; 106}
1.6K views
1.6K views
Comments
MIT License