Skip to content
Submitted over 2 years ago

Product Preview Card Component using HTML/CSS & Flexbox

Dbttlnkd•20
@Dbttlnkd
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

This is my first design on HTML/CSS for which I had the opportunity to learn about Flexbox.

I had some difficulties on making sure the cart SVG was fully centered on height and I did not succeed with using a [html <button>] and [css::before].

I corrected the issue with using [html <a href"">] instead. Not sure if this is the best way.

Thanks for your feedback.

Community feedback

  • faizan•2,420
    @afaiz-spacePosted over 2 years ago

    Hey @Dbttlnkd,

    • add min-height: 100vh; and align-items: center; in body element.
    • remove position: absolute; , top: 50%; and transform: translateY(-50%); from card class.
    0
    Dbttlnkd•20
    @DbttlnkdPosted over 2 years ago

    Hey @afaiz-space

    Thanks a lot ! I was thinking that my code was not optimal on this part.

    0
  • Jeremy Mendoza•100
    @JeremyMenPosted over 2 years ago

    First of all I would like to congratulate you because your solution is very similar to the given design. Cheers for that!

    I would probably have used the <figcaption> tag (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure) in order to have a more semantic HTML.

    About css, in my company we follow the BEM methodology (http://getbem.com/introduction/). I wouldn't say that it is mandatory to use it but nowadays you really want to follow some kind of pre-set guidelines in order to have your css clean and scalable.

    Keep up the good work!

    Cheers,

    Jeremy

    0
    Dbttlnkd•20
    @DbttlnkdPosted over 2 years ago

    @JeremyMen

    Thanks for the advice on BEM.

    The main title is on 3 lines in my browser (it seem there is an issue with the screenshot !).

    0

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