Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Erick_Gabriel• 160

    @ErickGabriel2023

    Submitted

    O que você achou difícil durante a construção do projeto?

    • Com certeza foi a parte da sombra nas divs

    Quais áreas do seu código você não tem certeza?

    • Na parte das sombras. Eu não sabia qual era a cor que tinha que colocar, então eu fui chutando até achar uma que se parece

    Você tem alguma dúvida sobre as melhores práticas?

    • Eu queria ajuda na questão das sombras, como que coloco a cor certa sem ficar chutando ou adivinhando a cor

    🚀🚀🚀

    Procedimento do Plano Anual

    1

    Vitor Aragone• 160

    @vitoraragone

    Posted

    Fala, Erick! Seu projeto ficou animal! Muito fiel ao design original. Sobre suas dúvidas em relação à cor da sombra: normalmente, os designers disponibilizarão toda a paleta de cores usada nos projetos, bem como onde aplicá-las. Às vezes pode acontecer de não haver todas as cores no guia, e pra isso eu dou a dica de abrir o design no Figma e copiar a cor que está na sombra, usando a ferramenta de seleção de cor (i).

    Marked as helpful

    1
  • Vitor Aragone• 160

    @vitoraragone

    Posted

    Hi Matthew!

    What I can suggest to you is:

    -Try using CSS Grid to separate the image and the content:

    

.container .card {
    display: grid;
    grid-template-columns; 1fr 1fr;
}

    It would help you with responsively and discard the position thing AND you won't need to use that much of @media (only in mobile width (375px at style-guide I guess).

    About mobile design:

    • I suggest you to set a break point when the image starts to crush:
    @media (max-width: 450px: *the width is a suggestion*)  {
 .card {
    grid-template-columns: 1fr
}

 .mob {
    display: block;
}

    Hope this can help you to find a way to improve your project. Keep coding.

    (I'm new at this thing. Feel free to correct me:)-)

    Marked as helpful

    0
  • Vitor Aragone• 160

    @vitoraragone

    Posted

    Hello @eaakre!

    Here are some suggestions I can make to you:

    • Try using div to sepparate the content:
      <div class="card main">
    <div class="i-added-this-div card-image">
        <img src="./images/image-qr-code.png" alt="">
    </div>
    <div class="i-added-this-div card-content">
        <h2>Improve your front-end skills by building projects</h2>
        <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
        </p>
    </div
  </div>

    This will make things easier to separate and identify, as well as to modify in css.

    • Read the style-guide included inside the main folder:

    There you can access informations like base colors, font families, font-sizes and more.

    (I'm new at this thing. Feel free to correct me :)-)

    Marked as helpful

    0
  • Vitor Aragone• 160

    @vitoraragone

    Posted

    Hi Noe!

    You can use display: grid at the div .card instead of display: flex.

    I suggest you to make something like this:

          .card {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

    This will make the layout easily responsive. Also, I suggest you to create a css file. Isn't the case in this challenge, but it makes the code easier to explore. In bigger projects, a huge style in html would be very difficult to read.

    Hope this helps you. ;)

    (I'm new at this whole thing. Feel free to correct me).

    Hope this helps you.

    Marked as helpful

    1