Skip to content
OverviewSolutions
9
Comments
7
Lucas Daher
@lucasdaher

All comments

  • Lucas Daher•220
    @lucasdaherPosted 9 months ago

    Great job Belky!

    I have a suggestion for you:

    👀 In your h1 the line-height is bigger than design. To fix, use this on your h1:

    line-height: 55px;

    Hope i helped!

    Keep creating amazing projects!

    0
  • Lucas Daher•220
    @lucasdaherPosted 9 months ago

    Great job Mulugeta!

    I have a suggestion for you:

    🧠 Change the font-size and font-weight to:

    font-size: 24px;
font-weight: 600;

    This will make the name mentioned closer to the design.

    Hope i helped!

    Keep creating amazing projects!

    Marked as helpful
    0
  • Lucas Daher•220
    @lucasdaherPosted 9 months ago

    Great job Lahan!

    I have suggestions for you:

    1) Change the h3 to h1.

    • The h1 to h6 tags are used to define HTML headings.
    • h1 is used to most important heading. In this case, h1 is used to user name.

    2) You can use Flexbox to separate all contents of your container using gap, like:

    .card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

    With Flexbox you have the possibility to organize and space your content more easily within the card.

    Hope i helped!

    Keep creating amazing projects!

    1
  • Lucas Daher•220
    @lucasdaherPosted 9 months ago

    Great job Omar!

    I have suggestions for you:

    1) Add a border-radius in .card-header img, like:

    .card-header img {
    border-radius: 10px;
    width: 100%;
    height: auto;
}

    2) Add a margin bottom on your .description:

    .description {
    margin-bottom: 24px;
    color: hsl(0, 0%, 50%)
}

    3) Use this border and box-shadow for .blog-card:

    border: 1px solid #111;
box-shadow: 8px 8px 0px 0px #000;

    😀 Hope i helped!

    Keep creating great projects!

    Marked as helpful
    0
  • Lucas Daher•220
    @lucasdaherPosted 9 months ago

    Belo trabalho Giselida!

    Tenho uma observação a respeito da centralização do seu card.

    Utilize o min-height: 100vh no body. Dessa forma o conteúdo será centralizado no centro da tela.

    Atente-se também ao tamanho máximo do container, você pode testar e utilizar o max-width: 384px e width: 100%.

    Espero que te ajude! Abraços.

    Marked as helpful
    0
  • Lucas Daher•220
    @lucasdaherPosted 9 months ago

    Ótimo trabalho Eric! Vi que no seu código você utilizou o container como section, sugiro utilizar:

    <div class"container"></div>

    E envolva o container utilizando <main>:

    <main>
     <div class"container"></div>
</main>
    Marked as helpful
    0
  • Caio Querino•70
    @CaioQuerinoSubmitted 9 months ago

    GridCss: Achei difícil usar o Grid então usei FlexBox para desenvolver o card, mas pretendo compreender o Grid e usa-lo em projetos futuros.

    RESET DA PÁGINA HTML

    *{ margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    text-decoration: none;
  }


* ul li{
    list-style: none;}


* a{ text-decoration: none;
    color: inherit;}

    FlexBox: O layout flexível permite que os elementos responsivos dentro de um contêiner sejam organizados automaticamente, dependendo do tamanho da tela.

    display:flex;
flex-derection: column; ou row

    CONTAINER

    <section class='container'>

      <header class='card'>
      </header>

      <article class='content'>
      </article>
</section>

    Card construído usando FLEXBOX

    2
    Lucas Daher•220
    @lucasdaherPosted 9 months ago

    Belo trabalho! Porém, tenho alguns pontos que podem melhorar o seu código:

    1) Ao estilizar a página, não necessariamente toda a estilização precisa estar dentro de media query.

    Vou te dar um exemplo que não vem do seu código, mas pode te ajudar a entender o que estou querendo dizer:

    // Default style
.container {
     background-color: red;
}

// Responsive to max-width 720px
@media screen and (max-width: 720px) {
        .container {
             background-color: blue;
        }
}

    Ou seja, o container vai ter sempre a cor de fundo vermelha. Mas quando o tamanho da tela for menor que 720px, a cor de fundo do container vai se tornar azul.

    2) Atente-se também a escrita! No seu código foi utilizado uma div com a classe conteiner, quando na verdade a escrita correta dessa palavra seria container.

    Geralmente as empresas utilizam todos os nomes de classes, ids e afins em Inglês. Recomendo trocar os nomes que foram utilizados nas classes: titulo e paragrafo para title e paragraph.

    3) Sobre a sua dúvida sobre a utilização de grids, neste projeto não houve necessidade da utilização de grids, então fez certo ao utilizar flex.

    Espero ter ajudado! E se eu te ajudei, marque este feedback para me ajudar :)

    Marked as helpful
    0