Webleb - Snippets de Código

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

Recomendado

Um Código de Metehan

Um Código de Metehan

HTML

CSS

JS

Recomendado

Um Código de Metehan

Um Código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS