Skip to content
Submitted over 1 year ago

Product-Preview-Perfume🌫👱‍♀️🌫-Card

Christopher Grainger•30
@Brompy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hey y'all!

I designed this mobile first, which was a first for me.

Struggled with:

♦Vertical spacing of the info text (what would call the product-information part? copy?)

♦Making it responsive: For some reason I needed to increase ".info"'s width instead of "main"'s, which I don't understand why 😣

♦The little shopping cart icon: I ended up just using an <img> tag, which I know isn't right. I thought there should be an <icon> or <i> tag, but I couldn't figure out how to source it locally using those tags.

Learned a lot about:

♦Linking fonts with HTML instead of CSS. I always just used "@import" before.

♦Starting mobile first.

♦Grouping elements together in proper containers

Wondering about: Should I have used less lines? Is there a more efficient way to space things out properly? Would you say I'm close to the design?

Thank you for reading and looking at my submission! 😀✌

Community feedback

  • hitmorecode•6,680
    @hitmorecodePosted over 1 year ago

    Congratulations well done. I took a look at your page and the card is not in the center of the page. In mobile the buttons looks good, but when changing to desktop it's all compressed.

    # add this reset in your css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

# you can remove margin: 0, padding: 0 and border: 0. These are in the reset.
body {
min-height: 100vh;
display: flex; # these three lines will place the card in the center of the page
justify-content: center;
align-items: center;
font-size: 100%;
background: hsl(30, 38%, 92%);
}

    One tip I wouldn't use main as the container for the card. You can wrap everything inside another div

    For a smoother hover animation you can add transition: background-color 150ms ease-in-out; to the button.

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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