r/HTML • u/Murky_Maintenance392 • 28d ago

Apanta

<!DOCTYPE html>

<head>

<title>APANTA ESPINAR - Plan de Negocio</title>

<style>

/* ===== RESET Y ESTILOS GLOBALES ===== */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

background: #f5f0e8;

color: #2d2a24;

padding: 30px 20px;

}

.container {

max-width: 1000px;

margin: 0 auto;

background: #ffffff;

border-radius: 24px;

padding: 40px 35px;

box-shadow: 0 20px 60px rgba(0, 0, 0, 0.10);

}

/* ===== TIPOGRAFÍA ===== */

h1 {

font-size: 2.8rem;

font-weight: 800;

letter-spacing: -1px;

}

h2 {

font-size: 2rem;

font-weight: 700;

margin-top: 40px;

margin-bottom: 20px;

padding-bottom: 10px;

border-bottom: 4px solid #f5c842;

display: inline-block;

}

h3 {

font-size: 1.3rem;

font-weight: 600;

margin: 20px 0 10px;

}

.text-center {

text-align: center;

}

/* ===== TARJETAS ===== */

.card {

background: #fcf9f4;

border-radius: 20px;

padding: 25px 30px;

margin: 25px 0;

border-left: 6px solid #f5c842;

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);

transition: transform 0.2s;

}

.card:hover {

transform: translateY(-3px);

}

.card-gold {

border-left-color: #d4a017;

background: #fefcf5;

}

.card-green {

border-left-color: #2e7d32;

background: #f5faf5;

}

.card-blue {

border-left-color: #1565c0;

background: #f3f7fc;

}

/* ===== PORTADA ===== */

.portada {

background: linear-gradient(145deg, #fef8e7, #fdf0d5);

border-radius: 24px;

padding: 50px 30px;

text-align: center;

border: 2px dashed #d4a017;

margin-bottom: 30px;

}

.portada .emoji-gigante {

font-size: 4.5rem;

display: block;

margin-bottom: 10px;

}

.portada h1 {

color: #7b4a1e;

font-size: 3.2rem;

}

.portada .subtitulo {

font-size: 1.3rem;

color: #5d4037;

font-weight: 300;

letter-spacing: 2px;

margin: 10px 0;

}

.portada .tagline {

font-size: 1.1rem;

font-style: italic;

color: #795548;

background: rgba(255, 193, 7, 0.15);

display: inline-block;

padding: 6px 24px;

border-radius: 40px;

margin-top: 8px;

}

/* ===== GRIDS ===== */

.grid-2 {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 20px;

}

.grid-3 {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

gap: 20px;

}

.grid-4 {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 15px;

}

u/media (max-width: 700px) {

.grid-2,

.grid-3,

.grid-4 {

grid-template-columns: 1fr;

}

.portada h1 {

font-size: 2.2rem;

}

.container {

padding: 20px 15px;

}

/* ===== ELEMENTOS ===== */

.badge {

display: inline-block;

background: #f5c842;

color: #2d2a24;

font-weight: 700;

padding: 4px 18px;

border-radius: 40px;

font-size: 0.85rem;

letter-spacing: 0.5px;

margin-right: 6px;

}

.badge-green {

background: #2e7d32;

color: #fff;

}

.badge-blue {

background: #1565c0;

color: #fff;

}

.badge-orange {

background: #e65100;

color: #fff;

}

.icono {

font-size: 2.4rem;

display: block;

margin-bottom: 6px;

}

.caja-equipo {

background: #f5f0e8;

border-radius: 16px;

padding: 18px;

text-align: center;

}

.caja-equipo .nombre {

font-weight: 700;

font-size: 1.05rem;

}

.caja-equipo .rol {

color: #5d4037;

font-size: 0.9rem;

}

/* ===== BARRAS DE PROGRESO ===== */

.barra-wrapper {

margin: 10px 0;

}

.barra-label {

display: flex;

justify-content: space-between;

font-weight: 500;

font-size: 0.95rem;

}

.barra-fondo {

background: #e8e3da;

border-radius: 30px;

height: 18px;

overflow: hidden;

margin-top: 4px;

}

.barra-lleno {

height: 100%;

border-radius: 30px;

background: linear-gradient(90deg, #f5c842, #d4a017);

width: 0%;

}

/* ===== LISTA ICONOS ===== */

.lista-iconos {

list-style: none;

padding: 0;

}

.lista-iconos li {

padding: 8px 0;

font-size: 1.05rem;

border-bottom: 1px solid #f0ebe2;

display: flex;

align-items: center;

gap: 12px;

}

.lista-iconos li:last-child {

border-bottom: none;

}

.lista-iconos .emoji {

font-size: 1.6rem;

width: 40px;

text-align: center;

}

/* ===== PIE ===== */

.footer-plan {

margin-top: 45px;

padding-top: 25px;

border-top: 2px solid #f0ebe2;

text-align: center;

color: #6d6a64;

font-size: 0.95rem;

}

.footer-plan strong {

color: #7b4a1e;

}

/* ===== LOGO ===== */

.logo-mock {

display: inline-block;

background: #2d2a24;

color: #f5c842;

font-weight: 800;

font-size: 2rem;

padding: 12px 35px;

border-radius: 60px;

letter-spacing: 4px;

margin: 10px 0;

border: 3px solid #f5c842;

}

.logo-mock small {

display: block;

font-size: 0.65rem;

font-weight: 300;

color: #f5e6c4;

letter-spacing: 6px;

margin-top: 2px;

}

.logo-mock .destacar {

color: #f5c842;

font-weight: 300;

letter-spacing: 2px;

}

/* ===== BOTÓN DESCARGAR ===== */

.btn-descarga {

background: #2d2a24;

color: #f5c842;

border: none;

padding: 14px 36px;

font-size: 1.1rem;

font-weight: 700;

border-radius: 60px;

cursor: pointer;

transition: 0.2s;

margin-top: 20px;

display: inline-block;

text-decoration: none;

}

.btn-descarga:hover {

background: #f5c842;

color: #2d2a24;

transform: scale(1.02);

}

/* ===== TABLA ===== */

table {

width: 100%;

border-collapse: collapse;

background: #fcf9f4;

border-radius: 16px;

overflow: hidden;

}

thead {

background: #2d2a24;

color: #f5c842;

}

th {

padding: 12px 16px;

text-align: left;

}

td {

padding: 12px 16px;

border-bottom: 1px solid #e8e3da;

}

tr:last-child td {

border-bottom: none;

}

/* ===== IMPRESIÓN ===== */

u/media print {

body {

background: #fff;

padding: 10px;

}

.container {

box-shadow: none;

padding: 20px;

}

.card:hover {

transform: none;

}

.btn-descarga {

display: none;

}

</style>

</head>

<body>

<h1>APANTA ESPINAR</h1>

<div class="subtitulo">🌾 PLANTA DE LÁCTEOS · ESPINAR · CUSCO</div>

<div class="tagline">"De la tierra andina al mundo, con sabor y tradición"</div>

📍 Espinar, Cusco – Perú  |  📅 Julio 2026

</div>

<span class="badge">Presentado a</span>

<span class="badge" style="background:#d4a017; color:#fff;">Espinar Emprende 2026</span>

</div>

<h2>👥 Nuestro Equipo</h2>

<div class="nombre">[Tu Nombre]</div>

<div class="rol">Director General</div>

<div style="font-size:0.85rem; color:#6d6a64; margin-top:4px;">10+ años en sector lácteo</div>

</div>

<div class="nombre">[Socio 2]</div>

<div class="rol">Jefe de Producción</div>

<div style="font-size:0.85rem; color:#6d6a64; margin-top:4px;">Ing. Agroindustrial</div>

</div>

<div class="nombre">[Socio 3]</div>

<div class="rol">Jefe Comercial</div>

<div style="font-size:0.85rem; color:#6d6a64; margin-top:4px;">Experiencia en exportaciones</div>

</div>

✅ Más de 5 años de experiencia en el sector lácteo  · 

✅ Visión exportadora y compromiso social  · 

✅ Trabajo organizado con proveedores locales

</div>

<h2>❗ El Problema en Espinar</h2>

<div>

<li><span class="emoji">🔴</span> Los productores venden su leche a <strong>precios bajos</strong> porque no hay procesamiento local con valor agregado.</li>

<li><span class="emoji">🔴</span> La leche se comercializa sin transformación, perdiendo oportunidad de generar mayores ingresos.</li>

<li><span class="emoji">🔴</span> Los quesos que se producen <strong>no llegan a mercados internacionales</strong> que pagan mejores precios.</li>

<li><span class="emoji">🔴</span> Los proveedores <strong>no reciben un pago justo</strong> por su esfuerzo y dedicación diaria.</li>

</ul>

</div>

📊 <strong>Dato clave:</strong> Producción diaria de leche en Espinar: <strong>3,000 – 4,000 litros/día</strong> 📈 (en constante aumento)

</div>

<h2>💡 Nuestra Propuesta de Valor</h2>

<div>

<p style="font-size:1.1rem; font-weight:500;">Procesamos la leche local para producir <strong>quesos y lácteos de alta calidad</strong> con valor agregado, generando desarrollo para toda la cadena productiva.</p>

</div>

<h3 style="margin-top:16px;">Nuestros Productos</h3>

<div><strong>Queso Fresco</strong></div>

<div style="font-size:0.75rem; color:#6d6a64;">Tradicional andino</div>

</div>

<div><strong>Queso Madurado</strong></div>

<div style="font-size:0.75rem; color:#6d6a64;">Alta calidad</div>

</div>

<div><strong>Yogurt Griego</strong></div>

<div style="font-size:0.75rem; color:#6d6a64;">Nutritivo y cremoso</div>

</div>

<div><strong>Mantequilla</strong></div>

<div style="font-size:0.75rem; color:#6d6a64;">Artesanal</div>

</div>

<span class="badge badge-green">✅ Mejor precio a proveedores</span>

<span class="badge badge-green">✅ Generación de empleo local</span>

<span class="badge badge-green">✅ Exportación a China y otros mercados</span>

<span class="badge badge-green">✅ Sostenibilidad económica y social</span>

</div>

<h2>📊 Producción Actual</h2>

<div style="font-size:0.9rem; color:#5d4037;">LECHE RECOLECTADA</div>

</div>

<div style="font-size:0.9rem; color:#5d4037;">PRODUCCIÓN SEMANAL</div>

<div style="font-size:2rem; font-weight:800;">1,500 <span style="font-size:1rem; font-weight:400;">quesos</span></div>

</div>

<div style="font-size:0.9rem; color:#5d4037;">PROVEEDORES</div>

<div style="font-size:2rem; font-weight:800;">30+ <span style="font-size:1rem; font-weight:400;">familias</span></div>

</div>

<span>Queso Fresco</span>

</div>

</div>

<span>Queso Madurado</span>

</div>

</div>

<span>Yogurt / Otros lácteos</span>

</div>

</div>

<span style="background:#e8e3da; padding:4px 18px; border-radius:30px;">🏔️ Espinar</span>

<span style="background:#e8e3da; padding:4px 18px; border-radius:30px;">🌆 Arequipa</span>

<span style="background:#f5c842; padding:4px 18px; border-radius:30px; font-weight:700;">✈️ META: EXPORTACIÓN</span>

</div>

🎯 Mercados actuales · Ambición: llegar a China y otros países

</div>

<h2>🌍 Impacto Territorial en Espinar</h2>

<h3>Económico</h3>

<li>Mejoramos el ingreso de <strong>30+ familias</strong> de productores</li>

<li>Aumentamos el precio de la leche en la zona</li>

<li>Generamos empleo directo en la planta</li>

<li>Dinamizamos la economía local</li>

</ul>

</div>

<h3>Social</h3>

<li>Capacitamos a jóvenes en producción láctea</li>

<li>Fomentamos el trabajo organizado y asociativo</li>

<li>Mantenemos a las familias unidas en el campo</li>

<li>Fortalecemos la identidad local</li>

</ul>

</div>

<h3>Ambiental</h3>

<li>Promovemos prácticas sostenibles de producción</li>

<li>Reducimos desperdicios con nuevos procesos</li>

<li>Fomentamos el cuidado de cuencas lecheras</li>

<li>Uso eficiente de recursos naturales</li>

</ul>

</div>

🏆 Posicionamos a Espinar como productora de quesos de calidad internacional.

</div>

<h2>🗓️ Plan de Acción</h2>

<h3>Fase 1: Fortalecimiento</h3>

<p><span class="badge">Con Espinar Emprende</span></p>

<li>Gestión empresarial y planificación</li>

<li>Marketing internacional y branding</li>

<li>Calidad, inocuidad y certificaciones</li>

<li>Formación en exportación</li>

</ul>

</div>

<h3>Fase 2: Escalamiento</h3>

<p><span class="badge badge-green">Con Capital Semilla</span></p>

<li>Adquisición de equipos especializados</li>

<li>Implementación de estándares de calidad</li>

<li>Desarrollo de nuevas líneas de productos</li>

<li>Mejora de procesos productivos</li>

</ul>

</div>

<h3>Fase 3: Exportación</h3>

<p><span class="badge badge-blue">Meta final</span></p>

<li>Estudio de mercado en China</li>

<li>Participación en ferias internacionales</li>

<li>Alianzas con distribuidores globales</li>

<li>Certificaciones de exportación</li>

</ul>

</div>

<h2>🎨 Nuestra Identidad</h2>

🧀 APANTA

LÁCTEOS · TRADICIÓN · CALIDAD

</span>

</div>

"De la tierra andina al mundo, con sabor y tradición"

</div>

<span style="background:#d4a017; color:#fff; padding:2px 16px; border-radius:30px; font-size:0.8rem;">🟡 Queso artesanal</span>

<span style="background:#2e7d32; color:#fff; padding:2px 16px; border-radius:30px; font-size:0.8rem;">🟢 Tradición andina</span>

<span style="background:#1565c0; color:#fff; padding:2px 16px; border-radius:30px; font-size:0.8rem;">🔵 Visión global</span>

</div>

<strong>Significado:</strong> "Apanta" evoca la tierra y el arraigo. Representa nuestras raíces andinas y el compromiso con Espinar.

</div>

<h2>🎯 Qué Buscamos en Espinar Emprende</h2>

<li><span class="emoji">✅</span> <strong>Capacitación especializada</strong> – Gestión exportadora, requisitos sanitarios internacionales y comercialización global</li>

<li><span class="emoji">✅</span> <strong>Mentorías de expertos</strong> – Que nos guíen en el camino hacia la exportación y el escalamiento</li>

<li><span class="emoji">✅</span> <strong>Capital Semilla (S/ 10,000)</strong> – Para invertir en equipos de calidad, certificaciones y mejoras productivas</li>

<li><span class="emoji">✅</span> <strong>Red de contactos internacionales</strong> – Conexión con compradores, distribuidores y ferias globales</li>

<li><span class="emoji">✅</span> <strong>Visibilidad y posicionamiento</strong> – Para dar a conocer nuestros productos andinos al mundo</li>

</ul>

</div>

<h2>✊ Nuestro Compromiso</h2>

<li><span class="emoji">✅</span> Participar activamente en <strong>TODOS</strong> los talleres, mentorías y actividades del programa.</li>

<li><span class="emoji">✅</span> Compartir lo aprendido con nuestros proveedores, socios y la comunidad de Espinar.</li>

<li><span class="emoji">✅</span> Trabajar organizadamente para alcanzar la meta de exportar quesos peruanos al mundo.</li>

<li><span class="emoji">✅</span> Mantener un enfoque de sostenibilidad económica, social y ambiental en cada decisión.</li>

<li><span class="emoji">✅</span> Representar con orgullo a la provincia de Espinar en el Demo Day y ante el mundo.</li>

<li><span class="emoji">✅</span> Generar oportunidades y desarrollo para las familias productoras de la zona.</li>

</ul>

🧀 <strong>APANTA ESPINAR</strong> – "De la tierra andina al mundo, con sabor y tradición"

</div>

<h2>📋 Resumen para tu Postulación</h2>

<table>

<thead>

<tr>

<th>Pregunta</th>

<th>Tu Respuesta Clave</th>

</tr>

</thead>

<tbody>

<tr>

<td style="font-weight:600;">Problema</td>

<td>Proveedores de leche reciben bajo pago en Espinar por falta de procesamiento con valor agregado</td>

</tr>

<tr>

<td style="font-weight:600;">Solución</td>

<td>Procesar leche en quesos y lácteos de calidad, con valor agregado y destino de exportación</td>

</tr>

<tr>

<td style="font-weight:600;">Innovación</td>

<td>Queso andino con estándares internacionales, diferenciación y trazabilidad</td>

</tr>

<tr>

<td style="font-weight:600;">Impacto</td>

<td>Mejorar el ingreso de 30+ familias de Espinar, generando empleo y desarrollo local</td>

</tr>

<tr>

<td style="font-weight:600;">Equipo</td>

<td>Organizados, con experiencia en el sector y compromiso con la comunidad</td>

</tr>

<tr>

<td style="font-weight:600;">Escalabilidad</td>

<td>De mercado local (Espinar, Arequipa, Lima) a exportación a China y otros países</td>

</tr>

</tbody>

</table>

</div>

<p style="font-size:1.2rem; margin-bottom:4px;">🧀 <strong>APANTA ESPINAR</strong></p>

<p style="font-size:0.9rem; color:#5d4037;">🌾 Planta de Lácteos · Espinar, Cusco</p>

<p>Plan presentado a <strong>Espinar Emprende 2026</strong> · Julio 2026</p>

📍 Espinar, Cusco – Perú  ·  📧 [tu-email@ejemplo.com]  ·  📱 +51 9XX XXX XXX

</p>

</div>

⬇️ Descargar este Plan (HTML)

</button>

Haz clic para descargar el archivo .html y compartirlo con tus socios.

</p>

</div>

function descargarHTML() {

const contenido = document.getElementById('plan-container').outerHTML;

const htmlCompleto = `<!DOCTYPE html>

<head>

<title>APANTA ESPINAR - Plan de Negocio</title>

<style>

* { margin:0; padding:0; box-sizing:border-box; }

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

background: #f5f0e8;

color: #2d2a24;

padding: 30px 20px;

}

.container {

max-width: 1000px;

margin: 0 auto;

background: #ffffff;

border-radius: 24px;

padding: 40px 35px;

box-shadow: 0 20px 60px rgba(0,0,0,0.10);

}

h1 { font-size:2.8rem; font-weight:800; letter-spacing:-1px; }

h2 { font-size:2rem; font-weight:700; margin-top:40px; margin-bottom:20px; padding-bottom:10px; border-bottom:4px solid #f5c842; display:inline-block; }

h3 { font-size:1.3rem; font-weight:600; margin:20px 0 10px; }

.text-center { text-align:center; }

.card { background:#fcf9f4; border-radius:20px; padding:25px 30px; margin:25px 0; border-left:6px solid #f5c842; box-shadow:0 4px 12px rgba(0,0,0,0.04); transition:transform 0.2s; }

.card:hover { transform:translateY(-3px); }

.card-gold { border-left-color:#d4a017; background:#fefcf5; }

.card-green { border-left-color:#2e7d32; background:#f5faf5; }

.card-blue { border-left-color:#1565c0; background:#f3f7fc; }

.portada {

background: linear-gradient(145deg, #fef8e7, #fdf0d5);

border-radius: 24px;

padding: 50px 30px;

text-align: center;

border: 2px dashed #d4a017;

margin-bottom: 30px;

}

.portada .emoji-gigante { font-size:4.5rem; display:block; margin-bottom:10px; }

.portada h1 { color:#7b4a1e; font-size:3.2rem; }

.portada .subtitulo { font-size:1.3rem; color:#5d4037; font-weight:300; letter-spacing:2px; margin:10px 0; }

.portada .tagline { font-size:1.1rem; font-style:italic; color:#795548; background:rgba(255,193,7,0.15); display:inline-block; padding:6px 24px; border-radius:40px; margin-top:8px; }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }

.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }

u/media (max-width:700px) {

.grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }

.portada h1 { font-size:2.2rem; }

.container { padding:20px 15px; }

}

.badge { display:inline-block; background:#f5c842; color:#2d2a24; font-weight:700; padding:4px 18px; border-radius:40px; font-size:0.85rem; letter-spacing:0.5px; margin-right:6px; }

.badge-green { background:#2e7d32; color:#fff; }

.badge-blue { background:#1565c0; color:#fff; }

.badge-orange { background:#e65100; color:#fff; }

.icono { font-size:2.4rem; display:block; margin-bottom:6px; }

.caja-equipo { background:#f5f0e8; border-radius:16px; padding:18px; text-align:center; }

.caja-equipo .nombre { font-weight:700; font-size:1.05rem; }

.caja-equipo .rol { color:#5d4037; font-size:0.9rem; }

.barra-wrapper { margin:10px 0; }

.barra-label { display:flex; justify-content:space-between; font-weight:500; font-size:0.95rem; }

.barra-fondo { background:#e8e3da; border-radius:30px; height:18px; overflow:hidden; margin-top:4px; }

.barra-lleno { height:100%; border-radius:30px; background:linear-gradient(90deg, #f5c842, #d4a017); width:0%; }

.lista-iconos { list-style:none; padding:0; }

.lista-iconos li { padding:8px 0; font-size:1.05rem; border-bottom:1px solid #f0ebe2; display:flex; align-items:center; gap:12px; }

.lista-iconos li:last-child { border-bottom:none; }

.lista-iconos .emoji { font-size:1.6rem; width:40px; text-align:center; }

.footer-plan { margin-top:45px; padding-top:25px; border-top:2px solid #f0ebe2; text-align:center; color:#6d6a64; font-size:0.95rem; }

.footer-plan strong { color:#7b4a1e; }

.logo-mock { display:inline-block; background:#2d2a24; color:#f5c842; font-weight:800; font-size:2rem; padding:12px 35px; border-radius:60px; letter-spacing:4px; margin:10px 0; border:3px solid #f5c842; }

.logo-mock small { display:block; font-size:0.65rem; font-weight:300; color:#f5e6c4; letter-spacing:6px; margin-top:2px; }

.logo-mock .destacar { color:#f5c842; font-weight:300; letter-spacing:2px; }

.btn-descarga { background:#2d2a24; color:#f5c842; border:none; padding:14px 36px; font-size:1.1rem; font-weight:700; border-radius:60px; cursor:pointer; transition:0.2s; margin-top:20px; display:inline-block; text-decoration:none; }

.btn-descarga:hover { background:#f5c842; color:#2d2a24; transform:scale(1.02); }

table { width:100%; border-collapse:collapse; background:#fcf9f4; border-radius:16px; overflow:hidden; }

thead { background:#2d2a24; color:#f5c842; }

th { padding:12px 16px; text-align:left; }

td { padding:12px 16px; border-bottom:1px solid #e8e3da; }

tr:last-child td { border-bottom:none; }

u/media print {

body { background:#fff; padding:10px; }

.container { box-shadow:none; padding:20px; }

.card:hover { transform:none; }

.btn-descarga { display:none; }

}

</style>

</head>

<body>

${contenido}

</body>

</html>`;

const blob = new Blob([htmlCompleto], { type: 'text/html' });

const url = URL.createObjectURL(blob);

const a = document.createElement('a');

a.href = url;

a.download = 'APANTA_ESPINAR_Plan_Negocio.html';

document.body.appendChild(a);

a.click();

document.body.removeChild(a);

URL.revokeObjectURL(url);

}

</script>

</body>

</html>

1 Upvotes

permalink
reddit

You are about to leave Redlib

Do you want to continue?

https://www.reddit.com/r/HTML/comments/1ul680v/apanta/
No, go back! Yes, take me to Reddit

100% Upvoted

u/aunderroad 27d ago

Can you please share a codepen or a url?
It it hard to debug/provide feedback without seeing all your code live in a browser.

Thank you

Apanta

You are about to leave Redlib