@ardolynk-rebornSubmitted 2 months ago
What are you most proud of, and what would you do differently next time?
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();
}
