Skip to content
Submitted about 1 year ago

Single Price Grid Component

Luis Fernando Guimarães•100
@luis92guimaraes
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • P. Ricardo•2,370
    @pRicard0Posted about 1 year ago

    Algumas dicas HTML

    • Para um HTML mais semântico, seria bom utilizar a tag <main> ao invés de uma div com a classe "container"
    • A tag <span> não é uma tag semântica então evita usar ela sempre que possível. No lugar dela, dava para encaixar a tag <em>que significa emphasis, um texto que você queira dar ênfase. É uma tag que tem significado ao inves de span.
    • A parada do "sign up" é um botão então seria bom que você utilizasse a tag button ao invés da tag <a>. Você até pode usar a tag "a" dentro do botão para colocar o texto.

    Dicas CSS

    • É bom se acostumar a utilizar rem como unidade para tamanho de fonte. Uma das principais vantagens do uso de rem é que ele é relativo ao tamanho da fonte raiz definido no elemento <html>. Isso torna o tamanho da fonte escalável e acessível. Vai depender do tamanho da tela do usuário, etc... É bem mais acessível, responsivo.
    Marked as helpful
    0
    Luis Fernando Guimarães•100
    @luis92guimaraesPosted about 1 year ago

    @pRicard0

    Obrigado pelas dicas amigo vou ficar mais atento!!! Sobre aquela divisoria ali na parte de baixo do cartão é feito com um border ? Só ajustei com o grid mesmo mas me parece ter um efeito ali no meio que não entendi como fazer

    0
    P. Ricardo•2,370
    @pRicard0Posted about 1 year ago

    @luis92guimaraes Nossa, é um efeito bem imperceptível, quase não notei. Mas não, não acho que seja border. Parece ser box-shadow. Talvez de 2px. Um box-shadow sólido sem blur. Eu diria que seria 0px 2px 0px e uma corzinha mais escura. Não sei dá para fazer com border, tem que testar.

    ( Não sei se notei a mesma coisa que você está falando. )

    Eu usei algo parecido no botão de um projeto meu, checa aqui e vê se é a mesma coisa. Diferença que eu fiz mais grosso mas tu pode deixar mais fino no inspecionar.

    0

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