Four card feature section

Hi Chandra Mouli Kunche, how are you?

I really liked the result of your project, but I have some tips that I think you will enjoy:

• To improve the accessibility of the project you could have put an h1. Every page must contain a level 1 header, for people who use screen readers, identity what the main title is.
• Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.
• To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

Example:

body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

The rest is great!

I hope it helps... 👍

Hey there! 👋 Here are some suggestions to help improve your code:

• To center you content to your page, add the following to your Body Element:

body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

• The .heading class should be a Header Element , to improve semantics.

• The “Reliable, efficient delivery Powered by Technology” is one single heading so the entire thing should be wrapped in a single <h1> Heading along with a Span Element.

• Along with the Blank Alt Tag, you also want to include the aria-hidden=“true” to your icons to fully remove them from assistive technology.

• Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout; it will give you full control of the layout.

• Add a third layout to make the transition from mobile 📱 -> desktop 🖥 views smoother.

Here is an example of how it works: EXAMPLE

• Implement a Mobile First approach 📱 > 🖥

With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.

If you have any questions or need further clarification, let me know.

Happy Coding! 👻🎃