Webleb - UI Elements - Metenin bir kodu

HTML

<!DOCTYPE html>

<head>

<title>Sportify Blog | Spor, Sağlık ve Fitness Dünyası</title>

tailwind.config = {

theme: {

extend: {

colors: {

primary: '#1a73e8',

secondary: '#34a853',

accent: '#fbbc05',

dark: '#0f172a',

light: '#f8fafc',

card: 'rgba(255, 255, 255, 0.08)',

border: 'rgba(255, 255, 255, 0.15)'

},

fontFamily: {

inter: ['Inter', 'sans-serif'],

playfair: ['Playfair Display', 'serif']

}

</script>

<style>

:root {

--transition-timing: cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

body {

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

background-color: #0f172a;

color: #f8fafc;

line-height: 1.6;

scroll-behavior: smooth;

overflow-x: hidden;

}

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

font-family: 'Playfair Display', serif;

color: #f8fafc;

}

/* Particles.js Background */

#particles-js {

position: fixed;

width: 100%;

height: 100%;

z-index: -1;

top: 0;

left: 0;

background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

}

/* Sticky Header */

.main-header.scrolled {

background-color: rgba(15, 23, 42, 0.95);

backdrop-filter: blur(12px);

box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);

padding-top: 0.75rem;

padding-bottom: 0.75rem;

}

.nav-link::after {

content: '';

position: absolute;

bottom: -5px;

left: 0;

width: 0;

height: 2px;

background-color: #1a73e8;

transition: width 0.3s var(--transition-timing);

}

.nav-link:hover::after, .nav-link.active::after {

width: 100%;

}

.hamburger-menu.active .line:nth-child(1) {

transform: translateY(9.5px) rotate(45deg);

}

.hamburger-menu.active .line:nth-child(2) {

opacity: 0;

}

.hamburger-menu.active .line:nth-child(3) {

transform: translateY(-9.5px) rotate(-45deg);

}

.typed-cursor {

color: #1a73e8 !important;

font-size: 1em;

opacity: 1;

animation: blink 0.7s infinite;

}

@keyframes blink {

0% { opacity: 1; }

50% { opacity: 0; }

100% { opacity: 1; }

}

.skill-progress {

width: 0;

transition: width 1.5s ease-out;

}

.btn-custom {

display: inline-block;

padding: 0.8rem 2.2rem;

font-size: 1.1rem;

font-weight: 700;

text-transform: uppercase;

border-radius: 50px;

transition: all 0.3s var(--transition-timing);

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

border: 2px solid transparent;

}

.btn-primary-custom {

background-color: #1a73e8;

color: #f8fafc;

border-color: #1a73e8;

}

.btn-primary-custom:hover {

background-color: #1557b0;

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(26, 115, 232, 0.5);

border-color: #1557b0;

}

.btn-secondary-custom {

background-color: transparent;

color: #f8fafc;

border-color: #f8fafc;

}

.btn-secondary-custom:hover {

background-color: #f8fafc;

color: #0f172a;

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(248, 250, 252, 0.3);

border-color: #f8fafc;

}

.btn-accent-custom {

background-color: #fbbc05;

color: #0f172a;

border-color: #fbbc05;

}

.btn-accent-custom:hover {

background-color: #e0a800;

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(251, 188, 5, 0.5);

border-color: #e0a800;

}

.submit-btn {

background-color: #1a73e8;

color: #f8fafc;

border: none;

padding: 1rem 2.5rem;

border-radius: 50px;

font-weight: 600;

cursor: pointer;

transition: all 0.3s var(--transition-timing);

display: inline-block;

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

}

.submit-btn:hover {

background-color: #1557b0;

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(26, 115, 232, 0.5);

}

.platform-btn {

box-shadow: 0 3px 10px rgba(0,0,0,0.2);

transition: all 0.3s var(--transition-timing);

}

.platform-btn:hover {

transform: translateY(-3px);

box-shadow: 0 8px 18px rgba(0,0,0,0.3);

}

#scroll-top-btn {

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

}

#scroll-top-btn:hover {

transform: translateY(-5px) scale(1.05);

box-shadow: 0 10px 20px rgba(26, 115, 232, 0.4);

}

.feature-card {

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

border-radius: 12px;

padding: 30px;

transition: all 0.3s ease;

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

}

.feature-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 35px rgba(0,0,0,0.2);

background: rgba(26, 115, 232, 0.1);

}

.testimonial-card {

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

border-radius: 12px;

padding: 30px;

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

}

.blog-card {

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

border-radius: 12px;

overflow: hidden;

transition: all 0.3s ease;

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

height: 100%;

display: flex;

flex-direction: column;

}

.blog-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 35px rgba(0,0,0,0.2);

}

.blog-image {

height: 200px;

overflow: hidden;

}

.blog-image img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.5s ease;

}

.blog-card:hover .blog-image img {

transform: scale(1.1);

}

.blog-content {

padding: 20px;

flex-grow: 1;

display: flex;

flex-direction: column;

}

.blog-tag {

display: inline-block;

background: #34a853;

color: #f8fafc;

padding: 5px 10px;

border-radius: 20px;

font-size: 0.8rem;

font-weight: 600;

margin-bottom: 10px;

}

.stats-card {

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

border-radius: 12px;

padding: 20px;

text-align: center;

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

}

.stats-number {

font-size: 2.5rem;

font-weight: 700;

color: #1a73e8;

margin-bottom: 5px;

}

</style>

</head>

Sportify<span class="text-primary">Blog</span>

</a>

<a href="#home" class="nav-link text-lg font-medium text-white hover:text-primary transition-colors duration-300 relative">Anasayfa</a>

<a href="#about" class="nav-link text-lg font-medium text-white hover:text-primary transition-colors duration-300 relative">Hakkımızda</a>

<a href="#features" class="nav-link text-lg font-medium text-white hover:text-primary transition-colors duration-300 relative">Özellikler</a>

<a href="#testimonials" class="nav-link text-lg font-medium text-white hover:text-primary transition-colors duration-300 relative">Görüşler</a>

<a href="#contact" class="nav-link text-lg font-medium text-white hover:text-primary transition-colors duration-300 relative">İletişim</a>

</nav>

</button>

</div>

<li><a href="#home" class="nav-link text-2xl font-semibold text-white hover:text-primary transition-colors duration-300 py-2 block">Anasayfa</a></li>

<li><a href="#about" class="nav-link text-2xl font-semibold text-white hover:text-primary transition-colors duration-300 py-2 block">Hakkımızda</a></li>

<li><a href="#features" class="nav-link text-2xl font-semibold text-white hover:text-primary transition-colors duration-300 py-2 block">Özellikler</a></li>

<li><a href="#testimonials" class="nav-link text-2xl font-semibold text-white hover:text-primary transition-colors duration-300 py-2 block">Görüşler</a></li>

<li><a href="#contact" class="nav-link text-2xl font-semibold text-white hover:text-primary transition-colors duration-300 py-2 block">İletişim</a></li>

</ul>

</div>

</header>

<h4 class="text-xl md:text-2xl font-medium text-primary mb-4">SPOR VE SAĞLIKLI YAŞAM REHBERİNİZ</h4>

Sportif Yaşamın <br> <span id="typed-text" class="text-primary"></span>

</h1>

Fitness, beslenme, spor bilimi ve motivasyon konularında uzman rehberlik. Hedeflerinize ulaşmanız için bilimsel yaklaşımlar ve ilham verici içerikler.

</p>

Yazıları Keşfet

</a>

Ücretsiz Danışmanlık

</a>

</div>

</div>

</section>

<div class="text-light">Aktif Üye</div>

</div>

<div class="text-light">Makale</div>

</div>

<div class="text-light">Uzman Eğitmen</div>

</div>

<div class="text-light">Memnuniyet</div>

</div>

</section>

Sportify Blog Hakkında

</h2>

</div>

</div>

<h3 class="text-3xl md:text-4xl font-bold text-primary mb-6">Spor ve Sağlıklı Yaşam Tutkunları İçin</h3>

2015 yılından bu yana, spor ve sağlıklı yaşam konusunda güvenilir bilgi kaynağı olma misyonuyla yayın yapıyoruz. Uzman ekibimiz, en güncel bilimsel araştırmaları takip ederek sizlere ulaştırıyor.

</p>

Amacımız, herkesin kendi fitness yolculuğunda doğru bilgiye ulaşmasını sağlamak ve motive edici içeriklerle hedeflerine ulaşmalarına yardımcı olmak.

</p>

<span class="font-semibold text-white">Fitness ve Antrenman Bilimi</span>

</div>

</div>

<span class="font-semibold text-white">Beslenme ve Diyetetik</span>

</div>

</div>

<span class="font-semibold text-white">Spor Psikolojisi</span>

</div>

</div>

Ekibimizi Tanıyın

</a>

</div>

</section>

Sportify Blog Özellikleri

</h2>

<p class="text-xl text-light max-w-2xl mx-auto mt-6">Spor ve sağlıklı yaşam yolculuğunuzu destekleyen benzersiz özelliklerimizi keşfedin</p>

</div>

</div>

<h3 class="text-2xl font-bold text-white mb-4">Kişiselleştirilmiş Antrenman Planları</h3>

<p class="text-light">Hedeflerinize, fitness seviyenize ve zamanınıza uygun özel antrenman programları oluşturun.</p>

</div>

</div>

<h3 class="text-2xl font-bold text-white mb-4">Beslenme Rehberi</h3>

<p class="text-light">Uzman diyetisyenler tarafından hazırlanan beslenme planları ve sağlıklı tarifler.</p>

</div>

</div>

<h3 class="text-2xl font-bold text-white mb-4">Mental Performans</h3>

<p class="text-light">Spor psikolojisi uzmanlarından motivasyon ve zihinsel dayanıklılık stratejileri.</p>

</div>

</div>

<h3 class="text-2xl font-bold text-white mb-4">Video Eğitimler</h3>

<p class="text-light">Profesyonel eğitmenler eşliğinde doğru teknikleri öğreten video içerikler.</p>

</div>

</div>

<h3 class="text-2xl font-bold text-white mb-4">İlerleme Takibi</h3>

<p class="text-light">Fitness yolculuğunuzdaki gelişimi takip edin ve hedeflerinize daha hızlı ulaşın.</p>

</div>

</div>

<h3 class="text-2xl font-bold text-white mb-4">Topluluk Desteği</h3>

<p class="text-light">Benzer hedeflere sahip spor tutkunlarıyla bağlantı kurun ve birbirinizi motive edin.</p>

</div>

</section>

Son Blog Yazılarımız

</h2>

<p class="text-xl text-light max-w-2xl mx-auto mt-6">Spor ve sağlık dünyasından en güncel bilgiler, ipuçları ve ilham verici hikayeler</p>

</div>

</div>

<span class="blog-tag">Fitness</span>

<h3 class="text-2xl font-bold text-white mb-4">Yağ Yakımını Hızlandıran 10 Bilimsel Yöntem</h3>

<p class="text-light mb-6">Bilimsel araştırmalarla desteklenen, yağ yakım sürecini hızlandıracak etkili stratejileri keşfedin.</p>

</div>

</div>

<span class="blog-tag">Vücut Geliştirme</span>

<h3 class="text-2xl font-bold text-white mb-4">Maksimum Kas Gelişimi İçin Beslenme Rehberi</h3>

<p class="text-light mb-6">Kas kütlesi artırımında beslenmenin kritik rolü ve doğru besin takviyeleri hakkında bilmeniz gerekenler.</p>

</div>

</div>

<span class="blog-tag">Psikoloji</span>

<h3 class="text-2xl font-bold text-white mb-4">Sporcularda Mental Dayanıklılık Nasıl Geliştirilir?</h3>

<p class="text-light mb-6">Profesyonel spor psikoloğu Dr. Ayşe Kaya'dan zihinsel performansı artırma teknikleri.</p>

</div>

Tüm Yazıları Görüntüle

</a>

</div>

</section>

Üyelerimizin Görüşleri

</h2>

<p class="text-xl text-light max-w-2xl mx-auto mt-6">Sportify Blog ile hedeflerine ulaşan üyelerimizin deneyimleri</p>

</div>

<div>

<h4 class="text-xl font-bold text-white">Ahmet Yılmaz</h4>

<p class="text-light">Profesyonel Voleybolcu</p>

</div>

<p class="text-light mb-4">"Sportify Blog sayesinde beslenme ve antrenman bilgimi ciddi ölçüde geliştirdim. Performansımda gözle görülür bir artış oldu."</p>

</div>

<div>

<h4 class="text-xl font-bold text-white">Zeynep Kaya</h4>

<p class="text-light">Fitness Eğitmeni</p>

</div>

<p class="text-light mb-4">"Mesleğimde kendimi geliştirmek için sürekli araştırma yapıyorum. Sportify Blog, en güncel bilimsel bilgilere ulaşmamı sağlıyor."</p>

</div>

<div>

<h4 class="text-xl font-bold text-white">Mehmet Demir</h4>

<p class="text-light">Maraton Koşucusu</p>

</div>

<p class="text-light mb-4">"İlk maratonumu tamamlamamda Sportify Blog'daki motivasyon yazıları ve antrenman ipuçları bana çok yardımcı oldu. Teşekkürler!"</p>

</div>

</section>

İletişime Geçin

</h2>

<p class="text-xl text-light max-w-2xl mx-auto mt-6">Sorularınız, önerileriniz veya işbirliği teklifleriniz için bize ulaşın</p>

</div>

<h3 class="text-3xl font-bold text-white mb-8 text-center">Bize Mesaj Gönderin</h3>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

Mesajı Gönder

</button>

</form>

</div>

</div>

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

<p class="text-lg text-light">Levent, Spor Caddesi No: 45, İstanbul</p>

</div>

</div>

<h3 class="text-2xl font-bold text-white mb-2">E-posta</h3>

<p class="text-lg text-light">info@sportifyblog.com</p>

</div>

</div>

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

</div>

</div>

<h3 class="text-2xl font-bold text-white mb-2">Çalışma Saatleri</h3>

</div>

</section>

Sportify<span class="text-primary">Blog</span>

</a>

<li><a href="#home" class="text-light hover:text-primary transition-colors duration-300">Anasayfa</a></li>

<li><a href="#about" class="text-light hover:text-primary transition-colors duration-300">Hakkımızda</a></li>

<li><a href="#features" class="text-light hover:text-primary transition-colors duration-300">Özellikler</a></li>

<li><a href="#testimonials" class="text-light hover:text-primary transition-colors duration-300">Görüşler</a></li>

<li><a href="#contact" class="text-light hover:text-primary transition-colors duration-300">İletişim</a></li>

</ul>

</div>

</p>

</div>

</footer>

</button>

// Mobile Navigation Toggle

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

const mobileNav = document.getElementById('mobile-nav');

const mobileNavLinks = mobileNav.querySelectorAll('.nav-link');

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

mobileNav.classList.toggle('right-[-100%]');

mobileNav.classList.toggle('right-0');

hamburger.classList.toggle('active');

});

mobileNavLinks.forEach(link => {

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

mobileNav.classList.remove('right-0');

mobileNav.classList.add('right-[-100%]');

hamburger.classList.remove('active');

});

// Sticky Header on Scroll

const mainHeader = document.querySelector('.main-header');

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

mainHeader.classList.toggle('scrolled', window.scrollY > 80);

});

// Scroll to Top Button

const scrollTopBtn = document.getElementById('scroll-top-btn');

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

if (window.pageYOffset > 500) {

scrollTopBtn.classList.add('opacity-100', 'visible');

} else {

scrollTopBtn.classList.remove('opacity-100', 'visible');

}

});

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

window.scrollTo({

top: 0,

behavior: 'smooth'

});

// Typed.js Initialization for Hero Section

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

if (document.getElementById('typed-text')) {

new Typed("#typed-text", {

strings: ["Sırları", "Bilimi", "Yolculuğu", "Dönüşümü"],

typeSpeed: 60,

backSpeed: 45,

loop: true,

showCursor: true,

cursorChar: '|',

});

}

});

// Skill Bars Animation on Scroll

const skillProgressBars = document.querySelectorAll('.skill-progress');

const aboutSection = document.getElementById('about');

const skillObserver = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

skillProgressBars.forEach(bar => {

const progress = bar.dataset.progress;

bar.style.width = progress + '%';

});

skillObserver.unobserve(entry.target);

}

});

}, { threshold: 0.3 });

if (aboutSection) {

skillObserver.observe(aboutSection);

}

// Smooth Scroll for Navigation Links & Active Link Highlighting

const navLinks = document.querySelectorAll('.nav-link');

const sections = document.querySelectorAll('section[id]');

const mainHeaderElement = document.querySelector('.main-header');

function smoothScrollAndHighlight(e) {

if (e.target.matches('a[href^="#"]')) {

e.preventDefault();

const targetId = e.target.getAttribute('href');

const targetElement = document.querySelector(targetId);

if (targetElement) {

const headerHeight = mainHeaderElement.offsetHeight;

const offsetPosition = targetElement.offsetTop - headerHeight - 20;

window.scrollTo({

top: offsetPosition,

behavior: 'smooth'

});

}

function highlightNavLink() {

let currentActiveSection = '';

const headerHeight = mainHeaderElement.offsetHeight;

sections.forEach(section => {

const sectionTop = section.offsetTop - headerHeight - 30;

const sectionHeight = section.clientHeight;

if (pageYOffset >= sectionTop && pageYOffset < sectionTop + sectionHeight) {

currentActiveSection = section.getAttribute('id');

}

});

navLinks.forEach(link => {

link.classList.remove('active');

if (link.getAttribute('href') === `#${currentActiveSection}`) {

link.classList.add('active');

} else if (currentActiveSection === '' && link.getAttribute('href') === '#home') {

link.classList.add('active');

}

});

}

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

document.querySelectorAll('nav a').forEach(link => {

link.addEventListener('click', smoothScrollAndHighlight);

});

highlightNavLink();

});

window.addEventListener('scroll', highlightNavLink);

// Particles.js Configuration

particlesJS("particles-js", {

"particles": {

"number": {

"value": 80,

"density": {

"enable": true,

"value_area": 800

}

},

"color": {

"value": "#1a73e8"

},

"shape": {

"type": "circle",

"stroke": {

"width": 0,

"color": "#000000"

}

},

"opacity": {

"value": 0.5,

"random": false

},

"size": {

"value": 3,

"random": true

},

"line_linked": {

"enable": true,

"distance": 150,

"color": "#1a73e8",

"opacity": 0.4,

"width": 1

},

"move": {

"enable": true,

"speed": 2,

"direction": "none",

"random": false,

"out_mode": "out"

}

},

"interactivity": {

"detect_on": "canvas",

"events": {

"onhover": {

"enable": true,

"mode": "grab"

},

"onclick": {

"enable": true,

"mode": "push"

},

"resize": true

},

"modes": {

"grab": {

"distance": 140,

"line_linked": {

"opacity": 1

}

},

"push": {

"particles_nb": 4

}

},

"retina_detect": true

});

</script>

</body>

</html>

Metenin bir kodu

Recommended

CSS Button Hover Effect

Beril Coşkun: Blog, Kültür, Yazın - Kişisel Web Sitesi

Glassmorphic login form

HTML

CSS

JS

Recommended

CSS Button Hover Effect

Beril Coşkun: Blog, Kültür, Yazın - Kişisel Web Sitesi

Glassmorphic login form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS