Skip to content
Submitted 3 months ago

Product preview card using SCSS

uptown_girl•400
@uptowngirl757
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm glad I was able to troubleshoot and fix the issue with the disappearing SVG background while positioning the image. It took some research, but thanks to the internet, I found the solution!

What specific areas of your project would you like help with?

I'd love a clear explanation on how to make an <hr> really thin—height: 1px doesn’t seem to be enough. Also, I need a better understanding of positioning SVGs. The SVG in my background doesn’t quite match the target design. How can I achieve the exact look I want?

Code

Please log in to post a comment

Log in

Community feedback

  • Agata Liberska•4,075
    @AgataLiberska

    Hi, the card looks great, but I think rather than having the .profile class on main, it would be good to use a semantic element like article for the card itself, and just use main as the container. I see you're using article for the stats, I think this could just be a ul with list items. Article would be used as a container for a content piece that is a thing on its own, and the profile stats don't make sense outside of the content of the whole card. Also be careful about section tags, they mostly make sense in slightly larger projects. Think of them like sections of the page. For example, when you're looking at this page, the whole "community feedback" could be a section, it has a heading and some content. That's not necessarily the only use but I think it makes more sense that way :) Also sections should always have headings.

    To answer your questions, you would need to use background-repeat: no-repeat and then background-position to push the circles into the two corners. As you're using two background-images, you can pass separate position values, just separate them with a comma like background-position: -50% -50%, 20% 30%;

    And for the hr,I'd just lower the opacity on it, that should make it look like it's a bit thinner :)

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord