Webleb - Snippets de Código

HTML

<!DOCTYPE html>

<head>

<title>Premium Ürün Kartı</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);

padding: 20px;

}

.product-card {

position: relative;

width: 350px;

background: #fff;

border-radius: 20px;

box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);

overflow: hidden;

transition: all 0.5s ease;

}

.product-card:hover {

transform: translateY(-10px);

box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);

}

.product-image {

position: relative;

width: 100%;

height: 250px;

background: linear-gradient(45deg, #0f3460, #533483);

display: flex;

justify-content: center;

align-items: center;

overflow: hidden;

}

.product-image::before {

content: '';

position: absolute;

width: 150%;

height: 150%;

background: radial-gradient(circle, rgba(255,255,255,0.1) 1%, transparent 20%);

animation: rotate 20s linear infinite;

}

@keyframes rotate {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

.product-image img {

position: relative;

max-width: 85%;

max-height: 85%;

transition: transform 0.5s ease;

z-index: 2;

}

.product-card:hover .product-image img {

transform: scale(1.1) rotate(5deg);

}

.product-badge {

position: absolute;

top: 20px;

left: 20px;

background: #ff4757;

color: white;

padding: 5px 15px;

border-radius: 20px;

font-weight: 600;

font-size: 14px;

z-index: 3;

box-shadow: 0 5px 10px rgba(255, 71, 87, 0.3);

}

.product-like {

position: absolute;

top: 20px;

right: 20px;

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

color: white;

width: 40px;

height: 40px;

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

z-index: 3;

backdrop-filter: blur(5px);

transition: all 0.3s ease;

}

.product-like:hover {

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

transform: scale(1.1);

}

.product-like.liked {

color: #ff4757;

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

}

.product-content {

padding: 25px;

}

.product-title {

font-size: 22px;

font-weight: 700;

color: #1a1a2e;

margin-bottom: 5px;

}

.product-category {

font-size: 14px;

color: #533483;

font-weight: 600;

margin-bottom: 15px;

display: block;

}

.product-description {

color: #666;

font-size: 15px;

line-height: 1.5;

margin-bottom: 20px;

}

.product-features {

display: flex;

flex-wrap: wrap;

gap: 10px;

margin-bottom: 20px;

}

.feature {

background: #f1f3f4;

padding: 8px 15px;

border-radius: 20px;

font-size: 13px;

color: #333;

font-weight: 500;

}

.size-selection h4 {

font-size: 16px;

color: #1a1a2e;

margin-bottom: 10px;

}

.sizes {

display: flex;

gap: 10px;

margin-bottom: 20px;

}

.size {

width: 40px;

height: 40px;

border-radius: 10px;

display: flex;

justify-content: center;

align-items: center;

font-weight: 600;

cursor: pointer;

transition: all 0.3s ease;

background: #f5f5f5;

color: #333;

}

.size:hover {

background: #e0e0e0;

}

.size.selected {

background: #533483;

color: white;

transform: scale(1.1);

}

.product-footer {

display: flex;

justify-content: space-between;

align-items: center;

padding-top: 15px;

border-top: 1px solid #eee;

}

.price {

font-size: 28px;

font-weight: 800;

color: #1a1a2e;

}

.price span {

font-size: 14px;

font-weight: 500;

color: #888;

}

.add-to-cart {

background: linear-gradient(45deg, #0f3460, #533483);

color: white;

border: none;

padding: 12px 25px;

border-radius: 10px;

font-weight: 600;

cursor: pointer;

transition: all 0.3s ease;

display: flex;

align-items: center;

gap: 10px;

box-shadow: 0 5px 15px rgba(83, 52, 131, 0.3);

}

.add-to-cart:hover {

transform: translateY(-3px);

box-shadow: 0 8px 20px rgba(83, 52, 131, 0.4);

}

.add-to-cart:active {

transform: translateY(0);

}

.product-colors {

margin-top: 15px;

margin-bottom: 20px;

}

.product-colors h4 {

font-size: 16px;

color: #1a1a2e;

margin-bottom: 10px;

}

.colors {

display: flex;

gap: 12px;

}

.color {

width: 30px;

height: 30px;

border-radius: 50%;

cursor: pointer;

transition: all 0.3s ease;

border: 3px solid transparent;

}

.color:hover {

transform: scale(1.1);

}

.color.selected {

border-color: #1a1a2e;

transform: scale(1.1);

}

.color-1 {

background: #0f3460;

}

.color-2 {

background: #533483;

}

.color-3 {

background: #e94560;

}

.color-4 {

background: #1a1a2e;

}

.notification {

position: fixed;

top: 20px;

right: 20px;

background: #4CAF50;

color: white;

padding: 15px 25px;

border-radius: 10px;

box-shadow: 0 5px 15px rgba(0,0,0,0.2);

z-index: 1000;

transform: translateX(150%);

transition: transform 0.5s ease;

}

.notification.show {

transform: translateX(0);

}

.rating {

display: flex;

align-items: center;

margin-bottom: 15px;

}

.stars {

color: #FFD700;

margin-right: 10px;

}

.rating-value {

font-weight: 600;

color: #1a1a2e;

}

@media (max-width: 480px) {

.product-card {

width: 100%;

max-width: 320px;

}

.product-content {

padding: 20px;

}

</style>

</head>

<body>

</div>

</div>

<h2 class="product-title">Nike Air Force 1</h2>

<span class="product-category">Erkek Spor Ayakkabı</span>

</div>

<span class="rating-value">4.7 (248 değerlendirme)</span>

</div>

<p class="product-description">Klasik stil ve modern konforu bir araya getiren Nike Air Force 1, ikonik basketbol tasarımını günlük kullanıma uyarlar. Yeni nesil Air amortismanı ile üstün rahatlık sunar.</p>

<div class="feature">Air Amortisman</div>

<div class="feature">Deri Tasarım</div>

<div class="feature">Dayanıklı Taban</div>

<div class="feature">Nefes Alabilir</div>

</div>

<h4>Renk Seçeneği</h4>

</div>

<h4>Beden Seçiniz</h4>

</div>

Sepete Ekle

</button>

</div>

Ürün sepete eklendi!

</div>

document.addEventListener('DOMContentLoaded', function() {

// Beğen butonu işlevselliği

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

const likeIcon = likeBtn.querySelector('i');

let isLiked = false;

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

isLiked = !isLiked;

if (isLiked) {

likeIcon.classList.remove('far');

likeIcon.classList.add('fas');

likeBtn.classList.add('liked');

showNotification('Ürün beğenildi!');

} else {

likeIcon.classList.remove('fas');

likeIcon.classList.add('far');

likeBtn.classList.remove('liked');

}

});

// Beden seçimi işlevselliği

const sizes = document.querySelectorAll('.size');

sizes.forEach(size => {

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

// Tüm bedenlerden seçili class'ını kaldır

sizes.forEach(s => s.classList.remove('selected'));

// Tıklanan bedene seçili class'ını ekle

this.classList.add('selected');

});

// Renk seçimi işlevselliği

const colors = document.querySelectorAll('.color');

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

// Renkler için görseller (gerçek uygulamada farklı renkler için farklı resimler kullanılır)

const colorImages = {

'color-1': 'https://static.nike.com/a/images/t_PDP_1728_v1/f_auto,q_auto:eco/b7d9211c-26e7-431a-ac24-b0540fb3c00f/air-force-1-07-ayakkab%C4%B1s%C4%B1-GjGXSP.png',

'color-2': 'https://static.nike.com/a/images/t_PDP_1728_v1/f_auto,q_auto:eco/65f8c8ee-86c1-4b8e-8dc5-7d1e4c5b5d3a/air-force-1-07-ayakkab%C4%B1s%C4%B1-GjGXSP.png',

'color-3': 'https://static.nike.com/a/images/t_PDP_1728_v1/f_auto,q_auto:eco/3c2b1b0d-7b3a-4a3e-8b3a-4b0c5d5e5f5d/air-force-1-07-ayakkab%C4%B1s%C4%B1-GjGXSP.png',

'color-4': 'https://static.nike.com/a/images/t_PDP_1728_v1/f_auto,q_auto:eco/8a9b9b0d-7b3a-4a3e-8b3a-4b0c5d5e5f5d/air-force-1-07-ayakkab%C4%B1s%C4%B1-GjGXSP.png'

};

colors.forEach(color => {

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

// Tüm renklerden seçili class'ını kaldır

colors.forEach(c => c.classList.remove('selected'));

// Tıklanan renge seçili class'ını ekle

this.classList.add('selected');

// Renge göre ürün görselini değiştir

const selectedColor = this.getAttribute('data-color');

productImage.src = colorImages[selectedColor];

// Renk değiştiğinde bildirim göster

showNotification('Renk değiştirildi!');

});

// Sepete ekle butonu işlevselliği

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

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

// Sepete ekleme animasyonu

this.innerHTML = '<i class="fas fa-check"></i> Eklendi!';

this.style.background = 'linear-gradient(45deg, #4CAF50, #2E7D32)';

// Bildirim göster

showNotification('Ürün sepete eklendi!');

// 2 saniye sonra butonu eski haline getir

setTimeout(() => {

this.innerHTML = '<i class="fas fa-shopping-cart"></i> Sepete Ekle';

this.style.background = 'linear-gradient(45deg, #0f3460, #533483)';

}, 2000);

});

// Bildirim gösteren fonksiyon

function showNotification(message) {

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

notification.textContent = message;

notification.classList.add('show');

// 3 saniye sonra bildirimi gizle

setTimeout(() => {

notification.classList.remove('show');

}, 3000);

}

// Ürün kartına hover efekti ekle

const productCard = document.querySelector('.product-card');

productCard.addEventListener('mouseenter', function() {

// Hover sırasında arka plan rengini değiştir

document.body.style.background = 'linear-gradient(135deg, #0f3460 0%, #533483 100%)';

});

productCard.addEventListener('mouseleave', function() {

// Hover bittiğinde arka planı eski haline getir

document.body.style.background = 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)';

});

</script>

</body>

</html>

Metehan

Recomendado

Um Código de Metehan

um código de metehan

Um Código de Metehan

HTML

CSS

JS

Recomendado

Um Código de Metehan

um código de metehan

Um Código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS