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>
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>
Alison Mondragón
<!DOCTYPE html><html lang="es"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Tienda Apple - iPhones</title> <script src="https://cdn.tailwindcss.com">\</script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700\&display=swap" rel="stylesheet"> <style> body { font-family: 'Inter', sans-serif; } </style> </head> <body class="bg-gray-100 text-gray-800"> <!-- Header --> <header class="bg-white shadow sticky top-0 z-50"> <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center"> <h1 class="text-2xl font-bold text-blue-600">Apple Store</h2> <nav class="space-x-4"> <a href="#productos" class="hover:underline">Productos</a> <a href="#carrito" class="hover:underline">Carrito</a> </nav> </div> </header> <!-- Productos --> <section id="productos" class="max-w-6xl mx-auto px-4 py-12"> <h2 class="text-3xl font-bold mb-8 text-center">iPhones disponibles</h3> <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"> <div class="bg-white p-4 rounded shadow"> <img src="https://www.apple.com/newsroom/images/product/iphone/standard/Apple\_iPhone-15-Pro-Lineup\_09122023\_big.jpg.large.jpg" class="rounded mb-4" alt="iPhone 15 Pro Max"> <h3 class="text-xl font-semibold">iPhone 15 Pro Max</h4> <p class="text-gray-600">256GB - Titanio Azul</p> <p class="text-lg font-bold my-2">$1199</p> <button onclick="addToCart('iPhone 15 Pro Max', 1199)" class="bg-blue-600 text-white px-4 py-2 rounded">Agregar al carrito</button> </div><div class="bg-white p-4 rounded shadow"> <img src="https://www.apple.com/v/iphone-14/f/images/overview/compare/compare\_iphone\_14\_\_cyz4w992xhyu\_large.jpg" class="rounded mb-4" alt="iPhone 14"> <h3 class="text-xl font-semibold">iPhone 14</h4> <p class="text-gray-600">128GB - Morado</p> <p class="text-lg font-bold my-2">$799</p> <button onclick="addToCart('iPhone 14', 799)" class="bg-blue-600 text-white px-4 py-2 rounded">Agregar al carrito</button> </div>
<div class="bg-white p-4 rounded shadow"> <img src="https://www.apple.com/v/iphone-13/f/images/overview/hero/hero\_static\_\_e5c1xo3y4qi2\_large.jpg" class="rounded mb-4" alt="iPhone 13"> <h3 class="text-xl font-semibold">iPhone 13</h4> <p class="text-gray-600">128GB - Rosa</p> <p class="text-lg font-bold my-2">$699</p> <button onclick="addToCart('iPhone 13', 699)" class="bg-blue-600 text-white px-4 py-2 rounded">Agregar al carrito</button> </div>
<div class="bg-white p-4 rounded shadow"> <img src="https://www.apple.com/newsroom/images/product/iphone/standard/apple\_iphone\_se\_2022\_red\_hero\_220308\_big.jpg.large.jpg" class="rounded mb-4" alt="iPhone SE"> <h3 class="text-xl font-semibold">iPhone SE (2022)</h4> <p class="text-gray-600">64GB - Rojo</p> <p class="text-lg font-bold my-2">$429</p> <button onclick="addToCart('iPhone SE', 429)" class="bg-blue-600 text-white px-4 py-2 rounded">Agregar al carrito</button> </div> </div>
</section> <!-- Carrito --> <section id="carrito" class="max-w-4xl mx-auto px-4 py-12"> <h2 class="text-2xl font-bold mb-6">Carrito de Compras</h3> <div id="cart-items" class="bg-white p-4 rounded shadow mb-4"></div> <p class="text-xl font-semibold">Total: $<span id="total">0.00</span></p><form id="payment-form" onsubmit="submitPayment(event)" class="mt-6 bg-white p-4 rounded shadow"> <h3 class="text-xl font-semibold mb-4">Método
Ana Vázquez
\<!DOCTYPE html> \<html lang="es"> \<head> \<meta charset="UTF-8" /> \<title>Maqueta 3D Desértica con Paneles y Sol\</title> \<style>   body { margin: 0; overflow: hidden; }   canvas { display: block; } \</style> \</head> \<body> \<!-- Incluye la librería Three.js desde CDN --> \<script src="https://cdn.jsdelivr.net/npm/three@0.152.0/build/three.min.js">\</script> \<script>   // Variables globales   let scene, camera, renderer;   let sun, sunLight;   let panels = \[];   init();   animate();   function init() {   // Escena   scene = new THREE.Scene();   scene.background = new THREE.Color(0xbfd1e5);   // Cámara   camera = new THREE.PerspectiveCamera(   60,   window.innerWidth / window.innerHeight,   0.1,   1000   );   camera.position.set(50, 50, 50);   camera.lookAt(0, 0, 0);   // Renderizador   renderer = new THREE.WebGLRenderer({ antialias: true });   renderer.setSize(window.innerWidth, window.innerHeight);   document.body.appendChild(renderer.domElement);   // Luz ambiental   const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);   scene.add(ambientLight);   // Sol (luz direccional que simula el sol)   sunLight = new THREE.DirectionalLight(0xffffff, 1.0);   scene.add(sunLight);   // Esfera para representar el sol (opcional, solo visual)   sun = new THREE.Mesh(   new THREE.SphereGeometry(2, 16, 16),   new THREE.MeshBasicMaterial({ color: 0xffff00 })   );   scene.add(sun);   // Terreno (superficie de arena)   const terrainGeometry = new THREE.PlaneGeometry(200, 200, 50, 50);   const terrainMaterial = new THREE.MeshLambertMaterial({ color: 0xD2B48C }); // color arena   const terrain = new THREE.Mesh(terrainGeometry, terrainMaterial);   terrain.rotation.x = -Math.PI / 2;   scene.add(terrain);   // Crear algunos "piedras" pequeñas (básicas)   for (let i = 0; i < 50; i++) {   const stoneGeometry = new THREE.SphereGeometry(0.3, 8, 8);   const stoneMaterial = new THREE.MeshLambertMaterial({ color: 0x808080 });   const stone = new THREE.Mesh(stoneGeometry, stoneMaterial);   stone.position.x = Math.random() \* 180 - 90;   stone.position.z = Math.random() \* 180 - 90;   stone.position.y = 0.3; // sobre el suelo   scene.add(stone);   }   // Crear algunos cactus simples   for (let i = 0; i < 10; i++) {   const cactus = new THREE.Mesh(   new THREE.CylinderGeometry(0.2, 0.2, 2, 8),   new THREE.MeshLambertMaterial({ color: 0x006400 }) // verde oscuro   );   cactus.position.x = Math.random() \* 180 - 90;   cactus.position.z = Math.random() \* 180 - 90;   cactus.position.y = 1; // altura de la planta   scene.add(cactus);   }   // Crear paneles solares (como rectángulos planos)   for (let i = 0; i < 5; i++) {   const panelGeometry = new THREE.PlaneGeometry(2, 1);   const panelMaterial = new THREE.MeshLambertMaterial({ color: 0x333333 });   const panel = new THREE.Mesh(panelGeometry, panelMaterial);   panel.position.x = Math.random() \* 100 - 50;   panel.position.z = Math.random() \* 50 - 25;   panel.position.y = 1;   scene.add(panel);   panels.push(panel);   }   // Evento de ajuste de tamaño   window.addEventListener('resize', () => {   camera.aspect = window.innerWidth / window.innerHeight;   camera.updateProjectionMatrix();   renderer.setSize(window.innerWidth, window.innerHeight);   });   }   function animate() {   requestAnimationFrame(animate);   const time = Date.now() \* 0.001; // tiempo en segundos   // Movimiento del sol en un arco   const radius = 100;   const sunX = radius \* Math.cos(time \* 0.2);   const sunY = radius \* Math.sin(time \* 0.2);   const sunZ = radius \* Math.sin(time \* 0.1);   sun.position.set(sunX, sunY + 50, sunZ);   sunLight.position.copy(sun.position);   sunLight.target.position.set(0, 0, 0);   sunLight.target.updateMatrixWorld();   // Animar la posición del sol (visual) y la luz   // También puede ajustar la intensidad de la luz si quieres efectos de día y noche   // Orientar paneles solares hacia el sol   panels.forEach(panel => {   // Hacer que los paneles "miren" hacia el sol   panel.lookAt(sun.position);   });   renderer.render(scene, camera);   } \</script> \</body> \</html>
Amy
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Reproductor de Notas</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 0 10px #ccc; text-align: center; } h2 { margin-bottom: 20px; } .note-button { padding: 10px 20px; margin: 5px; font-size: 18px; border: none; border-radius: 8px; background-color: #3498db; color: white; cursor: pointer; transition: background-color 0.3s; } .note-button:hover { background-color: #2980b9; } </style> </head> <body> <div class="container"> <h3>Reproductor de Notas</h3> <button class="note-button" onclick="playFrequency(523)">523 Hz</button> <button class="note-button" onclick="playFrequency(587)">587 Hz</button> <button class="note-button" onclick="playFrequency(659)">659 Hz</button> <button class="note-button" onclick="playFrequency(698)">698 Hz</button> <button class="note-button" onclick="playFrequency(783)">783 Hz</button> </div>
<script> function playFrequency(freq) { const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const oscillator = audioContext.createOscillator();
oscillator.type = 'sine'; oscillator.frequency.setValueAtTime(freq, audioContext.currentTime); oscillator.connect(audioContext.destination); oscillator.start();
// Detener el sonido después de 1 segundo oscillator.stop(audioContext.currentTime + 1); } </script> </body> </html>
Juan José Cardona Bolaños
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carta para mi Lore</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to bottom, #fff7b2, #ffcc00);
font-family: 'Arial', sans-serif;
overflow: hidden;
}
.container {
text-align: center;
position: relative;
}
h1 {
font-size: 2.5rem;
color: #d48806;
position: relative;
animation: fadeIn 3s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}
.flowers {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
}
.flower {
position: absolute;
width: 50px;
height: 50px;
background: yellow;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
animation: float 3s infinite alternate ease-in-out;
}
.flower:nth-child(1) { top: 0; left: 30%; animation-delay: 0.2s; }
.flower:nth-child(2) { top: 20%; left: 70%; animation-delay: 0.4s; }
.flower:nth-child(3) { top: 50%; left: 10%; animation-delay: 0.6s; }
.flower:nth-child(4) { top: 80%; left: 50%; animation-delay: 0.8s; }
.flower:nth-child(5) { top: 30%; left: 90%; animation-delay: 1s; }
@keyframes float {
from { transform: translateY(0) rotate(0deg); }
to { transform: translateY(-20px) rotate(15deg); }
}
.message {
font-size: 1.5rem;
color: #d48806;
margin-top: 20px;
opacity: 0;
animation: fadeIn 3s ease-in-out forwards 1s;
}
</style>
</head>
<body>
<div class="container">
<h2>Te quelo mucho mi Lore</h2>
<div class="flowers">
<div class="flower"></div>
<div class="flower"></div>
<div class="flower"></div>
<div class="flower"></div>
<div class="flower"></div>
</div>
</div>
</body>
</html>
maycol Sillochoquehuanca
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Quieres ser mi novia</title>
<meta name="viewport" content=
"width=device-width, user-scalable=no, initial-scale 1.0, maximum-scale=1.0, minimum-scale=1.0"
<link rel="stylesheet" href="main.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/
jquery.min.js"
></script>
<script>
$(document).ready(function(){
$(".p1").hover(function(){
arriba Math.random()*(400-1) +1;
abajo Math.random() (609-1) +1;
$(this).css('top', arriba);
$(this).css('left', abajo);
});
});
function dijosi(){
document.getElementById('si').style.display
'block';
}
</script>
</head>
<body>
+
<div class="contenedor">
<div class="titulo">
<hi¿Quieres ser mi novia?</h2>
</div>
<div class="opciones">
<p class="p1">No</p>
<p onclick="dijosi()" class="p2">51</p>
<div id="si">
<h3>Sabria que querrias mylovec/h2>
30,1 mil
...
</div>
</div>
</div>
</body>
</html>
