Webleb - UI Elements - Architecture Engineering Tailwind CSS Website

HTML

<!DOCTYPE html>

<head>

<title>Struktur | Mimarlık & Mühendislik Hizmetleri</title>

<style>

/* ===== DEĞİŞKENLER VE TEMEL STİLLER ===== */

:root {

--primary-color: #3B82F6; /* Modern Mavi */

--secondary-color: #1E40AF; /* Koyu Mavi */

--dark-bg: #0F172A; /* Çok Koyu Lacivert/Siyah */

--light-text: #E2E8F0; /* Açık Gri Metin */

--accent-color: #D4AF37; /* Altın Sarısı Vurgu */

--card-bg: rgba(255, 255, 255, 0.05); /* Hafif Şeffaf Kart */

--border-color: rgba(255, 255, 255, 0.1); /* Hafif Beyaz Çerçeve */

--transition-timing: cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

body {

font-family: 'Inter', sans-serif;

background-color: var(--dark-bg);

color: var(--light-text);

line-height: 1.6;

scroll-behavior: smooth;

overflow-x: hidden;

}

h1, h2, h3, h4, h5, h6 {

font-family: 'Playfair Display', serif;

color: white;

}

/* ===== ANİMASYONLU ARKA PLAN ===== */

#particles-js {

position: fixed;

width: 100%;

height: 100%;

z-index: -1;

top: 0;

left: 0;

background: linear-gradient(135deg, var(--dark-bg) 0%, #1E3A8A 100%);

}

/* ===== YAPIŞKAN HEADER ===== */

.main-header.scrolled {

background-color: rgba(15, 23, 42, 0.9);

backdrop-filter: blur(12px);

box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);

padding-top: 0.75rem;

padding-bottom: 0.75rem;

}

/* ===== NAVİGASYON LİNK STİLLERİ ===== */

.nav-link::after {

content: '';

position: absolute;

bottom: -5px;

left: 0;

width: 0;

height: 2px;

background-color: var(--accent-color);

transition: width 0.3s var(--transition-timing);

}

.nav-link:hover::after, .nav-link.active::after {

width: 100%;

}

/* ===== HAMBURGER MENÜ ANİMASYONU ===== */

.hamburger-menu.active .line:nth-child(1) {

transform: translateY(9.5px) rotate(45deg);

}

.hamburger-menu.active .line:nth-child(2) {

opacity: 0;

}

.hamburger-menu.active .line:nth-child(3) {

transform: translateY(-9.5px) rotate(-45deg);

}

/* ===== TYPED.JS İMLEÇ STİLİ ===== */

.typed-cursor {

color: var(--accent-color) !important;

font-size: 1em;

opacity: 1;

animation: blink 0.7s infinite;

}

@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }

/* ===== YETENEK ÇUBUĞU ANİMASYONU ===== */

.skill-progress {

width: 0;

transition: width 1.5s ease-out;

}

/* ===== BUTON STİLLERİ ===== */

.btn-custom {

display: inline-block;

padding: 0.8rem 2.2rem;

font-size: 1rem;

font-weight: 700;

text-transform: uppercase;

border-radius: 50px;

transition: all 0.3s var(--transition-timing);

box-shadow: 0 5px 15px rgba(0,0,0,0.2);

border: 2px solid transparent;

}

.btn-primary-custom {

background-color: var(--primary-color);

color: white;

border-color: var(--primary-color);

}

.btn-primary-custom:hover {

background-color: var(--secondary-color);

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(59, 130, 246, 0.4);

}

.btn-secondary-custom {

background-color: transparent;

color: var(--light-text);

border-color: var(--light-text);

}

.btn-secondary-custom:hover {

background-color: var(--light-text);

color: var(--dark-bg);

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(226, 232, 240, 0.3);

}

.submit-btn {

background-color: var(--primary-color);

color: white;

padding: 1rem 2.5rem;

border-radius: 50px;

transition: all 0.3s var(--transition-timing);

}

.submit-btn:hover {

background-color: var(--secondary-color);

transform: translateY(-3px);

}

/* ===== SAYFA YÜKLEYİCİ (PRELOADER) ===== */

#preloader {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: var(--dark-bg);

z-index: 1000;

display: flex;

justify-content: center;

align-items: center;

transition: opacity 0.5s, visibility 0.5s;

}

.loader {

width: 50px;

height: 50px;

border: 5px solid var(--border-color);

border-top-color: var(--accent-color);

border-radius: 50%;

animation: spin 1s linear infinite;

}

@keyframes spin { to { transform: rotate(360deg); } }

/* ===== KAYDIRMA ANİMASYONLARI ===== */

.reveal {

opacity: 0;

transform: translateY(50px);

transition: opacity 0.8s, transform 0.8s;

}

.reveal.visible {

opacity: 1;

transform: translateY(0);

}

/* ===== KART STİLLERİ (HİZMET, PROJE, EKİP) ===== */

.custom-card {

background-color: var(--card-bg);

backdrop-filter: blur(10px);

border: 1px solid var(--border-color);

border-radius: 12px;

overflow: hidden;

transition: all 0.3s ease;

}

.custom-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

border-color: var(--accent-color);

}

</style>

</head>

</div>

Struktur<span class="text-[var(--accent-color)]">.</span>

</a>

<a href="#home" class="nav-link text-lg font-medium text-white hover:text-[var(--accent-color)] transition-colors duration-300 relative">Anasayfa</a>

<a href="#about" class="nav-link text-lg font-medium text-white hover:text-[var(--accent-color)] transition-colors duration-300 relative">Hakkımızda</a>

<a href="#services" class="nav-link text-lg font-medium text-white hover:text-[var(--accent-color)] transition-colors duration-300 relative">Hizmetler</a>

<a href="#projects" class="nav-link text-lg font-medium text-white hover:text-[var(--accent-color)] transition-colors duration-300 relative">Projeler</a>

<a href="#team" class="nav-link text-lg font-medium text-white hover:text-[var(--accent-color)] transition-colors duration-300 relative">Ekibimiz</a>

<a href="#contact" class="nav-link text-lg font-medium text-white hover:text-[var(--accent-color)] transition-colors duration-300 relative">İletişim</a>

</nav>

</button>

</div>

<li><a href="#home" class="nav-link text-2xl font-semibold text-white">Anasayfa</a></li>

<li><a href="#about" class="nav-link text-2xl font-semibold text-white">Hakkımızda</a></li>

<li><a href="#services" class="nav-link text-2xl font-semibold text-white">Hizmetler</a></li>

<li><a href="#projects" class="nav-link text-2xl font-semibold text-white">Projeler</a></li>

<li><a href="#team" class="nav-link text-2xl font-semibold text-white">Ekibimiz</a></li>

<li><a href="#contact" class="nav-link text-2xl font-semibold text-white">İletişim</a></li>

</ul>

</div>

</header>

<h4 class="text-xl md:text-2xl font-medium text-[var(--primary-color)] mb-4">MİMARLIK & MÜHENDİSLİK</h4>

Hayallerinizi <br> <span id="typed-text" class="text-[var(--accent-color)]"></span>

</h1>

Estetik, fonksiyonellik ve mühendislik uzmanlığını bir araya getirerek, geleceğin yapılarını bugünden tasarlıyoruz. Vizyonunuzu gerçeğe dönüştürmek için buradayız.

</p>

<a href="#projects" class="btn-custom btn-primary-custom">Projelerimizi Keşfedin</a>

<a href="#contact" class="btn-custom btn-secondary-custom">İletişime Geçin</a>

</div>

</div>

</section>

Hakkımızda

</h2>

</div>

</div>

<h3 class="text-3xl md:text-4xl font-bold text-[var(--primary-color)] mb-6">Vizyonumuz & Misyonumuz</h3>

Struktur olarak, 20 yılı aşkın deneyimle mimari, mühendislik ve müteahhitlik alanlarında entegre çözümler sunuyoruz. Her projeye, yenilikçi bir bakış açısı ve mükemmeliyetçilik ilkesiyle yaklaşıyoruz.

</p>

Sürdürülebilirlik ve teknolojiyi tasarımlarımızın merkezine koyarak, hem estetik hem de dayanıklı, zamana meydan okuyan yapılar inşa etmeyi hedefliyoruz.

</p>

<div class="flex justify-between items-center mb-2"><span class="font-semibold text-white">Mimari Tasarım & Projelendirme</span><span class="font-bold text-[var(--accent-color)]">95%</span></div>

</div>

<div class="flex justify-between items-center mb-2"><span class="font-semibold text-white">İnşaat Mühendisliği & Uygulama</span><span class="font-bold text-[var(--accent-color)]">92%</span></div>

</div>

<div class="flex justify-between items-center mb-2"><span class="font-semibold text-white">Proje Yönetimi & Danışmanlık</span><span class="font-bold text-[var(--accent-color)]">98%</span></div>

</div>

</section>

Hizmetlerimiz

</h2>

</div>

<h3 class="text-2xl font-bold text-white mb-4">Mimari Tasarım</h3>

<p class="text-[var(--light-text)] flex-grow">Konsept geliştirmeden uygulama çizimlerine kadar, estetik ve fonksiyonel mekanlar yaratıyoruz.</p>

</div>

<h3 class="text-2xl font-bold text-white mb-4">İnşaat & Müteahhitlik</h3>

<p class="text-[var(--light-text)] flex-grow">Kaliteli malzeme ve usta işçilikle, projelerinizi zamanında ve bütçenize uygun şekilde hayata geçiriyoruz.</p>

</div>

<h3 class="text-2xl font-bold text-white mb-4">İç Mekan Tasarımı</h3>

<p class="text-[var(--light-text)] flex-grow">Yaşam alanlarınızı karakterinize ve ihtiyaçlarınıza uygun, şık ve konforlu mekanlara dönüştürüyoruz.</p>

</div>

</section>

Öne Çıkan Projeler

</h2>

</div>

<div class="p-6"><h3 class="text-2xl font-bold text-white mb-2">Marina Vista Konutları</h3><p class="text-[var(--light-text)]">Bodrum'da modern yaşam ve doğanın birleştiği lüks villa projesi.</p></div>

</a>

<div class="p-6"><h3 class="text-2xl font-bold text-white mb-2">Nexus İş Merkezi</h3><p class="text-[var(--light-text)]">İstanbul'un kalbinde, teknoloji ve konforu birleştiren A sınıfı ofis kulesi.</p></div>

</a>

<div class="p-6"><h3 class="text-2xl font-bold text-white mb-2">Vadi Park Evleri</h3><p class="text-[var(--light-text)]">İzmir'de, aileler için tasarlanmış, sosyal donatıları zengin konut kompleksi.</p></div>

</a>

</div>

</section>

Yönetici Ekibimiz

</h2>

</div>

<h3 class="text-2xl font-bold text-white">Ahmet Yılmaz</h3>

<p class="text-[var(--primary-color)] font-semibold mb-4">Kurucu Mimar</p>

<p class="text-[var(--light-text)] mb-4">25 yıllık tecrübesiyle şirketimizin vizyonunu belirleyen liderimiz.</p>

</div>

<h3 class="text-2xl font-bold text-white">Mehmet Kaya</h3>

<p class="text-[var(--primary-color)] font-semibold mb-4">Proje Direktörü</p>

<p class="text-[var(--light-text)] mb-4">İnşaat mühendisliği alanındaki uzmanlığıyla projelerimizin bel kemiği.</p>

</div>

<h3 class="text-2xl font-bold text-white">Zeynep Öztürk</h3>

<p class="text-[var(--primary-color)] font-semibold mb-4">Baş Mimar</p>

<p class="text-[var(--light-text)] mb-4">Yaratıcı ve yenilikçi tasarımlarıyla projelerimize hayat veren isim.</p>

</div>

</section>

İletişime Geçin

</h2>

</div>

<div><h3 class="text-2xl font-bold text-white mb-2">Adres</h3><p class="text-lg text-gray-300">Maslak, İstanbul</p></div>

</div>

<div><h3 class="text-2xl font-bold text-white mb-2">E-posta</h3><p class="text-lg text-gray-300">info@struktur.com</p></div>

</div>

<div><h3 class="text-2xl font-bold text-white mb-2">Telefon</h3><p class="text-lg text-gray-300">+90 (212) 555 1234</p></div>

</div>

<h3 class="text-3xl font-bold text-white mb-8 text-center">Projeniz Hakkında Konuşalım</h3>

<button type="submit" class="submit-btn w-full font-bold">Mesajı Gönder</button>

</form>

</div>

</section>

<a href="#home" class="text-4xl font-bold text-white mb-6 inline-block">Struktur<span class="text-[var(--accent-color)]">.</span></a>

</div>

</footer>

</button>

// Sayfa Yükleyici

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

document.getElementById('preloader').style.opacity = '0';

document.getElementById('preloader').style.visibility = 'hidden';

});

// Mobil Navigasyon

const hamburger = document.getElementById('hamburger-menu');

const mobileNav = document.getElementById('mobile-nav');

mobileNav.querySelectorAll('.nav-link').forEach(link => {

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

mobileNav.classList.remove('right-0');

mobileNav.classList.add('right-[-100%]');

hamburger.classList.remove('active');

});

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

mobileNav.classList.toggle('right-[-100%]');

mobileNav.classList.toggle('right-0');

hamburger.classList.toggle('active');

});

// Yapışkan Header

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

document.querySelector('.main-header').classList.toggle('scrolled', window.scrollY > 80);

});

// Yukarı Çık Butonu

const scrollTopBtn = document.getElementById('scroll-top-btn');

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

if (window.pageYOffset > 500) {

scrollTopBtn.classList.add('opacity-100', 'visible');

} else {

scrollTopBtn.classList.remove('opacity-100', 'visible');

}

});

scrollTopBtn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));

// Typed.js Animasyonu

if (document.getElementById('typed-text')) {

new Typed("#typed-text", {

strings: ["İnşa Ediyoruz", "Tasarlıyoruz", "Yönetiyoruz", "Danışmanlık Veriyoruz"],

typeSpeed: 60,

backSpeed: 45,

loop: true

});

}

// Yetenek Çubukları Animasyonu

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

entries.forEach(entry => {

if (entry.isIntersecting) {

document.querySelectorAll('.skill-progress').forEach(bar => {

bar.style.width = bar.dataset.progress + '%';

});

skillObserver.unobserve(entry.target);

}

});

}, { threshold: 0.3 });

if (document.getElementById('about')) {

skillObserver.observe(document.getElementById('about'));

}

// İletişim Formu

document.getElementById('contact-form')?.addEventListener('submit', (e) => {

e.preventDefault();

// Burada form gönderme işlemleri yapılabilir.

alert('Mesajınız için teşekkürler! En kısa sürede geri dönüş yapacağız.');

e.target.reset();

});

// Kaydırma ile Aktif Link Vurgulama

const sections = document.querySelectorAll('section[id]');

const navLinks = document.querySelectorAll('.nav-link');

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

let current = '';

sections.forEach(section => {

const sectionTop = section.offsetTop - 100;

if (pageYOffset >= sectionTop) {

current = section.getAttribute('id');

}

});

navLinks.forEach(link => {

link.classList.remove('active');

if (link.getAttribute('href') === `#${current}`) {

link.classList.add('active');

}

});

// Kaydırma Animasyonları

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

entries.forEach(entry => {

if (entry.isIntersecting) entry.target.classList.add('visible');

});

}, { threshold: 0.1 });

document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));

// Particles.js Ayarları

particlesJS("particles-js", {

"particles": {

"number": {"value": 60, "density": {"enable": true, "value_area": 800}},

"color": {"value": "#D4AF37"},

"shape": {"type": "circle"},

"opacity": {"value": 0.4, "random": true},

"size": {"value": 2, "random": true},

"line_linked": {"enable": true, "distance": 150, "color": "#D4AF37", "opacity": 0.2, "width": 1},

"move": {"enable": true, "speed": 1, "direction": "none", "out_mode": "out"}

},

"interactivity": {

"detect_on": "canvas",

"events": {"onhover": {"enable": true, "mode": "grab"}, "onclick": {"enable": false}},

"modes": {"grab": {"distance": 140, "line_linked": {"opacity": 0.5}}}

},

"retina_detect": true

});

</script>

</body>

</html>

CSS

JS

Architecture Engineering Tailwind CSS Website

Recommended