https://github.com/luis92guimaraes/menu-flexbox
Exercicio @Devquest - Menu Flexbox
https://github.com/luis92guimaraes/menu-flexbox
css css-flexbox css3 hover html html5
Last synced: 4 days ago
JSON representation
Exercicio @Devquest - Menu Flexbox
- Host: GitHub
- URL: https://github.com/luis92guimaraes/menu-flexbox
- Owner: luis92guimaraes
- Created: 2023-10-07T15:52:40.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-10T22:38:05.000Z (over 2 years ago)
- Last Synced: 2025-12-07T08:54:03.583Z (6 months ago)
- Topics: css, css-flexbox, css3, hover, html, html5
- Language: CSS
- Homepage: https://luis92guimaraes.github.io/menu-flexbox/
- Size: 1.48 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Exercicio @Devquest - Menu Flexbox
#### Exemplo de Menu utilizando flexbox com elementos interativos com uso do hover
## Índice
- [Capturas de telas](#capturas-de-telas)
- [Links](#links)
- [Construído com](#construído-com)
- [O que aprendi](#o-que-aprendi)
- [Desenvolvimento contínuo](#desenvolvimento-contínuo)
- [Recursos úteis](#recursos-úteis)
- [Luis Fernando Guimaraes](#autor)
### Capturas de telas
#### Tela Desktop
#### Tela Ipad
#### Tela Mobile
### Links
- Site URL: https://luis92guimaraes.github.io/menu-flexbox/
### Construído com
### O que aprendi
Esse exercicio foi proposto dentro do curso devquest da @Devemdobro, exercicio do modulo avançado de CSS. É um exemplo de Menu de um site, foi usado conceitos de flexbox e o uso do hover para a criação.
## Trechos de códigos
```
.menu li a:hover{
background-color: var(--btn-hover-color);
color: var(--btn-text-color);
}
.button {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--btn-hover-color);
color: var(--btn-text-color);
padding: 10px 25px;
border-radius: 10px;
font-size: 20px;
}
.button:hover {
transform: scale(1.1);
transition: 0.1 ease-in-out;
color: var(--btn-text-hover-color);
}
```
### Desenvolvimento contínuo
Pretendo continuar aprendendo cada vez mais sobre as ferramentas utilizadas nesse projeto, ainda tem muita coisa pra ser absorvida mas sigo confiante e feliz em estar conseguindo realizar projetos como esse com mais clareza e confiança a cada dia de estudos.
### Recursos úteis
- [Mdn](https://developer.mozilla.org/en-US/) - O Mozilla Developer Network (MDN) desempenha um papel crucial ao fornecer recursos abrangentes e atualizados para desenvolvedores web em todo o mundo.
- [W3School](https://www.w3schools.com/css/default.asp) - Esse site sempre me ajuda a resolver qualquer problema relacionados a códigos de uma maneira fácil e muito rápida.
- [Dev em Dobro](https://www.youtube.com/@DevemDobro) - Este é um canal onde encontro muito material. Tem muito conteúdo relacionado ao desenvolvimento. Recomendo a todos que querem aprender sobre esse e outros conceitos relacionados.
## Autor
[Luis Fernando Guimarães](https://www.linkedin.com/in/luisfguimaraes/)