A simple HTML/CSS project that implements a 3-column preview card component with hover states for interactive elements.

• My Process
• Built With
• What I Learned
• Preview
• Live Demo

I designed and built this project to practice my HTML and CSS skills. The main goal was to create a responsive 3-column preview card component with hover states for interactive elements.

• Semantic HTML5 markup
• CSS custom properties
• Flexbox for layout

During the project, I honed my skills in:

• Utilizing Google Fonts with the @import rule to style text uniquely.
• Implementing consistent box sizing using box-sizing: border-box;.
• Creating layouts with Flexbox, ensuring alignment and responsiveness.
• Applying color schemes using HSL values for a vibrant design.
• Enhancing interactivity with smooth hover effects using CSS transitions.
• Prioritizing mobile-first design and using relative units for responsiveness.
• Perfecting typography with properties like font-family, font-size, and text-transform.

This project provided hands-on experience with modern CSS techniques, reinforcing my understanding of web development essentials.

You can see the live demo of this project here.