@SzymonRojek
Posted
Hi Bals,
I have checked mainly your HTML structure, a few tips from me:
- this is a single page component so you can add the h1 tag, for example Victor Crest;
- alt text => don't need to use words like picture or image, photo, icons in the alt text as it's already announced as being an image;
- check your HTML issue report and try to fix it;
- card-footer: instead of it you can use ul > li;
- generally applying semantic tags is not very easy because there is a chance that we can overuse them. In this solution probably I would do the header tag, and footer but it is not necessary here;
- the circles are a bit tricky in this challenge: I have used pseudo-elements, position absolute, vw and vh, background url, transform translate and @media. In your solution they are not very stable on different devices, for example Iphone X => check your project by the inspector in your browser.
- check the footer (should be in the middle of a page).
Greetings :D
@pbalasnoa
Posted
Hi @SzymonRojek,
Thank you very much for your feedback, I will take your comments into account to improve my code.
What you mentioned about the challenge with the circles could you share more information to me to have a stable code in different devices.
thanks and greetings ✌😊
@SzymonRojek
Posted
@pbalasnoa
I was checking your solution in my browser by the inspector and on different mobiles the circles ran in opposite directions far from the main content. I have used pseudo-elements ::before (top circle) and ::after (bottom circle), position absolute, 100vh and 100vw, background-size auto, transform translate (-50%, -50%), playing with top and left and finally @media (just set top and left for ::before and ::after) => my solution is not the best but works.
Hopefully it will help you :D
Let me know.