Webleb - Extraits de Code

HTML

<!DOCTYPE html>

<head>

<title>Nexus Dijital | Kurumsal Çözümler</title>

<style>

/* --- CSS DEĞİŞKENLERİ & RESET --- */

:root {

--primary-color: #2563eb;       /* Ana Mavi */

--primary-dark: #1e40af;        /* Koyu Mavi */

--accent-color: #06b6d4;        /* Turkuaz Vurgu */

--text-dark: #1f2937;           /* Koyu Metin */

--text-light: #6b7280;          /* Gri Metin */

--bg-light: #f9fafb;            /* Açık Arka Plan */

--white: #ffffff;

--transition: all 0.3s ease;

--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

--shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html {

scroll-behavior: smooth;

}

body {

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

color: var(--text-dark);

line-height: 1.6;

overflow-x: hidden;

}

a {

text-decoration: none;

color: inherit;

}

ul {

list-style: none;

}

img {

max-width: 100%;

display: block;

}

/* --- BAŞLIK & NAVİGASYON --- */

header {

background: rgba(255, 255, 255, 0.95);

position: fixed;

top: 0;

width: 100%;

z-index: 1000;

box-shadow: 0 1px 3px rgba(0,0,0,0.1);

backdrop-filter: blur(10px);

}

.navbar {

display: flex;

justify-content: space-between;

align-items: center;

padding: 1.2rem 5%;

max-width: 1200px;

margin: 0 auto;

}

.logo {

font-size: 1.5rem;

font-weight: 700;

color: var(--primary-color);

letter-spacing: -0.5px;

}

.logo span {

color: var(--text-dark);

}

.nav-links {

display: flex;

gap: 2rem;

}

.nav-links a {

font-weight: 500;

color: var(--text-dark);

transition: var(--transition);

position: relative;

}

.nav-links a:hover {

color: var(--primary-color);

}

.nav-links a::after {

content: '';

position: absolute;

width: 0;

height: 2px;

bottom: -5px;

left: 0;

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

transition: var(--transition);

}

.nav-links a:hover::after {

width: 100%;

}

.hamburger {

display: none;

font-size: 1.5rem;

cursor: pointer;

color: var(--text-dark);

}

/* --- HERO ALANI --- */

.hero {

height: 100vh;

background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);

display: flex;

align-items: center;

justify-content: center;

text-align: center;

padding: 0 5%;

margin-top: 60px; /* Header yüksekliği kadar */

}

.hero-content {

max-width: 800px;

opacity: 0; /* JS ile animasyon için */

transform: translateY(20px);

transition: opacity 1s ease, transform 1s ease;

}

.hero-content.active {

opacity: 1;

transform: translateY(0);

}

.hero h1 {

font-size: 3.5rem;

font-weight: 800;

margin-bottom: 1.5rem;

line-height: 1.2;

color: var(--text-dark);

}

.hero h1 span {

color: var(--primary-color);

background: linear-gradient(90deg, var(--primary-color), var(--accent-color));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

.hero p {

font-size: 1.25rem;

color: var(--text-light);

margin-bottom: 2.5rem;

max-width: 600px;

margin-left: auto;

margin-right: auto;

}

.btn {

display: inline-block;

padding: 1rem 2rem;

border-radius: 50px;

font-weight: 600;

transition: var(--transition);

cursor: pointer;

}

.btn-primary {

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

color: var(--white);

box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.39);

}

.btn-primary:hover {

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

transform: translateY(-2px);

}

.btn-outline {

border: 2px solid var(--text-dark);

color: var(--text-dark);

margin-left: 1rem;

}

.btn-outline:hover {

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

color: var(--white);

transform: translateY(-2px);

}

/* --- GENEL BÖLÜM STİLLERİ --- */

section {

padding: 5rem 5%;

max-width: 1200px;

margin: 0 auto;

}

.section-header {

text-align: center;

margin-bottom: 4rem;

}

.section-header h2 {

font-size: 2.5rem;

margin-bottom: 1rem;

position: relative;

display: inline-block;

}

.section-header h2::after {

content: '';

display: block;

width: 50px;

height: 4px;

background: var(--primary-color);

margin: 0.5rem auto 0;

border-radius: 2px;

}

.section-header p {

color: var(--text-light);

max-width: 600px;

margin: 0 auto;

}

/* Animasyon Sınıfı */

.fade-in-section {

opacity: 0;

transform: translateY(30px);

transition: opacity 0.8s ease-out, transform 0.8s ease-out;

will-change: opacity, visibility;

}

.fade-in-section.is-visible {

opacity: 1;

transform: none;

}

/* --- HAKKIMIZDA --- */

.about-container {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 4rem;

align-items: center;

}

.about-image img {

border-radius: 12px;

box-shadow: var(--shadow-hover);

width: 100%;

height: auto;

object-fit: cover;

}

.about-text h3 {

font-size: 1.8rem;

margin-bottom: 1rem;

color: var(--primary-color);

}

.about-text p {

margin-bottom: 1.5rem;

color: var(--text-light);

}

/* --- HİZMETLER --- */

.bg-light {

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

width: 100%;

max-width: 100%; /* Full width background fix */

}

.services-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 2rem;

}

.service-card {

background: var(--white);

padding: 2.5rem;

border-radius: 12px;

box-shadow: var(--shadow);

transition: var(--transition);

text-align: center;

border-top: 4px solid transparent;

}

.service-card:hover {

transform: translateY(-10px);

box-shadow: var(--shadow-hover);

border-top: 4px solid var(--primary-color);

}

.service-icon {

font-size: 2.5rem;

color: var(--primary-color);

margin-bottom: 1.5rem;

}

.service-card h3 {

margin-bottom: 1rem;

font-size: 1.25rem;

}

.service-card p {

color: var(--text-light);

font-size: 0.95rem;

}

/* --- PROJELER / GALERİ --- */

.projects-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

gap: 2rem;

}

.project-card {

position: relative;

overflow: hidden;

border-radius: 12px;

box-shadow: var(--shadow);

cursor: pointer;

height: 250px; /* Sabit yükseklik */

}

.project-card img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.5s ease;

}

.project-card:hover img {

transform: scale(1.1);

}

.project-overlay {

position: absolute;

bottom: 0;

left: 0;

width: 100%;

background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);

padding: 1.5rem;

color: var(--white);

transform: translateY(100px);

transition: var(--transition);

}

.project-card:hover .project-overlay {

transform: translateY(0);

}

.project-overlay h3 {

font-size: 1.2rem;

margin-bottom: 0.25rem;

}

.project-overlay p {

font-size: 0.9rem;

opacity: 0.9;

}

/* --- İLETİŞİM --- */

.contact-container {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 4rem;

}

.contact-info-item {

display: flex;

align-items: center;

margin-bottom: 2rem;

}

.contact-info-item i {

width: 50px;

height: 50px;

background-color: rgba(37, 99, 235, 0.1);

color: var(--primary-color);

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

font-size: 1.2rem;

margin-right: 1rem;

}

.contact-form {

background: var(--white);

padding: 2.5rem;

border-radius: 12px;

box-shadow: var(--shadow);

}

.form-group {

margin-bottom: 1.5rem;

}

.form-group label {

display: block;

margin-bottom: 0.5rem;

font-weight: 500;

font-size: 0.9rem;

}

.form-group input,

.form-group textarea {

width: 100%;

padding: 0.8rem 1rem;

border: 1px solid #e5e7eb;

border-radius: 8px;

font-family: inherit;

transition: var(--transition);

}

.form-group input:focus,

.form-group textarea:focus {

outline: none;

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

box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);

}

.form-message {

margin-top: 1rem;

font-size: 0.9rem;

display: none;

}

.form-message.success {

color: #10b981;

display: block;

}

.form-message.error {

color: #ef4444;

display: block;

}

/* --- FOOTER --- */

footer {

background-color: #111827;

color: var(--white);

padding: 4rem 5% 2rem;

}

.footer-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

gap: 2rem;

max-width: 1200px;

margin: 0 auto;

margin-bottom: 3rem;

}

.footer-col h4 {

margin-bottom: 1.5rem;

font-size: 1.2rem;

}

.footer-col ul li {

margin-bottom: 0.8rem;

}

.footer-col ul li a {

color: #9ca3af;

transition: var(--transition);

}

.footer-col ul li a:hover {

color: var(--white);

padding-left: 5px;

}

.social-links a {

display: inline-block;

margin-right: 1rem;

color: #9ca3af;

font-size: 1.2rem;

transition: var(--transition);

}

.social-links a:hover {

color: var(--primary-color);

}

.footer-bottom {

text-align: center;

border-top: 1px solid #374151;

padding-top: 2rem;

color: #6b7280;

font-size: 0.9rem;

}

/* --- RESPONSIVE TASARIM --- */

@media (max-width: 768px) {

.navbar {

padding: 1rem 5%;

}

.hamburger {

display: block;

}

.nav-links {

position: fixed;

top: 70px;

right: -100%;

background-color: var(--white);

width: 100%;

flex-direction: column;

align-items: center;

padding: 2rem 0;

box-shadow: 0 4px 6px rgba(0,0,0,0.1);

transition: 0.3s ease-in-out;

}

.nav-links.active {

right: 0;

}

.hero h1 {

font-size: 2.5rem;

}

.about-container,

.contact-container {

grid-template-columns: 1fr;

}

.about-image {

order: -1; /* Resmi mobilde üste al */

}

.btn {

display: block;

width: 100%;

margin: 0.5rem 0;

text-align: center;

}

.btn-outline {

margin-left: 0;

}

</style>

</head>

<body>

<a href="#" class="logo">Nexus<span>Dijital</span>.</a>

</div>

<li><a href="#hero">Ana Sayfa</a></li>

<li><a href="#about">Hakkımızda</a></li>

<li><a href="#services">Hizmetler</a></li>

<li><a href="#projects">Projeler</a></li>

<li><a href="#contact">İletişim</a></li>

</ul>

</nav>

</header>

<h1>Dijital Dünyada <span>Fark Yaratın</span></h1>

<p>Markanızı modern tasarım ve ileri teknoloji çözümleriyle bir adım öne taşıyoruz. Profesyonel web, mobil ve SEO stratejileri.</p>

<div>

<a href="#projects" class="btn btn-primary">Projelerimiz</a>

<a href="#contact" class="btn btn-outline">Bize Ulaşın</a>

</div>

</section>

</div>

<h2>Biz Kimiz?</h2>

</div>

<h3>Teknoloji ve Yaratıcılığın Buluşma Noktası</h3>

<p>Nexus Dijital olarak 2015'ten bu yana markaların dijital dönüşüm süreçlerine liderlik ediyoruz. Tasarımcılar, geliştiriciler ve stratejistlerden oluşan tutkulu ekibimizle, işinizi büyütmek için buradayız.</p>

<p>Misyonumuz, karmaşık problemleri basit ve etkileyici dijital deneyimlere dönüştürmektir. Sadece kod yazmıyoruz, markanızın hikayesini dijital dünyaya taşıyoruz.</p>

<a href="#" style="color: var(--primary-color); font-weight: 600;">Daha Fazla Oku <i class="fas fa-arrow-right"></i></a>

</div>

</section>

<h2>Hizmetlerimiz</h2>

<p>İşinizi büyütmek için ihtiyacınız olan tüm dijital çözümler tek çatı altında.</p>

</div>

<h3>Web Geliştirme</h3>

<p>Hızlı, güvenli ve tüm cihazlarla uyumlu modern web siteleri tasarlıyoruz.</p>

</div>

<h3>Mobil Uygulama</h3>

<p>iOS ve Android platformları için kullanıcı dostu native ve hybrid uygulamalar.</p>

</div>

<h3>UI/UX Tasarım</h3>

<p>Kullanıcı deneyimini merkeze alan, estetik ve işlevsel arayüz tasarımları.</p>

</div>

<h3>Dijital Pazarlama</h3>

<p>SEO, sosyal medya ve Google reklamlarıyla hedef kitlenize doğrudan ulaşın.</p>

</div>

<h3>Siber Güvenlik</h3>

<p>Dijital varlıklarınızı en güncel güvenlik protokolleriyle koruma altına alıyoruz.</p>

</div>

<h3>Veri Analitiği</h3>

<p>Verilerinizi anlamlı içgörülere dönüştürerek stratejik kararlar almanızı sağlıyoruz.</p>

</div>

</section>

</div>

<h2>Son Projelerimiz</h2>

<p>Farklı sektörlerden markalar için geliştirdiğimiz başarı hikayeleri.</p>

</div>

<h3>FinTech Dashboard</h3>

<p>Finansal Veri Analizi</p>

</div>

<h3>E-Ticaret Platformu</h3>

<p>Global Satış Sitesi</p>

</div>

<h3>Akıllı Ev Uygulaması</h3>

<p>IoT Mobil Çözüm</p>

</div>

<h3>Kurumsal Kimlik</h3>

<p>Marka Tasarımı</p>

</div>

</section>

<h2>Bize Ulaşın</h2>

<p>Projeleriniz hakkında konuşmak veya teklif almak için formu doldurun.</p>

</div>

<div>

<h4>Adres</h4>

<p>Teknoloji Plaza, Kat: 5, Levent, İstanbul</p>

</div>

<div>

<h4>E-posta</h4>

<p>info@nexusdijital.com</p>

</div>

<div>

<h4>Telefon</h4>

</div>

width="100%" height="250" style="border:0; border-radius:12px;" allowfullscreen="" loading="lazy"></iframe>

</div>

<label for="name">Adınız Soyadınız</label>

</div>

<label for="email">E-posta Adresiniz</label>

</div>

<label for="message">Mesajınız</label>

</div>

<button type="submit" class="btn btn-primary" style="width: 100%;">Gönder</button>

</form>

</div>

</section>

</div>

<a href="#" class="logo" style="color:white; margin-bottom: 1rem; display:block;">Nexus<span>Dijital</span>.</a>

<p style="color: #9ca3af; font-size: 0.9rem;">Dijital dünyada iz bırakmanız için yenilikçi çözümler üretiyoruz.</p>

</div>

<h4>Hızlı Linkler</h4>

<ul>

<li><a href="#hero">Ana Sayfa</a></li>

<li><a href="#services">Hizmetler</a></li>

<li><a href="#projects">Projeler</a></li>

<li><a href="#contact">İletişim</a></li>

</ul>

</div>

<h4>Hizmetler</h4>

<ul>

<li><a href="#">Web Tasarım</a></li>

<li><a href="#">Mobil Uygulama</a></li>

<li><a href="#">SEO Optimizasyonu</a></li>

<li><a href="#">E-Ticaret</a></li>

</ul>

</div>

<h4>Sosyal Medya</h4>

</div>

</div>

</footer>

document.addEventListener('DOMContentLoaded', () => {

// 1. Hero Animasyonu - Sayfa yüklendiğinde

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

setTimeout(() => {

heroContent.classList.add('active');

}, 300);

// 2. Mobil Menü Toggle İşlemi

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

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

const navLinksItems = document.querySelectorAll('.nav-links li');

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

navLinks.classList.toggle('active');

// İkona animasyon/değişim efekti (Basitçe icon değişimi)

const icon = hamburger.querySelector('i');

if(navLinks.classList.contains('active')) {

icon.classList.remove('fa-bars');

icon.classList.add('fa-times');

} else {

icon.classList.remove('fa-times');

icon.classList.add('fa-bars');

}

});

// Menüden bir linke tıklandığında menüyü kapat

navLinksItems.forEach(link => {

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

navLinks.classList.remove('active');

const icon = hamburger.querySelector('i');

icon.classList.remove('fa-times');

icon.classList.add('fa-bars');

});

// 3. Scroll Animasyonları (Intersection Observer)

const observerOptions = {

root: null,

rootMargin: '0px',

threshold: 0.15 // Öğenin %15'i göründüğünde tetikle

};

const observer = new IntersectionObserver((entries, observer) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('is-visible');

observer.unobserve(entry.target); // Bir kere animasyon oynasın

}

});

}, observerOptions);

const sections = document.querySelectorAll('.fade-in-section');

sections.forEach(section => {

observer.observe(section);

});

// 4. İletişim Formu Doğrulama ve İşleme

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

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

contactForm.addEventListener('submit', (e) => {

e.preventDefault();

const name = document.getElementById('name').value.trim();

const email = document.getElementById('email').value.trim();

const message = document.getElementById('message').value.trim();

// Basit Doğrulama

if (name === '' || email === '' || message === '') {

showFeedback('Lütfen tüm alanları doldurunuz.', 'error');

return;

}

// E-posta Regex Kontrolü

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!emailRegex.test(email)) {

showFeedback('Lütfen geçerli bir e-posta adresi giriniz.', 'error');

return;

}

// Başarılı Gönderim Simülasyonu

const btn = contactForm.querySelector('button');

const originalText = btn.innerText;

btn.innerText = 'Gönderiliyor...';

btn.disabled = true;

setTimeout(() => {

showFeedback('Mesajınız başarıyla gönderildi! En kısa sürede dönüş yapacağız.', 'success');

contactForm.reset();

btn.innerText = originalText;

btn.disabled = false;

// Mesajı 5 saniye sonra kaldır

setTimeout(() => {

formFeedback.style.display = 'none';

}, 5000);

}, 1500);

});

function showFeedback(message, type) {

formFeedback.innerText = message;

formFeedback.className = 'form-message ' + type;

}

// 5. Navbar Sticky Efekti (Opsiyonel görsel iyileştirme)

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

const header = document.querySelector('header');

if (window.scrollY > 50) {

header.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';

} else {

header.style.boxShadow = '0 1px 3px rgba(0,0,0,0.1)';

}

});

</script>

</body>

</html>

Metehan

Recommandé

Un code de Metehan

Un code de Metehan

Un code de Metehan

HTML

CSS

JS

Recommandé

Un code de Metehan

Un code de Metehan

Un code de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS