Design comparison
Solution retrospective
News homepage Website đ»
Hi guys đ I'm Paulo and this is my solution for the challenge:
Technologies used: đ
- HTML5
- CSS3
- Javascript
Stats according Lighthouse: đ§Ÿ
- 93% for Performance
- 93% for Accessibility
- 100% for Best practices
- 100% for SEO
Questions for community: đ
In the responsive layout for mobile devices, by clicking on the hamburger menu,
the background of the page changes to a darker tonality. I do not know exactly which CSS property is more appropriate for that. For my solution, I used: filter: grayscale(60%)
. I would appreaciate feedback on that or suggestions for a more fitting property.
Thanks for your attention! If you have suggestions or feedback, I would appreciate that! đ
Paulo Xavier.
Community feedback
- Account deleted
OlĂĄ, Paulo! Eu sou o Alberto.
Meus parabéns pelo seu trabalho duro e por completares este desafio. Eu tenho algumas sugestÔes sobre este desafio que podem te ajudar a melhorar a sua solução.
Ao se clicar no menu hamburger, vocĂȘ poderia mudar a tonalidade da pĂĄgina para uma mais escura na versĂŁo Mobile, utilizando a seguinte tĂ©cnica:
- Passo 1: HTML - Adicione um novo elemento,
div
com a classedarker
, como filho direto debody
ao seuindex.html
:
<!DOCTYPE html> <html lang="en"> <head> ... </head> <body> <div class="darker"></div> ... </body> </html>
Ă por meio deste elemento que vocĂȘ poderia aplicar o efeito de escuridĂŁo, quando o menu hamburger for clicado pelo usuĂĄrio.
- Passo 2: CSS - Adicione as seguintes regras CSS, ao seu estilo:
.darker { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; opacity: 0; visibility: hidden; /* VocĂȘ pode mudar para uma cor escura de sua preferĂȘncia */ background-color: #555; /* VocĂȘ pode mudar para uma transição de sua preferĂȘncia */ transition: 0.5s ease-in-out opacity; } .darker.active { opacity: 1; visibility: visible; }
Isso farĂĄ com que haja um fundo escuro sobre toda pĂĄgina (efeito de escuridĂŁo), mas para isso ter efeito, vocĂȘ deveria modificar o seu JavaScript, conforme o passo 3.
- Passo 3: JavaScript - Agora ao se clicar no menu hamburger, em vez de adicionar a classe
active
ao seu elementomain
, adicione esta classe ao novo elemento criado no passo 1 (<div class="darker"></div>
). Isso farĂĄ com que a classeactive
, aplique o efeito de escuridĂŁo sobre a pĂĄgina, conforme vocĂȘ perguntou.
EntĂŁo, Paulo! Estas sĂŁo as minhas sugestĂ”es para a sua solução sobre este desafio. Espero sinceramente que elas possam te ajudar a melhorĂĄ-la. Se vocĂȘ tiver qualquer dĂșvida, problema, ou pergunta, ao seguir estes passos, saiba que vocĂȘ pode me chamar, ou mesmo pedir ajuda em outros membros da plataforma.
Alberto,
Feliz Codificação :)
Marked as helpful1@paulo-xavierPosted 10 months agoOlĂĄ @albertorauljose đ
Muito obrigado por sua incrĂvel explicação, foi de grande utilidade e esclareceu minha dĂșvida. Agradeço por ter tirado um tempo para me ajudar com isso. Com certeza vou aplicar e atualizar meu projeto com essa dica. đ Um forte abraço e bons estudos!
Paulo Xavier.
0 - Passo 1: HTML - Adicione um novo elemento,
Please log in to post a comment
Log in with GitHubJoin our Discord community
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