2023-cü ildə Rəqəmsal Marketinqin 5 Əsas Trendi
2023-cü ildə diqqət yetirməli olduğunuz rəqəmsal marketinq trendləri və strategiyaları haqqında ətraflı baxış.
Ətraflı oxuNarıncı Rəngli Header.php
Bu, HTML, CSS və JavaScript kodlarının hamısının bir yerdə olduğu tam işlək bir başlıq nümunəsidir. Başlıq narıncı rəngdə dizayn edilmişdir və responsiv xüsusiyyətə malikdir.
Seçilmiş narıncı rəng
Rəng kodu: #FF8C00 (HTML/CSS-də "darkorange")
Header.php Kodu
Aşağıda təqdim olunan kodu bir PHP faylı olaraq yadda saxlaya bilərsiniz:
<!DOCTYPE html>
<html lang="az">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sayt Başlığı</title>
<style>
/* CSS kodları burada */
header {
background-color: #FF8C00;
color: white;
padding: 1rem 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* ... digər CSS kodları */
</style>
</head>
<body>
<header id="main-header">
<div class="header-container">
<a href="#" class="logo">
<span class="logo-icon">🌅</span>
<span>NarıncıBaşlıq</span>
</a>
<button class="mobile-menu-btn" id="mobile-menu-toggle">☰</button>
<nav id="main-nav">
<ul>
<li><a href="#home">Ana Səhifə</a></li>
<li><a href="#about">Haqqımızda</a></li>
<li><a href="#services">Xidmətlər</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Əlaqə</a></li>
</ul>
</nav>
<div class="header-buttons">
<button class="btn btn-login">Daxil Ol</button>
<button class="btn btn-signup">Qeydiyyat</button>
</div>
</div>
</header>
<script>
// JavaScript kodları burada
// Mobil menyu funksionallığı
document.getElementById('mobile-menu-toggle').addEventListener('click', function() {
document.getElementById('main-nav').classList.toggle('active');
});
// Scroll effekti
window.addEventListener('scroll', function() {
const header = document.getElementById('main-header');
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
</script>
</body>
</html>
Nümunə funksionallıq:
1. Mobil menyunu açmaq/bağlamaq üçün yuxarı sağdakı menyu düyməsini sınayın.
2. Aşağı sürüşdürdükdə başlığın necə kiçildiyinə diqqət yetirin.
3 Menyu elementlərinin üzərinə gəldikdə alt xətt animasiyasını izləyin.
Quraşdırma Təlimatları
- Yuxarıdakı kodu kopyalayın və header.php adlı fayl olaraq yadda saxlayın
- PHP layihənizin əsas qovluğuna yerləşdirin
- Digər PHP fayllarınızda bu header-i daxil etmək üçün
<?php include 'header.php'; ?>istifadə edin - Rəng və ya digər dizayn elementlərini ehtiyaclarınıza uyğun dəyişdirin
Bu başlıq hissəsi tam işlək, responsiv və sürüşdürmə effektləri ilə təchiz edilmişdir.