📦 Overview
This project is a 3-Column Preview Card Component that displays three different types of vehicles — Sedans, SUVs, and Luxury cars. Each card highlights the key features of each vehicle type and includes a call-to-action button. The design is responsive and adjusts for smaller screens using media queries.
✅ The Challenge
Create a 3-column layout that adjusts to different screen sizes. Apply distinct background colors to each card to differentiate them. Implement hover effects for the buttons to enhance user interaction. Ensure the layout remains visually appealing and functional on smaller screens.
📸 Screenshot
✅ My Process
File Structure and Organization:
The project is structured using a single CSS file with BEM-style class names for clarity and modularity.
HTML Structure:
Each card is structured as a <article> element, allowing for clear separation and semantic organization.
Images are included using <img> elements with appropriate alt attributes for accessibility.
CSS Styling:
Applied CSS variables for colors, fonts, and spacing to maintain a consistent design. Used Flexbox for aligning the cards horizontally and vertically. Implemented hover effects on buttons to provide interactive feedback to the user.
Responsive Design:
Implemented a media query to stack the cards vertically on screens smaller than 795px, maintaining a clean layout. Adjusted border-radius properties to maintain smooth corners on both desktop and mobile views.
🛠️ Built With
Semantic HTML5
CSS Flexbox CSS Variables Responsive Design Techniques Google Fonts (Big Shoulders & Lexend Deca)
🚀 What I Learned
How to effectively use CSS Flexbox to create a horizontally aligned card layout.
Applying CSS variables for scalable and maintainable design tokens.
Implementing hover effects to enhance user interaction without JavaScript.
Managing responsive layouts using media queries to adjust the structure for different screen sizes.
Structuring components using semantic HTML elements such as <article> for better accessibility and content organization.
🔄 Continued Development
Enhance the hover effect on buttons with smooth transitions for a better user experience. Add subtle animations to the cards to make the content more engaging. Implement a dark mode toggle to accommodate user preferences. Consider using CSS Grid for more complex layouts and additional responsiveness. Optimize images for better loading performance.