<!DOCTYPE
html>
<html
lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0"/>
<title>Miel, Abejas y Más</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
background-color: #fff8e1;
color: #4e342e;
}
header {
background-color: #ffeb3b;
color: #4e342e;
padding: 1em;
text-align: center;
}
nav {
background-color: #795548;
padding: 1em;
text-align: center;
}
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
}
section {
padding: 2em;
}
.catalogo {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.producto {
border: 1px solid #ddd;
padding: 1em;
background-color: #fff;
width: calc(33.333% - 20px);
}
.producto img {
width: 100%;
height: auto;
}
footer {
background-color: #795548;
color: white;
text-align: center;
padding: 1em;
}
button {
background-color: #ffeb3b;
border: none;
padding: 10px;
font-weight: bold;
cursor: pointer;
}
input, textarea {
width: 100%;
margin-top: 8px;
padding: 8px;
box-sizing: border-box;
}
@media (max-width: 768px) {
.producto {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<h1>Miel, Abejas y Más</h1>
<p>Insumos para apicultura en
Panamá</p>
</header>
<nav>
<a href="#inicio">Inicio</a>
<a href="#nosotros">Sobre
Nosotros</a>
<a href="#catalogo">Catálogo</a>
<a href="#contacto">Contacto</a>
</nav>
<section
id="inicio">
<h2>Bienvenidos</h2>
<p>Ofrecemos equipos, herramientas y
productos para apicultores panameños con atención personalizada y entrega en
todo el país.</p>
</section>
<section
id="nosotros">
<h2>Sobre Nosotros</h2>
<p>Somos una empresa familiar
apasionada por la apicultura. Queremos impulsar el desarrollo apícola en Panamá
ofreciendo productos de calidad, servicio confiable y asesoría constante a cada
apicultor.</p>
</section>
<section
id="catalogo">
<h2>Catálogo de Productos</h2>
<div class="catalogo">
<div class="producto">
<img
src="https://via.placeholder.com/300x200?text=Colmena+Langstroth" alt="Colmena Langstroth">
<h3>Colmena Langstroth</h3>
<p>Ref. MAM101</p>
<button onclick="agregarACotizacion('Colmena Langstroth')">Agregar
a cotización</button>
</div>
<div class="producto">
<img
src="https://via.placeholder.com/300x200?text=Ahumador+Brasileño" alt="Ahumador">
<h3>Ahumador Mediano
Brasileño</h3>
<p>Ref. MAM306</p>
<button onclick="agregarACotizacion('Ahumador Mediano Brasileño')">Agregar a
cotización</button>
</div>
<div class="producto">
<img src="https://via.placeholder.com/300x200?text=Overall+Ventilado" alt="Protección">
<h3>Jacket
Ventilado con Velo</h3>
<p>Ref. MAM404</p>
<button onclick="agregarACotizacion('Jacket Ventilado con
Velo')">Agregar a cotización</button>
</div>
</div>
<br/>
<button onclick="enviarCotizacion()">Enviar cotización</button>
</section>
<section id="contacto">
<h2>Contáctanos</h2>
<form
action="mailto:mielabejasymas@hotmail.com" method="post"
enctype="text/plain">
<label>Nombre:</label>
<input type="text"
name="nombre" required />
<label>Correo:</label>
<input type="email"
name="email" required />
<label>Mensaje:</label>
<textarea name="mensaje" rows="4"
required></textarea>
<br><br>
<button
type="submit">Enviar</button>
</form>
</section>
<footer>
<p>© 2025 Miel, Abejas y Más | Panamá
| mielabejasymas@hotmail.com</p>
</footer>
<script>
let productosCotizados = [];
function agregarACotizacion(nombre) {
productosCotizados.push(nombre);
alert(nombre + " añadido a la cotización.");
}
function enviarCotizacion()
{
const correo =
"mielabejasymas@hotmail.com";
const asunto = encodeURIComponent("Solicitud de Cotización");
const cuerpo = encodeURIComponent("Hola, me interesa cotizar los siguientes
productos:\n\n" + productosCotizados.join("\n"));
window.location.href
= `mailto:${correo}?subject=${asunto}&body=${cuerpo}`;
}
</script>
</body>
</html>