H0bG0blin9g
@H0bG0blin9gAll comments
- @H0bG0blin9g@H0bG0blin9g
I had a "quick" go at getting the background circles, but I can say that it was not easy as it took me atleast 30 mins to have something reasonable albeit off. This clearly shows the need to look into the various ways of positioning of elements.
I will look at the solutions from the other member, but would appreciate any insights into where I made a mistake in the positioning of the circles.
also what would be the best fix for the errors that appear? Is it wrong to put a <section> inside of a <main>? (it must be since it has produced an error right?! lol)
- @H0bG0blin9g@H0bG0blin9g
Oops, I missed adding some padding between the button and text for the desktop version.
Also for some reason, the last card on the desktop version in this solutions screenshot is bigger than the other cards, but that is not the case on the actual preview site - seems like a bug during the formation of the screenshot?
- @soransh-singh@H0bG0blin9g
Nice! I like the animation on the music icon. Also looking at your code, it is much more concise and cleaner than mine. Hopefully I will get better at writing code more efficiently with more practice.
- @uvapaza@H0bG0blin9g
Try and add shadows to the primary button and the card itself. That took me quite some time to get close to the design. The CSS property is box-shadow.
Marked as helpful - @H0bG0blin9g@H0bG0blin9g
I had a couple landmark issues, one being <html lang='en'> and then one against one of my divs (but not against it's other sibling div??), but when I added the 'role="main"' against one of the card divs, it cleared all the landmark accessibility issues except that which is against the div with the class "attribution" which is there when you download the file.
Not sure why that is the case - both for clearing the landmark issues against the other divs and for not clearing the landmark issue agains the last div.What would I add to this to clear the accessibility issue on the last div? Just give it any role name?