Bir banner bölümü için CSS kodları oluştururken genellikle geniş bir arka plan resmi, metin, düğmeler ve gerekirse başka öğeler içerir. İşte basit bir banner bölümü için CSS örneği:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Banner Örneği</title>
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
.banner {
position: relative;
height: 400px; /* Banner yüksekliği */
background: url('banner-image.jpg') center/cover no-repeat; /* Arkaplan resmi */
color: #fff;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.banner h1 {
font-size: 3em;
margin-bottom: 10px;
}
.banner p {
font-size: 1.2em;
margin-bottom: 20px;
}
.banner button {
padding: 10px 20px;
font-size: 1.2em;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.banner button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="banner">
<h1>Hoş Geldiniz!</h1>
<p>Web sitemize özel fırsatları kaçırmayın.</p>
<button>Detaylar</button>
</div>
</body>
</html>
Bu örnekte:
.bannersınıfı, banner bölümünün genel stilini tanımlar.backgroundözelliği ile bir arka plan resmi eklenmiştir.- Metin ve düğme öğelerine özel stil kuralları eklenmiştir.
display: flexile içeriği dikey olarak hizalamak ve ortalamak için flexbox kullanılmıştır.- Hover efekti için düğme üzerine gelindiğinde stil değişikliği sağlanmıştır.
Bu kodları kendi projenize uyarlayarak banner bölümünüzü kişiselleştirebilirsiniz. Arkaplan resmi ve renkleri, metin stilleri ve diğer özellikler üzerinde değişiklikler yapabilirsiniz.