Basic webpage using CSS and HTML

Hi Akash, your card component looks pretty close to the design. I see you have only used the bg-pattern-top for the background. But what would be more accurate to the design is that you use both bg-pattern-top and bg-pattern-bottom. You can specify them as two seperate images using the img tag and then position them as specified in the design using position: fixed or position: absolute along with top, bottom, left and right to define the position.

And you can replace the width: 25vw with max-width: 25vw. Right now, the card component expands in width but the content doesn't and thus it doesn't look good on bigger screens.

Also, I think you can improve the alt-text for the images used for header and avatar. alt-text hepls users who use screen readers to know about an image, so alt-text should be descriptive. Here, the header image is used only for decorative purposes so you can use alt-text="". As the header image doesn't contribute anything to the actual content of the website we can set an empty alt-text, in this way screen readers will consider it as a decorative image and ignore it. And for the avatar, you can use something like this alt-text="Victor Crest wearing a white shirt and a black jacket" This makes your code more accessible.