Description

On the Friends page, your pet can look for animals from other countries and stay in touch with them. Information about pets is displayed on cards and can be searched using the filter.

Please use the friends.html file. As you can see from the designs, only the main content has changed, so the navbar and footer will carry on. Now, the hero section is the friends-card part, and the aside is the filter-bar part of the friends page.

In profile.html, update the navbar anchor links: friends-link should direct to new friends.html.

Similarly, in friends.html for the navbar anchor links — friends-link should direct to the current HTML file and the pet profile-link should lead to profile.html.

Pay attention to the CSS rules and the elements in the Figma designs. The element names are the ids of your HTML elements. Also, note the element structure in Figma; they hint at your HTML element structure.

The ids the other animal cards are in the friends-cards group in Figma design, like friend-card-micky.

Also, these animal friend cards should be div tags, and the elements inside the cards should have the following CSS class names respectively: profile-image, profile-name, profile-flag, profile-breed, profile-country.

The select elements throughout the project should have a padding of 8px.

Don't forget to check the assets folder for the necessary images.

The tests will only check four of the pets from the designs: Micky, Browny, Kumar, and Jamilia. You can choose to add the rest. The order and positions should be like in the designs.

Objectives

Please, take a look at the designs made in Figma. You must build only the design from Stage 3: Friends Page this time.

Example

Example 1: