Webleb - UI Elements

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

Recommended

A Code by Metehan

A Code by Metehan

A Code by Metehan

HTML

CSS

JS

Recommended

A Code by Metehan

A Code by Metehan

A Code by Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS