Menu
Coddy logo textTech
ÖĞRENMEYE BAŞLA
flag Tr iconTürkçedown icon

Grid Kart Düzeni

Coddy'nin HTML Journey'sinin CSS Mastery bölümünün bir parçası. Ders 42 / 43.

challenge icon

Görev

Kolay

CSS Grid kullanarak kartlar için basit bir 2 sütunlu düzen oluşturun.

  1. Kartlar iki eşit sütun halinde görüntülenmelidir.
  2. Kartlar arasında biraz boşluk olmalıdır.

Kendin dene

<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>

CSS Mastery bölümündeki tüm dersler

1Seçici Uzmanlığı – Kombinasyon

GirişAlt Öğe SeçicisiÇocuk SeçiciBitişik Kardeş SeçicisiGenel Kardeş SeçicisiÖzet Meydan Okuması

4Açılır Menü Projesi

Alt Menüyü EkleAlt Menüyü GösterDaha Fazla Stil VermeInput ve Buton

7CSS Grid ile İnşa Edin

Grid TemelleriGrid-row Öğe Yerleşimiİsimlendirilmiş AlanlarTekrar Görevi

2Etkileşimli Sözde Sınıflar

Sözde SınıflarHover EfektleriOdaklanma EfektleriAktif StillerÖzet Meydan Okuması

5Görsel Efektler

GradyanlarCSS FiltreleriTransformGeçişler ve Hover EfektleriTekrar Meydan Okuması

8Flavor Fiesta web sitesi

Grid yapısını kurmaHeaderAna bölümFooter

3Yapısal sözde sınıflar

Yapısal sözde sınıflarİlk Çocuğu HedeflemeSon Çocuğu HedeflemeDesen Gücü: nth-child KullanımıÖzet Meydan Okuması

6Açılış Sayfası

Header Bölümünü Stilize EtButonu Stilize EtBölüm DüzeniKart DüzeniSon Dokunuşları Ekle

9Son Meydan Okumalar

Aktif Menüyü VurgulamaZebra Tablo SatırlarıButon Hover EfektiGrid Kart DüzeniBulanık Hero Görseli

Kendi başına pratik yap: Web playground