Grupo técnico sobre CSS. ⚠️ ATENÇÃO: - Para evitar advertências não esqueça de ler as regras com o comando /rules. - Para reportar alguma mensagem utilize o comando /report.
<!doctype html>Читать полностью…
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mega Menu</title>
<style>
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
body {
align-items: center;
display: flex;
justify-content: center;
min-height: 100vh;
}
.mega-menu {
background-color: white;
border: 1px solid #eee;
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 800px;
}
.menu-container {
display: flex;
justify-content: space-between;
}
.menu-section {
flex: 1;
padding: 0 16px;
}
.menu-header {
color: #222;
font-size: 16px;
font-weight: bold;
margin-bottom: 16px;
}
.menu-list {
list-style-type: none;
margin-bottom: 16px;
}
.menu-item {
padding: 8px 0;
}
.menu-link {
color: #555;
font-size: 16px;
text-decoration: none;
}
.menu-link:hover {
color: #000;
}
</style>
</head>
<body>
<div class="mega-menu">
<div class="menu-container">
<div class="menu-section">
<p class="menu-header">Nobreaks</p>
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">Linha Double Way</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Linha Compacta</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link"
>Nobreaks com Grau de Proteção Especial</a
>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Safeserver Power (SPW)</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Volt</a>
</li>
</ul>
<p class="menu-header">Soluções</p>
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">Rack DWTT-A5 Modular Plugin</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Rack TI & Energia</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Grau de Proteção Especial</a>
</li>
</ul>
</div>
<div class="menu-section">
<p class="menu-header">Baterias</p>
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">Baterias de Lítio</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Baterias VRLA - AGM</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Baterias Alcalinas</a>
</li>
</ul>
<p class="menu-header">Acessórios</p>
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">MSB Slim IoT</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">WBRC IoT Engetron</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
se vc reparar o grid deixa tudo com mesma altura, aí nao sei se existe alguma propriedade pra lidar com esse caso especifico
Читать полностью…mas usei um margin top negativo no container dos acessorios
Читать полностью…Acho que entendi. Talvez dê usando grid-auto-flow
com algum valor dense
.
Mas acho que grid não vai resolver teu caso, talvez usando alguma mágica
Читать полностью…to usando assim no sass
&.show {
display: grid;
grid-template-columns: 320px 320px;
gap: 24px;
padding: 24px;
}
Se eu tenho uma letra "B" maiúscula e quero preencher todo o espaço dentro da letra, tampando todos os buracos dentro dela. Como posso fazer isso usando CSS?
Читать полностью…isso aqui? https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid
Читать полностью…Mas é requisito que seja feito com Grid, mesmo?
Se fizer com Flexbox (ou mesmo columns
) talvez chegue nesse mesmo resultado que você tá querendo de maneira mais simples.
acho que não vai dar pra separar porque o conteudo vem dinamico do cms
Читать полностью…Manda como tá agora que talvez fique mais fácil visualizar, tu mandou o design do Figma na foto, certo ?
Читать полностью…acessórios e soluções estão na mesma linha, mesma altura. mas gostaria que acessóros ficasse mais acima, como no exemplo
Читать полностью…pessoal, bom dia.
como vocês fariam para posicionar essas categorias de produto nesse submenu?
estou usando css grid mas nobreaks e baterias ficam na mesma linha com a mesma altura. gostaria que a altura dos containers de categorias calculasse apenas a altura do conteúdo desse container. alguem poderia ajudar, por gentileza?
Ah, tá falando da quantidade de inscritos? Não exibo mesmo.
Читать полностью…SEU JOB TECH
- Muitas oportunidades de emprego ( CLT ou PJ),
- para varias regiões e empresas, vagas com perfil de Jr a Sr
- Principais Stacks: Angular, Vue, React, php, Node
Áreas: Front end, Back end, FullStack, DevOps, UX/UI, Mobo, QA
https://seujob.tech/?remote=false&level=j%C3%BAnior