Skip to content
Submitted over 2 years ago

Build a card with HTML, CSS using Visual Studio Code

Diaz Lubis•20
@diazlubis19
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

i find it difficult to build the same as possible, but all good

Code

Please log in to post a comment

Log in

Community feedback

  • Dhanya•50
    @dhan5a

    Thank you for sharing your code. I learnt how to display images from my code to Github by understanding your solution :)

  • Vicktor•920
    @Victor-Nyagudi

    Hi, Diaz.

    Nice try on this one.

    I noticed the card isn't centered on the page.

    If you want to center something on the page, wrap everything inside the <body> tag in a <div>, give it a height: 100vh;, and make it a flex container with display: flex;.

    Next, align what's inside it using justify-content: center; and align-items: center;.

    Here's a sample of what the code could look like.

    body {
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
}

    Here's a codepen I made demonstrating how to centrally align content on a page.

    I hope this helps.

    All the best with future solutions.

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