Blog preview card

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();
}