Film Listesi
Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 74 / 76.
Görev
KolayBir sütun halinde düzenlenmiş dört film kartını biçimlendir. Son tasarım aşağıdaki görsele benzer görünecek, ancak kendi renklerini kullanmaktan çekinme.
Aşağıdaki adımları izle:
- Film kartlarını bir sütun halinde üst üste dizmek için
display: flex; flex-direction: column;kullan. - Sütunu dikey olarak ortalamak için
justify-content: center;kullan. - Kartları düzgün hizalamak için
align-items: center;kullan. - Her film kartını sabit bir boyut ve yumuşak renklerle biçimlendir.
- Aralarında boşluk oluşturmak ve okunabilirliği artırmak için her film kutusuna biraz
margin-bottomvepaddingekle. - İstenmeyen boşluk sorunlarını önlemek için
box-sizing: border-boxuygula. - Kartların içindeki fazla metni yönetmek için
overflow: autokullan.
Tasarımı geliştirmek ve görsel olarak daha çekici hale getirmek için box-shadow, border-radius, font-family ekleyebilir ve başlık için farklı bir yazı tipi rengi kullanabilirsin.
Kendin dene
<html>
<head>
<title>Movies</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="movies">
<div class="movie">
<h2>King Kong (2005)</h2>
<p>A filmmaker and his crew travel to Skull Island, where they encounter King Kong.</p>
</div>
<div class="movie">
<h2>Inception (2010)</h2>
<p>A thief who enters dreams to steal secrets faces his toughest mission yet.</p>
</div>
<div class="movie">
<h2>The Matrix (1999)</h2>
<p>A hacker learns the truth about reality and joins the fight against machines.</p>
</div>
<div class="movie">
<h2>Casablanca (1942)</h2>
<p>A nightclub owner is reunited with his lost love during World War II.</p>
</div>
</div>
</body>
</html>CSS ile Stil Verme bölümündeki tüm dersler
4Metin Temelleri
Metin RengiYazı Tipi AilesiYazı Tipi BoyutuYazı Tipi KalınlığıMetin HizalamaMetin SüslemesiTekrar Mücadelesi #1Tekrar Mücadelesi #2
Kendi başına pratik yap: Web playground