RasMurph420• 20
@RasMurph420
Submitted
P
Jocelyne Teles
@JocelyneTeles98
All comments
- PJocelyne Teles• 40
@JocelyneTeles98
Posted
Nice effort! The detail is that the picture should be inside the card.
You can place it where after the section or div that represent your card is open:
<section class="blog-card"> <img class="illustration" src="assets/images/illustration-article.svg" alt="article illustration" /> [...] </section>And then style it with the width of 100% to occupy the size of the card (remember add padding to the card div or section)
.illustration { border-radius: 10px; width: 100%; }
.blog-card { align-items: center; background-color: #FFF; border-radius: 20px; box-shadow: 8px 8px 0 0 #000; display: flex; flex-direction: column; gap: 24px; margin: 12px; max-width: 384px; padding: 24px; }
I'm sure that there are better solutions than mine but I hope that I helped you with where to start. Wish you a happy coding!
Marked as helpful
0 - tailor-made-god• 10
@tailor-made-god
Submitted
What are you most proud of, and what would you do differently next time?
It is my First build. So I am proud of the project itself.
Next time I will try to do it in all grid.
What challenges did you encounter, and how did you overcome them?
The challenge I encountered was center the div in the body itself.
I over come this by Using Grid. Before I tried do with flex and position, somehow it didn't work for me.
What specific areas of your project would you like help with?
I want help in reducing code and finding what is most effective way to do this in real work environment. That's it.
PJocelyne Teles• 40@JocelyneTeles98
Posted
Your solution is well done! It is almost like the original design. I recommend to try with grid. I actually explored it a bit with my own solution (I used to employ "display: flex" for everything) but I'm trying to go with other solutions. Nice job!
0
