Buyurun hocam sizden sonrakilerin de işi çözülmüş olur .
/* BeratK - Fixed Logo Styles */
/* Developer: BERAT K - R10 */
.BeratK-fixed-logo {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 1000;
background: rgba(255, 255, 255, 0.95);
padding: 10px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
/* BERAT K - R10 - Hover efekti */
}
.BeratK-fixed-logo:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
/* BERAT K - R10 - Hover animasyonu */
}
.BeratK-fixed-logo img {
display: block;
width: 80px;
height: auto;
border-radius: 4px;
/* BERAT K - R10 - Logo boyutlandırma */
}
/* BERAT K - R10 - Responsive tasarım */
@media (max-width: 768px) {
.BeratK-fixed-logo {
bottom: 15px;
left: 15px;
padding: 8px;
}
.BeratK-fixed-logo img {
width: 60px;
}
}
/* BERAT K - R10 - Alternatif basit stil */
.BeratK-fixed-logo-simple {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 1000;
transition: all 0.3s ease;
}
.BeratK-fixed-logo-simple:hover {
transform: scale(1.05);
/* BERAT K - R10 - Basit hover efekti */
}
.BeratK-fixed-logo-simple img {
width: 80px;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
// BeratK - Fixed Logo JavaScript
// Developer: BERAT K - R10
const BeratK = {
// BERAT K - R10 - Logo visibility kontrolü
initFixedLogo: function() {
const logo = document.querySelector('.BeratK-fixed-logo');
if (!logo) return;
// BERAT K - R10 - Scroll pozisyonuna göre logo görünürlüğü
window.addEventListener('scroll', () => {
const scrollY = window.scrollY;
const threshold = 100;
if (scrollY > threshold) {
logo.style.opacity = '1';
logo.style.visibility = 'visible';
} else {
logo.style.opacity = '0.7';
}
});
},
// BERAT K - R10 - Logo tıklama eventi
logoClickHandler: function() {
const logo = document.querySelector('.BeratK-fixed-logo');
if (logo) {
logo.addEventListener('click', function() {
// BERAT K - R10 - Ana sayfaya git veya özel action
window.location.href = '/';
});
}
},
// BERAT K - R10 - Responsive logo boyutu
responsiveLogoSize: function() {
const updateLogoSize = () => {
const logo = document.querySelector('.BeratK-fixed-logo img');
if (logo) {
const windowWidth = window.innerWidth;
if (windowWidth < 768) {
logo.style.width = '60px';
} else {
logo.style.width = '80px';
}
}
};
window.addEventListener('resize', updateLogoSize);
updateLogoSize(); // BERAT K - R10 - İlk yükleme
}
};
// BERAT K - R10 - Sayfa yüklendiğinde çalıştır
document.addEventListener('DOMContentLoaded', function() {
BeratK.initFixedLogo();
BeratK.logoClickHandler();
BeratK.responsiveLogoSize();
});
<!-- BERAT K - R10 - Sabit Logo HTML Yapısı -->
<div class="BeratK-fixed-logo">
<img src="BURAYA-LOGO-LIN" alt="Şirket Logosu">
</div>
<!-- BERAT K - R10 - Alternatif basit yapı -->
<div class="BeratK-fixed-logo-simple">
<img src="BURAYA-LOGO-URL-GIRIN" alt="Şirket Logosu">
</div>
// BeratK - SCSS Variables
// Developer: BERAT K - R10
$BeratK-logo-size: 80px;
$BeratK-logo-size-mobile: 60px;
$BeratK-logo-position: 20px;
$BeratK-logo-z-index: 1000;
$BeratK-logo-bg: rgba(255, 255, 255, 0.95);
$BeratK-logo-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
// BERAT K - R10 - SCSS Mixin
@mixin BeratK-fixed-position($bottom: $BeratK-logo-position, $left: $BeratK-logo-position) {
position: fixed;
bottom: $bottom;
left: $left;
z-index: $BeratK-logo-z-index;
}
.BeratK-fixed-logo {
@include BeratK-fixed-position();
background: $BeratK-logo-bg;
padding: 10px;
border-radius: 8px;
box-shadow: $BeratK-logo-shadow;
transition: all 0.3s ease;
// BERAT K - R10 - Nested hover
&:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
img {
display: block;
width: $BeratK-logo-size;
height: auto;
border-radius: 4px;
}
// BERAT K - R10 - Responsive
@media (max-width: 768px) {
bottom: 15px;
left: 15px;
padding: 8px;
img {
width: $BeratK-logo-size-mobile;
}
}
}