
Design comparison
Solution retrospective
Here we use CSS pseudo-classes and (stubbed) JS handlers for user interaction.
<div class="card"> <img src="./assets/images/illustration-article.svg" alt="Illustration" /> <button onclick="learnMore(this)">Learning</button> <small class="pub-date">Published 21 Dec 2023</small> <h2 class="article-ref" onclick="showArticle(this)">HTML & CSS foundations</h2> <p class="annotation">These languages are the backbone of every website, defining structure, content, and presentation.</p> <div class="author" onclick="showProfile(this)"> <img class="avatar" src="./assets/images/image-avatar.webp" alt="Avatar" /> <h3>Greg Hooper</h3> </div> </div>
.card button:hover, .card button:focus {
cursor: pointer;
color: #f4d04e;
background-color: black;
}
.article-ref:hover, .author:hover {
cursor: pointer;
color: #f4d04e;
}
const learnMore = (sender) => {
// Stub
window.alert('Learn more');
sender?.blur();
}
const showArticle = (sender) => {
// Stub
window.alert('Show article');
sender?.blur();
}
const showProfile = (sender) => {
// Stub
window.alert('Show profile');
sender?.blur();
}
Community feedback
- @lowkkidPosted 2 months ago
Hello! Your design looks great, almost the same as original (only a few text color innacuracies as I see). Also it's awesome that you added more responsible elements and js handlers to them. Unfortunately can't review code fully, as your link on code is broken (404 not found). But as I see in code snippets, class names could be more meaningful and full. And i'm not sure "Learning" element should be a button, I guess it's just a label
Marked as helpful0@ardolynk-rebornPosted 2 months ago@lowkkid thanks for your feedback. At least I have to fix the link and reissue my solution.
0
Please log in to post a comment
Log in with GitHubJoin 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