Webleb - Extraits de Code

HTML CSS JS

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

Preview

Open Advanced Editor

HTML CSS JS

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

Preview

Validating your code, please wait...