Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>NEXUS | Creative Software & Design Agency</title>

<style>

/* --- CSS VARIABLES & RESET --- */

:root {

--bg-color: #ffffff;

--bg-secondary: #f9fafb;

--text-main: #111827;

--text-muted: #6b7280;

--accent: #000000;

--border-color: #e5e7eb;

--white: #ffffff;

--font-heading: 'Playfair Display', serif;

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

--spacing-xs: 8px;

--spacing-sm: 16px;

--spacing-md: 32px;

--spacing-lg: 64px;

--spacing-xl: 120px;

--radius-md: 12px;

--radius-lg: 24px;

--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

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

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

--transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html {

scroll-behavior: smooth;

font-size: 16px;

}

body {

font-family: var(--font-body);

color: var(--text-main);

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

line-height: 1.6;

overflow-x: hidden;

-webkit-font-smoothing: antialiased;

}

/* --- TYPOGRAPHY --- */

h1, h2, h3, h4, h5, h6 {

font-family: var(--font-heading);

font-weight: 700;

line-height: 1.2;

color: var(--text-main);

}

h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); letter-spacing: -0.02em; }

h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--spacing-md); }

h3 { font-size: 1.5rem; margin-bottom: var(--spacing-sm); }

p { color: var(--text-muted); margin-bottom: 1.5rem; font-weight: 300; }

a { text-decoration: none; color: inherit; transition: var(--transition); }

ul { list-style: none; }

.container {

width: 90%;

max-width: 1280px;

margin: 0 auto;

padding: 0 var(--spacing-sm);

}

.section-padding {

padding: var(--spacing-xl) 0;

}

.text-center { text-align: center; }

/* --- BUTTONS --- */

.btn {

display: inline-block;

padding: 16px 32px;

font-size: 0.95rem;

font-weight: 500;

border-radius: 50px;

cursor: pointer;

transition: var(--transition);

letter-spacing: 0.5px;

}

.btn-primary {

background-color: var(--accent);

color: var(--white);

border: 1px solid var(--accent);

}

.btn-primary:hover {

background-color: transparent;

color: var(--accent);

transform: translateY(-2px);

}

.btn-outline {

background-color: transparent;

color: var(--accent);

border: 1px solid var(--border-color);

}

.btn-outline:hover {

border-color: var(--accent);

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

}

/* --- NAVBAR --- */

.navbar {

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 1000;

padding: 20px 0;

transition: var(--transition);

background: transparent;

}

.navbar.scrolled {

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

backdrop-filter: blur(12px);

-webkit-backdrop-filter: blur(12px);

padding: 15px 0;

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

}

.nav-container {

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

font-family: var(--font-heading);

font-size: 1.8rem;

font-weight: 700;

letter-spacing: -1px;

}

.nav-links {

display: flex;

gap: 30px;

}

.nav-item {

font-size: 0.95rem;

font-weight: 500;

color: var(--text-main);

position: relative;

}

.nav-item::after {

content: '';

position: absolute;

width: 0;

height: 1px;

bottom: -4px;

left: 0;

background-color: var(--accent);

transition: var(--transition);

}

.nav-item:hover::after { width: 100%; }

.hamburger { display: none; cursor: pointer; font-size: 1.5rem; }

/* --- HERO SECTION --- */

.hero {

min-height: 100vh;

display: flex;

align-items: center;

background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);

padding-top: 80px; /* offset navbar */

}

.hero-grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: var(--spacing-lg);

align-items: center;

}

.hero-content {

padding-right: var(--spacing-md);

}

.hero-buttons {

display: flex;

gap: var(--spacing-sm);

margin-top: var(--spacing-md);

}

.hero-image {

position: relative;

border-radius: var(--radius-lg);

overflow: hidden;

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

aspect-ratio: 4/3;

}

.hero-image img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 1s ease;

}

.hero-image:hover img { transform: scale(1.05); }

/* --- SECTIONS GENERAL --- */

.section-header {

margin-bottom: var(--spacing-lg);

}

.section-label {

display: block;

font-size: 0.85rem;

text-transform: uppercase;

letter-spacing: 2px;

color: var(--text-muted);

margin-bottom: var(--spacing-sm);

}

/* --- ABOUT --- */

.about-grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: var(--spacing-xl);

align-items: center;

}

.about-img-wrapper {

position: relative;

}

.about-img {

width: 100%;

border-radius: var(--radius-md);

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

}

.counters {

display: flex;

gap: var(--spacing-lg);

margin-top: var(--spacing-md);

border-top: 1px solid var(--border-color);

padding-top: var(--spacing-md);

}

.counter-item h4 {

font-size: 2.5rem;

margin-bottom: 0;

font-family: var(--font-body); /* Modern cleaner look for numbers */

}

.counter-item span {

font-size: 0.9rem;

color: var(--text-muted);

}

/* --- SERVICES --- */

.services { background-color: var(--bg-secondary); }

.services-grid {

display: grid;

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

gap: var(--spacing-md);

}

.service-card {

background: var(--white);

padding: var(--spacing-md);

border-radius: var(--radius-md);

transition: var(--transition);

border: 1px solid transparent;

}

.service-card:hover {

transform: translateY(-10px);

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

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

}

.service-icon {

font-size: 2rem;

margin-bottom: var(--spacing-sm);

color: var(--text-main);

}

/* --- PROJECTS --- */

.projects-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

gap: var(--spacing-md);

}

.project-card {

position: relative;

border-radius: var(--radius-md);

overflow: hidden;

aspect-ratio: 4/3;

cursor: pointer;

group: 'project';

}

.project-img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.6s ease;

}

.project-overlay {

position: absolute;

inset: 0;

background: rgba(0,0,0,0.4);

display: flex;

flex-direction: column;

justify-content: flex-end;

padding: var(--spacing-md);

opacity: 0;

transition: var(--transition);

}

.project-info {

transform: translateY(20px);

transition: var(--transition);

}

.project-card:hover .project-img { transform: scale(1.1); }

.project-card:hover .project-overlay { opacity: 1; }

.project-card:hover .project-info { transform: translateY(0); }

.project-title { color: white; font-size: 1.5rem; margin-bottom: 5px; }

.project-cat { color: rgba(255,255,255,0.8); font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase; }

/* --- REFERENCES --- */

.references { background-color: var(--bg-secondary); }

.logo-grid {

display: grid;

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

gap: var(--spacing-md);

align-items: center;

justify-items: center;

}

.client-logo {

max-width: 120px;

filter: grayscale(100%);

opacity: 0.6;

transition: var(--transition);

}

.client-logo:hover {

filter: grayscale(0%);

opacity: 1;

}

/* --- BLOG --- */

.blog-grid {

display: grid;

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

gap: var(--spacing-md);

}

.blog-card {

background: transparent;

border-radius: var(--radius-md);

overflow: hidden;

transition: var(--transition);

}

.blog-card:hover { transform: translateY(-5px); }

.blog-img-container {

width: 100%;

height: 240px;

overflow: hidden;

border-radius: var(--radius-md);

margin-bottom: var(--spacing-sm);

}

.blog-img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.5s ease;

}

.blog-card:hover .blog-img { transform: scale(1.05); }

.blog-meta { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }

.blog-title { font-size: 1.4rem; margin-bottom: 10px; }

.read-more {

font-weight: 600;

font-size: 0.9rem;

border-bottom: 1px solid var(--text-main);

padding-bottom: 2px;

}

/* --- CONTACT --- */

.contact-layout {

display: grid;

grid-template-columns: 1.5fr 1fr;

gap: var(--spacing-xl);

}

.form-group { margin-bottom: 20px; }

.form-control {

width: 100%;

padding: 15px 0;

border: none;

border-bottom: 1px solid var(--border-color);

background: transparent;

font-family: var(--font-body);

font-size: 1rem;

transition: var(--transition);

}

.form-control:focus {

outline: none;

border-bottom-color: var(--text-main);

}

.map-container {

height: 100%;

min-height: 400px;

background: #eee;

border-radius: var(--radius-md);

overflow: hidden;

}

.contact-info-box h4 { margin-bottom: 5px; font-size: 1.1rem; }

.contact-info-box p { margin-bottom: 20px; }

/* --- FOOTER --- */

footer {

background-color: #111;

color: #fff;

padding: var(--spacing-xl) 0 40px;

}

.footer-grid {

display: grid;

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

gap: var(--spacing-lg);

margin-bottom: var(--spacing-lg);

}

.footer-logo { font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 20px; display: block;}

.footer-links li { margin-bottom: 10px; }

.footer-links a { color: #9ca3af; }

.footer-links a:hover { color: #fff; }

.social-links a {

color: #fff;

margin-right: 15px;

font-size: 1.2rem;

}

.copyright {

border-top: 1px solid #333;

padding-top: 30px;

text-align: center;

color: #6b7280;

font-size: 0.9rem;

}

/* --- MODAL --- */

.modal {

position: fixed;

top: 0; left: 0;

width: 100%; height: 100%;

background: rgba(0,0,0,0.8);

display: flex;

justify-content: center;

align-items: center;

z-index: 2000;

opacity: 0;

pointer-events: none;

transition: opacity 0.3s ease;

}

.modal.active { opacity: 1; pointer-events: all; }

.modal-content {

background: white;

padding: var(--spacing-md);

max-width: 800px;

width: 90%;

border-radius: var(--radius-md);

position: relative;

transform: translateY(20px);

transition: transform 0.3s ease;

}

.modal.active .modal-content { transform: translateY(0); }

.close-modal {

position: absolute;

top: 15px; right: 20px;

font-size: 2rem;

cursor: pointer;

color: var(--text-main);

}

#modal-img { width: 100%; border-radius: 8px; margin-bottom: 20px; max-height: 50vh; object-fit: cover; }

/* --- ANIMATIONS (Fade In) --- */

.reveal {

opacity: 0;

transform: translateY(40px);

transition: all 0.8s ease-out;

}

.reveal.active {

opacity: 1;

transform: translateY(0);

}

/* --- RESPONSIVE --- */

@media (max-width: 992px) {

h1 { font-size: 3rem; }

.hero-grid, .about-grid, .contact-layout { grid-template-columns: 1fr; gap: var(--spacing-md); }

.hero { padding-top: 100px; text-align: center; display: block; }

.hero-content { padding-right: 0; margin-bottom: 40px; }

.hero-buttons { justify-content: center; }

.about-grid { display: flex; flex-direction: column-reverse; }

}

@media (max-width: 768px) {

.nav-links {

position: fixed;

top: 0; right: 0;

height: 100vh;

width: 70%;

background: white;

flex-direction: column;

padding: 80px 40px;

transform: translateX(100%);

transition: transform 0.3s ease;

box-shadow: -5px 0 15px rgba(0,0,0,0.1);

}

.nav-links.active { transform: translateX(0); }

.hamburger { display: block; z-index: 1001; }

.counters { flex-direction: column; gap: 20px; }

}

</style>

</head>

<body>

<a href="#" class="logo">NEXUS.</a>

<li><a href="#home" class="nav-item">Ana Sayfa</a></li>

<li><a href="#about" class="nav-item">Hakkımızda</a></li>

<li><a href="#projects" class="nav-item">Projeler</a></li>

<li><a href="#services" class="nav-item">Hizmetler</a></li>

<li><a href="#references" class="nav-item">Referanslar</a></li>

<li><a href="#contact" class="btn btn-primary" style="padding: 10px 24px; color: white;">İletişim</a></li>

</ul>

</div>

</nav>

<span class="section-label">Software & Design Agency</span>

<h1>A Smarter Way to Build Digital Experiences</h1>

<p>Biz, yazılımın gücünü tasarımın estetiğiyle birleştiriyoruz. Markanız için akıllı, ölçeklenebilir ve çarpıcı dijital çözümler üretiyoruz.</p>

<a href="#projects" class="btn btn-primary">Projelerimizi Gör</a>

<a href="#contact" class="btn btn-outline">İletişime Geç</a>

</div>

</div>

</section>

</div>

<span class="section-label">Hakkımızda</span>

<h2>Tasarım ve Teknolojinin Kesişim Noktası</h2>

<p>Nexus olarak, dijital dönüşüm süreçlerinde işletmelere rehberlik ediyoruz. İstanbul merkezli ofisimizde, global standartlarda kod yazıyor ve ödüllü tasarımlar yapıyoruz. Minimalizmi fonksiyonellikle birleştirerek, karmaşık problemleri basit ve etkili çözümlere dönüştürüyoruz.</p>

<p>Ekibimiz, sektörün en iyi UI/UX tasarımcıları ve Full-stack geliştiricilerinden oluşmaktadır.</p>

<span>Yıl Deneyim</span>

</div>

<span>+ Proje</span>

</div>

<span>Mutlu Müşteri</span>

</div>

</section>

<span class="section-label">Portfolio</span>

<h2>Seçilmiş Projeler</h2>

</div>

<div class="project-cat">Mobile App</div>

<h3 class="project-title">Fintech Dashboard</h3>

</div>

<h3 class="project-title">AI Analytics</h3>

</div>

<div class="project-cat">E-Commerce</div>

<h3 class="project-title">Luxe Fashion</h3>

</div>

<div class="project-cat">Branding</div>

<h3 class="project-title">Tech Holding ID</h3>

</div>

<div class="project-cat">IoT Design</div>

<h3 class="project-title">Smart Control</h3>

</div>

<div class="project-cat">Cloud Tech</div>

<h3 class="project-title">Nebula System</h3>

</div>

</section>

<span class="section-label">Uzmanlık Alanlarımız</span>

<h2>Hizmetlerimiz</h2>

</div>

<h3>Web & App Development</h3>

<p>React, Node.js ve Python kullanarak yüksek performanslı, ölçeklenebilir web ve mobil uygulamalar geliştiriyoruz.</p>

</div>

<h3>UI/UX Design</h3>

<p>Kullanıcı odaklı araştırma ve modern estetik anlayışıyla, sezgisel ve etkileyici arayüzler tasarlıyoruz.</p>

</div>

<h3>Branding & Identity</h3>

<p>Markanızın hikayesini anlatan logolar, renk paletleri ve kurumsal kimlik sistemleri oluşturuyoruz.</p>

</div>

<h3>AI Solutions</h3>

<p>İş süreçlerinizi otomatize eden yapay zeka entegrasyonları ve veri analitiği çözümleri sunuyoruz.</p>

</div>

</section>

<span class="section-label">Güvenilir İş Ortaklarımız</span>

<h2>Referanslar</h2>

</div>

</div>

</section>

<span class="section-label">Journal</span>

<h2>Son Yazılar</h2>

</div>

</div>

<div class="blog-meta">Design • 12 Oct 2023</div>

<h3 class="blog-title">2024 UI Trendleri: Minimalizmin Dönüşü</h3>

<p>Web tasarım dünyasında "Neumorphism"den sonra gelen yeni akımlar ve kullanıcı deneyimine etkileri.</p>

<a href="#" class="read-more">Devamını Oku</a>

</div>

</article>

</div>

<h3 class="blog-title">SaaS Ürünlerinde React Best Practices</h3>

<p>Ölçeklenebilir front-end mimarisi kurarken dikkat edilmesi gereken performans optimizasyonları.</p>

<a href="#" class="read-more">Devamını Oku</a>

</div>

</article>

</div>

<div class="blog-meta">Business • 15 Sep 2023</div>

<h3 class="blog-title">Dijital Dönüşümde Yapay Zeka Etkisi</h3>

<p>İşletmelerin operasyonel verimliliğini artırmak için AI araçlarını nasıl entegre edebilirsiniz?</p>

<a href="#" class="read-more">Devamını Oku</a>

</div>

</article>

</div>

</section>

<span class="section-label">Bize Ulaşın</span>

<h2>Projenizi Anlatın</h2>

<p>Yeni bir fikriniz mi var? Size nasıl yardımcı olabileceğimizi konuşalım.</p>

</div>

</div>

</div>

<button type="submit" class="btn btn-primary" style="margin-top: 20px;">Gönder</button>

</form>

</div>

<h4>Adres</h4>

<p>Maslak Mah. Büyükdere Cad. No:123<br>Sarıyer, İstanbul, Türkiye</p>

<h4>İletişim</h4>

<p>hello@nexus-agency.com<br>+90 (212) 555 0123</p>

</div>

<iframe

src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3006.776678255907!2d29.0185!3d41.1126!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14cab5d2c0b0b0b1%3A0x0!2zNDHCsDA2JzQ1LjQiTiAyOcKwMDEnMDYuNiJF!5e0!3m2!1sen!2str!4v1631234567890!5m2!1sen!2str"

width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy">

</iframe>

</div>

</section>

<div>

<a href="#" class="footer-logo">NEXUS.</a>

<p style="color: #6b7280; font-size: 0.9rem;">Dijital dünyada iz bırakan, estetik ve teknolojiyi birleştiren modern yazılım ajansı.</p>

</div>

<div>

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

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

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

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

</ul>

</div>

<div>

<h4>Hizmetler</h4>

<li><a href="#">Web Development</a></li>

<li><a href="#">Mobile Apps</a></li>

<li><a href="#">UI/UX Design</a></li>

<li><a href="#">SEO & Marketing</a></li>

</ul>

</div>

<div>

<h4>Sosyal Medya</h4>

</div>

</div>

</footer>

<h2 id="modal-title">Project Title</h2>

<p id="modal-desc" style="color: #666;">Project description goes here.</p>

</div>

// --- 1. Navbar Sticky & Scroll Effect ---

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

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

if (window.scrollY > 50) {

navbar.classList.add('scrolled');

} else {

navbar.classList.remove('scrolled');

}

});

// --- 2. Mobile Menu Toggle ---

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

const navLinks = document.querySelector('.nav-links');

const navItems = document.querySelectorAll('.nav-item');

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

navLinks.classList.toggle('active');

});

// Close menu when link is clicked

navItems.forEach(item => {

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

navLinks.classList.remove('active');

});

// --- 3. Scroll Reveal Animation ---

const revealElements = document.querySelectorAll('.reveal');

const revealOnScroll = () => {

const windowHeight = window.innerHeight;

const elementVisible = 150;

revealElements.forEach((reveal) => {

const elementTop = reveal.getBoundingClientRect().top;

if (elementTop < windowHeight - elementVisible) {

reveal.classList.add('active');

// Trigger counters if this is the about section

if (reveal.querySelector('.counters') && !reveal.classList.contains('counted')) {

startCounters();

reveal.classList.add('counted');

}

});

};

window.addEventListener('scroll', revealOnScroll);

// Trigger once on load

revealOnScroll();

// --- 4. Number Counters Animation ---

function startCounters() {

const counters = document.querySelectorAll('.counter-item h4');

const speed = 200; // The lower the slower

counters.forEach(counter => {

const updateCount = () => {

const target = +counter.getAttribute('data-target');

const count = +counter.innerText;

const inc = target / speed;

if (count < target) {

counter.innerText = Math.ceil(count + inc);

setTimeout(updateCount, 20);

} else {

counter.innerText = target + "+"; // Add plus sign

}

};

updateCount();

});

}

// --- 5. Project Modal System ---

const modal = document.getElementById('projectModal');

const modalImg = document.getElementById('modal-img');

const modalTitle = document.getElementById('modal-title');

const modalDesc = document.getElementById('modal-desc');

function openModal(title, desc, imgSrc) {

modalImg.src = imgSrc;

modalTitle.innerText = title;

modalDesc.innerText = desc;

modal.classList.add('active');

document.body.style.overflow = 'hidden'; // Prevent background scrolling

}

function closeModal() {

modal.classList.remove('active');

document.body.style.overflow = 'auto';

}

// Close modal when clicking outside content

modal.addEventListener('click', (e) => {

if (e.target === modal) {

closeModal();

}

});

// --- 6. Form Validation ---

function submitForm(e) {

e.preventDefault();

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

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

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

if(name && email && message) {

// Simple regex for email

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

if (!emailRegex.test(email)) {

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

return;

}

// Simulate sending

const btn = e.target.querySelector('button');

const originalText = btn.innerText;

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

setTimeout(() => {

alert(`Teşekkürler ${name}! Mesajınız bize ulaştı. En kısa sürede dönüş yapacağız.`);

document.getElementById('contactForm').reset();

btn.innerText = originalText;

}, 1500);

}

</script>

</body>

</html>

CSS

JS

Metehan

Recommended