Skip to content
OverviewSolutions
7
Comments
4
Vitor Aragone
@vitoraragone

All comments

  • Erick_Gabriel•160
    @ErickGabriel2023Submitted over 1 year ago

    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
    @vitoraragonePosted over 1 year ago

    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
    @vitoraragonePosted almost 2 years ago

    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
    @vitoraragonePosted almost 2 years ago

    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
    @vitoraragonePosted almost 2 years ago

    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