Webleb - Snippets de Código

HTML

<!DOCTYPE html>

<head>

<title>BETA Enerji Sistemleri | GES ve Mühendislik Çözümleri</title>

tailwind.config = {

theme: {

extend: {

colors: {

brand: {

blue: '#0e4c92',    // Solar panel mavisi

green: '#4caf50',   // Doğa yeşili

dark: '#1a1a1a',

light: '#f4f6f9'

}

},

fontFamily: {

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

heading: ['Oswald', 'sans-serif']

}

</script>

<style>

/* Özel Stil Tanımlamaları */

.hero-bg {

background-image: linear-gradient(rgba(14, 76, 146, 0.7), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');

background-size: cover;

background-position: center;

background-attachment: fixed;

}

.section-title::after {

content: '';

display: block;

width: 60px;

height: 4px;

background-color: #4caf50;

margin-top: 10px;

}

.card-hover {

transition: all 0.3s ease;

}

.card-hover:hover {

transform: translateY(-5px);

box-shadow: 0 10px 20px rgba(0,0,0,0.1);

}

/* Mobile Menu Animation */

#mobile-menu {

transition: max-height 0.3s ease-in-out;

max-height: 0;

overflow: hidden;

}

#mobile-menu.active {

max-height: 400px;

}

</style>

</head>

<a href="mailto:info@betaenerji.com" class="hover:text-brand-green transition"><i class="fas fa-envelope mr-2"></i>info@betaenerji.com</a>

<a href="tel:+908502223344" class="hover:text-brand-green transition"><i class="fas fa-phone mr-2"></i>Merkez: 0 (850) 222 33 44</a>

</div>

</div>

</div>

<span class="text-2xl font-heading font-bold text-brand-dark leading-none tracking-tight">BETA ENERJİ</span>

<span class="text-[0.65rem] text-brand-blue font-bold tracking-widest group-hover:text-brand-green transition duration-300 uppercase">SİSTEMLERİ MÜHENDİSLİK</span>

</div>

</a>

<a href="#anasayfa" class="text-gray-800 hover:text-brand-blue transition">Anasayfa</a>

<a href="#hakkimizda" class="text-gray-800 hover:text-brand-blue transition">Hakkımızda</a>

<a href="#hizmetler" class="text-gray-800 hover:text-brand-blue transition">Hizmetlerimiz</a>

<a href="#projeler" class="text-gray-800 hover:text-brand-blue transition">Projeler</a>

<a href="#iletisim" class="text-gray-800 hover:text-brand-blue transition">İletişim</a>

</div>

Teklif Al

</a>

</div>

</button>

</div>

<a href="#anasayfa" class="mobile-link text-gray-800 hover:text-brand-blue pl-4 border-l-4 border-transparent hover:border-brand-blue">Anasayfa</a>

<a href="#hakkimizda" class="mobile-link text-gray-800 hover:text-brand-blue pl-4 border-l-4 border-transparent hover:border-brand-blue">Hakkımızda</a>

<a href="#hizmetler" class="mobile-link text-gray-800 hover:text-brand-blue pl-4 border-l-4 border-transparent hover:border-brand-blue">Hizmetlerimiz</a>

<a href="#projeler" class="mobile-link text-gray-800 hover:text-brand-blue pl-4 border-l-4 border-transparent hover:border-brand-blue">Projeler</a>

<a href="#iletisim" class="mobile-link text-gray-800 hover:text-brand-blue pl-4 border-l-4 border-transparent hover:border-brand-blue">İletişim</a>

</div>

</nav>

<span class="bg-brand-green text-white px-3 py-1 text-sm font-bold uppercase rounded mb-4 inline-block tracking-wider">Geleceğin Enerjisi</span>

BETA Enerji ile <br>

<span class="text-brand-green">Sürdürülebilir Çözümler</span>

</h1>

BETA Enerji Sistemleri Mühendislik olarak, yenilikçi GES projeleri ve mühendislik hizmetleriyle enerji bağımsızlığınızı artırıyoruz.

</p>

Hizmetlerimiz

</a>

Bize Ulaşın

</a>

</div>

</a>

</div>

</section>

<div>

<div class="text-sm text-blue-200">Tamamlanan Proje</div>

</div>

<div>

<div class="text-sm text-blue-200">Kurulu Güç</div>

</div>

<div>

<div class="text-sm text-blue-200">Yıllık Tecrübe</div>

</div>

<div>

<div class="text-sm text-blue-200">Müşteri Memnuniyeti</div>

</div>

</section>

</div>

<h2 class="text-3xl md:text-4xl font-heading font-bold text-brand-dark mb-4 section-title">Hakkımızda</h2>

**BETA Enerji Sistemleri Mühendislik**, sektördeki köklü tecrübesi ve yenilikçi yaklaşımıyla Türkiye'nin enerji dönüşümüne öncülük etmektedir.

</p>

Güneş enerjisi santrallerinden endüstriyel elektrik çözümlerine kadar geniş bir yelpazede hizmet sunuyoruz. Müşterilerimize en verimli, ekonomik ve sürdürülebilir enerji sistemlerini kurmayı taahhüt ediyoruz.

</p>

<i class="fas fa-check-circle text-brand-green mr-3"></i> Yenilikçi Mühendislik Yaklaşımı

</li>

<i class="fas fa-check-circle text-brand-green mr-3"></i> Yüksek Verimli Sistem Tasarımları

</li>

<i class="fas fa-check-circle text-brand-green mr-3"></i> 7/24 Teknik Destek ve İzleme

</li>

</ul>

<a href="#iletisim" class="text-brand-blue font-bold hover:text-brand-dark border-b-2 border-brand-blue pb-1 transition">Daha Fazla Bilgi <i class="fas fa-arrow-right ml-2"></i></a>

</div>

</section>

<h2 class="text-3xl md:text-4xl font-heading font-bold text-brand-dark mb-4">Hizmetlerimiz</h2>

<p class="text-gray-600">BETA Enerji olarak, projelendirmeden anahtar teslim kuruluma kadar tüm süreçlerde yanınızdayız.</p>

</div>

</div>

<h3 class="text-xl font-bold text-brand-dark mb-3">Çatı GES Projeleri</h3>

<p class="text-gray-600 mb-4">Fabrika, depo ve ticari binalarınızın çatısını enerji üretim tesisine dönüştürüyoruz.</p>