AVARUSJOSE• 60
@AVARUSJOSE
Submitted
iruburu
@Iruburu
All comments
- iruburu• 100
@Iruburu
Posted
Tente usar esse código no css do cartão para ficar melhor:
.main .features .card { overflow-x: hidden; background-color: white; max-width: 363px; min-height: 240px; margin: 0 auto; border-radius: 8px; box-shadow: 0 5px 25px -5px var(--Grayish-Blue); } .main .features .card::before { content: ''; display: block; width: 100%; height: 4px; background-color: black; }Marked as helpful
0 @MuhammadFaraz89
Submitted
What are you most proud of, and what would you do differently next time?
Css flexbox.
What challenges did you encounter, and how did you overcome them?
Aligning the last section of design i.e. Nutritions Section.
What specific areas of your project would you like help with?
none
iruburu• 100@Iruburu
Posted
Ficou bom
Marked as helpful
0- ardaacikgoz• 120
@ardaacikgoz
Submitted
What are you most proud of, and what would you do differently next time?
About my desire to code and patient against the difficulties.
What challenges did you encounter, and how did you overcome them?
I couldnt arrange the location of div as center in white box. It was because I didnt create another div inside the white box. I created and by adding some styles I solved.
What specific areas of your project would you like help with?
Divs and CSS parts
iruburu• 100@Iruburu
Posted
Embora o código esteja funcional, algumas melhorias podem aumentar a legibilidade, a manutenção e a acessibilidade. Vamos explorar algumas sugestões:
- Estrutura Semântica: Utilize elementos semânticos HTML5, como <article>, <header>, <footer>, e <section>, para melhorar a clareza do documento. Isso ajuda os motores de busca e leitores de tela a entender melhor o conteúdo. Exemplo:
<article class="container"> <header class="container_inside"> ... </header> <section> ... </section> <footer> ... </footer> </article>-
Acessibilidade: Adicione atributos alt descritivos nas imagens para garantir que pessoas com deficiência visual possam entender o conteúdo visual. Use contrastes adequados para texto e fundo para garantir legibilidade. Você pode verificar a acessibilidade das cores usando ferramentas online.
-
Melhorar a Responsividade: Em vez de definir um tamanho fixo (width: 350px;), considere usar unidades relativas como porcentagens ou vw para permitir que o design se ajuste a diferentes tamanhos de tela.Exemplo:
.container { width: 90%; /* ou 100% com um máximo */ max-width: 350px; }- Organização do CSS: Agrupe regras semelhantes para manter o CSS organizado. Você pode criar um sistema de classes mais consistente e reutilizável, evitando duplicação. Considere adicionar comentários no CSS para indicar seções ou explicar propriedades complexas.
- Uso de Flexbox: Você já está usando Flexbox, mas pode aplicá-lo para centralizar e alinhar outros elementos dentro do container de forma mais eficiente. Considere aplicar flex nas classes que contêm múltiplos itens. Exemplo:
.container_inside { display: flex; flex-direction: column; /* Alinha verticalmente os itens */ align-items: center; /* Centraliza os itens */ }- Estilização do Hover: O efeito de hover é um ótimo toque. Você pode adicionar transições suaves para torná-lo mais agradável visualmente:
.project_title { transition: color 0.3s ease; }- Estrutura do HTML: Tente manter o HTML limpo, evitando a inclusão de estilos inline no <body>. Mova esses estilos para o CSS para uma melhor separação de preocupações.
Espero ter ajudado
0 - Jorge Renteral• 10
@jorgerenteral
Submitted
iruburu• 100@Iruburu
Posted
Esta muito bom, mas tenho uma recomendação:
- Ao invés de chamar a tag <main> para estilização, recomendo usar uma classe .card.
<-- HTML --> <main class="card"> <-- Seu contéudo --> </main>/* CSS */ .card { /* Sua estilização */ }- Na parte da estilização do corpo <body>, ao invés de usar "height: 100vh;", recomendo usar "min-height: 100vh;".
/* CSS */ body { min-height: 100vh; }Recomendo separar o html do body no css.
Espero ter ajudado ^w^
0
