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 yellow card

j5ur3tt3 20

@j5ur3tt3

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?

The design of the card was neat. I enjoy those small projects. I also had fun working on the black "shadow", and I am curious to see how others came up with a different solution.

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

The superposed divs with a different z-index was hard to find.

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

Help with css in general would be great.

Community feedback

@ajasmine94

Posted

Hi :)

I am also practicing flexbox so far so I'm not sure if I would be of any help. But what I noticed from your code are the following:

  1. You can use flexbox in structuring your container content which I believe you have already applied on the part of your .author-container section on the css, instead. By placing it inside the card-container class, it would help your code to know how the items inside will be aligned (align-items, justify-content, etc..) you may read more on here

  2. You have added a black-shadow div and class which can be a good alternate and nice that you were able to implement it! There is another easier solution for this which is just using the [box-shadow] (https://www.w3schools.com/cssref/css3_pr_box-shadow.php) property on CSS. You can implement this on your main container / card-container class.

  3. for the sizes, for instance using fixed widths on containers and so on, you might want to study on em or rem, whereas px can be used for border sizes and so on. I'm also reviewing these things so goodluck to us :)

Have a good day!

0

@ZeroOne00001

Posted

for the black shadow you could just add shadow to the card-container using css box-shadow property, I used these value for

box-shadow: 10px 10px 0 #111111;

and for active hove effect

box-shadow: 20px 20px 0 #111111;

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