Developing a Food Menu Page  with Cards  and Filter

Welcome Back, Developer!

In the previous lab, you enhanced your website by adding visual sections, media elements, and an engaging layout.

• Your website now looks rich and interactive
• It has structure, styling, and engaging content

But now, your website needs something more important…

•  A core feature that users actually interact with.

When users visit a food website, they don’t just explore…

• They want to browse items, view details, and make choices.

Now it’s time to build the heart of your website…
The Menu Section

Working with a Text and List in HTML

1] Power of HTML text tags
2] Customizing your style with CSS
3] HTML Link up , attributes of tag, block vs inline elements

Open menu.html and copy entire head section from index.html keep body section empty  and change the title of page

Copy entire header section and paste into menu.html as well and all page keep same

Create menu section inside menu.html below header section 

Add heading and a division for card holder 

Create a card inside container

 Generate image from any free ai and add in images folder and card item

Style card

Add more cards

Align card using grid

Add filter section above menu section in menu.html and add filters

Add styles for filters

Make Header  section to sticky

Copy your Kit's unique embed code

Paste in head section of index.html file

Now , Select icon and copy i tag for cart and login.

Inside index.html file , paste i tag in place of text

Great work!

You can now navigate between different pages of your website. 

Before starting the next lab, make sure you revise the following topics:

• External css , css selectors (class ,id , element , Descendant selector , Pseudo-classes,Pseudo-elements,universal,image tag