Os usuários devem ser capazes de:
- Visualizar os menus suspensos relevantes no desktop e no celular ao interagir com os links de navegação
- Visualizar o layout ideal para o conteúdo, dependendo do tamanho da tela do dispositivo
- Ver os estados de foco para todos os elementos interativos na página
- Solução URL FrontEndMentor: clique aqui
- Site online URL: clique aqui
- HTML5
- CSS3
- Flexbox
- Mobile First
- JavaScript
Pela primeira vez fiz um menu dropdown que ocupa todo o tamanho da tela verticalmente. Foi um desafio interessante e me surpreendi por ter conseguido alcançar um resultado tão próximo ao design da imagem, além de ter gostado do código em html que montei. Segue abaixo um pequeno trecho do código:
<ul class="menu" data-menu="items" role="menu">
<li class="features" data-dropdown>
<a href="#" class="arrow" data-link-dropdown>Features</a>
<ul class="dropdown-menu icons">
<li><a href="#" class="to-do">To do List</a></li>
<li><a href="#" class="calendar">Calendar</a></li>
<li><a href="#" class="reminders">Reminders</a></li>
<li><a href="#" class="planning">Planning</a></li>
</ul>
</li>
<li class="company" data-dropdown>
<a href="#" class="arrow" data-link-dropdown>Company</a>
<ul class="dropdown-menu">
<li><a href="#">History</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Blog</a></li>
</ul>
</li>
<li>
<a href="#">Careers</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
<div class="account">
<a href="#">Login</a>
<a href="#" class="register">Register</a>
</div>
Desenvolvi este site apenas me baseando nas imagens adquiridas no Frontend Mentor, na tentativa de criar o site o mais próximo possível das imagens sem ter acesso as suas configurações. Ainda não me sinto confortável em relação a estruturação criada no css para alinhar a imagem e o conteúdo "Make remote work" para dispositivos de largura maior de 899px. Além disso, não acho que é uma boa maneira deixar a imagem ser cortada quando está sendo visualizada por dispositivos menores que 900px, acredito que tenha uma maneira melhor de posicionar a imagem sem que ocorra esse corte. Esses são os detalhes que reparei durante o desenvolvimento que ainda preciso aprimorar.