Skip to content
Submitted over 1 year ago

Block post card with reusable CSS variables

Agshin Mammadov•10
@agshinmammadov
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi, It is my first challenge here. And I just tried to choose the simplest one among the challenges. Please feel free to write your feedback about the solution. I tried to create a CSS variable for easily updating the colours in the future. Divide the card into 3 blocks:

  1. image
  2. Article
  3. Author Why I made this decision. Because perhaps, in the future you will want to preview the card image and text inline not a block. So with these blocks, you will change the HTML structure with the help of CSS.

I really appreciate your support and feedback.

Code

Please log in to post a comment

Log in

Community feedback

  • Ranit Manik•880
    @RanitManik

    give the property to the body

     body {
 min-height: 100vh;
 display: grid;
 place-items: center;
}
    Marked as helpful
  • Raza Abbas•770
    @RazaAbbas62

    Hi, your design looks good. To center the card, enclose your whole content including card-container and attribution, into a container div and apply the following to the body.

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

    it will center your whole card in the body.

    Enjoy Coding :)

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