Submitted about 1 month ago

Blog Preview Card using HTML and CSS

Ifedolapo Ajayi•20

@ifedolapo01

Preview site View code

This is a solution for...Blog preview card

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Most proud that I learnt how to use clamp() in css.

What challenges did you encounter, and how did you overcome them?

Changing sizes of different parts of the site and I overcame them by using clamp().

Community feedback

BarbarossaNext•20

@BarbarossaNextPosted about 1 month ago

You can use the flexbox to layout the footer part as the following

.footer {
  display: flex;
}

.author-picture {
  width: 2em;
  height: 2em;
}

.author-name {
  margin-left: 0.857em;
}

Also you are not using the font family specified in the design file. You can do that easily using Google Fonts. Just add some link elements to the HTML file:

  <!-- Google fonts: -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap"
    rel="stylesheet">

Then you can reference that font in CSS like

body {
  font-family: "Figtree", sans-serif;
}

Please log in to post a comment

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