AGAPE S.R.L
250 lines
8.5 KiB
HTML
250 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>AGAPE S.R.L | Genética Premium</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html, body { height: 100%; }
|
|
body {
|
|
font-family: 'Segoe UI', 'Arial', sans-serif;
|
|
background: #2a2a2a;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.grid {
|
|
width: 75vmin;
|
|
height: 75vmin;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr 1fr;
|
|
gap: 6px;
|
|
}
|
|
.tile {
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-color: #d4c9b0;
|
|
}
|
|
.tile-inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 12px;
|
|
}
|
|
.img-tile .tile-inner {
|
|
background: rgba(0,0,0,0.25);
|
|
transition: background 0.3s;
|
|
}
|
|
.img-tile:hover .tile-inner {
|
|
background: rgba(0,0,0,0.1);
|
|
}
|
|
.text-tile .tile-inner {
|
|
background: rgba(245,245,240,0.92);
|
|
color: #333;
|
|
}
|
|
.text-tile h2 {
|
|
font-size: clamp(11px, 1.6vmin, 18px);
|
|
font-weight: 700;
|
|
margin-bottom: 3px;
|
|
color: #1a3a1a;
|
|
}
|
|
.text-tile p {
|
|
font-size: clamp(9px, 1.1vmin, 13px);
|
|
line-height: 1.35;
|
|
color: #444;
|
|
}
|
|
.text-tile .sub {
|
|
font-size: clamp(8px, 0.9vmin, 11px);
|
|
color: #666;
|
|
margin-top: 2px;
|
|
}
|
|
.contact-tile form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
.contact-tile input, .contact-tile textarea {
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
padding: 4px 6px;
|
|
font-size: clamp(8px, 0.9vmin, 11px);
|
|
font-family: inherit;
|
|
background: white;
|
|
}
|
|
.contact-tile textarea {
|
|
resize: none;
|
|
height: 30px;
|
|
}
|
|
.contact-tile button {
|
|
background: #1a3a1a;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding: 4px;
|
|
font-size: clamp(8px, 0.9vmin, 11px);
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
}
|
|
.contact-tile button:hover {
|
|
background: #2a5a2a;
|
|
}
|
|
|
|
#tile-cow { background-image: url('images/cow.jpg'); }
|
|
#tile-luft { background-image: url('images/luftbild1.jpg'); }
|
|
#tile-entrance { background-image: url('images/entrance.jpg'); }
|
|
#tile-agapei { background-image: url('images/agapei-1.jpg'); }
|
|
|
|
.logo-tile {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: none;
|
|
}
|
|
.logo-tile img {
|
|
width: 90%;
|
|
height: 90%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
[data-lang] { display: none; }
|
|
|
|
.footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 6px 16px;
|
|
background: #1a1a1a;
|
|
color: #888;
|
|
font-size: 11px;
|
|
}
|
|
.footer .lang-select {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
.footer .lang-select a {
|
|
color: #888;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
transition: color 0.2s;
|
|
}
|
|
.footer .lang-select a:hover, .footer .lang-select a.active {
|
|
color: #c8a86e;
|
|
}
|
|
.footer .copyright { color: #666; }
|
|
|
|
@media (max-width: 600px) {
|
|
.grid { width: 92vmin; height: 92vmin; gap: 4px; }
|
|
.tile-inner { padding: 8px; }
|
|
.footer { flex-direction: column; gap: 4px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="grid">
|
|
<!-- Logo -->
|
|
<div class="tile logo-tile"><img src="images/logo.png" alt="AGAPE S.R.L"></div>
|
|
|
|
<!-- Cow -->
|
|
<div id="tile-cow" class="tile img-tile"><div class="tile-inner"></div></div>
|
|
|
|
<!-- Welcome -->
|
|
<div class="tile text-tile">
|
|
<div class="tile-inner" data-lang="es"><h2>Bienvenidos</h2><p>Ganadería de precisión con más de 15 años en genética bovina.</p><p class="sub">Paraguay · Sudamérica</p></div>
|
|
<div class="tile-inner" data-lang="en"><h2>Welcome</h2><p>Precision cattle farming with over 15 years in bovine genetics.</p><p class="sub">Paraguay · South America</p></div>
|
|
<div class="tile-inner" data-lang="de"><h2>Willkommen</h2><p>Präzisionsrinderhaltung mit über 15 Jahren in der Rindergenetik.</p><p class="sub">Paraguay · Südamerika</p></div>
|
|
</div>
|
|
|
|
<!-- Luftbild -->
|
|
<div id="tile-luft" class="tile img-tile"><div class="tile-inner"></div></div>
|
|
|
|
<!-- Brangus -->
|
|
<div class="tile text-tile">
|
|
<div class="tile-inner" data-lang="es"><h2>Brangus</h2><p>Sangre galardonada.</p><p class="sub">Campeones nacionales</p></div>
|
|
<div class="tile-inner" data-lang="en"><h2>Brangus</h2><p>Award-winning bloodline.</p><p class="sub">National champions</p></div>
|
|
<div class="tile-inner" data-lang="de"><h2>Brangus</h2><p>Preisgekrönte Linie.</p><p class="sub">Landessieger</p></div>
|
|
</div>
|
|
|
|
<!-- Entrance -->
|
|
<div id="tile-entrance" class="tile img-tile"><div class="tile-inner"></div></div>
|
|
|
|
<!-- Nutrition -->
|
|
<div class="tile text-tile">
|
|
<div class="tile-inner" data-lang="es"><h2>Nutrición</h2><p>Alimentos balanceados, pasturas mejoradas y suplementación estratégica.</p><p class="sub">Alimento propio</p></div>
|
|
<div class="tile-inner" data-lang="en"><h2>Nutrition</h2><p>Balanced feed, improved pastures and strategic supplementation.</p><p class="sub">Homegrown feed</p></div>
|
|
<div class="tile-inner" data-lang="de"><h2>Ernährung</h2><p>Ausgewogenes Futter, verbesserte Weiden und strategische Ergänzung.</p><p class="sub">Eigenes Futter</p></div>
|
|
</div>
|
|
|
|
<!-- Agapei -->
|
|
<div id="tile-agapei" class="tile img-tile"><div class="tile-inner"></div></div>
|
|
|
|
<!-- Contact -->
|
|
<div class="tile text-tile contact-tile">
|
|
<div class="tile-inner" data-lang="es">
|
|
<h2>Contacto</h2>
|
|
<form action="https://n8n.odoo4projects.com/webhook/agape/mail" method="post">
|
|
<input type="text" name="nombre" placeholder="Nombre" required>
|
|
<input type="email" name="email" placeholder="Email" required>
|
|
<textarea name="mensaje" placeholder="Mensaje" required></textarea>
|
|
<button type="submit">Enviar</button>
|
|
</form>
|
|
</div>
|
|
<div class="tile-inner" data-lang="en">
|
|
<h2>Contact</h2>
|
|
<form action="https://n8n.odoo4projects.com/webhook/agape/mail" method="post">
|
|
<input type="text" name="nombre" placeholder="Name" required>
|
|
<input type="email" name="email" placeholder="Email" required>
|
|
<textarea name="mensaje" placeholder="Message" required></textarea>
|
|
<button type="submit">Send</button>
|
|
</form>
|
|
</div>
|
|
<div class="tile-inner" data-lang="de">
|
|
<h2>Kontakt</h2>
|
|
<form action="https://n8n.odoo4projects.com/webhook/agape/mail" method="post">
|
|
<input type="text" name="nombre" placeholder="Name" required>
|
|
<input type="email" name="email" placeholder="E-Mail" required>
|
|
<textarea name="mensaje" placeholder="Nachricht" required></textarea>
|
|
<button type="submit">Senden</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<div class="lang-select">
|
|
<a href="#" onclick="setLang('es')" id="lang-es">ES</a>
|
|
<a href="#" onclick="setLang('en')" id="lang-en">EN</a>
|
|
<a href="#" onclick="setLang('de')" id="lang-de">DE</a>
|
|
</div>
|
|
<div class="copyright">© 2026 AGAPE S.R.L · <a href="https://ODOO4projects.com" target="_blank" style="color:#888;text-decoration:none;">Powered by ODOO4projects</a></div>
|
|
</div>
|
|
|
|
<script>
|
|
function setLang(l) { localStorage.setItem('agape-lang', l); applyLang(l); }
|
|
function applyLang(l) {
|
|
document.querySelectorAll('[data-lang]').forEach(e => e.style.display = e.getAttribute('data-lang') === l ? 'flex' : 'none');
|
|
document.querySelectorAll('.lang-select a').forEach(a => a.classList.remove('active'));
|
|
var el = document.getElementById('lang-'+l); if (el) el.classList.add('active');
|
|
document.documentElement.lang = l;
|
|
}
|
|
(function() {
|
|
var s = localStorage.getItem('agape-lang');
|
|
var d = (navigator.language||'es').substring(0,2);
|
|
applyLang(s || (['es','en','de'].includes(d)?d:'es'));
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |