#e8e8e8
1.card { 2 max-width: 320px; 3 display: flex; 4 flex-direction: column; 5 border-radius: 1.5rem; 6 background-color: rgba(0, 0, 0, 1); 7 padding: 1.5rem; 8} 9 10.price { 11 font-size: 3rem; 12 line-height: 1; 13 font-weight: 300; 14 letter-spacing: -0.025em; 15 color: rgba(255, 255, 255, 1); 16} 17 18.lists { 19 margin-top: 2.5rem; 20 display: flex; 21 flex-direction: column; 22 grid-row-gap: 0.75rem; 23 row-gap: 0.75rem; 24 font-size: 0.875rem; 25 line-height: 1.25rem; 26 color: rgba(255, 255, 255, 1); 27} 28 29.list { 30 display: flex; 31 align-items: center; 32} 33 34.list svg { 35 height: 1rem; 36 width: 1rem; 37} 38 39.list span { 40 margin-left: 1rem; 41} 42 43.action { 44 margin-top: 2rem; 45 width: 100%; 46 border: 2px solid rgba(255, 255, 255, 1); 47 border-radius: 9999px; 48 background-color: rgba(255, 255, 255, 1); 49 padding: 0.625rem 1.5rem; 50 text-align: center; 51 font-size: 0.875rem; 52 line-height: 1.25rem; 53 color: rgba(0, 0, 0, 1); 54 outline: none; 55 transition: all .2s ease; 56} 57 58.action:hover { 59 color: rgba(255, 255, 255, 1); 60 background-color: transparent; 61}
984 views
984 views
Comments
Variations
1 MIT License