Asistente de sitios web
Crea sitios web de una página basados en especificaciones del usuario.
¡Copia este prompt en nuestra Consola de desarrollador para probarlo tú mismo!
Content | |
---|---|
System | Tu tarea es crear un sitio web de una página basado en las especificaciones dadas, entregado como un archivo HTML con JavaScript y CSS integrados. El sitio web debe incorporar una variedad de características de diseño atractivas e interactivas, como menús desplegables, texto y contenido dinámico, botones clicables y más. Asegúrate de que el diseño sea visualmente atractivo, responsivo y fácil de usar. El código HTML, CSS y JavaScript debe estar bien estructurado, eficientemente organizado y debidamente comentado para facilitar su lectura y mantenimiento. |
User | Crea un sitio web de una página para una plataforma de aprendizaje en línea llamada “EduQuest” con las siguientes características y secciones: 1. Una barra de navegación fija con enlaces a categorías de cursos (Matemáticas, Ciencias, Idiomas, Artes) y una barra de búsqueda. 2. Una sección hero con un fondo de video mostrando estudiantes aprendiendo en línea, un lema dinámico que rota entre “Aprende a tu propio ritmo”, “Descubre nuevas pasiones” y “Expande tus horizontes” cada 3 segundos, y un botón “Comenzar” que lleva a un catálogo de cursos. 3. Una sección de cursos destacados que muestra tarjetas de cursos con marcadores de posición para imágenes de cursos, títulos, instructores y descripciones. 4. Una sección interactiva de “Rutas de Aprendizaje” con un cuestionario corto para determinar estilos de aprendizaje e intereses, y un botón para comenzar el cuestionario. 5. Una sección de “Historias de Éxito” con testimonios de estudiantes satisfechos, con marcadores de posición para el texto del testimonio y nombres de estudiantes. 6. Un pie de página con enlaces al blog de la plataforma, FAQ, política de privacidad y un botón “Contáctanos” que abre una ventana modal con un formulario de contacto e información de atención al cliente. Incluye contenido de relleno para el fondo de video, tarjetas de cursos y testimonios. Integra los estilos CSS dentro de la etiqueta <style> en la sección <head> y coloca el código JavaScript dentro de la etiqueta <script> al final de la sección <body> .El código JavaScript debe manejar el lema dinámico en la sección hero, rotando entre los diferentes lemas cada 3 segundos. |
Ejemplo de salida
Este código crea un sitio web de una página para “EduQuest” con las siguientes características y secciones:
Una barra de navegación fija con enlaces a categorías de cursos (Matemáticas, Ciencias, Idiomas, Artes) y una barra de búsqueda.
Una sección hero con un fondo de video de marcador de posición, un lema dinámico que rota entre “Aprende a tu propio ritmo”, “Descubre nuevas pasiones” y “Expande tus horizontes” cada 3 segundos, y un botón “Comenzar”.
Una sección de cursos destacados que muestra tarjetas de cursos con marcadores de posición para imágenes de cursos, títulos, instructores y descripciones.
Una sección de “Historias de Éxito” con testimonios de estudiantes satisfechos, con marcadores de posición para el texto del testimonio y nombres de estudiantes.
Un pie de página con enlaces al blog de la plataforma, FAQ, política de privacidad y un botón “Contáctanos”.
Los estilos CSS están integrados dentro de la etiqueta
<style>
en la sección<head>
, y el código JavaScript está colocado dentro de la etiqueta<script>
al final de la sección<body>
.El código JavaScript maneja el lema dinámico en la sección hero, rotando entre los diferentes lemas cada 3 segundos usando la función setInterval.
Ten en cuenta que el fondo de video, las imágenes de los cursos y los testimonios son marcadores de posición y deben ser reemplazados con contenido real.
Solicitud de API
Was this page helpful?