This project represents a simple web page for showcasing a white coffee mug product. It consists of HTML and CSS files for creating a product card with detailed information and styling. The CSS file defines fonts, colors, and responsive design for various screen sizes.
-
index.html: This HTML file contains the structure of the webpage, including the product card and its content. -
styles.css: The CSS file provides styles for the HTML elements, including fonts, colors, and layout adjustments.
The project uses Google Fonts to include the "Fraunces" and "Montserrat" fonts for different parts of the webpage. These fonts give the page a unique and appealing typography.
Custom CSS variables, also known as CSS custom properties, are used to define consistent colors and font sizes. These variables are defined in the :root selector in the styles.css file, making it easy to maintain and modify the overall appearance of the page.
The CSS file includes media queries for different screen sizes, making the webpage responsive:
- For smaller screens: Adjusts font sizes, margins, and button padding.
- For PC & HD+ screens: Makes layout changes, displays a different image, and adjusts the product title width.
- For 4K & Full HD+ screens: Makes significant layout and font size adjustments.
You can use this project as a starting point for creating product showcase web pages. Customize the content, images, and styles to fit your own products or services. The CSS file can be modified to match your brand's visual identity.
- The project uses fonts from Google Fonts (https://fonts.google.com/).
- Initial project setup and styles were inspired by modern web design principles.
If you have any questions or need assistance with this project, feel free to contact me @ vishal.psit2213663@gmail.com .