Webleb - Extraits de Code

HTML

<!DOCTYPE html>

<head>

<title>SporLife | Spor Haberleri, Analizler ve Daha Fazlası</title>

<style>

:root {

--primary-color: #e74c3c; /* Spor enerjisini temsil eden kırmızı */

--secondary-color: #3498db; /* Sporcular için mavi */

--dark-bg: #0d1117; /* Koyu arka plan */

--light-text: #f5f7fa; /* Açık metin rengi */

--card-bg: rgba(255, 255, 255, 0.05); /* Kart arka planı */

--border-color: rgba(255, 255, 255, 0.1); /* Çerçeve rengi */

--accent-green: #2ecc71; /* Sağlık ve fitness için yeşil */

--accent-gold: #f1c40f; /* Şampiyonluk için altın */

--transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

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

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

color: var(--light-text);

overflow-x: hidden;

line-height: 1.6;

scroll-behavior: smooth;

}

.container {

max-width: 1200px;

margin: 0 auto;

padding: 0 20px;

}

/* Header Styles */

.main-header {

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 1000;

padding: 20px 0;

background-color: rgba(13, 17, 23, 0.95);

backdrop-filter: blur(10px);

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

transition: var(--transition);

}

.main-header.scrolled {

padding: 15px 0;

box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);

}

.header-container {

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

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

font-weight: 700;

font-size: 1.8rem;

color: var(--light-text);

text-decoration: none;

display: flex;

align-items: center;

}

.logo span {

color: var(--primary-color);

}

.logo i {

margin-right: 10px;

color: var(--primary-color);

}

.nav-links {

display: flex;

list-style: none;

gap: 30px;

}

.nav-link {

color: var(--light-text);

text-decoration: none;

font-weight: 500;

font-size: 1.1rem;

position: relative;

transition: var(--transition);

text-transform: uppercase;

letter-spacing: 1px;

font-size: 0.95rem;

}

.nav-link::after {

content: '';

position: absolute;

bottom: -5px;

left: 0;

width: 0;

height: 2px;

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

transition: var(--transition);

}

.nav-link:hover::after,

.nav-link.active::after {

width: 100%;

}

.nav-link:hover {

color: var(--primary-color);

}

.mobile-toggle {

display: none;

cursor: pointer;

font-size: 1.5rem;

}

/* Hero Section */

.hero {

min-height: 100vh;

display: flex;

align-items: center;

background: linear-gradient(rgba(13, 17, 23, 0.8), rgba(13, 17, 23, 0.8)),

url('https://images.unsplash.com/photo-1547347298-4074fc3086f0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;

position: relative;

padding-top: 80px;

}

.hero-content {

max-width: 650px;

}

.hero-content h1 {

font-size: 3.5rem;

line-height: 1.2;

margin-bottom: 20px;

text-transform: uppercase;

animation: fadeInUp 1s 0.2s forwards;

opacity: 0;

}

.hero-content h1 span {

color: var(--primary-color);

display: block;

}

.hero-content p {

font-size: 1.1rem;

margin-bottom: 30px;

opacity: 0;

animation: fadeInUp 1s 0.4s forwards;

}

.hero-stats {

display: flex;

gap: 30px;

margin-top: 40px;

opacity: 0;

animation: fadeInUp 1s 0.6s forwards;

}

.stat-item {

text-align: center;

}

.stat-item .number {

font-size: 2.5rem;

font-weight: 700;

color: var(--primary-color);

margin-bottom: 5px;

}

.stat-item .label {

font-size: 0.9rem;

text-transform: uppercase;

letter-spacing: 1px;

}

.btn {

display: inline-block;

padding: 12px 28px;

background: var(--primary-color);

color: var(--light-text);

border: none;

border-radius: 4px;

font-weight: 600;

text-transform: uppercase;

letter-spacing: 1px;

cursor: pointer;

transition: var(--transition);

text-decoration: none;

opacity: 0;

animation: fadeInUp 1s 0.8s forwards;

}

.btn:hover {

background: #c0392b;

transform: translateY(-3px);

box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);

}

/* Featured Section */

.featured {

padding: 100px 0;

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

}

.section-title {

text-align: center;

margin-bottom: 50px;

position: relative;

}

.section-title h2 {

font-size: 2.5rem;

text-transform: uppercase;

color: var(--light-text);

margin-bottom: 15px;

}

.section-title h2 span {

color: var(--primary-color);

}

.section-title .divider {

width: 80px;

height: 4px;

background: var(--primary-color);

margin: 0 auto;

}

.featured-grid {

display: grid;

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

gap: 30px;

}

.featured-card {

background: var(--card-bg);

border-radius: 8px;

overflow: hidden;

transition: var(--transition);

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

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

backdrop-filter: blur(10px);

}

.featured-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 35px rgba(231, 76, 60, 0.3);

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

}

.featured-img {

height: 200px;

overflow: hidden;

}

.featured-img img {

width: 100%;

height: 100%;

object-fit: cover;

transition: var(--transition);

}

.featured-card:hover .featured-img img {

transform: scale(1.1);

}

.featured-content {

padding: 25px;

}

.category-tag {

display: inline-block;

padding: 5px 10px;

background: var(--primary-color);

color: var(--light-text);

border-radius: 4px;

font-size: 0.8rem;

font-weight: 600;

margin-bottom: 15px;

text-transform: uppercase;

}

.featured-content h3 {

font-size: 1.5rem;

margin-bottom: 15px;

color: var(--light-text);

}

.featured-content p {

margin-bottom: 20px;

opacity: 0.8;

font-size: 0.95rem;

}

.meta-info {

display: flex;

justify-content: space-between;

color: rgba(255, 255, 255, 0.6);

font-size: 0.85rem;

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

padding-top: 15px;

}

/* Categories Section */

.categories {

padding: 100px 0;

background: linear-gradient(to bottom, var(--dark-bg), #0a0d12);

}

.categories-grid {

display: grid;

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

gap: 25px;

}

.category-card {

background: var(--card-bg);

border-radius: 8px;

padding: 40px 20px;

text-align: center;

transition: var(--transition);

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

backdrop-filter: blur(10px);

}

.category-card:hover {

transform: translateY(-10px);

background: rgba(231, 76, 60, 0.1);

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

}

.category-icon {

font-size: 3rem;

margin-bottom: 20px;

color: var(--primary-color);

}

.category-card h3 {

font-size: 1.5rem;

margin-bottom: 15px;

}

.category-card p {

font-size: 0.95rem;

opacity: 0.8;

margin-bottom: 20px;

}

/* Latest News */

.latest-news {

padding: 100px 0;

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

}

.news-grid {

display: grid;

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

gap: 30px;

}

.news-card {

background: var(--card-bg);

border-radius: 8px;

overflow: hidden;

transition: var(--transition);

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

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

backdrop-filter: blur(10px);

}

.news-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 35px rgba(231, 76, 60, 0.3);

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

}

.news-img {

height: 200px;

overflow: hidden;

position: relative;

}

.news-img img {

width: 100%;

height: 100%;

object-fit: cover;

transition: var(--transition);

}

.news-card:hover .news-img img {

transform: scale(1.1);

}

.news-date {

position: absolute;

top: 15px;

left: 15px;

background: var(--primary-color);

color: var(--light-text);

padding: 5px 10px;

border-radius: 4px;

font-size: 0.9rem;

font-weight: 600;

}

.news-content {

padding: 25px;

}

.news-content h3 {

font-size: 1.3rem;

margin-bottom: 15px;

color: var(--light-text);

}

.news-content p {

margin-bottom: 20px;

opacity: 0.8;

font-size: 0.95rem;

}

/* Video Section */

.video-section {

padding: 100px 0;

background: linear-gradient(to bottom, #0a0d12, var(--dark-bg));

text-align: center;

}

.video-container {

max-width: 900px;

margin: 0 auto;

position: relative;

border-radius: 10px;

overflow: hidden;

box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);

}

.video-container video {

width: 100%;

display: block;

border-radius: 10px;

}

.video-overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(13, 17, 23, 0.5);

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

padding: 20px;

}

.video-overlay h3 {

font-size: 2.5rem;

margin-bottom: 20px;

color: var(--light-text);

}

.play-btn {

width: 80px;

height: 80px;

background: var(--primary-color);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-size: 2rem;

cursor: pointer;

transition: var(--transition);

}

.play-btn:hover {

transform: scale(1.1);

background: #c0392b;

}

/* Newsletter */

.newsletter {

padding: 80px 0;

background: linear-gradient(135deg, var(--primary-color), #c0392b);

text-align: center;

}

.newsletter h3 {

font-size: 2rem;

margin-bottom: 20px;

}

.newsletter p {

max-width: 600px;

margin: 0 auto 30px;

font-size: 1.1rem;

}

.newsletter-form {

max-width: 500px;

margin: 0 auto;

display: flex;

}

.newsletter-form input {

flex: 1;

padding: 15px;

border: none;

border-radius: 4px 0 0 4px;

font-size: 1rem;

}

.newsletter-form button {

padding: 15px 30px;

background: var(--dark-bg);

color: var(--light-text);

border: none;

border-radius: 0 4px 4px 0;

cursor: pointer;

font-weight: 600;

transition: var(--transition);

}

.newsletter-form button:hover {

background: #0a0d12;

}

/* Footer */

footer {

background: var(--dark-bg);

padding: 80px 0 20px;

}

.footer-grid {

display: grid;

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

gap: 30px;

margin-bottom: 50px;

}

.footer-col h4 {

font-size: 1.3rem;

margin-bottom: 25px;

position: relative;

padding-bottom: 10px;

}

.footer-col h4:after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 50px;

height: 2px;

background: var(--primary-color);

}

.footer-col p {

margin-bottom: 20px;

opacity: 0.8;

}

.footer-links li {

margin-bottom: 12px;

}

.footer-links li a {

color: var(--light-text);

text-decoration: none;

transition: var(--transition);

}

.footer-links li a:hover {

color: var(--primary-color);

padding-left: 5px;

}

.social-links {

display: flex;

gap: 15px;

margin-top: 20px;

}

.social-links a {

display: flex;

align-items: center;

justify-content: center;

width: 40px;

height: 40px;

border-radius: 50%;

background: var(--card-bg);

color: var(--light-text);

transition: var(--transition);

}

.social-links a:hover {

background: var(--primary-color);

transform: translateY(-5px);

}

.copyright {

text-align: center;

padding-top: 30px;

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

font-size: 0.9rem;

opacity: 0.7;

}

/* Animations */

@keyframes fadeInUp {

from {

opacity: 0;

transform: translateY(30px);

}

to {

opacity: 1;

transform: translateY(0);

}

/* Responsive */

@media (max-width: 992px) {

.nav-links {

display: none;

}

.mobile-toggle {

display: block;

}

.hero-content h1 {

font-size: 2.8rem;

}

.mobile-nav {

position: fixed;

top: 70px;

left: -100%;

width: 100%;

height: calc(100vh - 70px);

background: var(--dark-bg);

flex-direction: column;

align-items: center;

justify-content: center;

transition: var(--transition);

gap: 30px;

z-index: 999;

}

.mobile-nav.active {

left: 0;

}

.mobile-nav ul {

list-style: none;

text-align: center;

}

.mobile-nav li {

margin: 1.5rem 0;

}

.mobile-nav .nav-link {

font-size: 1.2rem;

color: var(--light-text);

}

@media (max-width: 768px) {

.hero-content h1 {

font-size: 2.2rem;

}

.hero-stats {

flex-wrap: wrap;

justify-content: center;

}

.section-title h2 {

font-size: 2rem;

}

.newsletter-form {

flex-direction: column;

}

.newsletter-form input {

border-radius: 4px;

margin-bottom: 10px;

}

.newsletter-form button {

border-radius: 4px;

}

</style>

</head>

<body>

<nav>

<li><a href="#" class="nav-link active">Ana Sayfa</a></li>

<li><a href="#featured" class="nav-link">Öne Çıkanlar</a></li>

<li><a href="#categories" class="nav-link">Kategoriler</a></li>

<li><a href="#news" class="nav-link">Haberler</a></li>

<li><a href="#video" class="nav-link">Videolar</a></li>

<li><a href="#contact" class="nav-link">İletişim</a></li>

</ul>

</div>

</nav>

<ul>

<li><a href="#" class="nav-link active">Ana Sayfa</a></li>

<li><a href="#featured" class="nav-link">Öne Çıkanlar</a></li>

<li><a href="#categories" class="nav-link">Kategoriler</a></li>

<li><a href="#news" class="nav-link">Haberler</a></li>

<li><a href="#video" class="nav-link">Videolar</a></li>

<li><a href="#contact" class="nav-link">İletişim</a></li>

</ul>

</div>

</header>

<h1>Spor Dünyasının <span>Kalbi Burada Atıyor</span></h1>

<p>En güncel spor haberleri, derin analizler, antrenman ipuçları ve daha fazlası. Spor tutkunları için hazırlanmış kapsamlı bir platform.</p>

<a href="#featured" class="btn">Keşfetmeye Başla</a>

<div class="label">Günlük Makale</div>

</div>

<div class="label">Uzman Yazar</div>

</div>

<div class="label">Aylık Ziyaretçi</div>

</div>

</section>

<h2>Öne <span>Çıkanlar</span></h2>

</div>

</div>

<span class="category-tag">Futbol</span>

<h3>Şampiyonlar Ligi'nde Şok Gelişmeler</h3>

<p>Bu sezonun Şampiyonlar Ligi'nde sürpriz sonuçlar ve beklenmedik galibiyetlerle dolu maçlar yaşanıyor. Grup aşamasının son haftasında neler oldu?</p>

<span><i class="far fa-calendar"></i> 15 Haziran 2023</span>

<span><i class="far fa-clock"></i> 5 dk okuma</span>

</div>

</div>

<span class="category-tag">Basketbol</span>

<h3>NBA'de Yıldız Transferleri</h3>

<p>NBA'de serbest oyuncu dönemi başladı. Takımlar kadrolarını güçlendirmek için yıldız oyuncularla anlaşma peşinde. İşte en çok konuşulan transferler.</p>

<span><i class="far fa-calendar"></i> 12 Haziran 2023</span>

<span><i class="far fa-clock"></i> 7 dk okuma</span>

</div>

</div>

<span class="category-tag">Tenis</span>

<h3>Wimbledon'da Türk Varlığı</h3>

<p>Bu yıl Wimbledon'da tarihi bir başarıya imza atan Türk tenisçiler, tüm dünyanın dikkatini çekti. Detaylar ve röportajlar bu yazıda.</p>

<span><i class="far fa-calendar"></i> 10 Haziran 2023</span>

<span><i class="far fa-clock"></i> 4 dk okuma</span>

</div>

</section>

<h2>Spor <span>Kategorileri</span></h2>

</div>

</div>

<h3>Futbol</h3>

<p>Yerel ve uluslararası futbol haberleri, maç analizleri, transfer dedikoduları ve çok daha fazlası.</p>

<a href="#" class="btn">İncele</a>

</div>

</div>

<h3>Basketbol</h3>

<p>NBA, EuroLeague ve yerel basketbol liglerinden en güncel haberler ve derinlemesine analizler.</p>

<a href="#" class="btn">İncele</a>

</div>

</div>

<h3>Tenis</h3>

<p>Grand Slam turnuvaları, WTA ve ATP turundan son gelişmeler, maç özetleri ve oyuncu profilleri.</p>

<a href="#" class="btn">İncele</a>

</div>

</div>

<h3>Fitness</h3>

<p>Antrenman programları, beslenme ipuçları, supplementler ve sağlıklı yaşam rehberi.</p>

<a href="#" class="btn">İncele</a>

</div>

</section>

<h2>Son <span>Haberler</span></h2>

</div>

</div>

<h3>Dünya Atletizm Şampiyonası'nda Rekor</h3>

<p>Dünya Atletizm Şampiyonası'nda milli atletimiz tarihi bir başarıya imza attı ve yeni bir dünya rekoru kırdı.</p>

<a href="#" class="btn">Devamını Oku</a>

</div>

</div>

<h3>Olimpiyat Hazırlıkları Tüm Hızıyla</h3>

<p>Yaklaşan Olimpiyat Oyunları için milli takımlarımız yoğun hazırlık programlarına devam ediyor.</p>

<a href="#" class="btn">Devamını Oku</a>

</div>

</div>

<h3>Voleybol Ligi'nde Şampiyon Belli Oldu</h3>

<p>Süper Lig'de bu sezonun şampiyonu play-off finallerinde yapılan nefes kesici maçlarla belli oldu.</p>

<a href="#" class="btn">Devamını Oku</a>

</div>

</section>

<h2>Özel <span>Videolar</span></h2>

</div>

Tarayıcınız video öğesini desteklemiyor.

</video>

<h3>SporLife Özel Röportaj</h3>

</div>

</section>

<h3>Bültenimize Abone Olun</h3>

<p>En güncel spor haberleri ve özel içeriklerden haberdar olmak için e-posta adresinizi bırakın.</p>

<button type="submit">Abone Ol</button>

</form>

</div>

</section>

<h4>SporLife</h4>

<p>Spor dünyasının nabzını tutan, güncel haberler ve derin analizler sunan lider spor platformu.</p>

</div>

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

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

<li><a href="#featured">Öne Çıkanlar</a></li>

<li><a href="#categories">Kategoriler</a></li>

<li><a href="#news">Haberler</a></li>

<li><a href="#video">Videolar</a></li>

</ul>

</div>

<h4>Kategoriler</h4>

<li><a href="#">Futbol</a></li>

<li><a href="#">Basketbol</a></li>

<li><a href="#">Tenis</a></li>

<li><a href="#">Voleybol</a></li>

<li><a href="#">Atletizm</a></li>

<li><a href="#">Fitness</a></li>

</ul>

</div>

<h4>İletişim</h4>

<li><i class="fas fa-map-marker-alt"></i> Spor Caddesi No:123, İstanbul</li>

<li><i class="fas fa-envelope"></i> info@sporlife.com</li>

</ul>

</div>

</div>

</footer>

// Mobile Menu Toggle

const mobileToggle = document.getElementById('mobile-toggle');

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

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

mobileNav.classList.toggle('active');

});

// Close menu when clicking outside

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

if (!mobileToggle.contains(e.target) && !mobileNav.contains(e.target)) {

mobileNav.classList.remove('active');

}

});

// Sticky header effect

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

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

header.classList.toggle('scrolled', window.scrollY > 50);

});

// Smooth scrolling for anchor links

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function(e) {

e.preventDefault();

const target = document.querySelector(this.getAttribute('href'));

if (target) {

window.scrollTo({

top: target.offsetTop - 70,

behavior: 'smooth'

});

// Close mobile menu if open

mobileNav.classList.remove('active');

}

});

// Video play functionality

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

const playBtn = document.querySelector('.play-btn');

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

if (video.paused) {

video.play();

playBtn.innerHTML = '<i class="fas fa-pause"></i>';

document.querySelector('.video-overlay h3').style.display = 'none';

} else {

video.pause();

playBtn.innerHTML = '<i class="fas fa-play"></i>';

document.querySelector('.video-overlay h3').style.display = 'block';

}

});

// Update play button when video ends

video.addEventListener('ended', () => {

playBtn.innerHTML = '<i class="fas fa-play"></i>';

document.querySelector('.video-overlay h3').style.display = 'block';

});

</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