All solutions

I had two issues :

• The first was that the page works properly for sizes up to 1440px. After that, the image is too small to properly cover its portion of the container. Is there a way to fix this?
• The second issue I encounter was with form validation. I tried looking online at examples but struggled to find a good example. What are some things you would typically implement to validate a form in JS.

Any help would be greatly appreciated. Thank you in advance!

When uploading the site, I realized that the project doesn't display properly on safari. I assume it's a difference in how the browser renders it because it works in chrome. I couldn't figure out what was causing the difference. If any of you know what I can do please let me know! Learning about the process others go through to troubleshoot would also be a great help, so I would love to hear that too! Thanks in advance.

I used relative and absolute positioning in order to get the profile picture where I intended it to be. What other methods can be used to achieve this effect?

I was unable to get the image to properly fill the area in the widths between 375px and 1440px. Does anyone know of a solution to this issue?

Thanks in advance for any help! It's greatly appreciated.

• The gap between the NFT name and the description is a bit larger than the example image's. I tried editing the gap, but I think it has something to do with the line height. If you have any advice on how to make it reflect the example more, please let me know.

Thanks in advance! I appreciate all feedback

• Is there a way to style or move the required notification that appears if you try to submit the form without a rating selected?
• I was having trouble wrapping my project in a main element without having it affect the height of the component. Can you help me understand why?

Thanks in advance to anyone taking the time to review my project!

Your input is greatly appreciated.

• The main thing I would like to improve on is making my HTML more semantic. Anyone have any tips on how I can improve my HTML?

I would appreciate any other advice to improve. I'm always looking to learn!

• In this project, I struggled to keep my css styles organized and I struggled to keep my class names intuitive. Would anyone have any suggestions on how to remedy these issues?
• I would like to know how I can change my HTML to be more semantic. Ive always wanted to venture into that, but was always unsure of what containers should be semantic. Any help with that would be greatly appreciated.
• What concerned me the most in this project was how i handled the price plan component. I used a flex container and spaced them as two flex items by wrapping the icon and plan price in a span. Is there a better way of doing this?
• The final thing I was worried about was about how I selected certain elements. For some things I used very specific element selectors, and I was wondering if that is bad. Would it be better to give those individual elements a class and select it that way? Heres an example of what I did.

.sub-card__plan span p:nth-of-type(2){
    font-weight: 500;
    color: var(--color-desaturatedBlue);
}

I was wondering what was the best approach to styling an element. The method I usually see is to give it a class, and select it in css using the class name. Is this the normal way of doing it?

I was also wondering if there were any other things I could've done better. I would like to know if there were any practices I didn't use that are recommended.

Any other tips would be greatly appreciated.