Webleb - Snippets de Código - Um código do texto

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>

Um código do texto

Recomendado

Um Código por alejandrokundrah

Animação de carregamento CSS com imagem de fundo

CSS Aurora

HTML

CSS

JS

Recomendado

Um Código por alejandrokundrah

Animação de carregamento CSS com imagem de fundo

CSS Aurora

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS