Układ kart w siatce
Część sekcji Mistrzowskie opanowanie CSS ścieżki HTML w Coddy. Lekcja 42 z 43.
Wyzwanie
ŁatwyUtwórz prosty układ kart w 2 kolumnach za pomocą CSS Grid.
- Karty powinny być wyświetlane w dwóch równych kolumnach.
- Między kartami powinno być trochę odstępu.
Spróbuj swoich sił
<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>
Wszystkie lekcje w sekcji Mistrzowskie opanowanie CSS
1Opanowanie selektorów – łączenie
WprowadzenieSelektor potomkaSelektor dzieckaSelektor sąsiadującego rodzeństwaSelektor ogólnego rodzeństwaWyzwanie podsumowujące7Twórz za pomocą CSS Grid
Podstawy GridRozmieszczanie elementów w wierszach siatkiNazwane obszaryWyzwanie podsumowujące2Interaktywne pseudoklasy
PseudoklasyEfekty najechania kursoremEfekty fokusuStyle aktywneWyzwanie podsumowujące3Strukturalne pseudoklasy
Strukturalne pseudoklasyWybieranie pierwszego elementu potomnegoWybieranie ostatniego elementu potomnegoMoc wzorców: użycie nth-childWyzwanie podsumowujące9Wyzwania końcowe
Wyróżnianie aktywnej pozycji menuNaprzemienne kolory wierszy tabeliEfekt najechania na przyciskUkład kart w siatceRozmyty obraz głównyPoćwicz samodzielnie: Edytor online Web