/html-css-styles-part1

HTML/CSS for creating and styling different web page layouts

Primary LanguageHTMLMIT LicenseMIT

HTML and CSS - Part 1

Font Awesome CSS HTML

This is a project for Front-End Technologies May 2024 Course @ SoftUni


Table of Contents

  1. Fruits
  2. Wiki Page
  3. To Do List
  4. Navigation Bar
  5. Page Content
  6. Semantic Blog Layout
  7. Restaurant Menu
  8. List Styling
  9. Table Styling
  10. Button Styling
  11. Font Awesome Integration
  12. Icon Font Buttons
  13. License
  14. Contact

1. Fruits

A simple webpage with a clean and organized layout. The page features a large heading at the top, followed by three neatly spaced paragraphs. Each paragraph contains five images of different fruits, arranged in a grid-like format.

2. Wiki Page

A well-structured page dedicated to the brown bear. The page begins with a bold heading, followed by a few paragraphs of text. There's a clear hyperlink to the Wikipedia page for more information. The page also includes an image of a brown bear, accompanied by ordered and unordered lists that add variety to the content.

3. To Do List

A centered, compact container with a pastel yellow background. The container has a subtle shadow and rounded corners, giving it a modern look. Inside, there’s a title, a brief description, and an ordered list of tasks, all styled with simple and clean typography.

4. Navigation Bar

A page with a dark-themed navigation bar that contrasts against a light gray background. The navigation bar features evenly spaced menu items in white text, styled in a large, easy-to-read font. The menu items are horizontally aligned, with a hover effect that subtly changes their color or background.

5. Page Content

A content-rich webpage with clearly defined sections. The layout includes a large header with a bold title, followed by a few articles that have different background colors. Each section is separated by a thin border, and the content is organized in a way that’s easy to read and visually appealing.

6. Semantic Blog Layout

A blog-style webpage with a clean, modern design. The page includes a prominent header and a navigation menu, followed by two main sections. Each section contains two articles with a title, text, and perhaps an image. The footer at the bottom ties everything together, providing closure to the content.

CSS Styling

  • Style for header, nav, sections, articles, and footer

7. Restaurant Menu

A stylish and minimalistic page that showcases a restaurant menu. The menu items are listed under clear headings, with the name of each dish in bold, followed by a description in smaller text. The use of fonts and colors is elegant, making the page feel upscale and inviting.

8. List Styling

A simple and functional webpage with a light gray background. The page features a large, underlined heading, followed by a list of items. The list items are indented slightly, giving them a neat, organized appearance. The font is clean and modern, making the content easy to scan.

9. Table Styling

A straightforward and organized page featuring a well-styled table. The table has a professional look, with light blue headers and neatly bordered cells. The text inside the table is centered and easy to read, making it suitable for displaying data in a clear and concise manner.

10. Button Styling

A page focused on showcasing different button styles. The page features a variety of buttons in different colors (green, white, gray) and styles (filled, outlined, with hover effects). The buttons are arranged in a grid, allowing for easy comparison of their styles and effects.

11. Font Awesome Integration

A page that incorporates FontAwesome icons into a navigation menu and various other elements. The icons add a modern touch to the design, and are used alongside text in the menu and buttons, providing a visually appealing and functional layout.

12. Icon Font Buttons

A page featuring buttons styled with FontAwesome icons. The buttons have bold background colors and change appearance when hovered over. The use of icons adds visual interest and functionality, making the buttons both attractive and easy to use.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

For any questions or suggestions, please open an issue in the repository.