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

Four Card Feature Section

@yunusemrecinar

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I add some details:

  • Box shadow

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Hello again Yunus , congratulations for your new solution!

I saw your live site and I've some tips for you. You've used twice the tag h1 and you cannot do that since you can have only one main heading, for this reason its better you use h2 for the same title or use max-width to break the titles in two line and use the same tag to wrap them.

The box shadow you've used its too dark you can make it smoother decreasing its opacity. You can use this website to create the shadows design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/

About the semantics use <article> for each card and <blockquote> to wrap the text that contains a quote inside the card.

👋 I hope this helps you and happy coding!

Marked as helpful

1

@yunusemrecinar

Posted

@correlucas I've changed the pard you said rn. However I'm already using <article> for each card right. Is not it ?

1
Lucas 👾 104,420

@correlucas

Posted

@Yunuscinar41 Ah okay, because I saw in devtool that div wrapping all cards with the class cards sorry. In this case you can replace this div wrapping the all the cards with <section>

1

@yunusemrecinar

Posted

@correlucas Thanks. I changed it too. We're using section <section> for HTML Semantic Elements right ?

1

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