Projeto Feito com Flex

Community feedback

• 

  P

  Luciano Lima•1,270

  @LucianoDLimaPosted about 1 year ago

  Salve maninho, espero que esteja curtindo essa jornada, vi que você começou recentemente, e ta mandando bem!

  Algumas dicas ai que possam te ajudar, desculpa que vai ficar um textão kk

  • É legal evitar o uso essessivo de divs, mas é importante também não usar as tags erradas. Digo isso pois você utilizou duas vezes a tag <section>, uma para englobar a parte onde mostra os days left e a outra na foto de perfil. Nesses dois casos o correto seria usar div e não **section. Section você usa quando é literalmente separar uma seção de páginas, por exemplo, aqui no frontendmentor tem 4 seções dentro da main tag:

  1. A seção onde mostra a imagem de fundo com o seu projeto e o botão de preview e de visitar o código
  2. A seção do design comparison, onde da para comparar o seu projeto com o design oficial
  3. A seção onde você deixa a sua mensagem com perguntas ou dúvidas sobre o projeto
  4. E finalmente, essa seção que estou usando agora que engloba a parte de deixar um feedback pra você

  Então aqui você pode ver que a seção está separando temas distintos. No caso do seu projeto, ele tem apenas uma seção, que seria a que mostra o card todo e você está usando a tag <main> (correto inclusive). Então caso você queira utilizar a tag section, por exemplo, o correto seria você criar uma tag <section class="container"> e remover o class="container" da tag <main> mas sem remover a tag main, faz sentido? Espero que eu não tenha deixado mais confuso haha mas qualquer dúvida pode perguntar

  Marked as helpful

  1

  ---

  

  P

  Luciano Lima•1,270

  @LucianoDLimaPosted about 1 year ago

  Sobre a sua dúvida referente a imagem:

  Existem várias maneiras de fazer, eu vou explicar a mais simples:

  • Primeiro você vai criar um div novo para suas imagens:

  <div class="cubo-container">
        <img class="cubo" src="./images/image-equilibrium.jpg" alt="imagem de cubo">
        <img class="olho" src="./images/icon-view.svg" alt="">
  </div>
  

  • Agora vamos para o CSS. Primeiro a gente styla o .cubo-container, eu vou colocar comentários explicando o que cada um faz caso você tenha dúvidas:

  .cubo-container {
    border-radius: inherit; // Inherit pega o valor do parente, ou seja, 10px
    position: relative;
  }
  
  // Esse aqui é o que vai fazer aquele efeito de tinta azulada 
  .cubo-container::after {
    content: '';
    position: absolute;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    left: 0;
    background-color: hsl(178, 100%, 50%);
    pointer-events: none; // Para o mouse não mudar quando você passar por cima
    opacity: 0; // Opacidade zerada pra ele ficar invisivel
    transition: 250ms;
  }
  
  // Ai isso aqui faz a tinta azzulada aparecer quando você passa o mouse por cima
  .cubo-container:hover::after {
    opacity: .5;
  }
  

  • Pra imagem do olho a mesma coisa

  .olho {
    position: absolute; // Absolute pra ele ficar solto na tela
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); //top, left e transform -50% pra centralizar um objeto absolute
    pointer-events: none;
    opacity: 0; // E aqui deixa invisivel igual a tinta azulada
    transition: 250ms;
  }
  
  // Ai quando passar o mouse por cima, ele fica visível
  .cubo-container:hover > .olho {
    opacity: 1;
  }
  

  Marked as helpful

  1

  

  Elson Martins•150

  @ElsonMartinsPosted about 1 year ago

  @LucianoDLima

  Tudo bem Luciano? Espero que sim.

  Agradeço pela motivação e pelo seu feedback para mim é muito valioso. Às vezes a minha mente dá uns bugs's tenho que ler mais um pouco da teoria de novo porque eu estou errando em algumas partes básicas.

  Mas com a sua explicação eu vou me atentar para não fazer eventualmente o mesmo.

  *** Solução ***

  Sobre essa solução eu tentei muito pesquisar por conta, mas, vendo como você explicou aqui, aparentemente é um pouco complicado e é um conjunto de diversas coisas. Mas eu vou aplicar o mais rápido possível para tentar entender e me familiarizar.

  1

  

  Elson Martins•150

  @ElsonMartinsPosted about 1 year ago

  @LucianoDLima

  Muito obrigado mesmo Luciano por ceder seu tempo para poder dar um feedback me ajudando nas minhas dificuldade, obrigado mesmo.

  1

  

  Elson Martins•150

  @ElsonMartinsPosted about 1 year ago

  @LucianoDLima

  Muito obrigado mesmo Luciano por ceder seu tempo para poder dar um feedback me ajudando nas minhas dificuldade, obrigado mesmo.

  1

  

  P

  Luciano Lima•1,270

  @LucianoDLimaPosted about 1 year ago

  @ElsonMartins Só questão de tempo mesmo, já já você vai olhar pra esse desafio e vai pensar "aah como eu não sabia isso?" haha se você olhar os meus desafios antigo, eles são cheio de coisa errada ou que eu não sabia fazer também (até hoje rs). Mas se tiver alguma dúvida específica de algo que não tenha entendido pode perguntar também. Recomendo até a entrar no discord do frontendmentor, lá o povo também ajuda bastante

  Marked as helpful

  1

  

  Elson Martins•150

  @ElsonMartinsPosted about 1 year ago

  @LucianoDLima

  Muito obrigado Luciano vou entrar no Discord não sabia que tinha na verdade, valeu pela dica.

  0