RETO 2
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página Web con Carrusel</title>
<style>
/* Estilos generales */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
/* Estilos del Menú */
nav {
background-color: #333;
color: white;
padding: 10px 20px;
}
.barra-navegacion {
display: flex;
justify-content: space-between;
align-items: center;
}
.menu {
list-style: none;
display: flex;
}
.menu-item {
margin: 0 15px;
position: relative;
}
.menu-item a {
color: white;
text-decoration: none;
padding: 10px 15px;
display: block;
}
.menu-item a:hover {
background-color: #444;
}
.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #444;
padding: 10px;
list-style: none;
width: 160px;
}
.submenu li a {
color: white;
padding: 8px 10px;
display: block;
}
.submenu li a:hover {
background-color: #555;
}
.menu-item:hover .submenu {
display: block;
}
/* Estilos del Carrusel */
.carrusel-contenedor {
display: flex;
justify-content: space-between;
margin: 30px auto;
max-width: 1200px;
}
.carrusel {
position: relative;
width: 80%;
overflow: hidden;
border-radius: 10px;
}
.carrusel-interior {
display: flex;
transition: transform 0.5s ease-in-out;
}
.carrusel img {
width: 100%;
height: auto;
object-fit: cover;
}
.botones-de-carrusel {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.prev, .next {
background-color: rgba(0, 0, 0, 0.5);
color: white;
font-size: 24px;
padding: 10px;
cursor: pointer;
border: none;
}
.prev:hover, .next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Estilos de las Imágenes a la Izquierda */
.image-sidebar {
width: 15%;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
overflow: hidden;
}
.image-sidebar img {
width: 100px;
height: 100px;
object-fit: contain;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.image-sidebar img.active {
opacity: 1;
}
/* Estilos del Formulario de Registro */
.registro-contenedor {
max-width: 500px;
margin: 30px auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.registro-contenedor h2 {
text-align: center;
margin-bottom: 20px;
}
.registro-contenedor input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 4px;
}
.registro-contenedor button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.registro-contenedor button:hover {
background-color: #0056b3;
}
/* Estilos del pie de página */
footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
/* Estilos de las Secciones */
section {
padding: 50px 20px;
margin: 20px 0;
background-color: #f0f0f0;
}
#nosotros, #vision, #mision, #servicios {
background-color: #e3e3e3;
}
</style>
</head>
<body>
<!-- Menú de navegación -->
<nav>
<div class="barra-navegacion">
<div class="logo">Mi Página</div>
<ul class="menu">
<li class="menu-item"><a href="#inicio">Inicio</a></li>
<li class="menu-item">
<a href="#">Nosotros</a>
<ul class="submenu">
<li><a href="#vision">Visión</a></li>
<li><a href="#mision">Misión</a></li>
</ul>
</li>
<li class="menu-item"><a href="#servicios">Servicios</a></li>
</ul>
</div>
</nav>
<!-- Sección de Inicio -->
<section id="inicio">
<h2>Bienvenido a nuestra Página</h2>
<p>Contenido de la página de inicio...</p>
</section>
<!-- Contenedor del Carrusel y las Imágenes de la Izquierda -->
<div class="carrusel-contenedor">
<!-- Imágenes a la Izquierda -->
<div class="image-sidebar">
<a href="https://www.instagram.com" target="_blank">
<img src="https://cdn.pixabay.com/photo/2022/04/01/05/40/app-7104075_960_720.png" alt="instagram"
</a>
<a href="https://web.whatsapp.com" target="_blank">
<img src="https://cdn.pixabay.com/photo/2015/08/03/13/58/whatsapp-873316_1280.png" alt="whatsapp">
</a>
<a href="https://www.facebook.com" target="_blank">
<img src="https://cdn.pixabay.com/photo/2015/03/10/17/26/facebook-667456_1280.png" alt="facebook">
</a>
</div>
<!-- Carrusel -->
<div class="carrusel">
<div class="carrusel-interior">
<img src="https://cdn.pixabay.com/photo/2014/08/03/19/08/firearm-409252_1280.jpg" alt="Imagen 1">
<img src="https://cdn.pixabay.com/photo/2020/01/02/21/17/m1911-4736846_1280.jpg" alt="Imagen 2">
<img src="https://cdn.pixabay.com/photo/2017/02/14/10/48/gun-2065602_1280.jpg" alt="Imagen 3">
</div>
<div class="botones-de-carrusel">
<button class="prev">❮</button>
<button class="next">❯</button>
</div>
</div>
</div>
<!-- Sección Nosotros -->
<section id="nosotros">
<h2>Nosotros</h2>
<p>Contenido sobre la empresa...</p>
</section>
<!-- Sub-secciones de Nosotros -->
<section id="vision">
<h3>Visión</h3>
<p>Contenido sobre la visión de la empresa...</p>
</section>
<section id="mision">
<h3>Misión</h3>
<p>Contenido sobre la misión de la empresa...</p>
</section>
<!-- Sección Servicios -->
<section id="servicios">
<h2>Servicios</h2>
<p>Contenido sobre los servicios que ofrecemos...</p>
</section>
<!-- Formulario de Registro -->
<div class="registro-contenedor">
<h2>Registro de Usuario</h2>
<form id="registroForm">
<input type="text" id="nombre" placeholder="Nombre" required>
<input type="text" id="apellido" placeholder="Apellido" required>
<input type="email" id="correo" placeholder="Correo Electrónico" required>
<button type="submit">Registrarse</button>
</form>
</div>
<!-- Pie de página -->
<footer>
<p>© 2025 Mi Página. Todos los derechos reservados.</p>
</footer>
<script>
// Carrusel de imágenes de la sidebar
let sidebarCurrentIndex = 0;
const sidebarImages = document.querySelectorAll('.image-sidebar img');
const totalSidebarImages = sidebarImages.length;
function changeSidebarImage() {
sidebarImages.forEach((img, index) => {
img.classList.remove('active');
if (index === sidebarCurrentIndex) {
img.classList.add('active');
}
});
sidebarCurrentIndex = (sidebarCurrentIndex + 1) % totalSidebarImages;
}
// Cambiar imagen cada 3 segundos
setInterval(changeSidebarImage, 3000);
// Inicializar el primer cambio
changeSidebarImage();
// Carrusel principal
let currentIndexCarousel = 0;
const slides = document.querySelectorAll('.carrusel-interior img');
const totalSlides = slides.length;
const prevButton = document.querySelector('.prev');
const nextButton = document.querySelector('.next');
function moveToSlide(index) {
const newTransform = `translateX(-${index * 100}%)`;
document.querySelector('.carrusel-interior').style.transform = newTransform;
}
prevButton.addEventListener('click', () => {
currentIndexCarousel = (currentIndexCarousel === 0) ? totalSlides - 1 : currentIndexCarousel - 1;
moveToSlide(currentIndexCarousel);
});
nextButton.addEventListener('click', () => {
currentIndexCarousel = (currentIndexCarousel === totalSlides - 1) ? 0 : currentIndexCarousel + 1;
moveToSlide(currentIndexCarousel);
});
// Formulario de registro
document.getElementById('registroForm').addEventListener('submit', function(event) {
event.preventDefault();
const nombre = document.getElementById('nombre').value;
const apellido = document.getElementById('apellido').value;
const correo = document.getElementById('correo').value;
console.log('Registro de Usuario:');
console.log('Nombre:', nombre);
console.log('Apellido:', apellido);
console.log('Correo:', correo);
// Limpiar el formulario
this.reset();
});
</script>
</body>
</html>
Comments
Post a Comment