Tutorial corinthians
Uploaded by
omsim8231Tutorial corinthians
Uploaded by
omsim8231<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipes - My Awesome Recipe Site</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header fade-in">
<img src="logo-png.png" class="logo wiggle">
<h1 class="slide-text">My Awesome Recipe Site</h1>
<nav>
<a href="index.html" class="hover-slide">Home</a>
<a href="recipes.html" class="hover-slide">Recipes</a>
<a href="tutorial.html" class="hover-slide">Tutorials</a>
<a href="services.html" class="hover-slide">Services/Products</a>
<a href="contact.html" class="hover-slide">Contact</a>
<a href="faqs.html" class="hover-slide">FAQs</a>
<a href="about.html" class="hover-slide">About</a>
</nav>
<div class="search-bar slide-up">
<input type="text" id="searchInput" placeholder="Search recipes..." class="hover-grow">
</div>
</header>
<section class="categories slide-up">
<h2 class="bounce slide-text">Recipe Categories</h2>
<div class="category-list">
<button class="category-btn hover-bounce pulse-btn" data-category="all">All</button>
<button class="category-btn hover-bounce pulse-btn" data-
category="appetizers">Appetizers</button>
<button class="category-btn hover-bounce pulse-btn" data-category="main">Main
Dishes</button>
<button class="category-btn hover-bounce pulse-btn"
data-category="desserts">Desserts</button>
</div>
</section>
<section id="recipes" class="card-grid">
<div class="card slide-up-delay" data-title="Chopped Grinder Sliders" data-
category="appetizers">
<img src="https://www.allrecipes.com/thmb/9hZkpD6bYOueJPvpq-bJ3VldQ_o=/364x242/
filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/11697213_Chopped-Grinder-
Sliders_Peyton-Beckwith_4x3-7041a969ae224858979c35a1104e8ead.jpg" alt="Chopped Grinder
Sliders" class="hover-grow wiggle">
<div class="card-content">
<h2 class="slide-text">Chopped Grinder Sliders</h2>
<p>A tasty twist on sliders with chopped grinder ingredients.</p>
<button class="favorite-btn hover-bounce pulse-btn">♥</button>
<button class="tutorial-btn hover-bounce pulse-btn"
data-video="https://www.youtube.com/embed/example1">Watch Tutorial</button>
</div>
</div>
<div class="card slide-up-delay" data-title="Oxtail Rendang Curry" data-category="main">
<img src="https://www.allrecipes.com/thmb/qCBchQkiTT4BuWj5Fqq4rHp7pzk=/364x242/
filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/11696182_Oxtail-Rendang-
Curry_John-Mitzewich_4x3-8217f4a4151f4ce887bc719f3e321ad1.jpg" alt="Oxtail Rendang Curry"
class="hover-grow wiggle">
<div class="card-content">
<h2 class="slide-text">Oxtail Rendang Curry</h2>
<p>Rich and flavorful curry with tender oxtail.</p>
<button class="favorite-btn hover-bounce pulse-btn">♥</button>
<button class="tutorial-btn hover-bounce pulse-btn"
data-video="https://www.youtube.com/embed/example2">Watch Tutorial</button>
</div>
</div>
<div class="card slide-up-delay" data-title="Algerian Kefta Meatballs" data-category="main">
<img src="https://www.allrecipes.com/thmb/pt2GVOy4gJXviSipduRvWTCUg58=/248x165/
filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/497967_algerian-kefta-
meatballs_rock-lobster-2000-f3be048bae614c5ca974055f3aead3f2.jpg" alt="Algerian Kefta"
class="hover-grow wiggle">
<div class="card-content">
<h2 class="slide-text">Algerian Kefta Meatballs</h2>
<p>Spiced meatballs perfect for any meal.</p>
<button class="favorite-btn hover-bounce pulse-btn">♥</button>
<button class="tutorial-btn hover-bounce pulse-btn"
data-video="https://www.youtube.com/embed/example3">Watch Tutorial</button>
</div>
</div>
<div class="card slide-up-delay" data-title="Lemon Garlic Chicken" data-category="main">
<img src="lemon.jpeg" class="hover-grow wiggle">
<div class="card-content">
<h2 class="slide-text">Lemon Garlic Chicken</h2>
<p>Juicy chicken with a zesty lemon and garlic sauce.</p>
<button class="favorite-btn hover-bounce pulse-btn">♥</button>
<button class="tutorial-btn hover-bounce pulse-btn"
data-video="https://www.youtube.com/embed/example4">Watch Tutorial</button>
</div>
</div>
<div class="card slide-up-delay" data-title="Spicy Beef Tacos" data-category="main">
<img src="Beef.jpeg" class="hover-grow wiggle">
<div class="card-content">
<h2 class="slide-text">Spicy Beef Tacos</h2>
<p>Flavor-packed tacos with a spicy beef filling.</p>
<button class="favorite-btn hover-bounce pulse-btn">♥</button>
<button class="tutorial-btn hover-bounce pulse-btn"
data-video="https://www.youtube.com/embed/example5">Watch Tutorial</button>
</div>
</div>
<div class="card slide-up-delay" data-title="Chocolate Lava Cake" data-category="desserts">
<img src="choco.jpeg" class="hover-grow wiggle">
<div class="card-content">
<h2 class="slide-text">Chocolate Lava Cake</h2>
<p>Gooey chocolate cake with a molten center.</p>
<button class="favorite-btn hover-bounce pulse-btn">♥</button>
<button class="tutorial-btn hover-bounce pulse-btn"
data-video="https://www.youtube.com/embed/example6">Watch Tutorial</button>
</div>
</div>
</section>
<div id="recipeModal" class="modal fade-in">
<div class="modal-content">
<span id="closeModal" class="close pulse-btn">×</span>
<h2 id="modalTitle" class="slide-text"></h2>
<img id="modalImage" src="" alt="" class="wiggle">
<p id="modalDescription"></p>
<h3 class="slide-text">Ingredients</h3>
<ul id="modalIngredients"></ul>
<h3 class="slide-text">Instructions</h3>
<p id="modalInstructions"></p>
</div>
</div>
<div id="tutorialModal" class="modal fade-in">
<div class="modal-content">
<span id="closeTutorialModal" class="close pulse-btn">×</span>
<h2 class="slide-text">Cooking Tutorial</h2>
<iframe id="tutorialVideo" width="560" height="315" src="" frameborder="0"
allowfullscreen></iframe>
</div>
</div>
<section class="submit-recipe slide-up">
<h2 class="bounce slide-text">Submit Your Recipe</h2>
<form id="recipeForm">
<input type="text" id="recipeName" placeholder="Recipe Name" required class="hover-
grow">
<textarea id="recipeDesc" placeholder="Short Description" required
class="hover-grow"></textarea>
<textarea id="recipeIng" placeholder="Ingredients (one per line)" required class="hover-
grow"></textarea>
<textarea id="recipeInst" placeholder="Instructions" required class="hover-grow"></textarea>
<button type="submit" class="hover-bounce pulse-btn">Submit Recipe</button>
</form>
</section>
<footer class="footer fade-in">
<p>Follow Us:
<a href="https://www.facebook.com" target="_blank" class="hover-slide">Facebook</a> |
<a href="https://www.instagram.com" target="_blank" class="hover-slide">Instagram</a> |
<a href="https://www.pinterest.com" target="_blank" class="hover-slide">Pinterest</a>
</p>
<p>© 2025 My Awesome Recipe Site</p>
</footer>
<script>
const recipes = {
"Chopped Grinder Sliders": {
description: "A tasty twist on sliders with chopped grinder ingredients.",
ingredients: ["1 lb ground beef", "1/2 cup chopped pickles", "1/4 cup mayo", "4 slider
buns"],
instructions: "Mix beef with seasonings, form patties, grill until cooked, assemble with
pickles and mayo on buns."
},
"Oxtail Rendang Curry": {
description: "Rich and flavorful curry with tender oxtail.",
ingredients: ["2 lbs oxtail", "1 can coconut milk", "2 tbsp curry paste", "1 onion, chopped"],
instructions: "Brown oxtail, sauté onion and curry paste, add coconut milk, simmer until
tender."
},
"Algerian Kefta Meatballs": {
description: "Spiced meatballs perfect for any meal.",
ingredients: ["1 lb ground lamb", "1 tsp cumin", "1 tsp paprika", "1 egg"],
instructions: "Mix lamb with spices and egg, form meatballs, bake at 375°F for 20 minutes."
},
"Lemon Garlic Chicken": {
description: "Juicy chicken with a zesty lemon and garlic sauce.",
ingredients: ["4 chicken breasts", "2 lemons, juiced", "3 garlic cloves, minced", "2 tbsp olive
oil"],
instructions: "Marinate chicken in lemon juice, garlic, and oil, then grill until cooked
through."
},
"Spicy Beef Tacos": {
description: "Flavor-packed tacos with a spicy beef filling.",
ingredients: ["1 lb ground beef", "1 tbsp chili powder", "8 taco shells", "1 cup salsa"],
instructions: "Cook beef with chili powder, spoon into taco shells, top with salsa."
},
"Chocolate Lava Cake": {
description: "Gooey chocolate cake with a molten center.",
ingredients: ["4 oz dark chocolate", "1/2 cup butter", "1/4 cup sugar", "2 eggs"],
instructions: "Melt chocolate and butter, mix with sugar and eggs, bake at 425°F for 10
minutes."
}
};
const modal = document.getElementById('recipeModal');
const closeModal = document.getElementById('closeModal');
const modalTitle = document.getElementById('modalTitle');
const modalImage = document.getElementById('modalImage');
const modalDescription = document.getElementById('modalDescription');
const modalIngredients = document.getElementById('modalIngredients');
const modalInstructions = document.getElementById('modalInstructions');
const tutorialModal = document.getElementById('tutorialModal');
const closeTutorialModal = document.getElementById('closeTutorialModal');
const tutorialVideo = document.getElementById('tutorialVideo');
document.querySelectorAll('.card').forEach((card, index) => {
card.style.animationDelay = `${index * 0.1}s`;
card.addEventListener('click', () => {
const title = card.getAttribute('data-title');
const recipe = recipes[title];
const imgSrc = card.querySelector('img').src;
modalTitle.textContent = title;
modalImage.src = imgSrc;
modalDescription.textContent = recipe.description;
modalIngredients.innerHTML = recipe.ingredients.map(ing => `<li>${ing}</li>`).join('');
modalInstructions.textContent = recipe.instructions;
modal.style.display = 'block';
modal.querySelector('.modal-content').classList.add('modal-pop');
});
});
closeModal.addEventListener('click', () => {
modal.style.display = 'none';
modal.querySelector('.modal-content').classList.remove('modal-pop');
});
window.addEventListener('click', (e) => {
if (e.target === modal) {
modal.style.display = 'none';
modal.querySelector('.modal-content').classList.remove('modal-pop');
});
const searchInput = document.getElementById('searchInput');
searchInput.addEventListener('input', () => {
const query = searchInput.value.toLowerCase();
const cards = document.querySelectorAll('.card');
cards.forEach(card => {
const title = card.getAttribute('data-title').toLowerCase();
card.style.display = title.includes(query) ? 'block' : 'none';
});
});
const categoryButtons = document.querySelectorAll('.category-btn');
categoryButtons.forEach(btn => {
btn.addEventListener('click', () => {
const category = btn.getAttribute('data-category');
const cards = document.querySelectorAll('.card');
cards.forEach(card => {
const cardCategory = card.getAttribute('data-category');
card.style.display = (category === 'all' || cardCategory === category) ? 'block' : 'none';
});
});
});
const favoriteButtons = document.querySelectorAll('.favorite-btn');
const favorites = JSON.parse(localStorage.getItem('favorites')) || {};
favoriteButtons.forEach(btn => {
const card = btn.closest('.card');
const title = card.getAttribute('data-title');
if (favorites[title]) {
btn.classList.add('favorited');
btn.addEventListener('click', (e) => {
e.stopPropagation();
btn.classList.toggle('favorited');
const isFavorited = btn.classList.contains('favorited');
favorites[title] = isFavorited;
localStorage.setItem('favorites', JSON.stringify(favorites));
alert(`${title} ${isFavorited ? 'added to' : 'removed from'} favorites!`);
});
});
const tutorialButtons = document.querySelectorAll('.tutorial-btn');
tutorialButtons.forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const videoUrl = btn.getAttribute('data-video');
tutorialVideo.src = videoUrl;
tutorialModal.style.display = 'block';
});
});
closeTutorialModal.addEventListener('click', () => {
tutorialModal.style.display = 'none';
tutorialVideo.src = '';
});
window.addEventListener('click', (e) => {
if (e.target === tutorialModal) {
tutorialModal.style.display = 'none';
tutorialVideo.src = '';
});
document.getElementById('recipeForm').addEventListener('submit', (e) => {
e.preventDefault();
const name = document.getElementById('recipeName').value;
const desc = document.getElementById('recipeDesc').value;
const ingredients = document.getElementById('recipeIng').value.split('\n');
const instructions = document.getElementById('recipeInst').value;
alert(`Recipe "${name}" submitted successfully!`);
document.getElementById('recipeForm').reset();
});
document.addEventListener('DOMContentLoaded', () => {
console.log('Recipes page loaded with real images!');
});
</script>
</body>
</html>
```
