Webleb - UI Elements

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>

CSS

JS

Metehan

Recommended