یک کارت اطلاعاتی ساده شامل تصویر بالایی، عنوان، متن خلاصه و یک دکمه اقدام بسازید و با CSS آن را با گوشه‌های گرد، سایه، فضای داخلی مناسب و افکت hover قابل‌لمس کنید به‌طوری که در صفحه‌های کوچک عرض کامل بگیرد.

برای حل این مسئله، ساختار HTML ساده‌ای با کلاس‌هایی مانند .card, .card-img, .card-body و .card-footer در نظر بگیرید و با CSS ویژگی‌هایی مثل border-radius، box-shadow، padding و background-color را تنظیم کنید. برای تصویر از width:100% و object-fit:cover استفاده کنید، برای افکت شناور از transition و transform: translateY(-...) یا افزایش شدت box-shadow در حالت :hover بهره ببرید و با @media (max-width: ...) حداکثرعرض کارت را به 100% تغییر دهید تا در موبایل کامل گسترده شود؛ از Flexbox برای چینش دکمه در فوتر کارت کمک بگیرید و نام‌گذاری معنادار کلاس‌ها را رعایت کنید.