Nasıl oluşturulur: Ayrı ekran (1/2)

CSS kullanarak ayrı ekran (50/50) etkisi nasıl oluşturulur öğrenin.

Kişisel olarak deneyin

Ayrı ekran nasıl oluşturulur

İlk adım - HTML ekle:

<div class="bölüm sol">
  <div class="merkezlenmiş">
    <img src="img_avatar2.png" alt="Avatar kadın">
    <h2>Jane Flex</h2>
    <p>Bazı metin.</p>
  </div>
</div>
<div class="bölüm sağ">
  <div class="merkezlenmiş">
    <img src="img_avatar.png" alt="Avatar adam">
    <h2>Bill Gates</h2>
    <p>Burada da bazı metin.</p>
  </div>
</div>

İkinci adım - CSS ekle:

/* Ekranı ikiye böler */
.bölüm {
  yükseklik: 100%;
  genişlik: 50%;
  konum: sabit;
  z-index: 1;
  üst: 0;
  yatay_aktarım: gizli;
  üst_oluk: 20px;
}
/* Sol kenarı kontrol et */
.sol {
  sol: 0;
  arka_plan_rengi: #111;
}
/* Sağ kenarı kontrol et */
.sağ {
  sağ: 0;
  arka_plan_rengi: kırmızı;
}
/* İçeriği hem yatay hem de dikey yönde merkeze yerleştirmek için */
.merkezlenmiş {
  konum: mutlak;
  üst: 50%;
  sol: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
/* Gerekirse, merkezi içerik konteynerindeki resim stilini ayarla */
.merkezlenmiş img {
  width: 150px;
  border-radius: 50%;
}

Kişisel olarak deneyin