Header Styling: Designed the header to be flexible and responsive. It includes:
A left-aligned heading and paragraph with the main call-to-action button styled for hover effects.
An image on the right side that adjusts with screen size.
Flexbox applied for layout and media query support for mobile devices.
Main Section:
Centered the main heading and styled it with spacing for readability.
Created a card container with interactive cards that change color and scale on hover, enhancing user engagement.
Footer: Styled the footer with a fixed position at the bottom, ensuring it's always visible. Color and text alignment are managed for clarity.
Font Variations:
Added specific font styles for 'PT Sans', 'PT Serif', 'Nunito', and 'Nunito Sans' with different weights (normal, bold, italic). This allows easy application of different font variants across headings, paragraphs, and other text elements.
Responsive Media Queries:
For tablets (up to 768px): Adjusted header layout to stack vertically and center content for better readability. The card container now stacks the cards vertically for easier access.
For mobile devices (up to 576px): Further reduced padding, font sizes, and card dimensions for better usability on smaller screens.
For larger screens (above 1200px): Increased padding and font size for a more spacious layout, providing a cleaner look on bigger displays.
Header Styling: Designed the header to be flexible and responsive. It includes:
Main Section:
Footer: Styled the footer with a fixed position at the bottom, ensuring it's always visible. Color and text alignment are managed for clarity.
Font Variations:
Responsive Media Queries: