Hello there!
This is probably the first project in which I truly encountered some difficulty when it came to modifying SVG files with CSS. A lot of trial and error but in the end it proved an interesting experience.
As usual, any feedback and advice is always welcomed! ^^
Soo I keep getting this accesibility error:
Ensures landmarks are unique
Context:
<nav class="header__nav-list">
I tried looking this up but I'm not sure I get what the issue is. Is it due to the class name I gave it? If so... what is the best way to solve this without having to drop the name since I used the BEM methodology and SASS so this would force me to redo some class name which I'm not looking forward to honestly.
Any help would be appreciated!
Hi there! Thanks for viewing my solution. I have a few questions.
1 - When do I use background image instead of a HTML img tag, (or even a pseudo element) to render an image? I tried experimenting the woman image and settled with a background image in desktop view and img tag for mobile.
2 - How do I prevent absolute position elements from moving when the accordion opens and closes?
3 - How do I centralise my entire layout with absolute positioned elements?
4 - How may I improve on my code?
Thanks!
Heya, nice design! Regarding your img vs background-image, I'm gonna post below one of the best answers I could find after a google search. Hope it helps!
"Use the HTML IMG tag when you want the image to be a part of the content in the regular page flow. Use the IMG tag if you want the image to be included when users print the page. Use the HTML IMG tag when you want the image to be indexed by google (with alt text inclusion).
Use the CSS background-image property when the image is not part of the regular page flow, and in instances where only a portion of the image shows up on the page and is used for more decorative purposes. Use the CSS background-image property when you don't want images on your page to print. Use the CSS background-image property if you need to improve image download times (as with CSS sprites). Use the CSS background-image property if you are using the image for animations or rollover states." ~ Edward M.
Hi! How to make the appearing text appear smoothly without "jumping"?
Heya, I think if you use "transition: height" property in the active content you might get a smooth result.
Hope it works!
EDITED: Just took a closer look at your code and noticed you already used the transition property, my bad! I'm not sure what the problem is exactly since your arrow uses the same properties and is working properly.
Hello! I would like some feedback when it comes to semantic html. I was not sure on what to use so I went with spans and divs instead, or is a semantic approach unnecessary?
Heya, just wanted to say that your design looks really spot on! I'm not very experienced but I don't think you need traditional semantic html for such a challenge but that's just my two cents. Overall I wanted to say that your design it looks awesome and your code also gave me some new insight on how to properly place those two circles in the background, so... thanks! ^^'
