Any best practices for the CSS for making the green share div float above the button in desktop mode, but without introducing a complex series of positioned elements that would break the mobile view!
Any insights welcome, but nothing specific comes to mind for now.
I tried using https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web and mirroring
It might be something to do with viewboxes I feel, but I can't quite figure out how to use the with the svg as src in this case - any help would be much appreciated :)
I've read the MDN docs, and my take home understanding is is used for something "standalone" and/or reusable. is more for highlighting a non-standalone area or group of items (or basically when a more specific element isn't available). is use purely when styling needs to be added to a block. I'd be grateful for any mental models people have found helpful for when to use one or the other.
I need to read into tab index and aria more. Any advice on helping make it more keyboard accessible appreciated :)
I have always used BEM or CSS in JS. I enjoyed getting to know CubeCSS and thinking about atomics at the CSS level instead of components
What challenges did you encounter, and how did you overcome them?Understand CubeCSS layering. The challenge was to apply this structure on a simple screen.
What specific areas of your project would you like help with?HTML semantics and the use of CubeCss
THank you - this really helped me see how one could structure CSS using Cube.
Fantastic! This was a real inspiration for me, such as the ::after for the little diamond part. Your code is also so concise and clear :)
completing the circles with the verticle line in the design was a good task!
What challenges did you encounter, and how did you overcome them?no massive challenges, but the vertical line wasnt as easy as i thought it would be!
What specific areas of your project would you like help with?im not a huge fan of the responsiveness of the hero section on the large screen size, any suggestions welcome.
nice - though I think something's not quite loading right on the live link at https://frontend-mentour-challenges.vercel.app/html-css/meet-landing-page/?
Im proud that I finally know how to set the grid layout.
What challenges did you encounter, and how did you overcome them?Sometimes the section is out from the grid. So, I need to set the width of container using rem unit. Also, It is hard to be precise on the section's padding and size.
What specific areas of your project would you like help with?More on how to set the size correctly
Very nice solution! I think your section is fitting nicely in the grid
I'm most proud that I have created a nice-looking responsive design using flex-box.
What challenges did you encounter, and how did you overcome them?I faced challenges related to team-builder and karma card, so I've bundled those two cards into a div that would adapt to the design.
Nice solution!
I wonder if grid-template-areas might be an alternative way to do this and only need one grid, rather than nested grids/flex boxes? You could have all .cardSection as a grid, and the grid-template-areas might relate to each of the cards, with the "cross" design for desktop and the stacked design for mobile?
Nice solution!
I wonder if for <p> PERFUME</p> there's any merit in leaving the HTML as the original 'Perfume' and use text-transform: uppercase instead?
