Webleb - UI Elements - Mete'nin bir kodu

HTML

<!DOCTYPE html>

<head>

<title>Creative Culinary Hub | Where Food Meets Imagination</title>

tailwind.config = {

theme: {

extend: {

colors: {

primary: '#FF6B6B',

secondary: '#6C63FF',

dark: '#1A1A2E',

light: '#F5F5F7',

glass: 'rgba(26, 26, 46, 0.7)',

accent: '#4ADE80'

},

fontFamily: {

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

display: ['Montserrat', 'sans-serif'],

},

animation: {

'float': 'float 6s ease-in-out infinite',

'fadeIn': 'fadeIn 1s ease-in forwards',

'fadeInUp': 'fadeInUp 1s ease-in forwards'

},

keyframes: {

float: {

'0%, 100%': { transform: 'translateY(0)' },

'50%': { transform: 'translateY(-20px)' }

},

fadeIn: {

'0%': { opacity: '0' },

'100%': { opacity: '1' }

},

fadeInUp: {

'0%': { opacity: '0', transform: 'translateY(30px)' },

'100%': { opacity: '1', transform: 'translateY(0)' }

}

</script>

<style>

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');

body {

background-color: #1A1A2E;

color: #F5F5F7;

min-height: 100vh;

overflow-x: hidden;

}

.glass-card {

background: rgba(26, 26, 46, 0.7);

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.1);

transition: all 0.3s ease;

}

.glass-card:hover {

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(108, 99, 255, 0.2);

}

.hero-overlay {

background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);

}

.floating {

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

}

.delay-200 {

animation-delay: 0.2s;

}

.delay-400 {

animation-delay: 0.4s;

}

.delay-600 {

animation-delay: 0.6s;

}

.delay-800 {

animation-delay: 0.8s;

}

.skill-bar {

height: 10px;

background-color: rgba(255, 255, 255, 0.1);

border-radius: 5px;

overflow: hidden;

}

.skill-progress {

height: 100%;

background-color: #6C63FF;

border-radius: 5px;

position: relative;

width: 0;

transition: width 1.5s ease-in-out;

}

.typed-cursor {

color: #FF6B6B !important;

font-size: 3.8rem;

opacity: 1;

animation: blink 0.7s infinite;

}

@keyframes blink {

0% { opacity: 1; }

50% { opacity: 0; }

100% { opacity: 1; }

}

.scrollbar-hide::-webkit-scrollbar {

display: none;

}

</style>

</head>

<a href="#" class="text-2xl font-display font-bold text-primary">Creative<span class="text-secondary">Culinary</span></a>

<a href="#recipes" class="text-gray-300 hover:text-primary transition">Recipes</a>

<a href="#creatives" class="text-gray-300 hover:text-primary transition">Creatives</a>

<a href="#stories" class="text-gray-300 hover:text-primary transition">Stories</a>

<a href="#contact" class="text-gray-300 hover:text-primary transition">Contact</a>

</div>

</button>

</div>

</nav>

</button>

<h4 class="text-secondary text-xl opacity-0 animate-fadeIn">Welcome to</h4>

Creative <span class="text-primary" id="typed-text"></span>

</h1>

Where culinary arts meet creative expression. Discover innovative recipes, food photography, and the stories behind extraordinary dishes.

</p>

Explore Recipes

</a>

Meet Creatives

</a>

</div>

<img src="https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"

alt="Creative Food" class="relative z-10 rounded-2xl shadow-2xl w-full h-auto max-w-md mx-auto floating">

</div>

</section>

<h2 class="text-3xl font-display font-bold mb-12 text-center">Explore Our Creative Categories</h2>

</div>

<h3 class="font-display font-bold text-xl mb-2">Recipes</h3>

<p class="text-gray-400 text-sm">Innovative culinary creations</p>

</div>

</div>

<h3 class="font-display font-bold text-xl mb-2">Photography</h3>

<p class="text-gray-400 text-sm">Food styling & photography</p>

</div>

</div>

<p class="text-gray-400 text-sm">Culinary inspired artworks</p>

</div>

</div>

<h3 class="font-display font-bold text-xl mb-2">Stories</h3>

<p class="text-gray-400 text-sm">Behind-the-scenes tales</p>

</div>

</section>

<h2 class="text-3xl font-display font-bold">Featured Recipes</h2>

</div>

<img src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"

alt="Rainbow Salad" class="w-full h-full object-cover">

</div>

4.9 <i class="fas fa-star ml-1"></i>

</div>

<h3 class="font-display font-bold text-xl mb-2">Rainbow Buddha Bowl</h3>

<p class="text-gray-400 text-sm mb-4">A vibrant mix of fresh vegetables with a tangy lemon dressing</p>

<i class="fas fa-clock text-secondary mr-1"></i> 25 mins

</span>

<i class="fas fa-fire text-secondary mr-1"></i> 320 cal

</span>

</div>

</button>

</div>

<img src="https://images.unsplash.com/photo-1551183053-bf91a1d81141?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1432&q=80"

alt="Pasta" class="w-full h-full object-cover">

</div>

4.7 <i class="fas fa-star ml-1"></i>

</div>

<h3 class="font-display font-bold text-xl mb-2">Truffle Mushroom Pasta</h3>

<p class="text-gray-400 text-sm mb-4">Rich and flavorful pasta with wild mushrooms</p>

<i class="fas fa-clock text-secondary mr-1"></i> 35 mins

</span>

<i class="fas fa-fire text-secondary mr-1"></i> 450 cal

</span>

</div>

</button>

</div>

<img src="https://images.unsplash.com/photo-1563379926898-05f4575a45d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"

alt="Dessert" class="w-full h-full object-cover">

</div>

4.8 <i class="fas fa-star ml-1"></i>

</div>

<h3 class="font-display font-bold text-xl mb-2">Berry Chia Pudding</h3>

<p class="text-gray-400 text-sm mb-4">Healthy breakfast with mixed berries and chia seeds</p>

<i class="fas fa-clock text-secondary mr-1"></i> 10 mins

</span>

<i class="fas fa-fire text-secondary mr-1"></i> 280 cal

</span>

</div>

</button>

</div>

</section>

<h2 class="text-3xl font-display font-bold mb-12 text-center">Creative Spotlight</h2>

<img src="https://images.unsplash.com/photo-1600566752355-35792bedcfea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"

alt="Creative Chef" class="w-full h-full object-cover">

</div>

<div>

<h3 class="font-display font-bold text-2xl">Chef Maria Rodriguez</h3>

<p class="text-secondary font-medium">Culinary Artist & Food Stylist</p>

</div>

Follow

</button>

</div>

With over 15 years of experience, Chef Maria blends culinary expertise with artistic vision. Her work has been featured in international magazines and exhibitions, showcasing how food can transcend nourishment to become art.

</p>

<p class="text-xs text-gray-400">Recipes</p>

</div>

<p class="text-xs text-gray-400">Followers</p>

</div>

<p class="text-xs text-gray-400">Exhibitions</p>

</div>

<div>

<h4 class="font-display font-bold mb-3">Featured Works</h4>

<img src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"

alt="Work 1" class="w-20 h-20 rounded-lg object-cover">

<img src="https://images.unsplash.com/photo-1551183053-bf91a1d81141?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1432&q=80"

alt="Work 2" class="w-20 h-20 rounded-lg object-cover">

<img src="https://images.unsplash.com/photo-1563379926898-05f4575a45d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"

alt="Work 3" class="w-20 h-20 rounded-lg object-cover">

<img src="https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"

alt="Work 4" class="w-20 h-20 rounded-lg object-cover">

</div>

</section>

<h2 class="text-3xl font-display font-bold">Creative Stories</h2>

</div>

<img src="https://images.unsplash.com/photo-1482049016688-2d3e1b311543?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1610&q=80"

alt="Video thumbnail" class="w-full h-48 object-cover">

</button>

</div>

12:45

</div>

<h3 class="font-display font-bold text-xl mb-2">The Art of Plating</h3>

<p class="text-gray-400 mb-4">Learn how Chef Maria transforms dishes into visual masterpieces</p>

<i class="far fa-eye mr-2"></i> 24K views • 3 days ago

</div>

<img src="https://images.unsplash.com/photo-1540420773420-3366772f4999?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1384&q=80"

alt="Video thumbnail" class="w-full h-48 object-cover">

</button>

</div>

18:22

</div>

<h3 class="font-display font-bold text-xl mb-2">From Farm to Canvas</h3>

<p class="text-gray-400 mb-4">How ingredients inspire artistic expression</p>

<i class="far fa-eye mr-2"></i> 42K views • 1 week ago

</div>

</section>

<h2 class="text-3xl font-display font-bold mb-4">Join Our Creative Community</h2>

Get weekly inspiration with exclusive recipes, creative techniques, and behind-the-scenes stories from culinary artists.

</p>

Subscribe

</button>

</div>

</section>

<div>

<h3 class="text-xl font-display font-bold text-primary mb-4">Creative<span class="text-secondary">Culinary</span></h3>

Where food meets creativity. Explore innovative recipes, food art, and culinary storytelling.

</p>

</div>

<div>

<h4 class="font-display font-bold mb-4">Explore</h4>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">Recipes</a></li>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">Tutorials</a></li>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">Creatives</a></li>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">Stories</a></li>

</ul>

</div>

<div>

<h4 class="font-display font-bold mb-4">Resources</h4>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">Podcast</a></li>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">Workshops</a></li>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">E-books</a></li>

</ul>

</div>

<div>

<h4 class="font-display font-bold mb-4">Contact</h4>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">hello@creativeculinary.com</a></li>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">Careers</a></li>

<li><a href="#" class="text-gray-400 hover:text-primary transition text-sm">Press</a></li>

</ul>

</div>

</div>

</footer>

// Typed.js initialization

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

var typed = new Typed("#typed-text", {

strings: ["Culinary", "Recipes", "Art", "Stories"],

typeSpeed: 60,

backSpeed: 45,

loop: true,

showCursor: true,

cursorChar: '|',

});

// Animate skill bars when scrolled into view

const skillBars = document.querySelectorAll('.skill-progress');

const observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

const width = entry.target.parentElement.previousElementSibling.querySelector('span:last-child').textContent;

entry.target.style.width = width;

observer.unobserve(entry.target);

}

});

}, { threshold: 0.2 });

skillBars.forEach(bar => {

observer.observe(bar);

});

// Mobile menu toggle

const mobileMenuBtn = document.querySelector('.fa-bars').parentElement;

const navLinks = document.querySelector('nav .hidden.md\\:flex');

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

alert('Mobile menu would open here in a full implementation');

});

// Scroll to top button

const scrollTopBtn = document.createElement('div');

scrollTopBtn.innerHTML = '<i class="fas fa-arrow-up"></i>';

scrollTopBtn.className = 'fixed bottom-6 right-6 z-50 w-12 h-12 bg-primary text-light rounded-full flex items-center justify-center cursor-pointer opacity-0 invisible transition-all duration-300';

document.body.appendChild(scrollTopBtn);

window.addEventListener('scroll', () => {

if (window.pageYOffset > 300) {

scrollTopBtn.classList.remove('opacity-0', 'invisible');

scrollTopBtn.classList.add('opacity-100', 'visible');

} else {

scrollTopBtn.classList.remove('opacity-100', 'visible');

scrollTopBtn.classList.add('opacity-0', 'invisible');

}

});

scrollTopBtn.addEventListener('click', () => {

window.scrollTo({

top: 0,

behavior: 'smooth'

});

</script>

</body>

</html>

CSS

JS

Mete'nin bir kodu

Recommended