Webleb - Code-Snippets

HTML

<!DOCTYPE html>

<head>

<title>Spotty - Modern Müzik Platformu</title>

<style>

:root {

--primary-color: #1e1e2a;

--secondary-color: #2d2d44;

--accent-color: #8a2be2;

--accent-color-2: #ff2a6d;

--accent-color-3: #05d9e8;

--text-color: #ffffff;

--text-secondary: #b3b3b3;

--card-bg: rgba(45, 45, 68, 0.7);

--gradient: linear-gradient(135deg, var(--accent-color), var(--accent-color-2));

--gradient-2: linear-gradient(135deg, var(--accent-color-3), var(--accent-color));

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

--transition: all 0.3s ease;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

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

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

color: var(--text-color);

line-height: 1.6;

overflow-x: hidden;

}

.container {

max-width: 1200px;

margin: 0 auto;

padding: 0 20px;

}

/* Header & Navigation */

header {

background-color: rgba(30, 30, 42, 0.9);

backdrop-filter: blur(10px);

position: fixed;

width: 100%;

top: 0;

z-index: 1000;

box-shadow: var(--shadow);

}

.navbar {

display: flex;

justify-content: space-between;

align-items: center;

padding: 15px 0;

}

.logo {

font-size: 28px;

font-weight: 700;

background: var(--gradient);

-webkit-background-clip: text;

background-clip: text;

color: transparent;

}

.nav-links {

display: flex;

list-style: none;

}

.nav-links li {

margin-left: 25px;

}

.nav-links a {

color: var(--text-color);

text-decoration: none;

font-weight: 500;

transition: var(--transition);

position: relative;

}

.nav-links a:hover {

color: var(--accent-color-2);

}

.nav-links a.active {

color: var(--accent-color-3);

}

.nav-links a.active::after {

content: '';

position: absolute;

bottom: -5px;

left: 0;

width: 100%;

height: 2px;

background: var(--accent-color-3);

}

.hamburger {

display: none;

cursor: pointer;

font-size: 24px;

}

/* Hero Section */

.hero {

margin-top: 80px;

padding: 80px 0;

background: var(--gradient-2);

background-size: 400% 400%;

animation: gradientShift 10s ease infinite;

border-radius: 0 0 30px 30px;

text-align: center;

position: relative;

overflow: hidden;

}

@keyframes gradientShift {

0% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

100% { background-position: 0% 50%; }

}

.hero::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

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

}

.hero-content {

position: relative;

z-index: 1;

}

.hero h1 {

font-size: 48px;

margin-bottom: 20px;

font-weight: 700;

}

.hero p {

font-size: 18px;

max-width: 600px;

margin: 0 auto 30px;

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

}

.btn {

display: inline-block;

padding: 12px 30px;

background: var(--gradient);

color: white;

border: none;

border-radius: 30px;

font-weight: 600;

cursor: pointer;

transition: var(--transition);

text-decoration: none;

box-shadow: var(--shadow);

}

.btn:hover {

transform: translateY(-3px);

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

}

/* Sections */

section {

padding: 80px 0;

}

.section-title {

font-size: 32px;

margin-bottom: 40px;

text-align: center;

position: relative;

}

.section-title::after {

content: '';

position: absolute;

bottom: -10px;

left: 50%;

transform: translateX(-50%);

width: 80px;

height: 4px;

background: var(--gradient);

border-radius: 2px;

}

/* Cards */

.card-grid {

display: grid;

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

gap: 25px;

}

.card {

background: var(--card-bg);

border-radius: 15px;

overflow: hidden;

transition: var(--transition);

box-shadow: var(--shadow);

backdrop-filter: blur(10px);

}

.card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);

}

.card-img {

width: 100%;

height: 180px;

object-fit: cover;

}

.card-content {

padding: 20px;

}

.card-title {

font-size: 18px;

margin-bottom: 10px;

}

.card-text {

color: var(--text-secondary);

font-size: 14px;

}

/* Artists Section */

.artist-card {

text-align: center;

}

.artist-img {

width: 150px;

height: 150px;

border-radius: 50%;

object-fit: cover;

margin: 0 auto 15px;

border: 3px solid var(--accent-color);

}

.follow-btn {

background: transparent;

border: 2px solid var(--accent-color-2);

color: var(--accent-color-2);

padding: 8px 20px;

border-radius: 20px;

cursor: pointer;

transition: var(--transition);

margin-top: 10px;

}

.follow-btn:hover {

background: var(--accent-color-2);

color: white;

}

/* Songs Section */

.song-list {

background: var(--card-bg);

border-radius: 15px;

overflow: hidden;

box-shadow: var(--shadow);

}

.song-item {

display: flex;

align-items: center;

padding: 15px 20px;

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

transition: var(--transition);

}

.song-item:hover {

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

}

.song-item:last-child {

border-bottom: none;

}

.song-number {

width: 30px;

color: var(--text-secondary);

}

.song-info {

flex: 1;

margin-left: 15px;

}

.song-title {

font-weight: 500;

}

.song-artist {

color: var(--text-secondary);

font-size: 14px;

}

.song-duration {

color: var(--text-secondary);

}

.play-btn {

background: transparent;

border: none;

color: var(--text-color);

font-size: 18px;

cursor: pointer;

margin-left: 15px;

transition: var(--transition);

}

.play-btn:hover {

color: var(--accent-color-3);

}

/* Clips Section */

.video-card {

position: relative;

overflow: hidden;

}

.video-overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

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

display: flex;

justify-content: center;

align-items: center;

opacity: 0;

transition: var(--transition);

}

.video-card:hover .video-overlay {

opacity: 1;

}

.play-icon {

font-size: 50px;

color: white;

transition: var(--transition);

}

.play-icon:hover {

color: var(--accent-color-3);

transform: scale(1.1);

}

/* Charts Section */

.chart-container {

display: flex;

flex-wrap: wrap;

gap: 30px;

justify-content: center;

}

.chart {

width: 200px;

height: 200px;

position: relative;

}

.chart-circle {

width: 100%;

height: 100%;

border-radius: 50%;

background: conic-gradient(var(--accent-color-2) 0% 75%, var(--secondary-color) 75% 100%);

display: flex;

justify-content: center;

align-items: center;

}

.chart-inner {

width: 70%;

height: 70%;

background: var(--primary-color);

border-radius: 50%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.chart-value {

font-size: 24px;

font-weight: 700;

background: var(--gradient);

-webkit-background-clip: text;

background-clip: text;

color: transparent;

}

.chart-label {

font-size: 14px;

color: var(--text-secondary);

}

/* Blog Section */

.blog-card {

display: flex;

flex-direction: column;

height: 100%;

}

.blog-content {

flex: 1;

display: flex;

flex-direction: column;

}

.blog-title {

font-size: 18px;

margin-bottom: 10px;

}

.blog-excerpt {

color: var(--text-secondary);

font-size: 14px;

margin-bottom: 15px;

flex: 1;

}

.read-more {

color: var(--accent-color-3);

text-decoration: none;

font-weight: 500;

transition: var(--transition);

}

.read-more:hover {

color: var(--accent-color-2);

}

/* About Section */

.about-content {

display: flex;

align-items: center;

gap: 40px;

}

.about-text {

flex: 1;

}

.about-image {

flex: 1;

border-radius: 15px;

overflow: hidden;

box-shadow: var(--shadow);

}

.about-img {

width: 100%;

height: auto;

display: block;

}

/* Contact Section */

.contact-container {

display: flex;

gap: 40px;

}

.contact-info {

flex: 1;

}

.contact-form {

flex: 1;

}

.form-group {

margin-bottom: 20px;

}

.form-control {

width: 100%;

padding: 12px 15px;

background: var(--card-bg);

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

border-radius: 8px;

color: var(--text-color);

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

transition: var(--transition);

}

.form-control:focus {

outline: none;

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

}

textarea.form-control {

min-height: 120px;

resize: vertical;

}

.social-links {

display: flex;

gap: 15px;

margin-top: 20px;

}

.social-icon {

display: inline-flex;

justify-content: center;

align-items: center;

width: 40px;

height: 40px;

background: var(--gradient);

color: white;

border-radius: 50%;

text-decoration: none;

transition: var(--transition);

}

.social-icon:hover {

transform: translateY(-3px);

}

/* Mini Player */

.mini-player {

position: fixed;

bottom: 0;

left: 0;

width: 100%;

background: rgba(30, 30, 42, 0.95);

backdrop-filter: blur(10px);

padding: 10px 20px;

display: flex;

align-items: center;

justify-content: space-between;

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

z-index: 1000;

}

.player-info {

display: flex;

align-items: center;

gap: 15px;

}

.player-img {

width: 50px;

height: 50px;

border-radius: 8px;

object-fit: cover;

}

.player-details .song-title {

font-size: 14px;

margin-bottom: 5px;

}

.player-details .song-artist {

font-size: 12px;

}

.player-controls {

display: flex;

align-items: center;

gap: 15px;

}

.control-btn {

background: transparent;

border: none;

color: var(--text-color);

font-size: 18px;

cursor: pointer;

transition: var(--transition);

}

.control-btn:hover {

color: var(--accent-color-3);

}

.play-pause {

width: 40px;

height: 40px;

border-radius: 50%;

background: var(--gradient);

display: flex;

justify-content: center;

align-items: center;

color: white;

}

.progress-bar {

flex: 1;

height: 4px;

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

border-radius: 2px;

margin: 0 20px;

position: relative;

cursor: pointer;

}

.progress {

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 30%;

background: var(--gradient);

border-radius: 2px;

}

/* Footer */

footer {

background: var(--secondary-color);

padding: 40px 0 20px;

margin-top: 80px;

}

.footer-content {

display: flex;

justify-content: space-between;

flex-wrap: wrap;

gap: 30px;

margin-bottom: 30px;

}

.footer-column {

flex: 1;

min-width: 200px;

}

.footer-title {

font-size: 18px;

margin-bottom: 20px;

position: relative;

}

.footer-title::after {

content: '';

position: absolute;

bottom: -8px;

left: 0;

width: 40px;

height: 3px;

background: var(--accent-color-3);

}

.footer-links {

list-style: none;

}

.footer-links li {

margin-bottom: 10px;

}

.footer-links a {

color: var(--text-secondary);

text-decoration: none;

transition: var(--transition);

}

.footer-links a:hover {

color: var(--accent-color-3);

}

.copyright {

text-align: center;

padding-top: 20px;

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

color: var(--text-secondary);

font-size: 14px;

}

/* Responsive Design */

@media (max-width: 992px) {

.about-content {

flex-direction: column;

}

.contact-container {

flex-direction: column;

}

@media (max-width: 768px) {

.nav-links {

position: fixed;

top: 70px;

left: -100%;

width: 100%;

height: calc(100vh - 70px);

background: var(--primary-color);

flex-direction: column;

align-items: center;

justify-content: flex-start;

padding-top: 50px;

transition: var(--transition);

}

.nav-links.active {

left: 0;

}

.nav-links li {

margin: 15px 0;

}

.hamburger {

display: block;

}

.hero h1 {

font-size: 36px;

}

.section-title {

font-size: 28px;

}

@media (max-width: 576px) {

.hero {

padding: 60px 0;

}

.hero h1 {

font-size: 28px;

}

.card-grid {

grid-template-columns: 1fr;

}

.chart {

width: 150px;

height: 150px;

}

</style>

</head>

<body>

<div class="logo">Spotty</div>

<li><a href="#home" class="active">Ana Sayfa</a></li>

<li><a href="#artists">Sanatçılar</a></li>

<li><a href="#songs">Şarkılar</a></li>

<li><a href="#clips">Klipler</a></li>

<li><a href="#charts">Hit Parçalar</a></li>

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

<li><a href="#contact">İletişim</a></li>

</ul>

</div>

</nav>

</div>

</header>

<h1>Müziğin Yeni Evreni</h1>

<p>Spotty ile en sevdiğiniz şarkıları keşfedin, yeni sanatçılar bulun ve müzik dünyasının tadını çıkarın.</p>

<a href="#" class="btn">30 Gün Ücretsiz Dene</a>

</div>

</section>

<h2 class="section-title">Popüler Sanatçılar</h2>

<h3 class="card-title">Aylin Demir</h3>

<p class="card-text">12.5M Takipçi</p>

<button class="follow-btn">Takip Et</button>

</div>

<h3 class="card-title">Can Yılmaz</h3>

<p class="card-text">9.8M Takipçi</p>

<button class="follow-btn">Takip Et</button>

</div>

<h3 class="card-title">Zeynep Kaya</h3>

<p class="card-text">15.2M Takipçi</p>

<button class="follow-btn">Takip Et</button>

</div>

<h3 class="card-title">Emre Şahin</h3>

<p class="card-text">7.3M Takipçi</p>

<button class="follow-btn">Takip Et</button>

</div>

</section>

<h2 class="section-title">Popüler Şarkılar</h2>

<div class="song-title">Gökyüzünde Yıldızlar</div>

<div class="song-artist">Aylin Demir</div>

</div>

</div>

<div class="song-title">Sonbahar Rüzgarları</div>

<div class="song-artist">Can Yılmaz</div>

</div>

</div>

<div class="song-title">Aşkın Şarkısı</div>

<div class="song-artist">Zeynep Kaya</div>

</div>

</div>

<div class="song-title">Gece Yolculuğu</div>

<div class="song-artist">Emre Şahin</div>

</div>

</div>

<div class="song-title">Yalnız Kalpler</div>

<div class="song-artist">Aylin Demir & Can Yılmaz</div>

</div>

</div>

</section>

<h2 class="section-title">Popüler Klipler</h2>

</div>

<h3 class="card-title">Gökyüzünde Yıldızlar</h3>

<p class="card-text">Aylin Demir • 12M görüntülenme</p>

</div>

</div>

<h3 class="card-title">Sonbahar Rüzgarları</h3>

<p class="card-text">Can Yılmaz • 8.5M görüntülenme</p>

</div>

</div>

<h3 class="card-title">Aşkın Şarkısı</h3>

<p class="card-text">Zeynep Kaya • 15M görüntülenme</p>

</div>

</div>

<h3 class="card-title">Gece Yolculuğu</h3>

<p class="card-text">Emre Şahin • 6.2M görüntülenme</p>

</div>

</section>

<h2 class="section-title">Hit Parçalar</h2>

<div class="chart-label">Dinlenme</div>

</div>

<h3 class="card-title">Gökyüzünde Yıldızlar</h3>

<p class="card-text">Aylin Demir</p>

</div>

<div class="chart-label">Dinlenme</div>

</div>

<h3 class="card-title">Sonbahar Rüzgarları</h3>

<p class="card-text">Can Yılmaz</p>

</div>

<div class="chart-label">Dinlenme</div>

</div>

<h3 class="card-title">Aşkın Şarkısı</h3>

<p class="card-text">Zeynep Kaya</p>

</div>

</section>

<h2 class="section-title">Müzik Haberleri</h2>

<h3 class="card-title blog-title">Yaz Festivali Geri Dönüyor</h3>

<p class="blog-excerpt">Bu yaz düzenlenecek olan müzik festivalinde 50'den fazla yerli ve yabancı sanatçı sahne alacak.</p>

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

</div>

<h3 class="card-title blog-title">Aylin Demir Yeni Albümünü Duyurdu</h3>

<p class="blog-excerpt">Pop müziğin sevilen ismi Aylin Demir, 2 yıl aradan sonra yeni albümü "Gökyüzünde Yıldızlar"ı duyurdu.</p>

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

</div>

<h3 class="card-title blog-title">Müzik Endüstrisinde Dijital Dönüşüm</h3>

<p class="blog-excerpt">Teknoloji, müzik endüstrisini nasıl dönüştürüyor? Streaming platformları ve yapay zeka uygulamaları...</p>

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

</div>

</section>

<h2 class="section-title">Hakkımızda</h2>

<p>Spotty, 2023 yılında müzik tutkunları için kurulmuş modern bir müzik platformudur. Amacımız, kullanıcılarımıza en kaliteli müzik deneyimini sunmak ve sanatçıların eserlerini geniş kitlelere ulaştırmaktır.</p>

<p>Platformumuz, yapay zeka destekli öneri sistemi ile kişiselleştirilmiş müzik keşfi sunar. Ayrıca, yeni yetenekleri desteklemek ve müzik endüstrisinin gelişimine katkıda bulunmak için çeşitli programlar yürütüyoruz.</p>

<p>Spotty olarak, müziğin insanları birleştiren evrensel bir dil olduğuna inanıyor ve bu inançla hizmet veriyoruz.</p>

<a href="#" class="btn" style="margin-top: 20px;">Daha Fazla Bilgi</a>

</div>

</div>

</section>

<h2 class="section-title">İletişim</h2>

<h3>Bizimle İletişime Geçin</h3>

<p>Her türlü soru, öneri veya iş birliği teklifiniz için bize ulaşabilirsiniz. Ekibimiz en kısa sürede size dönüş yapacaktır.</p>

<p><i class="fas fa-map-marker-alt"></i> İstanbul, Türkiye</p>

<p><i class="fas fa-envelope"></i> info@spotty.com</p>

</div>

</div>

</div>

</div>

</div>

</div>

<button type="submit" class="btn">Mesaj Gönder</button>

</form>

</div>

</section>

<div class="song-title">Gökyüzünde Yıldızlar</div>

<div class="song-artist">Aylin Demir</div>

</div>

</div>

</div>

</div>

<h3 class="footer-title">Spotty</h3>

<p>Modern müzik platformu Spotty ile en sevdiğiniz şarkıları keşfedin, yeni sanatçılar bulun ve müzik dünyasının tadını çıkarın.</p>

</div>

<h3 class="footer-title">Hızlı Bağlantılar</h3>

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

<li><a href="#artists">Sanatçılar</a></li>

<li><a href="#songs">Şarkılar</a></li>

<li><a href="#clips">Klipler</a></li>

<li><a href="#charts">Hit Parçalar</a></li>

</ul>

</div>

<h3 class="footer-title">Destek</h3>

<li><a href="#">Yardım Merkezi</a></li>

<li><a href="#">Gizlilik Politikası</a></li>

<li><a href="#">Kullanım Koşulları</a></li>

<li><a href="#">Çerezler</a></li>

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

</ul>

</div>

<h3 class="footer-title">Abone Ol</h3>

<p>Yeniliklerden haberdar olmak için e-posta bültenimize abone olun.</p>

<button class="btn" style="margin-top: 10px; width: 100%;">Abone Ol</button>

</div>

</div>

</footer>

// Hamburger Menu Toggle

document.querySelector('.hamburger').addEventListener('click', function() {

document.querySelector('.nav-links').classList.toggle('active');

});

// Smooth Scroll for Navigation Links

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

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

e.preventDefault();

// Close mobile menu if open

document.querySelector('.nav-links').classList.remove('active');

const targetId = this.getAttribute('href');

const targetSection = document.querySelector(targetId);

window.scrollTo({

top: targetSection.offsetTop - 80,

behavior: 'smooth'

});

// Active Navigation Link on Scroll

window.addEventListener('scroll', function() {

const scrollPosition = window.scrollY;

document.querySelectorAll('section').forEach(section => {

const sectionTop = section.offsetTop - 100;

const sectionHeight = section.clientHeight;

const sectionId = section.getAttribute('id');

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

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

link.classList.remove('active');

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

link.classList.add('active');

}

});

}

});

// Play/Pause Toggle

const playPauseBtn = document.querySelector('.play-pause');

playPauseBtn.addEventListener('click', function() {

const icon = this.querySelector('i');

if (icon.classList.contains('fa-play')) {

icon.classList.remove('fa-play');

icon.classList.add('fa-pause');

} else {

icon.classList.remove('fa-pause');

icon.classList.add('fa-play');

}

});

// Song Play Buttons

document.querySelectorAll('.play-btn').forEach(btn => {

btn.addEventListener('click', function() {

const icon = this.querySelector('i');

if (icon.classList.contains('fa-play')) {

icon.classList.remove('fa-play');

icon.classList.add('fa-pause');

// Update mini player

const songItem = this.closest('.song-item');

const songTitle = songItem.querySelector('.song-title').textContent;

const songArtist = songItem.querySelector('.song-artist').textContent;

document.querySelector('.player-details .song-title').textContent = songTitle;

document.querySelector('.player-details .song-artist').textContent = songArtist;

} else {

icon.classList.remove('fa-pause');

icon.classList.add('fa-play');

}

});

// Progress Bar Click

document.querySelector('.progress-bar').addEventListener('click', function(e) {

const progressBar = this;

const clickPosition = e.clientX - progressBar.getBoundingClientRect().left;

const progressBarWidth = progressBar.clientWidth;

const progressPercentage = (clickPosition / progressBarWidth) * 100;

document.querySelector('.progress').style.width = `${progressPercentage}%`;

});

// Form Submission

document.getElementById('contactForm').addEventListener('submit', function(e) {

e.preventDefault();

alert('Mesajınız başarıyla gönderildi! En kısa sürede size dönüş yapacağız.');

this.reset();

});

// Follow Button Toggle

document.querySelectorAll('.follow-btn').forEach(btn => {

btn.addEventListener('click', function() {

if (this.textContent === 'Takip Et') {

this.textContent = 'Takip Ediliyor';

this.style.background = 'var(--accent-color-2)';

this.style.color = 'white';

} else {

this.textContent = 'Takip Et';

this.style.background = 'transparent';

this.style.color = 'var(--accent-color-2)';

}

});

</script>

</body>

</html>

Metehan

Empfohlen

Ein Code von Metehan

Ein Code von Metehan

Ein Code von Metehan

HTML

CSS

JS

Empfohlen

Ein Code von Metehan

Ein Code von Metehan

Ein Code von Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS