Webleb - Snippets de Código

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

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