ChatGPT-4o
Aquí tienes un ejemplo de una página web titulada "Los grandes gatos", con un menú, imágenes flotantes, descripciones y un botón lateral que reenvía al inicio. He incluido algunos estilos básicos y efectos especiales:
<![CDATA[
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Los grandes gatos</title>
<style>
body {
font-family: 'Georgia', serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
.container {
text-align: center;
padding: 20px;
}
.title {
font-size: 3em;
margin-bottom: 20px;
color: #333;
text-shadow: 2px 2px 4px #aaa;
position: relative;
animation: glow 1.5s infinite alternate;
}
@keyframes glow {
from {
text-shadow: 0 0 10px #ff6, 0 0 20px #ff6, 0 0 30px #ff6;
}
to {
text-shadow: 0 0 20px #f06, 0 0 30px #f06, 0 0 40px #f06;
}
}
.menu {
list-style: none;
padding: 0;
margin: 20px 0;
}
.menu li {
display: inline;
margin: 0 10px;
}
.menu a {
text-decoration: none;
color: #007BFF;
font-size: 1.2em;
position: relative;
}
.menu a::before {
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #007BFF;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out;
}
.menu a:hover::before {
visibility: visible;
transform: scaleX(1);
}
.content {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.animal {
width: 300px;
margin: 20px;
text-align: left;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden;
}
.animal img {
width: 100%;
height: auto;
}
.description {
padding: 15px;
}
.back-to-top {
position: fixed;
right: 10px;
bottom: 10px;
background-color: #007BFF;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.back-to-top:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">Los grandes gatos</h1>
<ul class="menu">
<li><a href="#leon">León</a></li>
<li><a href="#tigre">Tigre</a></li>
<li><a href="#guepardo">Guepardo</a></li>
<li><a href="#leopardo">Leopardo</a></li>
<li><a href="#puma">Puma</a></li>
<li><a href="#jaguar">Jaguar</a></li>
</ul>
<div class="content">
<div id="leon" class="animal">
<img src="https://via.placeholder.com/300" alt="León">
<div class="description">
<h2>León</h2>
<p>El león es conocido como el rey de la selva. Vive en sabanas y pastizales y es uno de los felinos más grandes.</p>
</div>
</div>
<div id="tigre" class="animal">
<img src="https://via.placeholder.com/300" alt="Tigre">
<div class="description">
<h2>Tigre</h2>
<p>El tigre es el felino más grande del mundo y se distingue por sus rayas oscuras sobre un pelaje naranja.</p>
</div>
</div>
<div id="guepardo" class="animal">
<img src="https://via.placeholder.com/300" alt="Guepardo">
<div class="description">
<h2>Guepardo</h2>
<p>El guepardo es el animal terrestre más rápido y se caracteriza por su cuerpo esbelto y manchas negras.</p>
</div>
</div>
<div id="leopardo" class="animal">
<img src="https://via.placeholder.com/300" alt="Leopardo">
<div class="description">
<h2>Leopardo</h2>
<p>El leopardo es un felino ágil y fuerte que vive en diversas regiones de África y Asia.</p>
</div>
</div>
<div id="puma" class="animal">
<img src="https://via.placeholder.com/300" alt="Puma">
<div class="description">
<h2>Puma</h2>
<p>El puma es un gran felino que habita en América y es conocido por su gran capacidad de adaptarse a diferentes hábitats.</p>
</div>
</div>
<div id="jaguar" class="animal">
<img src="https://via.placeholder.com/300" alt="Jaguar">
<div class="description">
<h2>Jaguar</h2>
<p>El jaguar es el felino más grande de América y se distingue por su pelaje con manchas en forma de rosetas.</p>
</div>
</div>
</div>
</div>
<button class="back-to-top" onclick="scrollToTop()">Inicio</button>
<script>
function scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
</script>
</body>
</html>]]>En este código:
Título y Menú: El título "Los grandes gatos" tiene efectos de animación con @keyframes glow. El menú utiliza pseudo-elementos ::before para crear una línea que aparece al pasar el mouse sobre los enlaces.
Contenedor de Contenido: Los gatos grandes están organizados en divs con la clase .animal, que tienen imágenes y descripciones.
Botón de Inicio: Un botón flotante en la parte inferior derecha de la página permite volver al inicio con un efecto de desplazamiento suave.
Puedes reemplazar las URL de las imágenes https://via.placeholder.com/300 con imágenes reales de cada animal.
