Result summary page

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

DECORATIVE SVG'S ♨️:

• The alt attribute is used to provide alternative text for images in HTML documents. The alt attribute is used by screen readers to describe the image to visually impaired users, which is essential for web accessibility.

• Now, when it comes to decorative SVGs, they are used purely for aesthetic purposes and do not convey any important information or functionality to the user.

• Since these images do not convey any important information or functionality, there is no need for an alt attribute.

• So feel free to set the alt attribute as "" for decorative svg's, because alt="" will be skipped by screen readers they will consider the image as decoration

Example:

<img src="images/decorative.svg" alt="">

<img class="logo" src="./assets/images/icon-reaction.svg" alt="icon-reaction">
👇
<img class="logo" src="./assets/images/icon-reaction.svg" alt="">

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Hi Dilshad,

Your end result came out great, I will try and help you with some of your questions:

1. Applying hover effect to divs and button:

In order to apply a hover effect to div/buttons you must make sure to target the element with the correct css selector along with providing the pseudo-class :hover, in your case it should be:

button:hover {
/* Replace this comment with desired styles, these styles
will apply once your mouse enters the view of the button */
}

For more info on pseudo-class elements

2.Making the webpage responsive for mobile view:

Try taking the mobile first approach when developing websites/components. I will give you an example using media queries, the following should be your styles.css file:

/* This will be default styling for the mobile */
main {
display: flex;
flex-direction: column;
}

@media only screen and (min-width: 768px) {
/* The styles in this media query will only apply once 
the screen size goes past 768px and upwards and
will overwrite any styles apply to the main element */

main {
flex-direction: row;
}
}

To add to this:

• Do not use fixed width/heights when applying styles (only in some occasions). Use min-width max-width along with percentages, what will happen if I hard code main's width to 800px and we view it on a mobile device?
• Setting heights to element is not recommended unless you know it will not grow in size, by setting a fixed height your content may overflow.
• Keep in mind some html elements are already responsive to some extent such a <p> tags

This is a great resource to help you learn the basics of responsive design.

I hope this points you into the right direction.

I've looked at your page and couldn't see what "divs" you were talking about , but for the button part, I've added this to the end of your CSS and it seems to be working.

button:hover {
cursor: pointer;
background-image: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));
}