Webleb - Snippets de Código

HTML

<!DOCTYPE html>

<head>

<title>SolarTech | Yenilenebilir Enerji Sistemleri</title>

tailwind.config = {

theme: {

extend: {

colors: {

solar: {

yellow: '#FFD700',

orange: '#FFA500',

green: '#2E8B57',

dark: '#1a202c',

light: '#f7fafc',

}

},

fontFamily: {

sans: ['Inter', 'sans-serif'],

tech: ['Orbitron', 'sans-serif'],

},

animation: {

'float': 'float 6s ease-in-out infinite',

'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',

},

keyframes: {

float: {

'0%, 100%': { transform: 'translateY(0)' },

'50%': { transform: 'translateY(-20px)' },

}

</script>

<style>

/* Özel CSS Tanımlamaları */

body {

overflow-x: hidden;

}

/* Scroll Bar Tasarımı */

::-webkit-scrollbar {

width: 10px;

}

::-webkit-scrollbar-track {

background: #1a202c;

}

::-webkit-scrollbar-thumb {

background: linear-gradient(to bottom, #FFA500, #2E8B57);

border-radius: 5px;

}

/* Reveal Animasyonları */

.reveal {

opacity: 0;

transform: translateY(30px);

transition: all 0.8s ease-out;

}

.reveal.active {

opacity: 1;

transform: translateY(0);

}

/* Parallax Efekti */

.parallax-bg {

background-image: url('https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');

background-attachment: fixed;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

position: relative;

}

/* Hero Bölümü Arkaplanı */

.hero-bg {

background-image: url('https://images.unsplash.com/photo-1497435334941-8c899ee9e8e9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');

background-attachment: fixed; /* Sabit arkaplan (Parallax hissi) */

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

.parallax-overlay {

background: rgba(0, 0, 0, 0.7);

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

/* Cam Efekti */

.glass {

background: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.2);

}

/* Loader */

#loader {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: #0f172a;

z-index: 9999;

display: flex;

justify-content: center;

align-items: center;

transition: opacity 0.5s ease;

}

.sun-loader {

width: 60px;

height: 60px;

border-radius: 50%;

background: radial-gradient(circle, #FFD700, #FFA500);

box-shadow: 0 0 40px #FFA500;

animation: pulse-slow 2s infinite;

}

</style>

</head>

<h2 class="text-white font-tech text-xl tracking-widest animate-pulse">SOLARTECH YÜKLENİYOR</h2>

</div>

SOLAR<span class="text-solar-green">TECH</span>

</a>

<a href="#home" class="hover:text-solar-yellow transition-colors">Ana Sayfa</a>

<a href="#about" class="hover:text-solar-yellow transition-colors">Hakkımızda</a>

<a href="#services" class="hover:text-solar-yellow transition-colors">Hizmetler</a>

<a href="#projects" class="hover:text-solar-yellow transition-colors">Projeler</a>

<a href="#contact" class="px-5 py-2 bg-solar-green hover:bg-green-700 rounded-full transition-all transform hover:scale-105 shadow-lg shadow-green-500/30">Teklif Al</a>

</div>

</button>

</div>

<a href="#home" class="block hover:text-solar-yellow">Ana Sayfa</a>

<a href="#about" class="block hover:text-solar-yellow">Hakkımızda</a>

<a href="#services" class="block hover:text-solar-yellow">Hizmetler</a>

<a href="#projects" class="block hover:text-solar-yellow">Projeler</a>

<a href="#contact" class="block text-solar-green font-bold">Teklif Al</a>

</div>

</nav>

GELECEĞİN ENERJİSİ

</div>

Doğanın Gücüyle <br>

<span class="text-transparent bg-clip-text bg-gradient-to-r from-solar-yellow to-solar-orange">Sınırsız Enerji</span>

</h1>

Eviniz ve iş yeriniz için sürdürülebilir, verimli ve ekonomik güneş enerjisi çözümleri. Gezegenimizi korurken enerji maliyetlerinizi düşürün.

</p>

Ücretsiz Keşif İste

</a>

Projelerimizi İncele

</a>

</div>

</div>

</section>

<p class="text-sm opacity-90">Yıllık Sektör Tecrübesi</p>

</div>

<h3 class="text-solar-green font-bold uppercase tracking-wide mb-2">Hakkımızda</h3>

<h2 class="text-4xl font-bold text-gray-900 mb-6">Enerji Bağımsızlığınız İçin Çalışıyoruz</h2>

SolarTech olarak, Türkiye'nin dört bir yanında yenilenebilir enerji projelerine imza atıyoruz. Mühendislik temelli yaklaşımımızla, kurulumdan bakım onarıma kadar uçtan uca hizmet sunuyoruz.

</p>

<span class="text-gray-700">Yüksek verimli panel teknolojileri</span>

</li>

<span class="text-gray-700">25 Yıl performans garantisi</span>

</li>

<span class="text-gray-700">Uzman mühendis kadrosu</span>

</li>

</ul>

Daha Fazla Bilgi <i class="fas fa-arrow-right"></i>

</a>

</div>

</section>

<span class="text-solar-orange font-bold uppercase">Hizmetlerimiz</span>

<h2 class="text-4xl font-bold text-gray-900 mt-2">Sizin İçin Neler Yapıyoruz?</h2>

</div>

</div>

<h3 class="text-xl font-bold mb-4">Konut Tipi Sistemler</h3>

<p class="text-gray-600 mb-6">Evinizin çatısını bir enerji santraline dönüştürün. Elektrik faturanızdan tasarruf edin.</p>

Detayları İncele <i class="fas fa-chevron-right text-xs"></i>

</button>

</div>

</div>

<h3 class="text-xl font-bold mb-4">Endüstriyel Çözümler</h3>

<p class="text-gray-600 mb-6">Fabrikalar ve işletmeler için büyük ölçekli GES kurulumları ile maliyetleri düşürün.</p>

Detayları İncele <i class="fas fa-chevron-right text-xs"></i>

</button>

</div>

</div>

<h3 class="text-xl font-bold mb-4">Tarımsal Sulama</h3>

<p class="text-gray-600 mb-6">Tarlalarınızda mazot maliyetine son. Güneş enerjili sulama sistemleri ile tanışın.</p>

Detayları İncele <i class="fas fa-chevron-right text-xs"></i>

</button>

</div>

</section>

<div class="text-sm uppercase tracking-wider opacity-80">Tamamlanan Proje</div>

</div>

<div class="text-sm uppercase tracking-wider opacity-80">MW Kurulu Güç</div>

</div>

<div class="text-sm uppercase tracking-wider opacity-80">% Müşteri Memnuniyeti</div>

</div>

<div class="text-sm uppercase tracking-wider opacity-80">Ton CO2 Engellendi</div>

</div>

</section>

<div>

<span class="text-solar-green font-bold uppercase">Referanslarımız</span>

<h2 class="text-4xl font-bold text-gray-900 mt-2">Son Projelerimiz</h2>

</div>

<a href="#" class="hidden md:inline-block px-6 py-2 border-2 border-gray-800 rounded-full hover:bg-gray-800 hover:text-white transition-all font-semibold">Tümünü Gör</a>

</div>

<span class="text-solar-yellow text-sm font-bold">İZMİR</span>

<h3 class="text-white text-xl font-bold">Fabrika Çatı GES</h3>

<p class="text-gray-300 text-sm mt-2">2.5 MW Kurulu Güç</p>

</div>

<span class="text-solar-yellow text-sm font-bold">ANTALYA</span>

<h3 class="text-white text-xl font-bold">Villa Güneş Paneli</h3>

<p class="text-gray-300 text-sm mt-2">Hibrit Sistem Kurulumu</p>

</div>

<span class="text-solar-yellow text-sm font-bold">KONYA</span>

<h3 class="text-white text-xl font-bold">Arazi GES</h3>

<p class="text-gray-300 text-sm mt-2">Tarımsal Sulama Desteği</p>

</div>

</section>

<h2 class="text-4xl font-bold mb-6 font-tech">Projelerinizi Hayata Geçirelim</h2>

Ücretsiz keşif ve fizibilite raporu için bizimle iletişime geçin. Uzman ekibimiz size en uygun çözümü sunmak için hazır.

</p>

</div>

<div>

<h4 class="font-bold text-lg">Merkez Ofis</h4>

<p class="text-gray-400">Teknoloji Vadisi, Güneş Plaza No:45<br>İstanbul, Türkiye</p>

</div>

</div>

<div>

<h4 class="font-bold text-lg">Telefon</h4>

<p class="text-gray-500 text-sm">Hafta içi 09:00 - 18:00</p>

</div>

</div>

<div>

<h4 class="font-bold text-lg">E-Posta</h4>

<p class="text-gray-400">info@solartech.com.tr</p>

</div>

<h3 class="text-2xl font-bold mb-6 text-solar-yellow">Bize Ulaşın</h3>

<label for="name" class="absolute left-4 top-3 text-gray-400 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:top-3 peer-placeholder-shown:text-gray-400 peer-focus:-top-6 peer-focus:text-xs peer-focus:text-solar-yellow">Adınız Soyadınız</label>

</div>

<label for="phone" class="absolute left-4 top-3 text-gray-400 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:top-3 peer-placeholder-shown:text-gray-400 peer-focus:-top-6 peer-focus:text-xs peer-focus:text-solar-yellow">Telefon Numaranız</label>

</div>

<label for="email" class="absolute left-4 top-3 text-gray-400 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:top-3 peer-placeholder-shown:text-gray-400 peer-focus:-top-6 peer-focus:text-xs peer-focus:text-solar-yellow">E-Posta Adresiniz</label>

</div>

<label for="message" class="absolute left-4 top-3 text-gray-400 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:top-3 peer-placeholder-shown:text-gray-400 peer-focus:-top-6 peer-focus:text-xs peer-focus:text-solar-yellow">Mesajınız</label>

</div>

<span>GÖNDER</span>

</button>

</form>

</div>

</section>

</div>

</footer>

</button>

</div>

</div>

<div>

<h4 class="font-bold text-gray-800">Başarılı!</h4>

<p class="text-sm text-gray-600">Mesajınız bize ulaştı.</p>

</div>

// === Yükleyici (Loader) ===

window.addEventListener('load', () => {

const loader = document.getElementById('loader');

setTimeout(() => {

loader.style.opacity = '0';

setTimeout(() => {

loader.style.display = 'none';

// 3D Init kaldırıldı

}, 500);

}, 1000);

});

// === Navbar Kaydırma Efekti ===

const navbar = document.getElementById('navbar');

window.addEventListener('scroll', () => {

if (window.scrollY > 50) {

navbar.classList.add('bg-gray-900/95', 'backdrop-blur-md', 'shadow-lg', 'py-2');

navbar.classList.remove('py-4', 'bg-transparent');

} else {

navbar.classList.remove('bg-gray-900/95', 'backdrop-blur-md', 'shadow-lg', 'py-2');

navbar.classList.add('py-4', 'bg-transparent');

}

});

// === Mobil Menü ===

const mobileBtn = document.getElementById('mobile-menu-btn');

const mobileMenu = document.getElementById('mobile-menu');

mobileBtn.addEventListener('click', () => {

mobileMenu.classList.toggle('hidden');

});

// Menü linklerine tıklayınca menüyü kapat

document.querySelectorAll('#mobile-menu a').forEach(link => {

link.addEventListener('click', () => {

mobileMenu.classList.add('hidden');

});

// === Scroll Reveal Animasyonları ===

const observerOptions = {

threshold: 0.1,

rootMargin: "0px 0px -50px 0px"

};

const observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('active');

// Eğer sayaç ise çalıştır

if(entry.target.querySelector('.counter')) {

startCounters(entry.target);

}

});

}, observerOptions);

document.querySelectorAll('.reveal').forEach(el => {

observer.observe(el);

});

// === Sayaç Animasyonu ===

let counted = false;

function startCounters(container) {

const counters = container.querySelectorAll('.counter');

counters.forEach(counter => {

const target = +counter.getAttribute('data-target');

const duration = 2000; // ms

const increment = target / (duration / 16); // 60fps

let current = 0;

const updateCounter = () => {

current += increment;

if (current < target) {

counter.innerText = Math.ceil(current);

requestAnimationFrame(updateCounter);

} else {

counter.innerText = target;

}

};

updateCounter();

});

}

// === Modal Sistem ve İçerikleri ===

const modalData = {

'modal-konut': {

title: 'Konut Tipi Güneş Enerjisi',

image: 'https://images.unsplash.com/photo-1592833159155-c62df1b65634?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',

content: '<p class="mb-4">Müstakil evler ve site yönetimleri için özel olarak tasarlanan çatı tipi GES projelerimizle kendi elektriğinizi üretebilirsiniz. Fazla üretilen elektriği şebekeye satarak gelir elde etme imkanı sunuyoruz.</p><ul class="list-disc pl-5 space-y-2 text-gray-600"><li>Anahtar teslim kurulum</li><li>Resmi süreç yönetimi</li><li>Uzaktan izleme sistemi</li><li>Birebir tüketim analizi</li></ul>'

},

'modal-endustri': {

title: 'Endüstriyel Çözümler',

image: 'https://images.unsplash.com/photo-1611365892117-00ac5ef43c90?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',

content: '<p class="mb-4">Fabrika, depo ve ticari binalarınızın çatısında atıl duran alanları enerji üretim tesisine dönüştürüyoruz. Amortisman süresi ortalama 3-4 yıl olan sistemlerimizle rekabet gücünüzü artırın.</p><ul class="list-disc pl-5 space-y-2 text-gray-600"><li>Yüksek voltaj uyumluluğu</li><li>ISO standartlarında kurulum</li><li>Yıllık bakım anlaşmaları</li><li>Karbon ayak izi raporlaması</li></ul>'

},

'modal-tarim': {

title: 'Tarımsal Sulama Sistemleri',

image: 'https://images.unsplash.com/photo-1625305600309-400d77a1700d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',

content: '<p class="mb-4">Elektrik şebekesinin olmadığı arazilerde bile pompalarınızı güneş enerjisi ile çalıştırın. Mobil ve sabit sistem seçeneklerimiz mevcuttur.</p><ul class="list-disc pl-5 space-y-2 text-gray-600"><li>Mazot maliyetine son</li><li>Bakım gerektirmeyen yapı</li><li>Otomatik zamanlama sistemleri</li><li>Mobil römork çözümleri</li></ul>'

},

'modal-project1': {

title: 'İzmir Fabrika Çatı GES',

image: 'https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',

content: '<p>İzmir OSB içerisinde yer alan tekstil fabrikası için kurulan 2.5 MW gücündeki santral, fabrikanın yıllık enerji ihtiyacının %85\'ini karşılamaktadır. Proje 4 ayda tamamlanmış ve devreye alınmıştır.</p>'

},

'modal-project2': {

title: 'Antalya Villa Hibrit Sistem',

image: 'https://images.unsplash.com/photo-1566093097221-ac2335b09e70?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',

content: '<p>Elektrik kesintilerinden etkilenmeyen, batarya destekli (Hibrit) sistemimiz ile Antalya\'daki bu villa tam enerji bağımsızlığına kavuştu. 10kW panel gücü ve 15kWh lityum batarya kullanılmıştır.</p>'

},

'modal-project3': {

title: 'Konya Arazi GES',

image: 'https://images.unsplash.com/photo-1613665813446-82a78c468a1d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',

content: '<p>Tarımsal sulama kooperatifi için kurulan 500kW gücündeki arazi tipi santral, bölgedeki 50 çiftçinin sulama maliyetlerini sıfıra indirmiştir. Çelik konstrüksiyon üzerine inşa edilmiştir.</p>'

}

};

function openModal(modalId) {

const data = modalData[modalId];

if(!data) return;

const overlay = document.getElementById('modal-overlay');

const contentDiv = document.getElementById('modal-content');

const body = document.getElementById('modal-body');

body.innerHTML = `

<h3 class="text-2xl font-bold text-gray-800 mb-4">${data.title}</h3>

${data.content}

</div>

<button onclick="closeModal()" class="mt-6 bg-solar-green text-white px-6 py-2 rounded-lg hover:bg-green-700 transition-colors">Kapat</button>

</div>

`;

overlay.classList.remove('hidden');

// Animasyon için küçük gecikme

requestAnimationFrame(() => {

overlay.classList.remove('opacity-0');

contentDiv.classList.remove('scale-95');

contentDiv.classList.add('scale-100');

});

document.body.style.overflow = 'hidden'; // Scroll'u kilitle

}

function closeModal() {

const overlay = document.getElementById('modal-overlay');

const contentDiv = document.getElementById('modal-content');

overlay.classList.add('opacity-0');

contentDiv.classList.remove('scale-100');

contentDiv.classList.add('scale-95');

setTimeout(() => {

overlay.classList.add('hidden');

document.body.style.overflow = 'auto';

}, 300);

}

// Modal dışına tıklayınca kapatma

document.getElementById('modal-overlay').addEventListener('click', (e) => {

if (e.target === document.getElementById('modal-overlay')) {

closeModal();

}

});

// === Form İşlemleri ===

const contactForm = document.getElementById('contactForm');

contactForm.addEventListener('submit', (e) => {

e.preventDefault();

// Buton Animasyonu

const btn = contactForm.querySelector('button');

const originalText = btn.innerHTML;

btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> GÖNDERİLİYOR...';

btn.disabled = true;

// Simüle edilmiş gönderim süresi

setTimeout(() => {

// Formu temizle

contactForm.reset();

// Butonu eski haline getir

btn.innerHTML = originalText;

btn.disabled = false;

// Toast Bildirimi Göster

showToast();

}, 1500);

});

function showToast() {

const toast = document.getElementById('toast');

toast.classList.remove('translate-y-20', 'opacity-0');

setTimeout(() => {

toast.classList.add('translate-y-20', 'opacity-0');

}, 3000);

}

</script>

</body>

</html>

Metehan

Recomendado

Um Código de Metehan

Um Código de Metehan

Um Código de Metehan

HTML

CSS

JS

Recomendado

Um Código de Metehan

Um Código de Metehan

Um Código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS