Blog Preview Card

Community feedback

• 

  ldonnianni•130

  @ldonnianniPosted about 2 months ago

  Hello @sawepeter. In regard of the third question... spacing the contents. What it works better for me is first do the layout, without worring about the specific style. Put a temporary border so I can understand better how things go together. In this case (blog-preview card) I used this structure <div class="card"> <img src="./assets/images/illustration-article.svg" alt="illustration"> <div class="card-content"> <h4 class="card-tag"> Learning </h4> <h5 class="card-date">Published 21 Dec 2023</h5> <h1 class="card-title">HTML & CSS foundations</h1> <p class="card-text">These languages are the backbone of every website, defining structure, content, and presentation.</p> </div>
  <div class="user"> <img src="./assets/images/image-avatar.webp" alt="User Photo"> <p class="user-name">Greg Hooper</p> </div> </div>

  As parent a CARD, then as siblings a)the img, b)the content, that has children (tag, title, text) and finally c)user, with two children (img and name) First I centerd the card with display: flex. And then within the card I used flex as well to center the 3 siblings in column.

  .card { background-color: white; border: 1px solid var(--gray-950); width: 384px; height: 522px; border-radius: 24px; box-shadow: 8px 8px 0 0 var(--gray-950); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 24px; }

  Finally I centerd the children within the content as well. (so the tag, title and text is align also.) .card .card-content { width: 100%; display: flex; flex-direction: column; gap: 12px; }

  Hope I was clear enough. Good luck!

  0