Skip to content
Submitted almost 2 years ago

Build a card with HTML, CSS using Visual Studio Code

Diaz Lubis•20
@diazlubis19
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

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

Community feedback

  • Dhanya•50
    @dhan5aPosted almost 2 years ago

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

    0
  • Vicktor•900
    @Victor-NyagudiPosted almost 2 years ago

    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.

    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