Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] Duvida Menu Hamburguer do meu Projeto e Mão na Massa do curso HTML e CSS: Responsividade com Mobile-First

Olá a todos!

Esta é minha primeira postagem na comunidade e espero estar fazendo tudo certo! Estou atualmente trabalhando em um projeto para a faculdade, que envolve a criação de um site utilizando apenas HTML e CSS. Estou focado na versão mobile do projeto, seguindo os ensinamentos do curso "HTML e CSS: Responsividade com Mobile-First" onde desenvolvemos o site do AluraBook. Estou utilizando esse curso como base para a criação do meu projeto, que futuramente será incluído em meu portfólio.

Eu criei um modelo no Figma (imagem a seguir) e estou tentando replicá-lo utilizando HTML e CSS. No entanto, estou enfrentando dificuldades em fazer com que o tamanho dos botões fiquem iguais aos do Figma. Apesar de ter pesquisado e aplicado meu conhecimento, ainda não consegui encontrar uma solução para deixar o layout semelhante ao do Figma, especialmente em relação ao tamanho e formato dos botões. Ainda não implementei o box shadow, pois estou focado em resolver essa questão primeiro.

Figma: Insira aqui a descrição dessa imagem para ajudar na acessibilidadeComo meu projeto esta: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Aqui está um trecho do meu código HTML e Css:

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeInsira aqui a descrição dessa imagem para ajudar na acessibilidadeAgradeço antecipadamente por qualquer ajuda ou sugestão que puderem oferecer!

3 respostas

Boa Tarde João, espero que esteja bem. Pelo que vi no seu código, você pode aumentar o tamanho dos botões ao aumentar o valor do padding. Caso queira que os lados aumentem igualmente, você irá utilizar um único valor no padding, assim como está no seu código. Caso queira que as partes laterais tenham medidas diferentes da parte superior e inferior é só colocar dois valores (o 1º valor é referente as partes superiores e inferiores do botão, já o 2º valor corresponde às laterais). Segue exemplo:

.lista-menu__link {
    padding: 1em 5em;
}

Se caso desejar especificar um valor para cada lado do botão, é só definir 4 valores no padding (o 1º irá definir o top, o 2º valor irá definir o right, o 3º valor irá definir o bottom e o 4º valor irá definir o left). Segue exemplo:

.lista-menu__link {
    padding: 1em 5em 2em 4em;
}

Espero ter ajudado! Qualquer dúvida, é só comunicar aqui no fórum novamente. Abraço e bons estudos!

Olá Luiz, obrigado pela ajuda, mas ainda não consegui haha.

Eu gostaria que as âncoras, destacadas em azul e identificadas como lista-menu__link, ficassem todas do mesmo tamanho e que não acompanhassem a escrita como fiz no figma,

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeFigma:Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Seria uma opção colocar as tags âncoras dentro de divs para poder trabalhar o tamanho delas?

Fiz o teste e tambem nao cheguei no resultado, tambem se o usuario clicar em alguma parte q nao seja a tag ancora nao vai acontecer nada hahaha.! Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

solução!

Consegui obrigado!!!!