Webleb - Code-Snippets

HTML

<!DOCTYPE html>

<head>

<title>Spor Ayakkabı App Tasarımı</title>

tailwind.config = {

theme: {

extend: {

fontFamily: {

'poppins': ['Poppins', 'sans-serif'],

},

colors: {

'app-green': '#2ecc71', // Görseldeki o tatlı yeşil tonu

'app-dark': '#2c3e50',

},

boxShadow: {

'soft': '0 10px 40px -10px rgba(46, 204, 113, 0.3)',

}

</script>

<style>

/* Özel Scrollbar Gizleme */

.no-scrollbar::-webkit-scrollbar {

display: none;

}

.no-scrollbar {

-ms-overflow-style: none;

scrollbar-width: none;

}

/* Ayakkabı Yüzme Animasyonu */

@keyframes float {

0% { transform: translateY(0px) rotate(-15deg); }

50% { transform: translateY(-10px) rotate(-15deg); }

100% { transform: translateY(0px) rotate(-15deg); }

}

.shoe-float {

animation: float 4s ease-in-out infinite;

}

/* Arkaplan Deseni */

body {

background-color: #eef2f5;

background-image: radial-gradient(#d1d5db 1px, transparent 1px);

background-size: 20px 20px;

}

</style>

</head>

</div>

<img src="https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"

alt="Trendy Shoe"

class="w-full drop-shadow-2xl shoe-float object-contain transform -rotate-12 filter contrast-125">

</div>

<h2 class="text-3xl font-bold text-gray-800 leading-tight mb-4">Latest Trendy <br> Collection</h2>

Sneakers, Basketball shoe, Sportswear, nike shoe, outdoor Shoe, running sneakers tailored for comfort.

</p>

Book Now <i class="fas fa-arrow-right text-sm"></i>

</button>

</div>

</div>

<p class="text-xs opacity-90 mb-1">Latest Collection</p>

<h3 class="text-2xl font-bold mb-4">Sport Shoes</h3>

</div>

<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80"

class="absolute -right-8 top-4 w-40 transform -rotate-12 drop-shadow-xl" alt="Red Shoe">

</div>

<h3 class="text-lg font-bold text-gray-800">Categories</h3>

</div>

</div>

<h4 class="font-semibold text-gray-800 text-sm">Sportwear</h4>

</div>

</div>

<h4 class="font-semibold text-gray-800 text-sm">Basketball</h4>

</div>

</div>

<h4 class="font-semibold text-gray-800 text-sm">Running</h4>

</div>

</div>

<h4 class="font-semibold text-gray-800 text-sm">Casual</h4>

</div>

<p class="text-gray-400 text-xs mb-4">Limited Edition</p>

</div>

</button>

</button>

</button>

</button>

</button>

</div>

</div>

// Kalp İkonu Favori Animasyonu

function toggleHeart(element) {

// Eğer class listesinde 'far' (içi boş) varsa 'fas' (içi dolu) yap ve kırmızı renk ekle

if (element.classList.contains('far')) {

element.classList.remove('far');

element.classList.add('fas');

element.classList.remove('text-gray-400');

element.classList.add('text-red-500');

// Kısa bir zıplama efekti

element.style.transform = "scale(1.3)";

setTimeout(() => { element.style.transform = "scale(1)"; }, 200);

} else {

element.classList.remove('fas');

element.classList.add('far');

element.classList.add('text-gray-400');

element.classList.remove('text-red-500');

}

// Sepete Ekle Butonu Efekti

function addToCart(btn) {

const originalText = btn.innerHTML;

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

btn.classList.remove('bg-app-green');

btn.classList.add('bg-gray-800');

setTimeout(() => {

btn.innerHTML = originalText;

btn.classList.add('bg-app-green');

btn.classList.remove('bg-gray-800');

}, 2000);

}

// Alt Navigasyon Aktif Durumu

function setActiveNav(btn) {

// Tüm butonları sıfırla

document.querySelectorAll('.nav-item').forEach(item => {

item.classList.remove('text-white');

item.classList.add('text-white/60');

});

// Tıklananı aktif yap

btn.classList.remove('text-white/60');

btn.classList.add('text-white');

}

</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