Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>NEXUS PRO | İleri Mühendislik Çözümleri</title>

tailwind.config = {

theme: {

extend: {

fontFamily: {

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

display: ['Space Grotesk', 'sans-serif'],

},

colors: {

brand: {

dark: '#0f172a',    // Slate 900

primary: '#3b82f6', // Blue 500

accent: '#06b6d4',  // Cyan 500

surface: '#1e293b', // Slate 800

light: '#f8fafc'    // Slate 50

}

},

backgroundImage: {

'hero-pattern': "linear-gradient(to right bottom, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.8)), url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')",

}

</script>

<style>

/* Custom Scrollbar */

::-webkit-scrollbar {

width: 8px;

}

::-webkit-scrollbar-track {

background: #0f172a;

}

::-webkit-scrollbar-thumb {

background: #3b82f6;

border-radius: 4px;

}

/* Smooth Scroll */

html {

scroll-behavior: smooth;

}

/* Glassmorphism Navbar */

.glass-nav {

background: rgba(15, 23, 42, 0.8);

backdrop-filter: blur(12px);

border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}

/* Card Hover Effects */

.service-card {

transition: all 0.3s ease;

}

.service-card:hover {

transform: translateY(-10px);

box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);

border-color: #3b82f6;

}

/* Project Overlay */

.project-overlay {

background: linear-gradient(to top, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.1));

transform: translateY(100%);

transition: transform 0.4s ease-in-out;

}

.group:hover .project-overlay {

transform: translateY(0);

}

</style>

</head>

</div>

NEXUS<span class="text-brand-primary">PRO</span>

</a>

<a href="#home" class="text-sm font-medium hover:text-white transition-colors">Ana Sayfa</a>

<a href="#about" class="text-sm font-medium hover:text-white transition-colors">Hakkımızda</a>

<a href="#services" class="text-sm font-medium hover:text-white transition-colors">Hizmetler</a>

<a href="#projects" class="text-sm font-medium hover:text-white transition-colors">Projeler</a>

İletişime Geç

</a>

</div>

</button>

</div>

<a href="#home" class="text-white font-medium">Ana Sayfa</a>

<a href="#about" class="text-white font-medium">Hakkımızda</a>

<a href="#services" class="text-white font-medium">Hizmetler</a>

<a href="#projects" class="text-white font-medium">Projeler</a>

<a href="#contact" class="text-brand-accent font-bold">İletişim</a>

</div>

</nav>

<span class="text-brand-accent text-xs font-bold tracking-wider uppercase">Geleceğin Mühendisliği</span>

</div>

Dijital Dünyanızı <br>

<span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-primary to-brand-accent">Mükemmellikle</span> İnşa Ediyoruz.

</h1>

Yüksek performanslı yazılım mimarileri, yapay zeka entegrasyonları ve siber güvenlik çözümleri ile işletmenizi global standartlara taşıyoruz.

</p>

Projelerimizi İnceleyin

</a>

Bizimle Tanışın

</a>

</div>

<div class="text-xs text-slate-400 uppercase tracking-widest">Yıl Deneyim</div>

</div>

<div class="text-xs text-slate-400 uppercase tracking-widest">Tamamlanan Proje</div>

</div>

<div class="text-xs text-slate-400 uppercase tracking-widest">Uzman Mühendis</div>

</div>

<div class="text-xs text-slate-400 uppercase tracking-widest">Müşteri Memnuniyeti</div>

</div>

</header>

</div>

<h4 class="text-brand-primary font-bold tracking-wider uppercase mb-2">Hakkımızda</h4>

<h2 class="text-3xl md:text-4xl font-display font-bold text-white mb-6">Teknoloji ve İnovasyonun Kesişim Noktası</h2>

Nexus Pro, 2015 yılından bu yana yazılım mühendisliği alanında öncü çözümler sunmaktadır. Amacımız, karmaşık iş problemlerini, zarif ve ölçeklenebilir teknolojik altyapılarla çözmektir.

</p>

Global standartlarda kod kalitesi, çevik (agile) proje yönetimi ve kullanıcı odaklı tasarım felsefemizle, start-up'lardan Fortune 500 şirketlerine kadar geniş bir yelpazede hizmet veriyoruz.

</p>

<span class="text-white">Uçtan Uca Şifreli Güvenlik Sistemleri</span>

</div>

<span class="text-white">7/24 Teknik Destek ve Bakım</span>

</div>

<span class="text-white">Ölçeklenebilir Cloud Mimarileri</span>

</div>

</section>

<h4 class="text-brand-accent font-bold tracking-wider uppercase mb-2">Hizmetlerimiz</h4>

<h2 class="text-3xl md:text-4xl font-display font-bold text-white mb-4">Mühendislik Çözümlerimiz</h2>

<p class="text-slate-400">İşinizi bir üst seviyeye taşıyacak, modern ve güvenilir teknoloji hizmetleri sunuyoruz.</p>

</div>

</div>

<h3 class="text-xl font-bold text-white mb-3">Özel Yazılım Geliştirme</h3>

İhtiyaçlarınıza özel, yüksek performanslı web ve masaüstü uygulamaları geliştiriyoruz.

</p>

<a href="#" class="text-brand-primary text-sm font-bold hover:underline">Detayları İncele <i class="fas fa-arrow-right ml-1"></i></a>

</div>

</div>

<h3 class="text-xl font-bold text-white mb-3">Mobil Uygulama</h3>

iOS ve Android platformları için native veya cross-platform (Flutter/React Native) çözümler.

</p>

<a href="#" class="text-brand-accent text-sm font-bold hover:underline">Detayları İncele <i class="fas fa-arrow-right ml-1"></i></a>

</div>

</div>

<h3 class="text-xl font-bold text-white mb-3">Yapay Zeka & ML</h3>

Veri analitiği, makine öğrenimi modelleri ve süreç otomasyonu ile akıllı işletmeler yaratıyoruz.

</p>

<a href="#" class="text-purple-400 text-sm font-bold hover:underline">Detayları İncele <i class="fas fa-arrow-right ml-1"></i></a>

</div>

</div>

<h3 class="text-xl font-bold text-white mb-3">Siber Güvenlik</h3>

Sızma testleri, güvenlik denetimleri ve güvenli altyapı kurulumları ile verilerinizi koruyoruz.

</p>

<a href="#" class="text-green-400 text-sm font-bold hover:underline">Detayları İncele <i class="fas fa-arrow-right ml-1"></i></a>

</div>

</div>

<h3 class="text-xl font-bold text-white mb-3">Cloud & DevOps</h3>

AWS, Azure ve Google Cloud üzerinde ölçeklenebilir altyapı yönetimi ve CI/CD süreçleri.

</p>

<a href="#" class="text-orange-400 text-sm font-bold hover:underline">Detayları İncele <i class="fas fa-arrow-right ml-1"></i></a>

</div>

</div>

<h3 class="text-xl font-bold text-white mb-3">UI/UX Tasarım</h3>

Kullanıcı deneyimini merkeze alan, modern ve etkileyici arayüz tasarımları.

</p>

<a href="#" class="text-pink-400 text-sm font-bold hover:underline">Detayları İncele <i class="fas fa-arrow-right ml-1"></i></a>

</div>

</section>

<h4 class="text-brand-primary font-bold tracking-wider uppercase mb-2">Portfolyo</h4>

<h2 class="text-3xl md:text-4xl font-display font-bold text-white">Son Çalışmalarımız</h2>

</div>

<button class="filter-btn px-4 py-2 text-sm font-bold text-slate-500 hover:text-white transition-colors" data-filter="app">Mobil</button>

<button class="filter-btn px-4 py-2 text-sm font-bold text-slate-500 hover:text-white transition-colors" data-filter="ai">Yapay Zeka</button>

</div>

<span class="text-brand-accent text-xs font-bold uppercase mb-2">E-Ticaret</span>

<h3 class="text-2xl font-bold text-white mb-2">Nova Market</h3>

<p class="text-slate-300 text-sm">React ve Node.js tabanlı, yüksek trafikli pazar yeri uygulaması.</p>

</div>

<span class="text-brand-accent text-xs font-bold uppercase mb-2">Fintech</span>

<h3 class="text-2xl font-bold text-white mb-2">CoinTrack Mobile</h3>

<p class="text-slate-300 text-sm">Gerçek zamanlı kripto takip ve cüzdan uygulaması.</p>

</div>

<span class="text-brand-accent text-xs font-bold uppercase mb-2">Yapay Zeka</span>

<h3 class="text-2xl font-bold text-white mb-2">DataSense AI</h3>

<p class="text-slate-300 text-sm">Kurumsal veriler için prediktif analiz ve raporlama motoru.</p>

</div>

<span class="text-brand-accent text-xs font-bold uppercase mb-2">Kurumsal Web</span>

<h3 class="text-2xl font-bold text-white mb-2">LogiTech Portal</h3>

<p class="text-slate-300 text-sm">Lojistik firmaları için yönetim paneli.</p>

</div>

</section>

<h4 class="text-brand-accent font-bold tracking-wider uppercase mb-2">Blog & Haberler</h4>

<h2 class="text-3xl md:text-4xl font-display font-bold text-white mb-4">Teknoloji Günlüğü</h2>

<p class="text-slate-400">Yazılım dünyasındaki son trendler, ipuçları ve şirketimizden haberler.</p>

</div>

<div class="absolute top-4 left-4 bg-brand-primary text-white text-xs font-bold px-3 py-1 rounded">Teknoloji</div>

</div>

<i class="far fa-calendar-alt mr-2"></i> 10 Ekim 2023

<i class="far fa-user mr-2"></i> Ali Yılmaz

</div>

<h3 class="text-xl font-bold text-white mb-3 hover:text-brand-primary transition-colors cursor-pointer">Blokchain ve Geleceğin Finansı</h3>

<p class="text-slate-400 text-sm mb-4">Merkeziyetsiz finans (DeFi) sistemlerinin geleneksel bankacılığı nasıl dönüştürdüğünü inceliyoruz.</p>

<a href="#" class="text-brand-accent text-sm font-bold hover:underline">Devamını Oku</a>

</div>

<div class="absolute top-4 left-4 bg-purple-500 text-white text-xs font-bold px-3 py-1 rounded">Yazılım</div>

</div>

<i class="far fa-calendar-alt mr-2"></i> 5 Ekim 2023

<i class="far fa-user mr-2"></i> Ayşe Demir

</div>

<h3 class="text-xl font-bold text-white mb-3 hover:text-brand-primary transition-colors cursor-pointer">Microservis Mimarisine Geçiş</h3>

<p class="text-slate-400 text-sm mb-4">Monolitik yapılardan mikroservis mimarisine geçerken dikkat edilmesi gereken 5 kritik adım.</p>

<a href="#" class="text-brand-accent text-sm font-bold hover:underline">Devamını Oku</a>

</div>

<div class="absolute top-4 left-4 bg-green-500 text-white text-xs font-bold px-3 py-1 rounded">Güvenlik</div>

</div>

<i class="far fa-calendar-alt mr-2"></i> 28 Eylül 2023

<i class="far fa-user mr-2"></i> Mehmet Kaya

</div>

<h3 class="text-xl font-bold text-white mb-3 hover:text-brand-primary transition-colors cursor-pointer">Siber Güvenlikte Yapay Zeka</h3>

<p class="text-slate-400 text-sm mb-4">Tehdit algılama sistemlerinde AI kullanımının avantajları ve riskleri üzerine bir inceleme.</p>

<a href="#" class="text-brand-accent text-sm font-bold hover:underline">Devamını Oku</a>

</div>

</section>

<h4 class="text-brand-primary font-bold tracking-wider uppercase mb-2">Bize Ulaşın</h4>

<h2 class="text-3xl md:text-4xl font-display font-bold text-white mb-6">Projenizi Başlatalım</h2>

Fikrinizi gerçeğe dönüştürmek için hazırsanız, biz de hazırız. Teknik danışmanlık veya proje teklifi için aşağıdaki kanallardan bize ulaşabilirsiniz.

</p>

</div>

<div>

<h5 class="text-white font-bold text-lg">Ofis Adresi</h5>

<p class="text-slate-400">Teknopark İstanbul, Sanayi Mah. No: 123<br>Pendik, İstanbul</p>

</div>

</div>

<div>

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

<p class="text-slate-400">info@nexuspro.com.tr<br>support@nexuspro.com.tr</p>

</div>

</div>

<div>

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

</div>

<form>

<div>

<label class="block text-slate-400 text-sm mb-2">Adınız Soyadınız</label>

</div>

<div>

<label class="block text-slate-400 text-sm mb-2">E-Posta</label>

</div>

<option>Yeni Proje Teklifi</option>

<option>Teknik Destek</option>

<option>İş Başvurusu</option>

<option>Diğer</option>

</select>

</div>

<label class="block text-slate-400 text-sm mb-2">Mesajınız</label>

</div>

Mesajı Gönder

</button>

</form>

</div>

</section>

NEXUS<span class="text-brand-primary">PRO</span>

</a>

</div>

<a href="#" class="hover:text-white transition-colors">Gizlilik Politikası</a>

<a href="#" class="hover:text-white transition-colors">Kullanım Şartları</a>

</div>

</footer>

// Initialize Animations

AOS.init({

once: true,

offset: 100,

duration: 800,

});

// Navbar Scroll Effect

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

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

if (window.scrollY > 50) {

navbar.classList.add('glass-nav');

navbar.classList.remove('py-4');

navbar.classList.add('py-2');

} else {

navbar.classList.remove('glass-nav');

navbar.classList.add('py-4');

navbar.classList.remove('py-2');

}

});

// Mobile Menu Toggle

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

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

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

mobileMenu.classList.toggle('hidden');

});

// Project Filters

const filterBtns = document.querySelectorAll('.filter-btn');

const projectItems = document.querySelectorAll('.project-item');

filterBtns.forEach(btn => {

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

// Update active button

filterBtns.forEach(b => {

b.classList.remove('text-white', 'border-b-2', 'border-brand-primary');

b.classList.add('text-slate-500');

});

btn.classList.remove('text-slate-500');

btn.classList.add('text-white', 'border-b-2', 'border-brand-primary');

const filterValue = btn.getAttribute('data-filter');

projectItems.forEach(item => {

if (filterValue === 'all' || item.classList.contains(filterValue)) {

item.style.display = 'block';

// Re-trigger animation

item.classList.remove('aos-animate');

setTimeout(() => item.classList.add('aos-animate'), 50);

} else {

item.style.display = 'none';

}

});

</script>

</body>

</html>

Metehan

Recommended

A Code by Metehan

A Code by Metehan

HTML

CSS

JS

Recommended

A Code by Metehan

A Code by Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS