Ejemplo de código HTML y CSS para la creación de una página web
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Comunidad Local</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
line-height: 1.6;
}
header {
background-color: #f8d56b;
padding: 20px;
text-align: center;
margin-bottom: 20px;
}
.search-bar {
padding: 8px;
width: 300px;
border: 1px solid #ccc;
border-radius: 4px;
}
.search-button {
padding: 8px 15px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
.content {
display: flex;
flex-wrap: wrap;
}
.main-content {
flex: 2;
padding-right: 20px;
}
.sidebar {
flex: 1;
background-color: #f9f9f9;
padding: 15px;
border-radius: 5px;
}
img, video {
max-width: 100%;
height: auto;
border-radius: 5px;
margin: 10px 0;
}
.media-container {
margin: 20px 0;
}
footer {
margin-top: 30px;
text-align: center;
padding: 10px;
background-color: #f8d56b;
border-radius: 5px;
}
</style>
</head>
<body>
<header>
<h1>Mi Comunidad Local</h1>
<div>
<input type="text" class="search-bar" placeholder="Buscar en el sitio...">
<button class="search-button">Buscar</button>
</div>
</header>
<div class="container">
<div class="content">
<div class="main-content">
<h2>Bienvenidos a Nuestra Comunidad</h2>
<p>Este es un párrafo introductorio sobre nuestra comunidad local. Aquí pueden describir las características principales, la historia, y lo que hace especial a su comunidad.</p>
<div class="media-container">
<h3>Lugares Emblemáticos</h3>
<!-- Ejemplo de imagen con etiqueta img -->
<img src="/placeholder.svg?height=300&width=500" alt="Imagen de un lugar emblemático de nuestra comunidad">
<p>Descripción del lugar emblemático mostrado en la imagen anterior.</p>
</div>
<div class="media-container">
<h3>Tradiciones y Cultura</h3>
<p>Párrafo sobre las tradiciones y aspectos culturales que identifican a nuestra comunidad.</p>
<!-- Ejemplo de video con etiqueta video -->
<video controls>
<source src="#" type="video/mp4">
Tu navegador no soporta el elemento de video.
</video>
<p>Video sobre una tradición local importante.</p>
</div>
<h3>Aspectos Destacados</h3>
<ol>
<li>Primer aspecto importante de nuestra comunidad</li>
<li>Segundo aspecto importante de nuestra comunidad</li>
<li>Tercer aspecto importante de nuestra comunidad</li>
</ol>
<h3>Actividades Comunitarias</h3>
<ul>
<li>Actividad comunitaria 1</li>
<li>Actividad comunitaria 2</li>
<li>Actividad comunitaria 3</li>
</ul>
</div>
<div class="sidebar">
<h3>Información Adicional</h3>
<p>Datos interesantes sobre nuestra comunidad.</p>
<h4>Enlaces de Interés</h4>
<ul>
<li><a href="#">Sitio oficial de la comunidad</a></li>
<li><a href="#">Historia completa</a></li>
<li><a href="#">Calendario de eventos</a></li>
</ul>
<h4>Galería</h4>
<img src="/placeholder.svg?height=150&width=200" alt="Imagen pequeña de la comunidad">
</div>
</div>
</div>
<footer>
<p>© 2025 - Página creada para la Actividad 2</p>
<p>Creado por: [Nombres de los integrantes del equipo]</p>
</footer>
</body>
</html>
No hay comentarios.:
Publicar un comentario