https://github.com/alizayayesha/typography-by--building-a-nutrition-label

creating a nutrition label https://alizayayesha.github.io/Typography-by--building-a-nutrition-label/
https://github.com/alizayayesha/typography-by--building-a-nutrition-label

css css3 html htnl5

Last synced: 2 months ago
JSON representation

creating a nutrition label https://alizayayesha.github.io/Typography-by--building-a-nutrition-label/

• Host: GitHub
• URL: https://github.com/alizayayesha/typography-by--building-a-nutrition-label
• Owner: AlizayAyesha
• License: mit
• Created: 2024-05-16T01:15:30.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-06-22T01:06:57.000Z (12 months ago)
• Last Synced: 2025-03-24T08:05:14.844Z (3 months ago)
• Topics: css, css3, html, htnl5
• Language: HTML
• Homepage: https://alizayayesha.github.io/Typography-by--building-a-nutrition-label/
• Size: 8.79 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Typography-by--building-a-nutrition-label

This project demonstrates the application of typography principles by creating a nutrition label using HTML and CSS. Through structured HTML markup and carefully styled CSS, the project showcases how typography can enhance the readability and visual appeal of web content.




# Features

Structured HTML: The HTML file defines the structure of the nutrition label, organizing information such as serving size, calorie content, and daily values.

Styling with CSS: CSS styles are applied to HTML elements to ensure consistent typography, spacing, and visual hierarchy throughout the label.

Custom Divider Styles: Custom CSS classes define different divider styles, adding visual interest and separating sections of the label.


**Clear Visual Hierarchy:** The use of font weight, size, and spacing creates a clear visual hierarchy, making it easy for users to navigate and understand the label.




**Responsive Design:** The label is designed to be responsive, ensuring optimal viewing experience across different screen sizes and devices.

Preview




**Usage**

To view the nutrition label, simply open the index.html file in a web browser. You can also explore the HTML and CSS files to understand how the label is structured and styled.




**Results**

You can also see the results here

![image](https://github.com/AlizayAyesha/Typography-by--building-a-nutrition-label/assets/68489612/017f5f9e-3ba3-4736-99fb-72a25a04f946)




**Credits**

This project is inspired by Typography-by-building-a-nutrition-label tutorial.




**License**

This project is licensed under the MIT License.