easybank-landing-page

Community feedback

• 

  Bernardo Poggioni•6,850

  @R3ygoski

  Posted about 1 month ago

  Olá Antonio, parabéns pela conclusão de mais um projeto aqui do FEM, ele ficou ótimo.

  Sobre suas dúvidas, vou começar pela parte do Link, você pode sim chegar ao resultado utilizando ::after ou ::before, ou até mesmo criando uma <div>. Aqui vou mostrar com o ::after.

  .nav-list {
    height: 100%; /* Fiz isso para que o li ficasse grande e ficasse fácil de posicionar o traço */
    display: flex;
    align-items: center;
  }
  
  .nav-list ul {
    height: 100%;
    /* restante das props */
  }
  
  .nav-list ul li {
    display: flex;
    align-items: center;
    position: relative;
  }
  
  li::after {
    content: ''; /* Cria o after */
    display: block; /* Define como um bloco */
    position: absolute; /* Se posiciona relativamente ao li */
    background: linear-gradient(45deg, lime, cyan); /*! Essas cores estão erradas */
    height: 6px;
    width: 100%;
    bottom: 0; /* Joga o traço para a parte debaixo do li */
    opacity: 0; /* Invisível */
  
    transition: 0.3s ease-in-out; /*<- Cosmético - Não necessário*/
  }
  
  li:hover::after {
    opacity: 1; /* Visível ao passar o mouse na li */
  }
  

  Isso já fará com que apareça.

  Agora sobre a imagem eu não sei qual problema você teve, foi sobre o tamanho da imagem? Caso tenha sido você pode apenas aumentar o max-width que isso já fará ela ficar igual a do design fornecido.

  E é isso! Novamente parabéns, caso tenha ficado qualquer dúvida, por favor comente abaixo que tentarei ajudar da melhor forma possível.

  13

  Marked as helpful