Layout de Cards em Grid
Parte da seção CSS Mastery do Journey de HTML da Coddy. Lição 42 de 43.
Desafio
FácilCrie um layout simples de 2 colunas para os cartões usando CSS Grid.
- Os cartões devem ser exibidos em duas colunas iguais.
- Deve haver algum espaço entre os cartões.
Experimente você mesmo
<html>
<head>
<title>Grid Card Layout</title>
<style>
.card {
background-color: #0252c9;
padding: 16px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
/* Add your styles here */
</style>
</head>
<body>
<div class="card-container">
<div class="card">
<h3>Card 1</h3>
<p>This is the first card with some text.</p>
</div>
<div class="card">
<h3>Card 2</h3>
<p>This is the second card with more content.</p>
</div>
</div>
</body>
</html>
Todas as lições de CSS Mastery
1Domínio de Seletores – Combinação
IntroduçãoSeletor de DescendenteSeletor de FilhoSeletor de Irmão AdjacenteSeletor de Irmão GeralDesafio de Recapitulação7Construa com CSS Grid
Fundamentos do GridPosicionamento de Itens com Grid-rowÁreas NomeadasDesafio de Revisão2Pseudo-classes Interativas
Pseudo-classesEfeitos de HoverEfeitos de FocoEstilos AtivosDesafio de Recapitulação3Pseudo-classes estruturais
Pseudo-classes estruturaisSelecionando o primeiro filhoSelecionando o último filhoO poder dos padrões: Usando nth-childDesafio de recapitulação6Landing Page
Estilizar a seção do cabeçalhoEstilizar o botãoLayout da seçãoLayout de cardAdicionar toques finais9Desafios Finais
Destacar Menu AtivoLinhas de Tabela ZebradasEfeito Hover em BotõesLayout de Cards em GridImagem Hero DesfocadaPratique por conta própria: Playground de Web