Proyecto Final

Claro, haré que tu código HTML sea adaptable (responsive) usando CSS. Proyecto Final

En 3dMakers, hacemos realidad tus ideas con nuestra impresión 3D de alta calidad. Nos especializamos en figuras de anime personalizadas, diseñadas con detalle y precisión para que colecciones verdaderas obras de arte. ¿Tienes un diseño en mente? Nosotros lo materializamos. ¡Contáctanos y empieza a crear con 3dMakers!

Diseño

Contános tu idea y la convertimos en 3D.

Nuestra tienda

Entrá a nuestra tienda, tu figura te espera.

Convertite en 3dMaker

Tenemos cursos sobre impresión 3D

Formá parte de 3DMakers

Envianos un mensaje con tu cv

Envíos a todo el país

Medios de pago

/* General Styles */ body { margin: 0; font-family: 'Galindo', sans-serif; /* Example font */ background-color: #f4f4f4; color: #333; padding-top: 70px; /* Height of the fixed header */ position: relative; /* Needed for side menu positioning */ overflow-x: hidden; /* Prevent horizontal scroll */ } img { max-width: 100%; height: auto; display: block; /* Prevent bottom space */ } a { color: #007bff; text-decoration: none; } a:hover { text-decoration: underline; } ul { list-style: none; padding: 0; margin: 0; } button { cursor: pointer; padding: 8px 15px; border: none; border-radius: 4px; background-color: #007bff; color: white; } button:hover { background-color: #0056b3; } input[type="text"], input[type="email"] { padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-right: 5px; } /* Header */ .top-bar { background-color: #333; color: white; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; position: fixed; /* Make header fixed */ top: 0; left: 0; width: 100%; z-index: 1000; /* Ensure header is above other content */ box-sizing: border-box; /* Include padding in width */ } .logo1 { height: 50px; /* Adjust as needed */ width: auto; } .search-bar { display: flex; align-items: center; } .search-bar input { width: 150px; /* Adjust as needed */ } .menu-toggle { display: none; /* Hidden by default, shown on small screens */ font-size: 24px; background: none; border: none; color: white; cursor: pointer; } #menu-button { background: none; border: none; color: white; font-size: 1.5em; } /* Side Menu */ .side-menu { position: fixed; top: 0; left: -250px; /* Start hidden off-screen */ width: 250px; height: 100%; background-color: #444; color: white; padding-top: 60px; /* Space for close button */ transition: left 0.3s ease; z-index: 1001; /* Above header */ overflow-y: auto; } .side-menu.open { left: 0; /* Slide in */ } .side-menu ul li a { display: block; padding: 15px 20px; color: white; text-decoration: none; border-bottom: 1px solid #555; } .side-menu ul li a:hover { background-color: #555; } #close-menu-button { position: absolute; top: 10px; right: 10px; font-size: 24px; background: none; border: none; color: white; cursor: pointer; } /* Banner Slideshow */ .banner { position: relative; width: 100%; max-width: 1200px; /* Adjust max width as needed */ margin: 20px auto; overflow: hidden; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .slides { display: flex; transition: transform 0.5s ease-in-out; } .slide { min-width: 100%; box-sizing: border-box; display: none; /* Hide slides by default */ } .slide.active { display: block; /* Show active slide */ } .slide img { width: 100%; height: auto; max-height: 400px; /* Limit banner height */ object-fit: cover; /* Cover the area */ } .banner-nav { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%); padding: 0 10px; box-sizing: border-box; } .banner-nav button { background-color: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 10px; cursor: pointer; border-radius: 50%; font-size: 18px; } .banner-nav button:hover { background-color: rgba(0, 0, 0, 0.8); } /* Article */ article { max-width: 800px; margin: 30px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); text-align: center; line-height: 1.6; } /* Main Content & Services */ main { padding: 20px; max-width: 1200px; margin: 0 auto; } .service-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */ gap: 20px; margin-top: 30px; } .service { background-color: #fff; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); padding: 20px; text-align: center; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .service:hover { transform: translateY(-5px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } .service img { max-width: 100px; margin: 0 auto 15px auto; border-radius: 50%; /* Make images circular */ } .service h3 { margin-bottom: 10px; font-family: 'Slackey', cursive; /* Example font */ color: #333; } .service p { font-size: 0.9em; color: #666; } /* WhatsApp Button */ .whatsapp-button { position: fixed; bottom: 20px; right: 20px; background-color: #25D366; color: white; padding: 15px; border-radius: 50%; font-size: 24px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 999; display: flex; align-items: center; justify-content: center; } .whatsapp-button:hover { background-color: #1EBE57; } /* Envios y Pagos Section */ #envios-y-pagos { background-color: #e9e9e9; padding: 30px 20px; display: flex; justify-content: space-around; align-items: center; text-align: center; flex-wrap: wrap; /* Allow items to wrap on smaller screens */ gap: 20px; } #envios-y-pagos div { display: flex; flex-direction: column; align-items: center; } #envios-y-pagos .icon { font-size: 2.5em; color: #555; margin-bottom: 10px; } #envios-y-pagos p { margin: 0; color: #555; font-weight: bold; } /* Footer */ footer { background-color: #333; color: #ccc; padding: 40px 20px 20px 20px; margin-top: 40px; } .footer-columns { display: flex; justify-content: space-around; flex-wrap: wrap; /* Allow columns to wrap */ gap: 20px; margin-bottom: 30px; } .footer-column { flex: 1; min-width: 180px; /* Minimum width for columns */ margin-bottom: 20px; } .footer-column h3 { color: white; margin-bottom: 15px; font-size: 1.1em; border-bottom: 1px solid #555; padding-bottom: 5px; } .footer-column ul li { margin-bottom: 8px; } .footer-column ul li a { color: #ccc; font-size: 0.9em; } .footer-column ul li a:hover { color: white; text-decoration: none; } .newsletter { text-align: center; margin-bottom: 30px; padding: 20px; background-color: #444; border-radius: 8px; } .newsletter h3 { color: white; margin-bottom: 10px; } .newsletter p { margin-bottom: 15px; font-size: 0.9em; } .newsletter form { display: flex; justify-content: center; flex-wrap: wrap; /* Wrap on small screens */ gap: 10px; } .newsletter input[type="email"] { flex-grow: 1; max-width: 300px; } .social-icons { text-align: center; margin-bottom: 20px; } .social-icons a { color: #ccc; font-size: 1.8em; margin: 0 10px; transition: color 0.2s ease; } .social-icons a:hover { color: white; } .copyright { text-align: center; font-size: 0.8em; border-top: 1px solid #555; padding-top: 20px; margin-top: 20px; } /* Responsive Design - Media Queries */ /* Medium screens (tablets) */ @media (max-width: 992px) { .service-container { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .footer-columns { justify-content: space-between; } } /* Small screens (landscape phones, small tablets) */ @media (max-width: 768px) { body { padding-top: 60px; /* Adjust for potentially smaller header */ } .top-bar { padding: 10px 15px; } .logo1 { height: 40px; } .search-bar { /* Optionally hide or shrink search bar */ display: none; /* Example: Hide search bar */ } .menu-toggle { display: block; /* Show hamburger menu button */ } .banner img { max-height: 300px; } .service-container { grid-template-columns: 1fr 1fr; /* Two columns */ } #envios-y-pagos { flex-direction: column; /* Stack items vertically */ gap: 30px; } .footer-columns { flex-direction: column; /* Stack footer columns */ align-items: center; /* Center align stacked columns */ text-align: center; } .footer-column { width: 80%; /* Adjust width */ max-width: 300px; } } /* Extra small screens (portrait phones) */ @media (max-width: 576px) { .top-bar .logo1 { /* Optionally hide logo if space is very limited */ margin: 0 auto; /* Center logo if search is hidden */ } .banner img { max-height: 200px; } .banner-nav button { padding: 5px 8px; font-size: 14px; } article { padding: 15px; margin: 20px 10px; } .service-container { grid-template-columns: 1fr; /* Single column */ } .service { padding: 15px; } .whatsapp-button { padding: 12px; font-size: 20px; bottom: 15px; right: 15px; } .newsletter form { flex-direction: column; align-items: center; } .newsletter input[type="email"] { width: 90%; margin-bottom: 10px; } .social-icons a { font-size: 1.6em; margin: 0 8px; } } document.addEventListener('DOMContentLoaded', () => { // Side Menu Toggle const menuButton = document.getElementById('menu-button'); const closeMenuButton = document.getElementById('close-menu-button'); const sideMenu = document.getElementById('sideMenu'); const body = document.body; if (menuButton && sideMenu && closeMenuButton) { menuButton.addEventListener('click', (e) => { e.stopPropagation(); // Prevent click from immediately closing menu sideMenu.classList.toggle('open'); }); closeMenuButton.addEventListener('click', () => { sideMenu.classList.remove('open'); }); // Close menu if clicking outside of it body.addEventListener('click', (e) => { if (sideMenu.classList.contains('open') && !sideMenu.contains(e.target) && e.target !== menuButton) { sideMenu.classList.remove('open'); } }); } else { console.error("Menu elements not found"); } // Banner Slideshow const slidesContainer = document.querySelector('.slides'); const slides = document.querySelectorAll('.slide'); const prevButton = document.querySelector('.banner-nav .prev'); const nextButton = document.querySelector('.banner-nav .next'); let currentSlideIndex = 0; let slideInterval; function showSlide(index) { slides.forEach((slide, i) => { slide.classList.remove('active'); if (i === index) { slide.classList.add('active'); } }); // Optional: Update slide position using transform for sliding effect // if (slidesContainer) { // slidesContainer.style.transform = `translateX(-${index * 100}%)`; // } } function nextSlide() { currentSlideIndex = (currentSlideIndex + 1) % slides.length; showSlide(currentSlideIndex); } function prevSlide() { currentSlideIndex = (currentSlideIndex - 1 + slides.length) % slides.length; showSlide(currentSlideIndex); } function startSlideShow() { stopSlideShow(); // Clear existing interval first if (slides.length > 1) { slideInterval = setInterval(nextSlide, 5000); // Change slide every 5 seconds } } function stopSlideShow() { clearInterval(slideInterval); } if (slides.length > 0 && slidesContainer) { showSlide(currentSlideIndex); // Show the first slide initially if (nextButton && prevButton) { nextButton.addEventListener('click', () => { nextSlide(); stopSlideShow(); // Optional: Stop auto-slide on manual navigation // startSlideShow(); // Optional: Restart auto-slide after manual navigation }); prevButton.addEventListener('click', () => { prevSlide(); stopSlideShow(); // Optional: Stop auto-slide on manual navigation // startSlideShow(); // Optional: Restart auto-slide after manual navigation }); } // Start automatic slideshow startSlideShow(); // Optional: Pause slideshow on hover const banner = document.querySelector('.banner'); if (banner) { banner.addEventListener('mouseenter', stopSlideShow); banner.addEventListener('mouseleave', startSlideShow); } } else { // console.log("Slideshow elements not found or no slides present."); } }); // Function for service navigation (if needed) function navigateTo(url) { window.location.href = url; // Or use a more complex routing method if applicable } Logo Placeholder Banner 1 Placeholder Banner 2 Placeholder Banner 3 Placeholder Service 1 Placeholder Service 2 Placeholder Service 3 Placeholder Service 4 Placeholder He añadido `styles.css` con reglas CSS y media queries para ajustar el diseño en diferentes tamaños de pantalla, y `index.js` para la funcionalidad del menú lateral y un carrusel básico para el banner. También he ajustado las rutas de las imágenes para que sean relativas y he creado archivos de imagen de marcador de posición. Asegúrate de reemplazar los archivos de marcador de posición con tus imágenes reales.