<!
DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mis Mejores Excursiones ???</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
h1, h2 {
color: #2c3e50;
}
.container {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
table, th, td {
border: 1px solid #ddd;
border-collapse: collapse;
padding: 8px;
text-align: left;
}
th {
background-color: #3498db;
color: white;
}
form input, form button {
padding: 10px;
margin-top: 5px;
border-radius: 4px;
border: 1px solid #ccc;
}
form button {
background-color: #2ecc71;
color: white;
cursor: pointer;
border: none;
}
</style>
</head>
<body>
<div class="container">
<h1>?? Mis Excursiones Favoritas</h1>
<p>Un resumen visual y auditivo de mis mejores aventuras al aire libre.</p>
</div>
<div class="container">
<h2>Recuerdo Visual: La Monta�a</h2>
<img src="ruta_a_tu_imagen_de_montana.jpg" alt="Vista panor�mica desde la
cima de la monta�a, un d�a soleado." width="600">
<p>�El esfuerzo vali� la pena por estas vistas!</p>
</div>
<div class="container">
<h2>Sonidos de la Naturaleza</h2>
<p>El canto de los p�jaros que grab� en el bosque.</p>
<audio controls>
<source src="ruta_a_tu_audio_del_bosque.mp3" type="audio/mpeg">
Tu navegador no soporta el elemento de audio.
</audio>
</div>
<div class="container">
<h2>Un Clip de la Aventura</h2>
<p>Video corto del r�o durante el descenso.</p>
<video width="320" height="240" controls
poster="ruta_a_tu_imagen_de_portada_video.jpg">
<source src="ruta_a_tu_video_del_rio.mp4" type="video/mp4">
Tu navegador no soporta el elemento de video.
</video>
</div>
<div class="container">
<h2>Resumen de Excursiones (Tabla)</h2>
<table>
<thead>
<tr>
<th>Lugar</th>
<th>Fecha</th>
<th>Dificultad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cerro Negro</td>
<td>2024-05-10</td>
<td>Media</td>
</tr>
<tr>
<td>Lago Escondido</td>
<td>2023-11-21</td>
<td>Baja</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<h2>�Sugiere tu pr�xima Excursi�n!</h2>
<form action="/submit-sugerencia" method="post">
<label for="lugar">Lugar sugerido:</label><br>
<input type="text" id="lugar" name="lugar" required placeholder="Ej:
Ca��n del Colorado"><br><br>
<label for="contacto">Tu correo (opcional):</label><br>
<input type="email" id="contacto" name="contacto"
placeholder="opcional@[Link]"><br><br>
<button type="submit">Enviar Sugerencia</button>
</form>
</div>
</body>
</html>