.contacto {
background-color: #00a8cc; /* Azul para la sección de contacto */
padding: 30px 0;
text-align: center;
color: #fff;
}
.contacto p {
margin-bottom: 20px;
}
.contacto a {
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
background-color: #00a8cc; /* Azul para el enlace de Instagram */
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.contacto a:hover {
background-color: #0077b6; /* Azul más oscuro al pasar el mouse */
}
footer {
background-color: #00a8cc; /* Azul para el footer */
color: #fff;
text-align: center;
padding: 20px 0;
}
footer ul {
list-style-type: none;
padding: 0;
}
footer ul li {
display: inline;
margin-right: 15px;
}
footer ul li a {
color: #fff;
text-decoration: none;
}
footer ul li a:hover {
text-decoration: underline;
}
/* Media Queries */
@media (min-width: 600px) {
.slider {
height: 400px;
}
.cta .btn {
font-size: 1.3em;
}
.productos {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
@media (min-width: 768px) {
header .logo img {
width: 200px; /* Aumenta el tamaño del logo */
}
header .slogan {
font-size: 2em; /* Aumenta el tamaño del slogan */
}
.destacados {
flex-direction: row; /* Cambia a fila en pantallas más grandes */
justify-content: space-around;
}
.destacado {
width: 30%;
margin-bottom: 0;
}
}
@media (min-width: 1024px) {
header .slogan {
font-size: 3em; /* Aumenta aún más el tamaño del slogan */
}
.slider {
height: 600px;
}
.cta .btn {
font-size: 1.5em; /* Aumenta el tamaño del texto del botón */
}
}
</style>
<!-- Slider -->
<div class="slider">
<img src="banner1_7dc5ad02-7951-439e-84c2-607bd494b0cd.jpg.webp" alt="Slide 1" class="active">
<img src="banner-dtf-direct-transfer-to-film.jpg" alt="Slide 2">
<img src="Banner-playeras1.webp" alt="Slide 3">
<div class="background"></div>
</div>
<!-- Sección Destacados -->
<section id="destacados" class="container">
<h2>Productos Destacados</h2>
<div class="destacados">
<div class="destacado">
<img src="adobe-illustrator-el-programa-que-revoluciono-el-diseno-grafico-1280x720.png" alt="Producto Destacado 1">
<h3>Diseño Exclusivo</h3>
<p>Playera con un diseño único que resalta tu estilo.</p>
</div>
<div class="destacado">
<img src="IMG_0699.jpg" alt="Producto Destacado 2">
<h3>Calidad Premium</h3>
<p>Materiales de alta calidad para una mayor durabilidad.</p>
</div>
<div class="destacado">
<img src="cliff 2.jpg" alt="Producto Destacado 3">
<h3>Edición Limitada</h3>
<p>Consigue nuestras ediciones limitadas antes de que se agoten.</p>
</div>
</div>
<div class="cta">
<a href="#productos" class="btn">Ver todos los productos</a>
</div>
</section>
<!-- Sección Productos -->
<section id="productos" class="container">
<h2>Nuestros Productos</h2>
<div class="productos">
<div class="producto">
<img src="messi.jpg" alt="Producto 1">
<div class="overlay">
</div>
</div>
<div class="producto">
<img src="ironman.jpg" alt="Producto 2">
<div class="overlay">
</div>
</div>
<div class="producto">
<img src="post1.jpg" alt="Producto 3">
<div class="overlay">
</div>
</div>
<div class="producto">
<img src="PLAYERAS-EN-DTF-1024x1024.jpg" alt="Producto 4">
<div class="overlay">
</div>
</div>
</div>
</section>
</section>
<!-- Sección Productos -->
<section id="productos" class="container">
<div class="productos">
<div class="producto">
<img src="cliff.jpg" alt="Producto 1">
<div class="overlay">
</div>
</div>
<div class="producto">
<img src="2.jpg" alt="Producto 2">
<div class="overlay">
</div>
</div>
<div class="producto">
<img src="Mockup-1-Reliquias.jpg" alt="Producto 3">
<div class="overlay">
</div>
</div>
<div class="producto">
<img src="metallica .jpg" alt="Producto 4">
<div class="overlay">
</div>
</div>
</div>
</section>
<!-- Sección Productos -->
<section id="productos" class="container">
<div class="productos">
<div class="producto">
<img src="cruz.jpg.webp" alt="Producto 1">
<div class="overlay">
</div>
</div>
<div class="producto">
<img src="cliff 2.jpg" alt="Producto 2">
<div class="overlay">
</div>
</div>
<div class="producto">
<img src="piano.jpg.webp" alt="Producto 3">
<div class="overlay">
</div>
</div>
<div class="producto">
<img src="ironmade.jpg" alt="Producto 4">
<div class="overlay">
</div>
</div>
</div>
</section>
<!-- Sección Contacto -->
<section id="contacto" class="contacto">
<h2>Contáctanos</h2>
<p>Si tienes alguna pregunta, no dudes en contactarnos.</p>
<a href="https://www.instagram.com/dye_fusion?igsh=d3Y1dnV5dGlvNmlm">Síguenos en Instagram</a>
</section>
<!-- Footer -->
<footer>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#destacados">Destacados</a></li>
<li><a href="#productos">Productos</a></li>
<li><a href="#personalizacion">Personalización</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
<p>© 2024 DyeFusion. Todos los derechos reservados.</p>
</footer>
<script>
// Slider functionality
let currentSlide = 0;
const slides = document.querySelectorAll('.slider img');
setInterval(() => {
slides[currentSlide].classList.remove('active');
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].classList.add('active');
}, 3000);
// Formulario de personalización
const personalizacionForm = document.getElementById('personalizacionForm');
personalizacionForm.addEventListener('submit', function(event) {
event.preventDefault();
const nombre = document.getElementById('nombre').value;
const email = document.getElementById('email').value;
const mensaje = document.getElementById('mensaje').value;
const diseno = document.getElementById('diseno').value;
const formData = new FormData();
formData.append('nombre', nombre);
formData.append('email', email);
formData.append('mensaje', mensaje);
formData.append('diseno', diseno);
fetch('enviar_formulario.php', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
alert('Mensaje enviado correctamente:\n\n' + data);
personalizacionForm.reset();
})
.catch(error => {
console.error('Error al enviar el formulario:', error);
alert('Hubo un problema al enviar el formulario. Inténtalo más tarde.');
});
});
</script>