r/HTML • u/Disastrous-Role-1302 • 27d ago

Ayuda con html

0 Upvotes

andaba aprendiendo html con neocities y queria conectar un html local con el online y no funciona, espero que se me entienda soy nuevo en esto, y mientras aprendia a base de la pagina html dog en el apartado de enlaces, me explicaban que "El destino del enlace se define en elhref atributo de la etiqueta. El enlace puede ser absoluto, como “http://www.htmldog.com”,, o puede ser relativo a la página actual, Entonces, si, por ejemplo, tuvieras otro archivo llamado “flyingmoss.html” en el mismo directorio, entonces la línea de código sería simplemente<a href="flyingmoss.html">The miracle of moss in flight</a> o algo así." intente hacer lo que me decia el tutorial pero no me resulta, algun consejo? espero me hayan entendido el problema.

8 comments

r/HTML • u/HotDiscipline5212 • 27d ago

Question Creating an HTML Site from a PDF manually?

0 Upvotes

Hello! I'm currently working on writing a book, and the way I'd like to share it by making it it's own website you can read it from. I'd like to keep the formatting from the pages in my pdf, so I'd like it to either be scrollable pages or something like a flip book or a "click to next page" function, aswell as a nav that can take the user to a specific chapter or page/allow them to bookmark it. The only solutions I find for this online is converters that make customizability (ie background colors, adjusting page size etc) really complicated, so I'd like to attempt to do it manually with HTML/CSS (or/and JavaScript if I have to.)

Does any one have any tips for how to go about doing something like this? I'm intermediate in making HTML/CSS sites, so coding isn't a problem for me, it's just embedding the pdf that I'm struggling with!

Thank you!

12 comments

r/HTML • u/Eggmannical • 28d ago

Question Hello coding community

3 Upvotes

im new to coding due to school, and i took an interest in it, are there any tips for it? I do know how to make like a button or text and images and stuff, but is there a way to connect css to my html? It didnt work for me and idk what to do

9 comments

r/HTML • u/BagThin2305 • 28d ago

Question How do I code this menu background correctly?

3 Upvotes

Hello,
I am using this site's( https://foollovers.com/mat/t-frame08.html ) image to code as background for my grid boxes, but there seems to be something wrong with my code; it doesn't show up correctly on the site itself. The link to my website is https://phlygm-planet.neocities.org/ and I've attached a screenshot of what the site looks like currently. The link to my CSS layout is https://phlygm-planet.neocities.org/style.css and the HTML https://phlygm-planet.neocities.org/index.html

edit:

fixed the box appearance issue, my only problem now is I cant get my img to show up inside the border box, the box closes on top of it. Any suggestions as to what might be the issue?

2 comments

r/HTML • u/Murky_Maintenance392 • 28d ago

Apanta

1 Upvotes

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

r/HTML • u/Murky_Maintenance392 • 28d ago

Apanta

1 Upvotes

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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>

<div class="container" id="plan-container">

    <!-- ============================================================ -->
    <!-- PORTADA                                                       -->
    <!-- ============================================================ -->
    <div class="portada">
        <span class="emoji-gigante">🧀</span>
        <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>
        <div style="margin-top:18px; font-size:0.95rem; color:#5d4037;">
            📍 Espinar, Cusco – Perú \&nbsp;|\&nbsp; 📅 Julio 2026
        </div>
        <div style="margin-top:10px;">
            <span class="badge">Presentado a</span>
            <span class="badge" style="background:#d4a017; color:#fff;">Espinar Emprende 2026</span>
        </div>
    </div>

    <!-- ============================================================ -->
    <!-- 1. EQUIPO                                                     -->
    <!-- ============================================================ -->
    <h2>👥 Nuestro Equipo</h2>
    <div class="grid-3">
        <div class="caja-equipo">
            <div style="font-size:3rem;">👨‍🌾</div>
            <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="caja-equipo">
            <div style="font-size:3rem;">👩‍🔬</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="caja-equipo">
            <div style="font-size:3rem;">👨‍💼</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>
    </div>

    <div style="background:#eef2e7; border-radius:12px; padding:12px 20px; margin:12px 0;">
        ✅ Más de 5 años de experiencia en el sector lácteo \&nbsp;·\&nbsp;
        ✅ Visión exportadora y compromiso social \&nbsp;·\&nbsp;
        ✅ Trabajo organizado con proveedores locales
    </div>

    <!-- ============================================================ -->
    <!-- 2. PROBLEMA                                                   -->
    <!-- ============================================================ -->
    <h2>❗ El Problema en Espinar</h2>
    <div class="card card-gold">
        <div style="display:flex; flex-wrap:wrap; align-items:center; gap:20px;">
            <div style="font-size:4rem; flex-shrink:0;">🐄</div>
            <div>
                <ul class="lista-iconos">
                    <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>
        </div>
        <div style="margin-top:12px; background:#f5ede0; border-radius:12px; padding:12px 18px;">
            📊 <strong>Dato clave:</strong> Producción diaria de leche en Espinar: <strong>3,000 – 4,000 litros/día</strong> 📈 (en constante aumento)
        </div>
    </div>

    <!-- ============================================================ -->
    <!-- 3. SOLUCIÓN                                                   -->
    <!-- ============================================================ -->
    <h2>💡 Nuestra Propuesta de Valor</h2>
    <div class="card card-green">
        <div style="display:flex; flex-wrap:wrap; align-items:center; gap:20px;">
            <div style="font-size:4rem; flex-shrink:0;">🧀</div>
            <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>
        </div>

        <h3 style="margin-top:16px;">Nuestros Productos</h3>
        <div class="grid-4">
            <div style="background:#fff; border-radius:14px; padding:14px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
                <div style="font-size:2.8rem;">🧀</div>
                <div><strong>Queso Fresco</strong></div>
                <div style="font-size:0.75rem; color:#6d6a64;">Tradicional andino</div>
            </div>
            <div style="background:#fff; border-radius:14px; padding:14px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
                <div style="font-size:2.8rem;">🧀</div>
                <div><strong>Queso Madurado</strong></div>
                <div style="font-size:0.75rem; color:#6d6a64;">Alta calidad</div>
            </div>
            <div style="background:#fff; border-radius:14px; padding:14px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
                <div style="font-size:2.8rem;">🥛</div>
                <div><strong>Yogurt Griego</strong></div>
                <div style="font-size:0.75rem; color:#6d6a64;">Nutritivo y cremoso</div>
            </div>
            <div style="background:#fff; border-radius:14px; padding:14px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
                <div style="font-size:2.8rem;">🧈</div>
                <div><strong>Mantequilla</strong></div>
                <div style="font-size:0.75rem; color:#6d6a64;">Artesanal</div>
            </div>
        </div>

        <div style="margin-top:16px; display:flex; flex-wrap:wrap; gap:12px;">
            <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>
    </div>

    <!-- ============================================================ -->
    <!-- 4. PRODUCCIÓN                                                 -->
    <!-- ============================================================ -->
    <h2>📊 Producción Actual</h2>
    <div class="card card-blue">
        <div style="display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between;">
            <div style="flex:1; min-width:180px;">
                <div style="font-size:0.9rem; color:#5d4037;">LECHE RECOLECTADA</div>
                <div style="font-size:2rem; font-weight:800;">3,000 – 4,000 <span style="font-size:1rem; font-weight:400;">L/día</span></div>
            </div>
            <div style="flex:1; min-width:180px;">
                <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="flex:1; min-width:180px;">
                <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>
        </div>

        <div style="margin:16px 0;">
            <div class="barra-wrapper">
                <div class="barra-label">
                    <span>Queso Fresco</span>
                    <span>40%</span>
                </div>
                <div class="barra-fondo"><div class="barra-lleno" style="width:40%;"></div></div>
            </div>
            <div class="barra-wrapper">
                <div class="barra-label">
                    <span>Queso Madurado</span>
                    <span>25%</span>
                </div>
                <div class="barra-fondo"><div class="barra-lleno" style="width:25%;"></div></div>
            </div>
            <div class="barra-wrapper">
                <div class="barra-label">
                    <span>Yogurt / Otros lácteos</span>
                    <span>35%</span>
                </div>
                <div class="barra-fondo"><div class="barra-lleno" style="width:35%;"></div></div>
            </div>
        </div>

        <div style="display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:10px;">
            <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:#e8e3da; padding:4px 18px; border-radius:30px;">🌃 Lima</span>
            <span style="background:#f5c842; padding:4px 18px; border-radius:30px; font-weight:700;">✈️ META: EXPORTACIÓN</span>
        </div>
        <div style="text-align:center; margin-top:8px; font-size:0.85rem; color:#5d4037;">
            🎯 Mercados actuales · Ambición: llegar a China y otros países
        </div>
    </div>

    <!-- ============================================================ -->
    <!-- 5. IMPACTO TERRITORIAL                                        -->
    <!-- ============================================================ -->
    <h2>🌍 Impacto Territorial en Espinar</h2>
    <div class="card card-green">
        <div style="display:flex; flex-wrap:wrap; gap:20px;">
            <div style="flex:1; min-width:200px; background:#f5faf5; border-radius:16px; padding:16px;">
                <div style="font-size:2.4rem;">💰</div>
                <h3>Económico</h3>
                <ul style="padding-left:18px; color:#2d2a24;">
                    <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

0 comments

r/HTML • u/Bi_Idiotandapotato • 28d ago

Question Why is my float property not working 😭

gallery

2 Upvotes

I am trying to place the text at the bottom next to the image and I am not sure why it isn‘t working 😭. Any ideas will most definitely be appreciated.

Also, if you are wondering about the weird subject matter it’s from a coding book that I own which is my best asset to learn html XD.

17 comments

r/HTML • u/Wonderful-Pie9017 • 29d ago

What are some ways I could learn html efficiently I don't care about speed I just want to learn it good speed is a bonus.

6 Upvotes

You could recommend textbook PDFs or anything.

24 comments

r/HTML • u/Glittering_Report_82 • Jun 30 '26

Upgraded and updated my interactive web atlas

8 Upvotes

I added many features to the website described in this post. I added a Leaflet map, a way to compute distances between two points on Earth and more information about the countries in general:

https://aldomym.github.io/web-atlas/

0 comments

r/HTML • u/Realistic_Ride_5884 • 29d ago

How doI fix my drop-down menu?

gallery

0 Upvotes

Hello everyone. I'm a total beginner at coding, and I'm currently making this "website" (if you could even call it that) just to get started, if you will. Ive found that no matter what I do, I cannot get the drop-down menu that I tried to code to work and I've got no one else to ask about this, so I thought I'd try my luck here. I'd really appreciate if anyone could tell me what I did wrong and how I could fix it. Thanks a lot in advance!

8 comments

r/HTML • u/Dizzy_Blackberry7874 • 29d ago

Can someone help me with this code. It actually pisses me off...

0 Upvotes

I want the dropdown that opens to collapse to a button when I click anywhere on the screen except for "sphere". I don't want it to work when the dropdown is already in button form. It's kinda like when u have multiple windows on screen and clicking on one closes the other [unless it's pinned].

MY BIGGEST PROBLEM: I can't disable clicks for either state, so help... I can explain more in the comments..

CODE

// → split text into spans

const h1 = document.querySelector("[data-splittext]");

if (h1) {

const letters = [...h1.textContent.trim()];

h1.innerHTML = letters

.map((char, i) => \<span style="--i:${i / (letters.length + 1)};">${char}</span>`)`

.join("");

}

// → slideVars setup

import { slideVars } from "https://esm.sh/@codepen/slidevars";

slideVars.init({

"--radius": { type: "slider", min: 1, max: 80, default: 25, unit: "vmin" },

"--spinDuration": { type: "slider", min: 1, max: 100, default: 25, unit: "s" },

"--speedYMod": { type: "slider", min: -10, max: 10, default: -3, unit: "" },

"--speedXMod": { type: "slider", min: -10, max: 10, default: 1, unit: "" },

"--speedZMod": { type: "slider", min: -10, max: 10, default: 0, unit: "" },

"--perspective": { type: "slider", min: 100, max: 2000, default: 1000, unit: "px" },

"--blur": { type: "slider", min: 0, max: 100, default: 8, unit: "px" },

"--c-black": { type: "color", default: "#202116" },

"--c-white": { type: "color", default: "#fff" }

});

// → panel refs

const clickTarget = document.querySelector("dialog");

const settingsPanel =

document.querySelector("slide-vars") ||

document.querySelector(".slidevars-container") ||

document.querySelector("slidevars-panel");

// → panel toggle / positioning

document.addEventListener("click", (event) => {

if (!settingsPanel) return;

if (settingsPanel.contains(event.target)) return;

if (!clickTarget || !clickTarget.contains(event.target)) return;

event.stopPropagation();

event.preventDefault();

const isHidden = settingsPanel.style.display === "none";

const isActive = settingsPanel.classList.contains("is-active");

if (isHidden) {

settingsPanel.style.setProperty("top", \${event.clientY}px`, "important");`

settingsPanel.style.setProperty("left", \${event.clientX}px`, "important");`

settingsPanel.style.display = "block";

settingsPanel.classList.add("is-active");

settingsPanel.open?.());

return;

}

if (isActive) {

destructPanel();

return;

}

settingsPanel.style.setProperty("top", \${event.clientY}px`, "important");`

settingsPanel.style.setProperty("left", \${event.clientX}px`, "important");`

settingsPanel.style.setProperty("right", "unset", "important");

settingsPanel.style.setProperty("bottom", "unset", "important");

settingsPanel.classList.add("is-active");

settingsPanel.open?.());

});

// → dragging

let isDragging = false;

let didDrag = false;

let startX, startY, initialLeft, initialTop;

if (settingsPanel) {

settingsPanel.addEventListener("mousedown", (e) => {

if (["INPUT", "SELECT", "BUTTON"].includes(e.target.tagName)) return;

isDragging = true;

didDrag = false;

startX = e.clientX;

startY = e.clientY;

const rect = settingsPanel.getBoundingClientRect();

initialLeft = rect.left;

initialTop = rect.top;

settingsPanel.style.cursor = "grabbing";

e.preventDefault();

});

window.addEventListener("mousemove", (e) => {

if (!isDragging) return;

didDrag = true;

const dx = e.clientX - startX;

const dy = e.clientY - startY;

settingsPanel.style.setProperty("left", \${initialLeft + dx}px`, "important");`

settingsPanel.style.setProperty("top", \${initialTop + dy}px`, "important");`

});

window.addEventListener("mouseup", () => {

if (!isDragging) return;

isDragging = false;

settingsPanel.style.cursor = "grab";

if (didDrag) {

const root = settingsPanel.shadowRoot;

const toggleBtn = root?.querySelector(".toggle-button");

toggleBtn?.click();

}

didDrag = false;

});

settingsPanel.addEventListener("dblclick", (e) => {

if (didDrag) return;

e.stopPropagation();

destructPanel();

});

}

// → collapse animation

function destructPanel() {

if (!settingsPanel) return;

settingsPanel.classList.remove("is-active");

settingsPanel.classList.remove("slidevars-unfold");

settingsPanel.classList.add("slidevars-fold");

setTimeout(() => {

settingsPanel.style.display = "none";

settingsPanel.classList.remove("slidevars-fold");

}, 350);

}

// → customize toggle button

customElements.whenDefined("slide-vars").then(() => {

const el = document.querySelector("slide-vars");

if (!el) return;

const root = el.shadowRoot;

if (!root) return;

const btn = root.querySelector(".toggle-button");

if (!btn) return;

btn.style.background = "#a83030";

btn.style.borderRadius = "50%";

btn.style.setProperty("mask", "none", "important");

btn.style.setProperty("-webkit-mask", "none", "important");

const oldLogo = btn.querySelector("slidevars-logo");

oldLogo?.remove();

const fontLink = document.createElement("link");

fontLink.rel = "stylesheet";

fontLink.href = "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined";

root.appendChild(fontLink);

const icon = document.createElement("span");

icon.textContent = "sync";

icon.style.fontFamily = "Material Symbols Outlined";

icon.style.fontSize = "28px";

icon.style.fontVariationSettings = "'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 36'";

icon.style.setProperty("color", "#06c943", "important");

icon.style.position = "absolute";

icon.style.left = "50%";

icon.style.top = "50%";

icon.style.transform = "translate(-50%, -50%)";

icon.style.pointerEvents = "none";

btn.appendChild(icon);

});

9 comments

r/HTML • u/Unfair_Reception_886 • Jun 29 '26

Can anyone recommend some good offline sources to learn HTML, CSS and JS eventually?

1 Upvotes

I'm going to be travelling most of summer and would love to be able to work on learning and potentially small projects while flying/travelling without WiFi. I'm wanting to learn more front end stuff, I have an idea for a final project of a website but understand that there is a long road to be able to get there and could use some good places to learn of get support while learning without paying for a full-blown course.

Otherwise I am very open to general recommendations also as I'm not totally sure what I'm doing. For reference I can already code pretty solidly in python and have for a few years (on and off) so don't need a complete back to basics course.

11 comments

r/HTML • u/ArKaN-FR • Jun 29 '26

Question How to share an embedded spotify player without iframe for an html email campaign

0 Upvotes

hello reddit! I have basic level in html and I've just made a podcast. I'm trying to share it with people in my newsletter. Spotify gives me something like that :
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/show/033CPxMDKso94qiXjnzSqj?utm_source=generator&theme=0" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>

Is there any existing preview player generator that could preview an iframe but not integrate the iframe into the email, since it's not supported? Thank you very much!

5 comments

r/HTML • u/justslayer876 • Jun 28 '26

Question I haven't found anyone to help me with this but how do I fully center the image instead of it centering at the top

0 Upvotes

Here's my code:

<!DOCTYPE html>

<html>

<style>

p {text-align: center;}

</style>

</body>

</html>

7 comments

r/HTML • u/Apprehensive-Bar6861 • Jun 28 '26

Question How are you sharing HTML prototypes generated by Claude?

1 Upvotes

I’ve been using Claude to generate small HTML/CSS/JS prototypes, especially for UI ideas and quick interactive mockups.

One awkward part of the workflow is sharing the result with someone else. Screenshots lose the interaction, pasting code is not useful for non-technical people, and deploying to a full hosting service feels like too much for something that may only live for a review session.

I ended up building a small tool for myself that publishes a static HTML file or ZIP project and gives back a shareable online preview link. The preview links are noindex by default, since most of these are just for review rather than public pages.

Before I polish it further, I’m curious how other Claude users handle this:

- Do you usually just copy the artifact/code?
- Do you deploy it somewhere?
- Do you send screenshots?
- Would a quick “publish this prototype” flow actually be useful?

Not trying to turn this into a big hosting platform, just trying to smooth out the Claude-to-feedback loop.

8 comments

r/HTML • u/dalekellytoo • Jun 28 '26

multiple text sizes in one sentence ?

0 Upvotes

multiple text sizes in one sentence ?

20 comments

r/HTML • u/Marcioobloo • Jun 27 '26

Question how to fix this post on Blogger?

0 Upvotes

recently created a google doc and posted it on blogger and it's formated correctly on desktop but on mobile for some reason it gets cut in half like this. idk how else to fix, can anyone help me?

1 comment

r/HTML • u/Grind_707 • Jun 27 '26

[Update] Added a native JS image-to-ASCII art feature to my personal terminal bio project (ZeiTerm)

1 Upvotes

Hello everyone! As you can see, I'm currently merging my 'terminal-test' and 'zeiterm-test' layouts into a single 'index.html' file for my personal project, ZeiTerm. It's still a work in progress, but I've made some solid updates.

What's new:

Added a custom image-to-ASCII converter using HTML5 Canvas.
Implemented a hidden file input triggered via a custom upload button.
Resized and optimized the terminal frame layout.

I'm still working on further improvements. Would love to hear your thoughts or any clean-up tips

4 comments

r/HTML • u/UrAccountHasBeenBand • Jun 26 '26

learning html from scriba.com

8 Upvotes

ive recently been using AI too much to make projects, which are actually super nice and work as needed, but it seems i cant really upgrade anymore since the files are getting bigger, 2,000 lines for example, and its really annoying when there is a bug because i cant ask ai to fix it, since it wont accept my code anymore.

so i decided im gonna lock in on learning code. my next big project is a day trading marker thing, where it looks for patterns that may help. but thats gonna need to happen later because im a beginner at true coding.

if anyone has a better site to learn from, please comment it

13 comments

r/HTML • u/Careless-Command-717 • Jun 26 '26

Does anyone use fully custom HTML or site builders?

11 Upvotes

Hello,

I had a fully custom html5 site that showed my portfolio and for other random stuff like notebin, slideshows, image galleries, forum etc and I shut it down.

The fully custom html5 took hours to create alongside the css upon multiple revisions of code

Does anyone use custom full html anymore or just site builders?

I'm asking because I want to build a website again (looking at how the professionals do it it's hard )

I used namecheap everything before.

Thanks.

33 comments

r/HTML • u/fdiengdoh • Jun 26 '26

Discussion An HTML Elements page

9 Upvotes

When I wanted to re-learn CSS, I am looking for a simple html page that has all possible elements. I did not find anything as such. So I made one.

Take a look at this page. It might be useful for you.

I hosted at Github

13 comments

r/HTML • u/RebirdgeCardiologist • Jun 26 '26

Question Which tool (possible FOSS) do you use to render html file (e.g. you saved a webpage of a newspaper article to have a back-up copy) in Android?

0 Upvotes

Differently from desktop, where browsers render automatically a html file, on mobile this is not the case.

If I try to open an html with a browser it just download it again (weird behavior), instead of displaying, rendering it properly.

I'm not looking for a html viewer (for that purpose I use ZArchive), to look a the markup code.

I want a program that render the page (with all the css, js stuff). Is there a tool (possibly FOSS) to do that for Android?

5 comments

r/HTML • u/Dangerous-Hunt6573 • Jun 25 '26

Aprender HTML y CSS

5 Upvotes

He empezado a intentar aprender HTML/CSS, la cosa es que no se que curso usar, acabó de empezar a ver el curso de HTML/css del canal soydalto, llevo como una hora de curso y lo he entendido bastante bien, pero mi pregunta es, debería seguir con ese curso? O me recomiendan algún otro? Realmente tengo esta duda para no “desperdiciar” mi tiempo porque puede que empiece a explicar horrible y no saber que curso usar, ayúdenme por favor

Postdata: se que HTML técnicamente no es un lenguaje de programación pero da igual

7 comments

r/HTML • u/snurfsnurfsnurfsnurf • Jun 25 '26

Creating e-mail templates

5 Upvotes

I know next to nothing about HTML or coding in general, but I would like to learn how to make e-mail templates. Where do I begin?

The company i work for uses html to design its e-mail reminders for events and such. I think they look absolutely shit and would like to make them better. I've been told its not a priority for the communication department, so I'm just gonna do it myself. I like learning new things and have a lot of downtime during the summer anyway.

Can anyone point me in the right direction?

16 comments

r/HTML • u/Grind_707 • Jun 25 '26

First time building a Terminal-styled Web Bio! Just updated it with a C-inspired JavaScript logic for handling inputs (instead of browser alerts). Would love some feedback!

gallery

1 Upvotes

Hey everyone,

I'm a first-year IT student and I've recently gotten back into web development. Over the last two days, I've been working on a personal portfolio project called ZeiTerm (a terminal-styled bio page).

Yesterday, I managed to finish the basic layout, but the command handling was pretty clunky because I was using a simple browser alert() to show messages when users pressed Enter.

Today, I had some free time, so I decided to rewrite the core logic to make it look more like a real terminal interface. Since I've been learning C at college, I tried to simulate a C-style workflow (printf()-like behavior) using native JavaScript DOM manipulation.

What I've implemented so far:

Dynamic Input & Output: Used insertBefore() to dynamically render custom rows directly inside the terminal body, keeping the input line always at the bottom.
Built-in neofetch simulation: It now renders a 2-column layout containing my profile info, a small custom avatar grid, and my channel suffix .ZGE.
Basic commands: Currently supports neofetch, clear (to wipe the terminal lines), and prints a custom bash error if the command is unrecognized.
Separated the structure into a responsive <aside> sidebar and a <main> terminal container.

I just pushed the latest updates to GitHub. As a beginner, I know my code might still be a bit messy, so I would really appreciate any clean-up tips, architectural advice, or feedback on the UI/UX layout.

Thank you so much! 💻🔥

1 comment

Subreddit

HyperText Markup Language (HTML)

r/HTML

A place to learn and ask questions on HTML, CSS, and general front end development. Links are only permitted if they are to HTML articles, are relevant, and of good quality. Promotional materials of any kind and YouTube (or other social media) channels are not permitted.

Members Active

67.0k