Dual Section Hero Slider

Websitenize Dual Section Hero Slider nasıl eklenir

Bir Dual Section Hero Slider, web sitenize daha fazla görsellik ve ilgi katmanın harika bir yoludur. Dual Section Hero Slider, iki bölümden oluşur: bir resim bölümü ve bir metin bölümü. Resim bölümü, web sitenizin ana sayfasını süsleyecek bir resim içerir. Metin bölümü, web sitenizin ana sayfası hakkında bilgi verecek metin içerir.

Dual Section Hero Slider eklemek için

HTML kodunun aşağıdaki gibi olması gerekir:

<div class="hero-slider">
  <div class="hero-slider-image">
    <img src="images/hero-slider-image.jpg" alt="Hero Slider Image">
  </div>
  <div class="hero-slider-text">
    <h1>Hero Slider Title</h1>
    <p>Hero Slider Text</p>
  </div>
</div>

HTML kodunda,
class="hero-slider" sınıfı, Dual Section Hero Slider'ı tanımlar.
class="hero-slider-image" sınıfı, resim bölümünü tanımlar.
src="images/hero-slider-image.jpg", resim bölümünün görüntü kaynağını tanımlar.
alt="Hero Slider Image", resim bölümünün alternatif metnini tanımlar.
class="hero-slider-text" sınıfı, metin bölümünü tanımlar.
h1="Hero Slider Title", metin bölümünün başlık metnini tanımlar.
p="Hero Slider Text", metin bölümünün paragraf metnini tanımlar.

Dual Section Hero Slider'ı ekledikten sonra, CSS kodunu kullanarak stilini verebilirsiniz. CSS kodu, aşağıdaki gibi olabilir:

.hero-slider {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero-slider-image {
  width: 50%;
}

.hero-slider-text {
  width: 50%;
  font-size: 24px;
  line-height: 1.5;
  color: #333;
}

CSS kodunda,
.hero-slider sınıfı, Dual Section Hero Slider'ı tanımlar.
width: 100%; özelliği, Dual Section Hero Slider'ın genişliğini 100% olarak tanımlar.
height: 100vh; özelliği, Dual Section Hero Slider'ın yüksekliğini ekran yüksekliği olarak tanımlar.
background-color: #fff; özelliği, Dual Section Hero Slider'ın arka plan rengini beyaz olarak tanımlar.
display: flex; özelliği, Dual Section Hero Slider'ı bir flex konteyner olarak tanımlar.
justify-content: space-between; özelliği, Dual Section Hero Slider'ın içindeki öğeleri eşit olarak dağıtır.
align-items: center; özelliği, Dual Section Hero Slider'ın içindeki öğeleri ortalayarak hizalar.

.hero-slider-image sınıfı, resim bölümünü tanımlar.
width: 50%; özelliği, resim bölümünün genişliğini 50% olarak tanımlar.

.hero-slider-text sınıfı, metin bölümünü tanımlar.
font-size: 24px; özelliği, metin bölümünün yazı tipini 24px olarak tanımlar.
line-height: 1.5; özelliği, metin bölümünün satır yüksekliğini 1.5 olarak tanımlar.
color: #333; özelliği, metin bölümünün rengini siyah olarak tanımlar.

Bu makalede, web sitenize Dual Section Hero Slider nasıl eklenir, sorusuna cevap verilmiştir. Dual Section Hero Slider eklemek için, HTML ve CSS kodunu kullanmanız gerekir.