Skip to content
Submitted 28 days ago

Card basico criado com CSS

Alexandre Escobar•50
@AlexxLuis
Preview site (opens in new tab)View code (opens in new tab)
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?

Depois do primeiro desafio estudei mais os fundamentos de CSS e aprendi a lidar melhor com a criação de estilos então não tive dificuldade, porem aceito dicas para melhorar cada vez mais na estilização.

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

Não encontrei desafios

What specific areas of your project would you like help with?

Nada a declarar, consegui desenvolver o projeto com facilidade

Community feedback

  • Natali 👻 Grimm•1,150
    @Grimm-NPosted 28 days ago

    @AlexxLuis Hey, great job! U did it! some advice if you don't mind 😁

    Instead of pixels I recommend using rem, em, %, vh, vw.

    Why?:

    • rem and em keep font sizes consistent across screens.
    • % is great for fluid layouts.
    • vh/vw adapt elements based on viewport size, ensuring responsiveness.

    Footer Issues: Footer sticks because width: 100vw; isn’t set on body. For a footer that’s pinned to the bottom, set body { min-height: 100vh; display: flex; flex-direction: column; }, and add margin-top: auto; to the footer (for example).

    CSS Reset (or example: by Andy Bell’s): Use a reset for consistent styling across browsers, removing unwanted default padding and margins.

    Centering the Card: To center the card: add display: flex; justify-content: center; align-items: center; height: 100vh; to body. It will help U 🙃.

    Card Padding: Instead of individual margins, U can add padding to the card container for a cleaner style. 👍

    Match the Design: Try to match the layout exactly to the original. It’s key for building the design as needed, not just as it turns out.

    Hope this helps! Good luck! U doing the great job!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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