Looking to hire developers?
👾 Hello, Frontend Mentor coding community. This is my solution for the Huddle Landing Page With Curved Sections.
I added some features:
Happy to hear any feedback and advice!
@hyrongennike
Posted
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.
Marked as helpful
@correlucas
Posted
@hyrongennike Oh thanks Hyron! I wasn't aware of that. I'll fixit asap.
@vanderms
Posted
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:
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.
Marked as helpful
@correlucas
Posted
@vanderms Valeu Vander! Vou arrumar tudo isso.
@miranlegin
Posted
Hi Lucas,
you did a great job on this challenge but i think you can improve it even more with couple minor adjustments:
@media (max-width: 420px) { .flex-header {...<a> tagOther than that great job, i really like the logo animation!
Keep coding!
Marked as helpful
@correlucas
Posted
@miranlegin Thank you Miran! I'll fix it ASAP.
@AdrianoEscarabote
Posted
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! 👍
Marked as helpful
@correlucas
Posted
@AdrianoEscarabote Vou ajustar aqui e os outros erros de validacao alguma ideia de como corrigir? tem uns 6
@AdrianoEscarabote
Posted
@correlucas Sim! Para podermos arrumar isso podemos fazer deste modo:
Temos que certificar que todo o conteudo esteja contido em uma região de referência, designada com elementos de referência HTML5 ou regiões de referência ARIA.
Exemplo:
elementos de referência HTML5 nativos:
<body>
<header>This is the header</header>
<nav>This is the nav</nav>
<main>This is the main</main>
<footer>This is the footer</footer>
</body>
As práticas recomendadas de ARIA exigem o uso de elementos de referência HTML5 nativos em vez de funções ARIA sempre que possível, mas a marcação no exemplo a seguir funciona:
<body>
<div role="banner">This is the header</div>
<div role="navigation">This is the nav</div>
<div role="main">This is the main</div>
<div role="contentinfo">This is the footer</div>
</body>
É uma prática recomendada conter todo o conteúdo, exceto links para pular, em regiões distintas, como cabeçalho, navegação, principal e rodapé.
Link para ler mais sobre: click here
@chukwudobe-Micah
Posted
I really need information on how you added those curvy backgrounds, I'm doing this project now and i need help in that area.
@correlucas
Posted
@chukwudobe-Micah The curvy backgrounds are svg images and I've added them with as an html element with <img> making it a display: block / width: 100%. The image files are inside the starter files from FEM.
@chukwudobe-Micah
Posted
@correlucas yes, there are. But how did you make an SVG that's in your html a background image?
Edit: I think I just figured it out, it's a combination of background SVG and background color. Am I right?
@correlucas
Posted
@chukwudobe-Micah is not a background is in the first row of each section. Check my repository and you'll see every curvy img on top of each section.
@chukwudobe-Micah
Posted
@correlucas yes, I just realized it's not a background, my big mistake was that I was trying to make it a background cause it looked like it's a background, it was really deceiving my eyes, thank you.<3
@osama806
Posted
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 ???
@correlucas
Posted
@osama806 Update the screenshot the preview site is yet displaying the image
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
