<code>&lt;!DOCTYPE html&gt; &lt;html lang="es"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="wi...

Pregunta de la clase:
Obteniendo datos del usuario
JUAN CARLOS ARCADIPANE

JUAN CARLOS ARCADIPANE

Pregunta
studenthace 7 años
<!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>
88 respuestas
para escribir tu comentario
    Lucia Ramos

    Lucia Ramos

    studenthace 7 días

    <!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}
    ;generatedImage.src = imageUrl;generatedImage.classList.remove('hidden'); // Mostrar la imagen} else {errorText.classList.remove('hidden'); // Mostrar mensaje de errorconsole.error("Estructura de respuesta inesperada:", result);}} catch (error) {errorText.classList.remove('hidden'); // Mostrar mensaje de errorconsole.error("Error al generar la imagen:", error);} finally {loadingDiv.classList.add('hidden'); // Ocultar el indicador de carga}});</script></body></html>

    Frank  García

    Frank García

    studenthace 8 días

    !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

    Yandel Luna mejia

    studenthace 15 días

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

    Bom Bom

    studenthace 17 días

    <!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
    ; corazon.style.animationDelay =
    ${Math.random() \* 5}s
    ; document.body.appendChild(corazon); } </script> </body> </html>

    José Francisco Vallejos

    José Francisco Vallejos

    studenthace 18 días

    estoy feliz de encontrar algo nuevo

    Eduardo guarniz

    Eduardo guarniz

    studenthace un mes

    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

    JOAQUIN JUAN LOPEZ PINILLA

    studenthace un mes

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

    Stephany Vail

    studenthace un mes

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

    Eduardo López Martínez

    studenthace un mes

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

    Eduardo López Martínez

    studenthace un mes

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

Curso Gratis de Programación Básica

Curso Gratis de Programación Básica

Programa desde cero, domina Javascript, entiende HTML y aprende de algoritmos. <strong>Sí, desde cero</strong>. Entenderás la lógica del código, cómo piensan los programadores y cómo programar juegos, proyectos y hasta robots y electrónica. Aprender a programar no es fácil, pero Platzi lo hace efectivo.

Curso Gratis de Programación Básica
Curso Gratis de Programación Básica

Curso Gratis de Programación Básica

Programa desde cero, domina Javascript, entiende HTML y aprende de algoritmos. <strong>Sí, desde cero</strong>. Entenderás la lógica del código, cómo piensan los programadores y cómo programar juegos, proyectos y hasta robots y electrónica. Aprender a programar no es fácil, pero Platzi lo hace efectivo.