Product Preview

This CSS project is focused on creating a visually appealing and responsive webpage design. Custom fonts, "Montserrat" and "Fraunces," are incorporated using the @font-face rule. The color scheme is established using CSS variables for easy management.

The layout consists of a centered display, both vertically and horizontally, achieved through flex properties. The main content is structured within a "main" element, maintaining centered alignment.

The project closely follows the provided design mockup. The left section of the webpage features a background image ("image-product-desktop.jpg") positioned at the center and scaled to cover the container. The right section uses a grid layout to organize content, ensuring a balanced presentation on different screen sizes.

Various CSS properties are applied for consistent typography, spacing, and styling. The textual content includes a "Perfume" label, product name, description, price display (with a discounted price highlighted), and an "Add to Cart" button. Styling elements like rounded corners, hover effects, and font weights contribute to the overall visual appeal.

The project also takes responsiveness into account with a media query that adjusts the layout for screens with a maximum width of 572px. In this case, the container width is reduced, and the background image is switched to "image-product-mobile.jpg" to accommodate smaller devices.

In summary, this CSS project successfully recreates the provided design by employing custom fonts, CSS variables, and responsive techniques. It carefully styles elements to match the mockup and ensures a visually consistent and user-friendly experience across different screen sizes.