RETO WEB
<!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;
}
.navbar {
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 */
.carousel-container {
display: flex;
justify-content: space-between;
margin: 30px auto;
max-width: 1200px;
}
.carousel {
position: relative;
width: 80%;
overflow: hidden;
border-radius: 10px;
}
.carousel-inner {
display: flex;
transition: transform 0.5s ease-in-out;
}
.carousel img {
width: 100%;
height: auto;
object-fit: cover;
}
.carousel-buttons {
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; /* Asegura que las imágenes no se salgan del contenedor */
}
.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 Footer */
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="navbar">
<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="carousel-container">
<!-- 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="WhatsApp">
</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="Facebook">
</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="Instagram">
</a>
</div>
<!-- Carrusel -->
<div class="carousel">
<div class="carousel-inner">
<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="carousel-buttons">
<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>
<!-- Footer -->
<footer>
<p>© 2025 Mi Página. Todos los derechos reservados.</p>
</footer>
<script>
// Carrusel Automático de las Imágenes de la Izquierda
let currentIndex = 0;
const sidebarImages = document.querySelectorAll('.image-sidebar img');
const totalSidebarImages = sidebarImages.length;
// Función para cambiar la imagen activa
function changeSidebarImage() {
sidebarImages.forEach((img, index) => {
img.classList.remove('active');
if (index === currentIndex) {
img.classList.add('active');
}
});
currentIndex = (currentIndex + 1) % totalSidebarImages;
}
// Cambiar imagen cada 3 segundos (3000 ms)
setInterval(changeSidebarImage, 3000);
// Inicializar el primer cambio
changeSidebarImage();
// Carrusel
let currentIndexCarousel = 0;
const slides = document.querySelectorAll('.carousel-inner 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('.carousel-inner').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);
});
</script>
</body>
</html>
Comments
Post a Comment