Project :- Style "Habesh Foods"  

Project Goal:

Now that you have learned CSS, it's time to make the Habesh Foods website look beautiful, modern, and user-friendly! Your task is to style the existing HTML structure using CSS.

Project Requirements:

1, Organizing Your Project Files

• Inside your project folder (habesh-foods-website), create a new folder named css.

• Inside the CSS folder, create a file named style.css.

• Link the style.css file to your HTML document.

2, General Page Styling (Apply to the Whole Website)

• Set a beautiful font using Google Fonts (e.g., "Poppins", "Montserrat", or "Roboto").

•  Apply a background color or a subtle background image for a warm, inviting feel. 

•  Make sure all text has enough contrast for readability.

•  Center content and add padding for better spacing.

3, Header & Navigation Styling

•  Add a navigation bar (navbar) at the top of the page with links for each section (About, Menu, Gallery, Contact).

•  Style the navbar with a background color and hover effects.

•  Make the navbar sticky (always visible when scrolling).

4, Hero Section: Improve the Welcome Message

• Make the "Welcome to Habesh Foods" heading big, bold, and centered.

•  Add a background image of Ethiopian food.

•  Apply text shadow for better readability.

•  Add a "Learn More" button below the heading.

5, About & Menu Sections: Improve Layout & Text

• Use flexbox or CSS grid to position elements neatly.

•  Add a colored border or a background box for each section.

•  Use hover effects on the menu items.

6, Gallery Section: Style the Images

•  Display images side by side (grid layout).

•  Add a hover effect (zoom in slightly when hovering).

•  Add a border-radius for rounded edges.

7, Responsive Design (Mobile-Friendly) 

•  Use media queries to ensure the website looks great on small screens.

•  Adjust font sizes and make the navbar collapse into a menu icon (☰) on mobile.

Bonus Features (For Extra Practice!)

• Add animation effects (e.g., fade-in text, smooth scrolling).

• Create a styled contact form (with name, email, and message input fields).