Webleb - UI Elements

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

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