Skip to content
OverviewSolutions
9
Comments
6
Welliton San
@Kira-Sann

All comments

  • Welliton San•170
    @Kira-SannPosted over 1 year ago

    Não e necessário colocar cada elemento dentro de uma div em vez disso faça algo assim

    <section class="content">
<p class="title">titulo</p>
<h1 class="sub-title">subtitulo</h1>
<p class="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, consequuntur!
</p>

<div class="price">
<h2 class="discoumted-price">$149.99</h2>
<p class="full-price">$169.99</p>
</div>
   
<button class="btn">...</button>
</section>

    Depois use os atributos css para estilizar

    Vi que vc usou vários <br> não e legal fazer isso use o css para dar espaçamentos e ajustar posições.

    Além disso utilize apenas um idioma no seu código vi que usou português e inglês escolha apenas um deles de preferencia o inglês mas se não souber inglês não tem problema usar o português desde que seja apenas ele.

    ✅ recomenda-se usar html semântico como <main>, <section>, <footer> entre outros ao invés de somente <div> isso melhora o SEO do site

    se quiser ver meu codigo ➡️click here

    0
  • Welliton San•170
    @Kira-SannPosted over 1 year ago

    esta muito bom acredito que só esteja faltando alguns detalhes como as bordas que não estão arredondadas

    vi também que você deixa os arquivos do projeto soutos não que esteja erado mas considere como boas praticas organizar arquivos semelhantes em pastas

    Marked as helpful
    0
  • Welliton San•170
    @Kira-SannPosted over 1 year ago

    vi que você não fez o efeito de hover nos botões para fazer isso e simples você só precisa adicionar :hover no que quiser alterar olha o exemplo abaixo

    inicialmente a cor do botao e preta

    button {color: black;}

    mas adicionando o Pseudo-elemento hover ao botão quando o mouse pasar em cima do elemento a cor dele vai mudar para vermelha

    button:hover {color: red;}

    também esta faltando a versão mobile para isso você pode usar a chamada media query basta usar

    media screen and (max-width: (screen size for changes to start working, ex:600px)px) {

    Marked as helpful
    1
  • Welliton San•170
    @Kira-SannPosted over 1 year ago

    no geral esta muito bom mas poderia melhorar alguns aspectos como o cor do card que esta diferente de projeto

    deixe o card centralizado ao centro com as informações de que fez o código a baixo

    a maneira que você fez o css não esta errada mas e recomendada fazer em um arquivo separado. basta usar a tag <link rel ="stylesheet" href ="(nome do arquivo aqui).css"> dentro da tag <header>

    Marked as helpful
    0
  • Welliton San•170
    @Kira-SannPosted over 1 year ago

    seu código HTML basicamente não tem estrutura faça uma estrutura usando HTML semântico e use as tags corretamente.

    no CSS você tentou alinhar no centro de qualquer maneira mas dessa maneira não teria como funcionar use algumas divisões no html como <main>, <section> ou ate mesmo <div>

    não sou a melhor pessoa para te orientar mas se quiser dar uma olhada no meu código e ver como eu fiz

    meu codigo no github

    0
  • Welliton San•170
    @Kira-SannPosted about 2 years ago

    acredito ter ficado muito grande tive que descer um pouco a pagina para ver todo o conteúdo, as transições do hover estão muito diretas se adicionasse uma transição ficaria mais agradável basta adicionar " transition: 0.3s; " ou de quantos milissegundos achar melhor.

    0