HTML and Css only

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  Oi Tathiany tudo bem? Parabéns pelo seu desafio!

  Dei uma olhada na sua solução aqui e a primeira coisa que notei é que imagem do NFT fica distorcendo quando o container começa a diminuir e a imagem tenta acompanhá-lo. O jeito de resolver o problema com a imagem é você retirar a propriedade height note que poucas vezes você vai ter que declarar a altura de algum elemento, geralmente a altura é herdada pelo elemento pai e a imagem pega 100% da largura, quando você declara display: block; por exemplo. Nesse caso se você declarar a altura com height a imagem vai tentar manter a altura fixa mas vai perder a proporção quando começar a escalar, então você declarando o max-width: 100% do container a altura já vem em automático.

  Olha o código abaixo corrijido:

  .cube__image {
      /* display: block; */
      position: relative;
      display: inline-block;
      justify-content: center;
      align-items: center;
      /* min-height: 250px; */
      width: 100%;
      border-radius: 10px;
  }
  

  Espero ter conseguido explicar bem esse conceito da altura automática.

  Keep it up

  00

  Marked as helpful
• 

  Vinicius Henrique•590

  @viniciusshenri96

  Posted almost 3 years ago

  @tathykanashiro Olá, parabéns por concluir o desafio, tenho algumas dicas pra você, que podem te ajudar:

  HTML:

  • Use tags mais semânticas para marcar seu conteúdo como <main><header><nav><section><article><footer> leia mais sobre cada um aqui neste site MDN e coloque seu conteúdo principal do HTML dentro da tag <main>, isso evita problemas de ACCESSIBILITY ISSUES aqui no frontend Mentor.

  <main>
      <section class="container">
          <div class="card">
              <img class="cube__image" src="./images/image-equilibrium.jpg" alt="Cube image">
              <div class="text">
                <h1>Equilibrium #3429</h1>
  
                <p>Our Equilibrium collection promotes balance and calm.</p>
              
                <ul class="span">
                    <li class="eth"><img src="./images/icon-ethereum.svg" alt="">0.041 ETH</li>
                    <li class="days"><img src="./images/icon-clock.svg" alt="">3 days left</li>
                </ul>
                <hr>
                <div class="avatar">
                    <img src="./images/image-avatar.png" alt="Avatar">
                    <p>Creation of <span>Jules Wyvern</span></p>
                </div>
              </div>
          </div>
      </section >
  </main>
  
    <footer class="attribution">
          Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noopener">Frontend Mentor</a>. 
          Coded by <a href="#">Tathiany Kanashiro</a>.
    </footer>
  

  • Jamais deixe a tag <img> sem o atributo alt, mesmo que o valor dele seja vazio alt="".

    <ul class="span">
          <li class="eth"><img src="./images/icon-ethereum.svg" alt="">0.041 ETH</li>
          <li class="days"><img src="./images/icon-clock.svg" alt="">3 days left</li>
     </ul>
  

  • No footer tem um link com o atributo target="_blank", quando você cria um link para uma página externa, você pode ter problemas de desempenho e segurança, então adicionar o atributo rel="noopener" evita esse problema. leia esse artigo se você tiver mais interesse: Artigo

    <footer class="attribution">
          Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noopener">Frontend Mentor</a>. 
          Coded by <a href="#">Tathiany Kanashiro</a>.
    </footer>
  

  CSS:

  • Tem essas duas formas que eu sei, que talvez te ajude no efeito :hover:

  1º Forma: Com uma div vazia no HTML e usando grid-area

    HTML:
    <div class="cube__image-view">
          <img class="cube__image" src="./images/image-equilibrium.jpg" alt="Cube image">
          <div class="hover"></div> // Criei uma div vazia no HTML
     </div>
  
     CSS:
  .cube__image-view {
    display: grid;
    border-radius: 10px;
    overflow: hidden;
  }
  
  .cube__image,
  .hover {
    grid-area: 1 / -1;  // elementos na mesma linha, mesma coluna.
  }
  
  .hover {
    background: url(../images/icon-view.svg) no-repeat center center, rgba(0, 255, 247, 0.5); // utilizei **center center** para centralizar o ícone
    opacity: 0; // para deixar o elemento transparente na tela
    cursor: pointer;
    z-index: 2;
  }
  
  .hover:hover {
    opacity: 1; // mostrando o elemento na tela
  }
  

  2° Forma: Com pseudo-element e sem uma div vazia no HTML.

  .cube__image-view {
    position: relative;
  }
  
  .cube__image-view:hover::after {
    content: "";
    display: block;
    width: 290px;
    height: 290px;
    background: url(../images/icon-view.svg) no-repeat center center,
      rgba(0, 255, 247, 0.5);
    position: absolute;
    top: 0;
    cursor: pointer;
    border-radius: 10px;
  }
  

  Testei as duas formas no seu projeto e deu certo.

  Espero ter ajudado, continue praticando e evoluindo 🚀.

  00

  Marked as helpful
• 

  Guillermo Mulvihill•190

  @guilleoem

  Posted almost 3 years ago

  Hi @tathykanashiro. Let's start with centering the avatar. It's easy, first remove the margin to the .text p

  .text p {
      font-size: 16px;
      font-weight: 300;
      opacity: .7;
      color: var(--softBlue);
      line-height: 1.3em;
      margin-bottom: 18px;  <---- remove this
  }
  

  And now add this css properties to the avatar div

  .avatar {
      display: flex;
      flex-direction: row;
      align-items: center;
  }
  

  00

  Marked as helpful
• 

  faizan•2,420

  @afaiz-space

  Posted almost 3 years ago

  Hey @tathykanashiro

  • Remove width: 100%;, height: 100%; and add min-height: 100vh; in the body element.
  • add gap: 14px; in the .avatar class.
  • Remove /* margin-bottom: 18px; from the .text p element.
  • Remove margin-right: 15px; from the .avatar img element.

  you can see any solution for the hover effect.

  00

  Marked as helpful