Skip to content
Submitted about 1 year ago

product-preview-card-component-main

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

Feedbacks are welcomed

Community feedback

  • _nehal💎•6,710
    @NehalSahu8055Posted about 1 year ago

    Hello Coder 👋.

    Congratulations on successfully completing the challenge! 🎉

    Few suggestions regarding design.

    • To properly center the card
    • USING FLEXBOX
    body{  
    display: flex;
    justify-content: center;
   align-items: center;
   min-height: 100vh;
   ...
}
    • Use Semantics for the proper design of your code.
    <body>
<main>... main content goes here ...</main>
<footer>... .attribution div goes here ... </footer>
</body>
    • It would be better if you use source media for switching to screen sizes(mobile or desktop) for image.
    <picture>
<source media="(min-width:800px)" srcset="yourimage.jpg">
<img src="yourimage.jpg" alt="description">
</picture>

    • For non-decorative images give meaningful and descriptive alt like alt= "Gabrielle Chanel Perfume bottle surrounded by leaves.".

    • Use semantic element for strike-through <s>$169.99</s>

    • If you want to dive into accessibility for this project check this link

    I hope you find this helpful.

    Happy coding😄

    Marked as helpful
    0
  • Enis Kerti•590
    @eniskrtPosted about 1 year ago

    Good job. I cannot look out your code for an github error. But to get the card to middle of the page, you must 100vh in your parent element. And displat:flex, align-items:center, justify-content:center. So the card will be in the middle of the page.

    Marked as helpful
    0
    rachidnaitlahaj•20
    @rachidnaitlahajPosted about 1 year ago

    @eniskrt i i appreciate your notes, I will update the projet soon

    0
  • shahriarhossain7860•0
    @shahriarhossain7860Posted about 1 year ago

    I need a psd file to solve your challenge. Would you please provide me the psd file?

    0
    Enis Kerti•590
    @eniskrtPosted about 1 year ago

    @shahriarhossain7860 Ihave not psd but I think it needs no psd. You should use only flex, i think. As @__nehal💎said.

    0
    shahriarhossain7860•0
    @shahriarhossain7860Posted about 1 year ago

    I know that just only css flex is enough to solve this challenge. But I need the psd for the padding and color @eniskrt

    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