Codecademy Web System - Style Guide

This project is a fictional web design that serves as a style guide for colors, fonts, and text styles used in web development. It showcases three main sections: Color Palette, Font Samples, and Text Styles. Each section is designed to help you visualize and select design elements for a web project.

Table of Contents

• Project Overview
• Features
• Installation
• Usage
• Technologies Used
• License

Project Overview

This style guide project presents a user-friendly design reference for web developers or designers to explore how different colors, fonts, and text styles look and feel on the web. The website features:

1. Navigation Bar: Links to different sections (Colors, Fonts, Text Styles).
2. Color Palette: Displays color blocks using a teal, light aqua, and amber theme.
3. Font Samples: Shows different font families with text samples, each styled with a unique background color.
4. Text Styles: Displays examples of headings (h1, h2, h3) with different styles and background colors.

Features

• Color Palette: Includes blocks for Teal, Light Aqua, and Amber with hex codes displayed.
• Font Samples: Demonstrates three different fonts (Playfair Display, Montserrat, and Lora) with sample text.
• Text Styles: Examples of h1, h2, and h3 with different background colors.
• Responsive Design: The layout is responsive and adapts to different screen sizes using flexbox.

Installation

1. Clone this repository:

   git clone https://github.com/giwpypatents/codecademy-web-system.git

2. Navigate into the project directory:

   cd codecademy-web-system

3. Open the project in your code editor or simply open the index.html file in a browser to view the design.

Usage

• Explore the Sections:

  • Navigate between the sections via the navigation bar.
  • View the Color Palette to see the colors with their hex codes.
  • Check out the Font Samples to see different fonts with a sample text for each.
  • View the Text Styles section for examples of headings (h1, h2, h3) with varying background colors.

• Customize:

  • Feel free to modify the colors, fonts, or text styles to suit your own design preferences.
  • You can replace the default fonts with any other Google Fonts by editing the links in the index.html file.

Technologies Used

• HTML5
• CSS3 (Flexbox)
• Google Fonts

License

This project is licensed under the MIT License. You are free to use, modify, and distribute this project as per the terms of the license.

---

Author

Your Name

• GitHub: giwpypatents