Card by Yaya12085
#e8e8e8
1.card { 2 overflow: hidden; 3 border-radius: 0.5rem; 4 max-width: 300px; 5 background-color: #fff; 6 color: #212121; 7} 8 9.image { 10 height: 8rem; 11 width: 100%; 12 object-fit: cover; 13 background-color: rgb(204, 0, 255); 14 background-image: linear-gradient(to right, rgb(255, 174, 0), rgb(204, 0, 255)); 15} 16 17.content { 18 padding: 1rem; 19 text-align: center; 20} 21 22.text-1 { 23 font-size: 0.875rem; 24 line-height: 1.25rem; 25 font-weight: 600; 26 letter-spacing: 0.1em; 27 text-transform: uppercase; 28} 29 30.text-2 { 31 margin-top: 1rem; 32 font-weight: 900; 33 text-transform: uppercase; 34} 35 36.text-2 span:first-child { 37 font-size: 2.25rem; 38 line-height: 2.5rem; 39 font-weight: 900; 40} 41 42.text-2 span:last-child { 43 margin-top: 0.5rem; 44 display: block; 45 font-size: 0.875rem; 46 line-height: 1.25rem; 47} 48 49.action { 50 margin-top: 1rem; 51 display: inline-block; 52 width: 100%; 53 background-color: rgb(0, 0, 0); 54 padding-top: 1rem; 55 padding-bottom: 1rem; 56 border-radius: 4px; 57 font-size: 0.875rem; 58 line-height: 1.25rem; 59 font-weight: 700; 60 letter-spacing: 0.1em; 61 text-transform: uppercase; 62 color: rgba(255, 255, 255, 1); 63 text-decoration: none; 64} 65 66.date { 67 margin-top: 1rem; 68 font-size: 0.75rem; 69 line-height: 1rem; 70 font-weight: 500; 71 text-transform: uppercase; 72 color: rgba(156, 163, 175, 1); 73}
718 views
718 views
Comments
MIT License