Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive single price grid component using html/css

@costaguh

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Oi @costaguh, tudo bem? Parabéns pela sua nova solução!

Duas dicas pra vc:

Vc pode reduzir o seu código retirando algumas divs, por exemplo dentro de cada card, exceto o botao, esses conteudos nao precisam de uma div, pode ficar la sem a div.

Alinhe o container com flex que é mais fácil: Note que vc usou vw pra o tamanho da altura, vw = viewportwidth

body {
    min-height: 100vh;
    background-color: var(--neutral-light-gray);
    /* height: 100vw; */
    display: flex;
    place-items: center;
    font-family: "Karla", sans-serif;
    justify-items: center;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

👋 Espero ter ajudado e continue no foco!

Marked as helpful

1

@costaguh

Posted

@correlucas Tentei fazer as correções, obrigado Lucas por sempre dar o feedback em meus códigos tem sido muito importante para o meu aprendizado, espero em breve conseguir uma vaga de estágio em alguma empresa, tenho certeza que o aprendizado aqui desenvolvido será de suma importância para essa conquista!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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