comida-tipica-peru / index.html
JairoDanielMT's picture
Update index.html
035ed43 verified
<!DOCTYPE html>
<html lang="en">
<head><script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"648dde2c385b842618138cfb"}};</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typical Peruvian Food – Lima & Highlands</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<style>
/* --- VARIABLES & RESET --- */
:root {
--primary: #DC2626; /* Rojo bandera Perú */
--accent: #2563EB; /* Azul contraste */
--dark: #0F172A;
--light: #F8FAFC;
--text-main: #334155;
--white: #FFFFFF;
--fs-h1: clamp(2rem, 3.5vw, 3.5rem);
--fs-h2: clamp(1.4rem, 2.5vw, 2rem);
--fs-body: clamp(0.85rem, 1.2vw, 1rem);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background-color: #111;
font-family: 'Inter', sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
color: var(--text-main);
}
/* --- CONTENEDOR 16:9 HD --- */
.presentation-stage {
width: min(95vw, 1280px);
aspect-ratio: 16 / 9;
background: var(--light);
position: relative;
box-shadow: 0 0 50px rgba(0,0,0,0.7);
border-radius: 8px;
overflow: hidden;
}
/* --- SLIDES --- */
.slide {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
opacity: 0;
transform: translateX(20px);
transition: opacity 0.4s ease, transform 0.4s ease;
pointer-events: none;
background: var(--white);
padding: 3rem 4rem;
}
.slide.active {
opacity: 1;
transform: translateX(0);
pointer-events: all;
z-index: 10;
}
/* --- TYPOGRAPHY & LAYOUT --- */
.header {
margin-bottom: 1.5rem;
border-bottom: 2px solid #E2E8F0;
padding-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: end;
}
.header h2 {
font-size: var(--fs-h2);
color: var(--dark);
text-transform: uppercase;
font-weight: 800;
margin: 0;
}
.header .page-num {
font-family: 'JetBrains Mono', monospace;
color: var(--primary);
font-weight: bold;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; height: 100%; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; height: 100%; }
.card {
background: var(--white);
border: 1px solid #E2E8F0;
border-radius: 8px;
padding: 1.2rem;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
}
.card h3 { font-size: 1rem; color: var(--primary); margin-bottom: 0.8rem; text-transform: uppercase; font-weight: 700; }
.card ul { padding-left: 1.2rem; }
.card li { margin-bottom: 0.5rem; font-size: var(--fs-body); color: var(--text-main); line-height: 1.4; }
/* --- DIAGRAMS / SPECIAL BLOCKS --- */
.tech-stack {
display: flex; flex-direction: column; gap: 10px;
background: #1E293B; padding: 1.5rem; border-radius: 8px; color: white;
height: 100%; justify-content: center;
}
.layer {
background: rgba(255,255,255,0.08); padding: 10px; border-radius: 4px;
text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 0.9rem;
border: 1px dashed #475569;
}
.layer strong { color: #FBBF24; display: block; font-size: 0.75rem; margin-bottom: 5px; }
/* --- COVER --- */
.cover-container {
height: 100%; display: flex; flex-direction: column; justify-content: center;
border-left: 10px solid var(--primary); padding-left: 3rem;
}
.cover-year {
font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; color: var(--text-main); font-weight: bold;
margin-bottom: 1rem;
}
/* --- CONTROLS --- */
.controls { position: absolute; bottom: 20px; right: 20px; display: flex; gap: 10px; z-index: 100; }
.btn-nav {
background: var(--dark); color: white; border: none; width: 40px; height: 40px;
border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background 0.2s;
}
.btn-nav:hover { background: var(--primary); }
.progress { position: absolute; bottom: 0; left: 0; height: 4px; background: var(--primary); width: 0%; transition: width 0.3s; }
/* --- UTILS --- */
.badge { background: #fee2e2; color: #991b1b; padding: 2px 6px; border-radius: 4px; font-size: 0.8rem; font-weight: bold; }
.grammar-focus { color: var(--accent); font-weight: bold; font-family: 'JetBrains Mono', monospace; font-size: 0.9em; }
.small-text { font-size: 0.85rem; color: #64748B; }
</style>
</head>
<body>
<div class="presentation-stage" id="presentation">
<div class="progress"></div>
<!-- SLIDE 1: COVER -->
<div class="slide active">
<div class="cover-container">
<div class="cover-year">2025</div>
<h1 style="font-size: var(--fs-h1); font-weight: 900; line-height: 1.1; margin-bottom: 1.5rem; color: var(--dark);">
TYPICAL PERUVIAN FOOD<br>
<span style="color: var(--primary);">LIMA & HIGHLANDS (SIERRA)</span>
</h1>
<p style="font-size: var(--fs-h2); color: #64748B; font-weight: 300;">
English Presentation – Food & Culture
</p>
<br>
<p class="small-text">
In this presentation we will show some of the most famous dishes from
<strong>Lima</strong> and the <strong>Peruvian Highlands (Sierra)</strong>.
</p>
<div style="margin-top: 2.5rem;">
<p style="font-family: 'JetBrains Mono', monospace; font-weight: 700; margin-bottom: 0.6rem;">
GROUP MEMBERS
</p>
<ul style="list-style: none; padding-left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem;">
<li>&gt; <strong>Jairo Mendoza</strong></li>
<li>&gt; <strong>Diana Quispe</strong></li>
<li>&gt; <strong>Justa Quispe</strong></li>
<li>&gt; <strong>Lorena Torres</strong></li>
</ul>
<p style="font-family: 'JetBrains Mono', monospace; font-weight: 700; margin-top: 2rem;">
COURSE: ENGLISH – TYPICAL FOOD OF PERU
</p>
</div>
</div>
</div>
<!-- SLIDE 2: PERU & FOOD CULTURE -->
<div class="slide">
<div class="header">
<h2>1. Peru: Country of Many Flavors</h2>
<span class="page-num">02</span>
</div>
<div class="grid-2">
<div class="card">
<h3><i class="fa-solid fa-earth-americas"></i> Peru & Its Regions</h3>
<p style="font-size:0.9rem; margin-bottom:0.8rem;">
Peru has three main regions: <strong>coast</strong>, <strong>highlands (sierra)</strong> and
<strong>jungle</strong>. Each region has different climate, culture and food.
</p>
<ul>
<li>The <strong>coast</strong> has a lot of fresh fish and seafood.</li>
<li>The <strong>highlands</strong> are famous for potatoes, corn and meat.</li>
<li>Peruvian food mixes <strong>indigenous</strong>, <strong>Spanish</strong> and
<strong>Asian</strong> influences.</li>
</ul>
</div>
<div class="card">
<h3><i class="fa-solid fa-language"></i> English Focus</h3>
<p style="font-size:0.9rem; margin-bottom:0.5rem;">
In this presentation we use <span class="grammar-focus">Present Simple</span> to talk about food:
</p>
<ul>
<li><span class="grammar-focus">We eat</span> ceviche for lunch.</li>
<li><span class="grammar-focus">It is made with</span> fish, lime and chili.</li>
<li><span class="grammar-focus">People usually drink</span> chicha with their meal.</li>
</ul>
<p class="small-text" style="margin-top:0.8rem;">
Tip: Use <strong>“is made with…”</strong>, <strong>“people eat…”</strong>,
<strong>“we usually have…”</strong> to describe each dish.
</p>
</div>
</div>
</div>
<!-- SLIDE 3: LIMA REGION OVERVIEW -->
<div class="slide">
<div class="header">
<h2>2. Lima Region – Overview</h2>
<span class="page-num">03</span>
</div>
<div class="grid-3">
<div class="card">
<h3><i class="fa-solid fa-city"></i> Lima, the Capital</h3>
<ul>
<li>Lima is on the <strong>central coast</strong> of Peru.</li>
<li>It is famous as the <strong>gastronomic capital</strong> of Latin America.</li>
<li>Many traditional dishes from all Peru are served in Lima.</li>
</ul>
</div>
<div class="card">
<h3><i class="fa-solid fa-fish"></i> Ingredients from the Coast</h3>
<ul>
<li>Fresh <strong>fish and seafood</strong>: fish, octopus, shrimp.</li>
<li><strong>Lime</strong>, <strong>ají</strong> (chili), red onion, coriander.</li>
<li>Sweet potato and large corn (<em>choclo</em>).</li>
</ul>
</div>
<div class="card">
<h3><i class="fa-solid fa-ice-cream"></i> Street Food & Desserts</h3>
<ul>
<li>Popular street foods: <strong>anticuchos</strong>, <strong>picarones</strong>.</li>
<li>Famous dessert: <strong>Suspiro a la Limeña</strong>.</li>
<li>People usually drink <strong>chicha morada</strong> or <strong>Inca Kola</strong>.</li>
</ul>
</div>
</div>
</div>
<!-- SLIDE 4: MAIN DISHES FROM LIMA -->
<div class="slide">
<div class="header">
<h2>3. Typical Dishes – Lima</h2>
<span class="page-num">04</span>
</div>
<div style="display:flex; gap:20px; height:100%;">
<div class="card" style="flex:1; border-left:4px solid var(--primary);">
<h3><i class="fa-solid fa-bowl-food"></i> Ceviche</h3>
<ul>
<li><span class="grammar-focus">Ceviche is the most famous Peruvian dish.</span></li>
<li>It is made with <strong>raw fish</strong> cooked in <strong>lime juice</strong>.</li>
<li>It also has red onion, chili pepper (<em>ají</em>), salt and coriander.</li>
<li>People usually eat ceviche at <strong>lunch</strong>, not at night.</li>
<li>We normally serve it with sweet potato and big corn.</li>
</ul>
</div>
<div class="card" style="flex:1;">
<h3><i class="fa-solid fa-drumstick-bite"></i> Lomo Saltado & Ají de Gallina</h3>
<ul>
<li><strong>Lomo saltado</strong> is a stir-fry with beef, onion, tomato and soy sauce.</li>
<li>It mixes Chinese and Peruvian flavors and is served with rice and fries.</li>
<li><strong>Ají de gallina</strong> is a creamy chicken stew with yellow chili and bread.</li>
<li>Families in Lima often eat these dishes for <strong>lunch or dinner</strong>.</li>
</ul>
<p class="small-text" style="margin-top:0.6rem;">
Example: <span class="grammar-focus">People in Lima eat lomo saltado when they want a fast and tasty lunch.</span>
</p>
</div>
</div>
</div>
<!-- SLIDE 5: MORE LIMA DISHES -->
<div class="slide">
<div class="header">
<h2>4. More Flavors from Lima</h2>
<span class="page-num">05</span>
</div>
<div class="grid-2">
<div class="card">
<h3><i class="fa-solid fa-layer-group"></i> Causa Limeña & Anticuchos</h3>
<ul>
<li><strong>Causa limeña</strong> is a cold dish made with mashed yellow potato, lime and chili.</li>
<li>It is usually filled with chicken, tuna or avocado.</li>
<li><strong>Anticuchos</strong> are grilled meat skewers, traditionally beef heart.</li>
<li>People eat anticuchos on the street at night with potatoes and spicy sauce.</li>
</ul>
</div>
<div class="tech-stack">
<div class="layer">
<strong>DESSERT</strong>
<span>Suspiro a la Limeña is a sweet dessert with caramel cream and meringue.</span>
</div>
<div class="layer">
<strong>DRINK</strong>
<span>Chicha morada is a purple corn drink with pineapple, apple and cinnamon.</span>
</div>
<div class="layer">
<strong>ENGLISH SENTENCES</strong>
<span class="grammar-focus">We usually have causa as a starter.</span><br>
<span class="grammar-focus">People drink chicha morada in family lunches.</span>
</div>
</div>
</div>
</div>
<!-- SLIDE 6: HIGHLANDS OVERVIEW -->
<div class="slide">
<div class="header">
<h2>5. Highlands (Sierra) – Overview</h2>
<span class="page-num">06</span>
</div>
<div class="grid-2">
<div class="card">
<h3><i class="fa-solid fa-mountain"></i> Life in the Andes</h3>
<p style="font-size:0.9rem; margin-bottom:0.8rem;">
The <strong>sierra</strong> has high mountains, cold weather and strong sun.
People need warm and energetic food.
</p>
<ul>
<li>Main crops: <strong>potatoes</strong>, corn, quinoa, beans.</li>
<li>Common meats: <strong>lamb, pork, alpaca, cuy (guinea pig)</strong>.</li>
<li>Many dishes come from <strong>Inca</strong> traditions.</li>
</ul>
</div>
<div class="card" style="border-left:4px solid #F59E0B;">
<h3><i class="fa-solid fa-seedling"></i> Typical Ingredients</h3>
<ul>
<li><strong>Potato</strong>: Peru has more than <strong>3,000</strong> varieties.</li>
<li><strong>Choclo</strong> (large corn) and <strong>chuño</strong> (dried potato).</li>
<li><strong>Ají</strong> (chili peppers) for flavor and color.</li>
<li>Spices and herbs like <strong>huacatay</strong> and <strong>oregano</strong>.</li>
</ul>
<p class="small-text" style="margin-top:0.6rem;">
Example: <span class="grammar-focus">People in the highlands eat a lot of soup because the weather is cold.</span>
</p>
</div>
</div>
</div>
<!-- SLIDE 7: MAIN DISHES FROM THE SIERRA -->
<div class="slide">
<div class="header">
<h2>6. Typical Dishes – Highlands</h2>
<span class="page-num">07</span>
</div>
<div class="grid-3">
<div class="card">
<h3><i class="fa-solid fa-fire-burner"></i> Pachamanca</h3>
<ul>
<li>Pachamanca means “earth pot” in Quechua.</li>
<li>Meat, potatoes and corn are cooked under hot stones in the ground.</li>
<li>It is a special dish for <strong>festivals</strong> and family reunions.</li>
<li><span class="grammar-focus">Families prepare pachamanca on Sundays and celebrations.</span></li>
</ul>
</div>
<div class="card">
<h3><i class="fa-solid fa-otter"></i> Cuy Chactado & Trucha</h3>
<ul>
<li><strong>Cuy chactado</strong> is fried guinea pig, very crispy.</li>
<li>People serve it with potatoes, salad and spicy sauce.</li>
<li><strong>Trucha frita</strong> (fried trout) is common near lakes and rivers.</li>
<li>It is usually eaten with rice, salad and <em>mote</em> (corn).</li>
</ul>
</div>
<div class="card">
<h3><i class="fa-solid fa-mug-hot"></i> Soups & Stews</h3>
<ul>
<li><strong>Chairo</strong> is a thick soup with meat, potato and chuño.</li>
<li><strong>Caldo de cabeza</strong> and other soups are eaten in the morning.</li>
<li>These dishes help people to work in the fields all day.</li>
</ul>
</div>
</div>
</div>
<!-- SLIDE 8: WHEN DO WE EAT THESE DISHES? -->
<div class="slide">
<div class="header">
<h2>7. When Do Peruvians Eat These Dishes?</h2>
<span class="page-num">08</span>
</div>
<div style="display:flex; flex-direction:column; gap:15px; height:80%; justify-content:center;">
<div style="display:flex; align-items:center; gap:20px;">
<div style="width:180px; font-weight:bold; color:var(--primary);">
WEEKDAYS<br><span style="font-size:0.8rem; color:#666;">Simple & Fast</span>
</div>
<div style="flex:1; background:#fee2e2; padding:15px; border-radius:6px; border-left:5px solid var(--primary);">
<strong>Everyday food:</strong>
<span class="grammar-focus">People usually eat</span>
<strong>lomo saltado</strong>, <strong>ají de gallina</strong> or soups for lunch.
Students and workers need fast and energetic meals.
</div>
</div>
<div style="display:flex; align-items:center; gap:20px;">
<div style="width:180px; font-weight:bold; color:var(--accent);">
WEEKENDS<br><span style="font-size:0.8rem; color:#666;">Family Time</span>
</div>
<div style="flex:1; background:#EFF6FF; padding:15px; border-radius:6px; border-left:5px solid var(--accent);">
On weekends <span class="grammar-focus">families eat</span>
<strong>ceviche</strong> in Lima and <strong>pachamanca</strong> or
<strong>cuy</strong> in the highlands.
People <span class="grammar-focus">spend</span> time together and
<span class="grammar-focus">share</span> traditional dishes.
</div>
</div>
<div style="display:flex; align-items:center; gap:20px;">
<div style="width:180px; font-weight:bold; color:var(--dark);">
CELEBRATIONS<br><span style="font-size:0.8rem; color:#666;">Festivals</span>
</div>
<div style="flex:1; background:#F8FAFC; padding:15px; border-radius:6px; border-left:5px solid var(--dark);">
In parties and regional festivals, people
<span class="grammar-focus">prepare</span> big dishes like
<strong>pachamanca</strong>, <strong>carapulcra</strong> with <strong>sopa seca</strong>,
and many desserts.
Food <span class="grammar-focus">is part of</span> the celebration and identity.
</div>
</div>
</div>
</div>
<!-- SLIDE 9: COMPARING LIMA & SIERRA -->
<div class="slide">
<div class="header">
<h2>8. Lima vs. Highlands – Comparison</h2>
<span class="page-num">09</span>
</div>
<div class="grid-2">
<div class="card">
<h3><i class="fa-solid fa-water"></i> Lima (Coast)</h3>
<ul>
<li>Uses a lot of <strong>fish and seafood</strong>.</li>
<li>Dishes are usually <strong>fresh and light</strong>.</li>
<li>Famous dishes: ceviche, lomo saltado, causa, anticuchos.</li>
<li>Popular drinks: chicha morada, Inca Kola, pisco sour.</li>
<li><span class="grammar-focus">People in Lima eat ceviche when it is hot and sunny.</span></li>
</ul>
</div>
<div class="card" style="justify-content:space-between;">
<div>
<h3><i class="fa-solid fa-mountain-city"></i> Highlands (Sierra)</h3>
<ul>
<li>Uses <strong>potatoes, corn, quinoa and meat</strong>.</li>
<li>Dishes are usually <strong>hot, heavy and very filling</strong>.</li>
<li>Famous dishes: pachamanca, cuy chactado, soups and stews.</li>
<li>Food helps people work in <strong>cold and high altitude</strong>.</li>
</ul>
</div>
<div style="margin-top:0.5rem; padding-top:0.6rem; border-top:1px dashed #CBD5F5;">
<p class="small-text">
Summary in English:<br>
<span class="grammar-focus">Coastal food is fresh and light; highland food is hot and strong.</span>
</p>
</div>
</div>
</div>
</div>
<!-- SLIDE 10: CLOSING & GROUP -->
<div class="slide">
<div class="header">
<h2>9. Questions & Closing</h2>
<span class="page-num">10</span>
</div>
<div style="display:flex; align-items:center; justify-content:center; height:100%; text-align:center;">
<div class="card" style="max-width:800px; padding:2rem; border-top:5px solid var(--primary);">
<h3 style="font-size:1.5rem; text-align:center; text-transform:uppercase;">
Thank You for Your Attention
</h3>
<p style="font-size:1.05rem; line-height:1.6; color:var(--text-main); margin-top:1rem;">
Peruvian food is not only delicious, it is also a part of our history and identity.
<br>Do you have any questions about the dishes from <strong>Lima</strong> or the
<strong>Highlands</strong>?
</p>
<div style="margin-top:2rem; display:flex; justify-content:center; gap:2.5rem; flex-wrap:wrap;">
<div>
<p style="font-weight:bold; color:var(--dark);">Jairo Mendoza</p>
<span style="font-size:0.8rem;">Presenter</span>
</div>
<div>
<p style="font-weight:bold; color:var(--dark);">Diana Quispe</p>
<span style="font-size:0.8rem;">Content & Research</span>
</div>
<div>
<p style="font-weight:bold; color:var(--dark);">Justa Quispe</p>
<span style="font-size:0.8rem;">Content & Slides</span>
</div>
<div>
<p style="font-weight:bold; color:var(--dark);">Lorena Torres</p>
<span style="font-size:0.8rem;">Design & Images</span>
</div>
</div>
<p style="font-family:'JetBrains Mono', monospace; font-weight:700; margin-top:2.5rem; color:var(--accent);">
TYPICAL PERUVIAN FOOD · LIMA & HIGHLANDS · 2025
</p>
</div>
</div>
</div>
<!-- CONTROLS -->
<div class="controls">
<button class="btn-nav" onclick="moveSlide(-1)"><i class="fa-solid fa-chevron-left"></i></button>
<button class="btn-nav" onclick="moveSlide(1)"><i class="fa-solid fa-chevron-right"></i></button>
</div>
</div>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const progressBar = document.querySelector('.progress');
function updateUI() {
slides.forEach((slide, index) => {
slide.classList.remove('active');
if (index === currentSlide) slide.classList.add('active');
});
const progress = ((currentSlide + 1) / slides.length) * 100;
progressBar.style.width = `${progress}%`;
}
function moveSlide(dir) {
const next = currentSlide + dir;
if (next >= 0 && next < slides.length) {
currentSlide = next;
updateUI();
}
}
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') moveSlide(1);
if (e.key === 'ArrowLeft') moveSlide(-1);
});
// Initialize
updateUI();
</script>
</body>
</html>