
JUAN CARLOS ARCADIPANE
Pregunta<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Calculador de Peso</title> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <h1 class="h-1 mt-5 pt-5" >Tu peso en otro planeta</h1> <p>en la tierra pesas menos que en marte o jupiter</p> <button type="button" class="btn btn-outline-primary">Peso Final</button> <button type="button" class="btn btn-outline-danger"> <script> var g_tierra = 9.8; var g_marte = 3.7; var g_jupiter = 24.8; var peso = 90; var peso_final; peso_final = peso * g_marte / g_tierra; peso_final = parseInt(peso_final); document.write(peso_final); </script> </body> </html>

Lucia Ramos
<!DOCTYPE html><html lang="es"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Generador de Imágenes</title><script src="https://cdn.tailwindcss.com">\</script><style>body {font-family: 'Inter', sans-serif;background-color: #f0f0f0;display: flex;justify-content: center;align-items: center;min-height: 100vh;margin: 0;}.container {background-color: #ffffff;padding: 2rem;border-radius: 1rem;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);text-align: center;max-width: 90%;width: 500px;}img {max-width: 100%;height: auto;border-radius: 0.5rem;margin-top: 1.5rem;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);}.loader {border: 4px solid #f3f3f3;border-top: 4px solid #3498db;border-radius: 50%;width: 30px;height: 30px;animation: spin 1s linear infinite;margin: 2rem auto;}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}</style></head><body><div class="container"><h1 class="text-2xl font-bold text-gray-800 mb-4">Imagen Generada</h2><div id="loading" class="loader"></div><img id="generatedImage" src="" alt="Imagen generada" class="hidden"><p id="errorText" class="text-red-500 mt-4 hidden">Error al generar la imagen. Por favor, inténtalo de nuevo.</p></div>
<script>document.addEventListener('DOMContentLoaded', async () => {const loadingDiv = document.getElementById('loading');const generatedImage = document.getElementById('generatedImage');const errorText = document.getElementById('errorText');
try {// Prompt para la generación de la imagenconst prompt = "un dibujo en una libreta de una chica morena con gafas y mirada profunda , la chica es adolescente y tiene un lunar a la derecha arriba del labio , es pequeño";
// Payload para la API de generación de imágenesconst payload = {instances: { prompt: prompt },parameters: { "sampleCount": 1 }};
// Clave de API (vacía, se gestionará automáticamente en Canvas)const apiKey = "";const apiUrl =
https://generativelanguage.googleapis.com/v1beta/models/imagen-3.0-generate-002:predict?key=${apiKey}
// Realizar la solicitud a la APIconst response = await fetch(apiUrl, {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify(payload)});
const result = await response.json();
// Verificar la estructura de la respuesta y mostrar la imagenif (result.predictions && result.predictions.length > 0 && result.predictions[0].bytesBase64Encoded) {const imageUrl =
data:image/png;base64,${result.predictions\[0].bytesBase64Encoded}

Frank García
!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Llueve Amor</title> <style> body { margin: 0; background: black; overflow: hidden; cursor: default; }
canvas { display: block; position: absolute; top: 0; left: 0; z-index: 1; }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.center-message { font-family: 'Courier New', monospace; color: #ff69b4; font-size: 3rem; text-align: center; opacity: 0.5; } </style> </head> <body>
<canvas id="canvas"></canvas>
<div class="overlay"> <div class="center-message">SELENE 💖</div> </div>
<script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth; canvas.height = window.innerHeight;
const text = "TE QUIERO"; const fontSize = 16; const columns = Math.floor(canvas.width / (fontSize * 4)); const drops = new Array(columns).fill(1);
ctx.font = fontSize + "px monospace";
function draw() { ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#ff69b4"; for (let i = 0; i < drops.length; i++) { const x = i * fontSize * 4; const y = drops[i] * fontSize; ctx.fillText(text, x, y);
if (y > canvas.height && Math.random() > 0.975) { drops[i] = 0; }
drops[i]++; } }
setInterval(draw, 50);
window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); </script>
</body> </html> """
# Guardar archivo file_path = "/mnt/data/llueve_amor_selene_te_quiero.html" with open(file_path, "w", encoding="utf-8") as f: f.write(html_content_selene_quiero)

Yandel Luna mejia
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>¿Quieres ser mi novia?</title>
<style>
body {
font-family: 'Comic Sans MS', cursive, sans-serif;
background: linear-gradient(to top right, #ffd6e0, #ffe6f0);
text-align: center;
padding: 50px;
color: #ff2d55;
}
h1 {
font-size: 2.5em;
}
.question {
margin: 30px 0;
font-size: 1.8em;
}
.buttons {
display: flex;
justify-content: center;
gap: 20px;
}
button {
padding: 15px 30px;
font-size: 1.2em;
border: none;
border-radius: 12px;
cursor: pointer;
transition: transform 0.3s ease;
}
.yes {
background-color: #ff5c8d;
color: white;
}
.yes:hover {
transform: scale(1.1);
}
.no {
background-color: #ddd;
color: #aaa;
cursor: not-allowed;
}
.hidden {
display: none;
}
.response {
font-size: 2em;
margin-top: 40px;
}
</style>
</head>
<body>
<h2>💖 Juego del Amor 💖</h2>
<div class="question">¿Quieres ser mi novia?</div>
<div class="buttons">
<button class="yes" onclick="showLove()">Sí 😍</button>
<button class="no" disabled>No ❌</button>
</div>
<div id="response" class="response hidden">
🎉 ¡Yuju! ¡Sabía que dirías que sí!
<br><br>Prepárate para una historia increíble juntos 💘
</div>
<script>
function showLove() {
document.getElementById('response').classList.remove('hidden');
}
</script>
</body>
</html>
Bom Bom
<!DOCTYPE html> <html> <head> <title>Lluvia de Corazones</title> <style> .corazon { position: absolute; font-size: 20px; animation: caer 5s linear infinite; } @keyframes caer { 0% { transform: translateY(-100vh); } 100% { transform: translateY(100vh); } } </style> </head> <body> <script> for (let i = 0; i < 100; i++) { const corazon = document.createElement('div'); corazon.classList.add('corazon'); corazon.innerHTML = '❤️'; corazon.style.left =
${Math.random() \* 100}vw
${Math.random() \* 5}s
José Francisco Vallejos
estoy feliz de encontrar algo nuevo

Eduardo guarniz
Para Ti, con Todo Mi Amor
Hoy no quiero escribir un mensaje común. Hoy quiero decirte que eres la razón por la que sonrío cada día, que tus palabras me calman y tu presencia me llena el alma.
Gracias por existir, por acompañarme, por ser tú. No hay día que pase sin que mi corazón diga en silencio: “Te amo”.
❤️Con todo mi amor, Tu persona especial 💌
JOAQUIN JUAN LOPEZ PINILLA
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NeuroLink Edu - Gafas de Realidad Aumentada para Educación</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
text-align: center;
color: #333;
}
p {
line-height: 1.6;
color: #555;
}
.pros-cons {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
.pros-cons div {
flex: 1;
margin: 10px;
padding: 20px;
background-color: #e0f7fa;
border: 1px solid #b2ebf2;
}
.demo {
margin-top: 20px;
text-align: center;
}
.demo video {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<h2>NeuroLink Edu</h2>
<h3>Gafas de Realidad Aumentada para Educación</h3>
<p>NeuroLink Edu son gafas de realidad aumentada diseñadas para mejorar la experiencia educativa. Proyectan lecciones interactivas adaptadas al estilo de aprendizaje de cada usuario, ya sea visual, auditivo o kinestésico. Según la UNESCO, la personalización mejora el aprendizaje en un 47%.</p>
<div class="pros-cons">
<div>
<h4>Pros</h4>
<ul>
<li>Personalización del aprendizaje.</li>
<li>Mejora la interacción y el compromiso del estudiante.</li>
<li>Acceso a contenido educativo inmersivo y atractivo.</li>
<li>Adaptación a diferentes estilos de aprendizaje.</li>
<li>Posible aumento en la retención de información.</li>
</ul>
</div>
<div>
<h4>Contras</h4>
<ul>
<li>Pueden ser costosas.</li>
<li>Requisitos técnicos y de mantenimiento.</li>
<li>Posibles problemas de salud visual con uso prolongado.</li>
<li>No todos los estudiantes pueden adaptarse fácilmente.</li>
<li>Dependencia de la tecnología.</li>
</ul>
</div>
</div>
<div class="demo">
<h4>Demo en Vivo</h4>
<p>A continuación, se muestra un fragmento de una clase de historia "inmersiva".</p>
<video controls>
<source src="demo-historia.mp4" type="video/mp4">
Tu navegador no soporta la etiqueta de video.
</video>
</div>
</div>
</body>
</html>
Stephany Vail
<!-- Asenikady - Arte en Crochet | Landing Page Mockup --><!DOCTYPE html><html lang="es"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Asenikady – Arte en Crochet</title> <!-- Tailwind CDN for mockup purposes --> <script src="https://cdn.tailwindcss.com">\</script> </head> <body class="font-sans antialiased bg-rose-50 text-gray-800"> <!-- Header & Hero --> <header class="bg-rose-100/80 backdrop-blur sticky top-0 z-50 shadow-sm"> <div class="container mx-auto flex items-center justify-between p-4"> <h1 class="text-2xl font-bold tracking-tight text-rose-600"> Asenikady </h2> <nav class="hidden md:flex gap-6 text-sm"> <a href="#inicio" class="hover:text-rose-600">Inicio</a> <a href="#sobre" class="hover:text-rose-600">Sobre mí</a> <a href="#tienda" class="hover:text-rose-600">Tienda</a> <a href="#testimonios" class="hover:text-rose-600">Testimonios</a> <a href="#blog" class="hover:text-rose-600">Blog</a> <a href="#contacto" class="hover:text-rose-600">Contacto</a> </nav> <a href="#tienda" class="md:hidden inline-block rounded-full bg-rose-500 px-4 py-2 text-white text-sm font-medium shadow hover:bg-rose-600" >Ver productos</a > </div> </header><!-- Hero Section --> <section id="inicio" class="relative overflow-hidden"> <div class="container mx-auto flex flex-col-reverse md:flex-row items-center py-16 gap-8"> <div class="w-full md:w-1/2 space-y-6"> <h2 class="text-4xl md:text-5xl font-extrabold leading-tight text-rose-700"> Crochet con amor hecho a mano en Guatemala </h3> <p class="text-lg"> Diseños únicos y personalizados, tejidos punto a punto con dedicación. </p> <div class="flex gap-4"> <a href="#tienda" class="rounded-lg bg-rose-600 px-6 py-3 text-white font-semibold shadow-lg hover:bg-rose-700" >Explora la colección</a > <a href="#contacto" class="rounded-lg border border-rose-600 px-6 py-3 text-rose-600 font-semibold hover:bg-rose-50" >Pedidos personalizados</a > </div> </div> <div class="w-full md:w-1/2"> <!-- Placeholder hero image --> <img src="https://images.unsplash.com/photo-1542838728-7c75f44f37f1?auto=format\&fit=crop\&w=800\&q=80" alt="Productos de crochet Asenikady" class="rounded-2xl shadow-lg" /> </div> </div> </section>
<!-- Sobre mí --> <section id="sobre" class="bg-white py-16"> <div class="container mx-auto grid md:grid-cols-2 gap-10 items-center"> <div> <img src="https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format\&fit=crop\&w=600\&q=80" alt="Sobre mí" class="rounded-2xl shadow-md" /> </div> <div class="space-y-4"> <h3 class="text-3xl font-bold text-rose-700">Hola, soy [Tu Nombre]</h4> <p> Fundadora de Asenikady. Desde pequeña me enamoré del crochet y hoy convierto hilos en piezas llenas de historia y cariño. </p> <p> Cada pieza cuenta con inspiración guatemalteca, colores vibrantes y texturas suaves que abrazan. </p> </div> </div> </section>
<!-- Tienda (catálogo breve) --> <section id="tienda" class="py-16 bg-rose-50"> <div class="container mx-auto text-center mb-10"> <h3 class="text-3xl font-bold text-rose-700 mb-2">Tienda</h4> <p class="max-w-xl mx-auto">Explora nuestras categorías favoritas</p> </div> <div class="container mx-auto grid sm:grid-cols-2 md:grid-cols-3 gap-8"> <!-- Producto card ejemplo --> <div class="bg-white rounded-2xl shadow-lg p-4 flex flex-col"> <img src="https://images.unsplash.com/photo-1600180758890-6fdb51c31305?auto=format\&fit=crop\&w=500\&q=80" alt="Amigurumi" class="rounded-xl mb-4" /> <h4 class="font-semibold text-lg">Amigurumi Conejito</h5> <span class="text-rose-600 font-bold mt-1">Q125</span> <button class="mt-auto bg-rose-600 text-white rounded-lg py-2 hover:bg-rose-700"> Comprar </button> </div> <!-- Repetir cards para más productos --> </div> <div class="text-center mt-10"> <a href="#contacto" class="text-rose-700 underline hover:text-rose-900" >¿Buscas algo personalizado? Contáctame</a > </div> </section>
<!-- Testimonios --> <section id="testimonios" class="bg-white py-16"> <div class="container mx-auto text-center mb-10"> <h3 class="text-3xl font-bold text-rose-700 mb-2">Testimonios</h4> </div> <div class="container mx-auto grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Testimonio card ejemplo --> <div class="bg-rose-50 rounded-2xl p-6 shadow"> <p class="italic"> “El amigurumi que pedí llegó rapidísimo y es hermoso. ¡Gracias As

Eduardo López Martínez
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Página Web</title>
</head>
<body style="background-color: #ffffff; font-family: Arial, sans-serif;">
<!-- Título -->
<h1 style="text-align: center; color: yellow; font-size: 15pt; font-family: Arial;">PEGINA WEB</h2>
<!-- Párrafo con definición -->
<p style="text-align: left; color: black; font-size: 12pt; font-family: Arial;">
Una página web es un documento digital que forma parte de un sitio web y puede ser accedido mediante un navegador de internet.
Contiene información en diversos formatos como texto, imágenes, videos o enlaces a otras páginas.
Está escrita usualmente en lenguajes como HTML, CSS y JavaScript.
Cada página web posee una dirección única llamada URL.
Se utiliza para comunicar, informar, vender o interactuar con los usuarios en línea.
</p>
<!-- Datos de identificación -->
<p style="text-align: right; font-size: 10pt; font-family: Arial; color: black;">
Nombre: Daniel Macías Martinez<br>
Grupo: 203<br>
Asignatura: Cultura Digital
</p>
</body>
</html>

Eduardo López Martínez
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Primera Página Web</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 40px;
}
h1 {
color: #2c3e50;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h2>Bienvenido a mi página web</h2>
<p>Esta es una página de ejemplo creada con HTML y CSS.</p>
<p>Puedes personalizarla y agregar más contenido según tus necesidades.</p>
</body>
</html>