Skip to content
Submitted 8 months ago

Blog-preview-card

Amna Nasir•80
@amna1526
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of the CSS mainly.

What challenges did you encounter, and how did you overcome them?

I didn't know how to add shadow and so I struggled with that until I figured that values are like that of text-shdow.

What specific areas of your project would you like help with?

How to add border-radius to a svg file??

Community feedback

  • Aminpatra•260
    @AminpatraPosted 8 months ago

    AlSalaam alaikum, So first you can add a border-radius to the svg file like any other image, there is no difference. So the solution in your situation can be like this -> .container > img {border-radius : (and the value here)} , the ">" symbol refers to the direct child or the direct image after the .container class element. Second you can center the card by just adding display grid to the body like this -> body {display : gird; place-content: center; height: 100vh}

    0
    Amna Nasir•80
    @amna1526Posted 8 months ago

    @Aminpatra Wa alaikum as slam The first option did not work... I will try the 2nd one. Thanks

    0
    Aminpatra•260
    @AminpatraPosted 8 months ago

    @amna1526 Well try to remove the class you put before for the image.

    0
    Amna Nasir•80
    @amna1526Posted 8 months ago

    @Aminpatra And add id instead? I mean how to select it in CSS then?

    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