Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog-preview-card

@amna1526

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

P
Aminpatra 260

@Aminpatra

Posted

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

@amna1526

Posted

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

0
P
Aminpatra 260

@Aminpatra

Posted

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

0

@amna1526

Posted

@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
Discord logo

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