Webleb - Snippet di Codice - Sito web CSS Tailwind di Architettura Ingegneria

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>

Sito web CSS Tailwind di Architettura Ingegneria

Consigliato

Esempio di contenitore di animazione CSS

Modulo di accesso HTML (francese)

Sito web

HTML

CSS

JS

Consigliato

Esempio di contenitore di animazione CSS

Modulo di accesso HTML (francese)

Sito web

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS