2.2K views
1.card { 2 max-width: 300px; 3 border-radius: 0.5rem; 4 background-color: #fff; 5 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); 6 border: 1px solid transparent; 7} 8 9.content { 10 padding: 1.1rem; 11} 12 13.image { 14 object-fit: cover; 15 width: 100%; 16 height: 150px; 17 background-color: rgb(239, 205, 255); 18} 19 20.title { 21 color: #111827; 22 font-size: 1.125rem; 23 line-height: 1.75rem; 24 font-weight: 600; 25} 26 27.desc { 28 margin-top: 0.5rem; 29 color: #6B7280; 30 font-size: 0.875rem; 31 line-height: 1.25rem; 32} 33 34.action { 35 display: inline-flex; 36 margin-top: 1rem; 37 color: #ffffff; 38 font-size: 0.875rem; 39 line-height: 1.25rem; 40 font-weight: 500; 41 align-items: center; 42 gap: 0.25rem; 43 background-color: #2563EB; 44 padding: 4px 8px; 45 border-radius: 4px; 46} 47 48.action span { 49 transition: .3s ease; 50} 51 52.action:hover span { 53 transform: translateX(4px); 54} 55
MIT License