FAQ Accordion Card Without Javascript/ Only HTML and CSS!

Community feedback

• 

  Celestino Trosso•200

  @iamcelestinoPosted about 1 year ago

  BRIGADAO tem alguns recursos que possas partilhar mano? Livro, tutorial ou qualquer coisa que acha que seria importante um beginner a estudar??

  0

  ---

  

  Leone DaVinci•340

  @Leone-RicardoPosted about 1 year ago

  Olha, leia toda a documentação de HTML e CSS no w3 schools, free code camp é uma ótima maneira de treinar suas skills, também. E vai treinando o seus olhos para identificar de forma mais detalhada os itens em uma página, e sugiro acessar sempre que possível o código fonte nas páginas da web, usando inspecionar do chrome... É uma boa maneira de identificar padrões e começar a pegar o jeito. Não tem mistério, mão na massa que com o tempo você vai melhorando. Bons estudos! @iamcelestino

  0

  

  Celestino Trosso•200

  @iamcelestinoPosted about 1 year ago

  Manero mano, obrigado. adicionei vc no linkedin, aceita a conexao @Leone-Ricardo

  0
• 

  Celestino Trosso•200

  @iamcelestinoPosted over 1 year ago

  Que massa mano! eu tentei mais de 100 vezes mas sem o resultado desejado. podes passar por favor algumas ideias?

  0

  ---

  

  Leone DaVinci•340

  @Leone-RicardoPosted about 1 year ago

  Posso sim, mano! Quais são as suas principais dúvidas em relação a esse desafio?? @iamcelestino

  0

  

  Celestino Trosso•200

  @iamcelestinoPosted about 1 year ago

  tem muitas propriedaes no seu CSS que foram crucias na responsividade e eu gostaria se tu usou CSS avancado? @Leone-Ricardo

  <details class="faq-card__entry">
          <summary class="faq-card__trigger">
              <span class="faq-card__question">What is the maximum file upload size?</span>
              <img src="./images/icon-arrow-down.svg" alt="" aria-hidden="true">
          </summary>
          <div class="faq-card__answer">
              <p>No more than 2GB. All files in your account must fit your allotted storage space.</p>
          </div>
      </details>
  

  @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; }

  e por outra,como vc mudou a imagem do mobile para desktop, junto com a sombra.

  0

  

  Leone DaVinci•340

  @Leone-RicardoPosted about 1 year ago

  Sim, eu usei CSS avançado, mas nem tanto. Essa tag "Summary" é geralmente utilizada como legenda para possíveis tópicos, que nesse caso, foram as respostas com o efeito de acordeão, pois esse efeito é mais comumente feito em JS, mas como o desafio exigia fazer sem JS, essa foi uma das maneiras de realizar o efeito. Sugiro que você dê uma pesquisada mais a respeito para sanar e para que você possa ver na prática como funciona. Em relação a imagem, esse código é usado para tornar um elemento em uma página da web (.faq-card) mais bonito e ajustado, de acordo com o tamanho da tela. Ele faz duas coisas principais: adiciona imagens de fundo e muda o posicionamento dessas imagens em telas maiores.

  Primeira Parte (para telas menores): O código cria uma espécie de enfeite visual acima do elemento .faq-card. É como um adorno que é colocado no topo. Esse adorno é formado por duas imagens:

  Uma imagem de uma mulher usando a internet (como um ícone) que fica no topo. Um padrão de fundo que fica na parte de baixo. Essas imagens não se repetem (não ficam lado a lado como um quebra-cabeça) e ficam no centro do topo e do fundo. O adorno todo tem um tamanho de 16 por 14.5 unidades (você pode imaginar isso como centímetros, por exemplo).

  Segunda Parte (para telas maiores): Quando a tela é grande o suficiente, o código muda as coisas um pouco:

  A imagem da mulher é substituída por uma imagem de uma caixa. A caixa fica menor e é posicionada à esquerda da área do elemento .faq-card. O fundo ganha uma nova imagem e é ajustado para ficar no centro à esquerda. Além disso, o próprio .faq-card (o elemento que está sendo estilizado) ganha mais espaço nas bordas, o que dá um visual melhor.

  Basicamente, esse código faz com que um pedaço específico da página da web fique mais bonito e organizado, com desenhos e posições diferentes dependendo do tamanho da tela em que a página é vista. Isso é importante para que a página pareça bem em celulares, tablets e computadores. Qualquer dúvida é só me perguntar, valeu !@iamcelestino

  0