Skip to content
OverviewSolutions
6
Comments
6
iruburu
@Iruburu

All comments

  • iruburu•100
    @IruburuPosted about 1 month ago

    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
  • iruburu•100
    @IruburuPosted about 1 month ago

    precisa estudar mais

    0
  • MuhammadFarazNiaz•40
    @MuhammadFaraz89Submitted about 2 months ago
    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

    Simple Omelette Recipe Page using CSS Flexbox

    1
    iruburu•100
    @IruburuPosted about 2 months ago

    Ficou bom

    Marked as helpful
    0
  • iruburu•100
    @IruburuPosted about 2 months ago

    Você precisar estudar mais um pouco ;)

    0
  • ardaacikgoz•120
    @ardaacikgozSubmitted 2 months ago
    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

    HTML and CSS

    1
    iruburu•100
    @IruburuPosted about 2 months ago

    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
  • iruburu•100
    @IruburuPosted about 2 months ago

    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