Huddle LP w/ Curved Sections (Vanilla CSS + Custom Logo)

Community feedback

• 

  Hyron•5,870

  @hyrongennike

  Posted over 2 years ago

  Hi Lucas,

  Awesome job on the challenge as always

  Just something small I picked up on mobile, card-2 needs to flip. the illustration is below the text

  article.card.card-2 {
      flex-direction: column;
  }
  

  and the logo and button pushes up against each, should just stack I think.

  11

  Marked as helpful
• 

  Vander Santos•1,820

  @vanderms

  Posted over 2 years ago

  E ai Lucas! Parabéns pela sua solução. Ficou excelente!

  Quanto a estrutura do HTML e o problema com as landmarks, eu acredito que você fez algumas opções pouco usuais.

  Mas antes, uma breve explicação: existem basicamente duas estruturas tipicas para uma pagina:

  <nav>...</nav> <main>...</main> <footer>...</footer>

  <header>...</header> <main>....</main> <footer>...</footer>

  A escolha entre a primeira e a segunda depende de se você considera ou não a parte de cima da página como um cabeçalho (banner landmark) ou como uma simples barra de navegação (nav landmark). Mas geralmentes ambas escolhas justificáveis e são válidas.

  Então, por escolha pouco usual, eu me refiro ao fato de vc aparentemente ter colocado a barra de navegação dentro de <main>. Difícil considerar ela como parte do conteúdo principal.

  Por outro lado, você colocou algumas seções fora de <main>. Dá para fazer isso? Sim, mas uma <section> precisa ter o atributo aria-label ou aria-labelledby para ser considerada uma landmark. Como você não usou nenhum desses atributos o validator apontou o erro.

  Mas pra mim o principal problema é que se você não considera tais seções como parte do conteúdo principal, você deveria ter usado <aside> e não <section>.

  Resumindo, existem diferentes formas de você resolver esses problemas: .e.g. adicionando aria-label ou aria-labbeledby as sections, colocando elas dentro de main, substituindo elas por aside.

  Espero que as dicas tenham ajudado e continue sendo uma inspiração para toda a comunidade.

  01

  Marked as helpful
• 

  P

  Miran Legin•740

  @miranlegin

  Posted over 2 years ago

  Hi Lucas,

  you did a great job on this challenge but i think you can improve it even more with couple minor adjustments:

  1. if you look at the page at 421px you can see in the header that the logo is overlapping with the button. @media (max-width: 420px) { .flex-header {...
  2. social icons in footer are kinda messy when you hover over them, i will suggest making link slightly taller and animate only the icon inside the <a> tag
  3. also minor visual adjustment regarding little bit of padding on the newsletter input just to make some extra room for text

  Other than that great job, i really like the logo animation!

  Keep coding!

  01

  Marked as helpful
• 

  Adriano•42,890

  @AdrianoEscarabote

  Posted over 2 years ago

  Falaa lucas! tudo bem?

  Parabéns pelo resultado do desafio, é sempre muito legal olhar os seus projetos e observar o tanto de mudança que você faz neles.

  Tenho uma dica que julgo que é valido citar:

  Os níveis de título devem aumentar apenas em um, os títulos devem estar em uma ordem lógica válida, o que significa que h1as h6tags de elemento devem aparecer em ordem decrescente sequencial. Link do artigo: click here

  O resto está insanoo!

  Tamo junto man! 👍

  02

  Marked as helpful
• 

  Chukwudobe Micah Chinedu•700

  @chukwudobe-Micah

  Posted over 2 years ago

  I really need information on how you added those curvy backgrounds, I'm doing this project now and i need help in that area.

  24
• 

  Osama•20

  @osama806

  Posted over 2 years ago

  Hi @correlucas

  don't show image in my solution, why in your opinon? https://www.frontendmentor.io/solutions/qr-code-solution-HSyW7tAnDh

  although show image in preview site ==> https://osama806.github.io/QR-code/

  If you have a solution

  can you help me understand this problem ???

  01