AGAPE S.R.L
256 lines
8.6 KiB
HTML
256 lines
8.6 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-cows { background-image: url('images/cowS.jpg'); }
|
|
#tile-agapei { background-image: url('images/agapei-1.jpg'); }
|
|
#tile-entrances{ background-image: url('images/entranceS.jpg'); }
|
|
|
|
[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: 90vmin;
|
|
height: 90vmin;
|
|
gap: 4px;
|
|
}
|
|
.tile-inner { padding: 8px; }
|
|
.footer { flex-direction: column; gap: 4px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="grid">
|
|
<!-- Cow hero -->
|
|
<div id="tile-cow" class="tile img-tile"><div class="tile-inner"></div></div>
|
|
|
|
<!-- Aerial view -->
|
|
<div id="tile-luft" class="tile img-tile"><div class="tile-inner"></div></div>
|
|
|
|
<!-- Welcome text -->
|
|
<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 20 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 20 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 20 Jahren in der Rindergenetik.</p><p class="sub">Paraguay · Südamerika</p></div>
|
|
</div>
|
|
|
|
<!-- Genetics text -->
|
|
<div class="tile text-tile">
|
|
<div class="tile-inner" data-lang="es"><h2>Brangus</h2><p>Sangre galardonada con trazabilidad completa y certificación genética.</p><p class="sub">Campeones nacionales · ADN certificado</p></div>
|
|
<div class="tile-inner" data-lang="en"><h2>Brangus</h2><p>Award-winning bloodline with full traceability and genetic certification.</p><p class="sub">National champions · Certified DNA</p></div>
|
|
<div class="tile-inner" data-lang="de"><h2>Brangus</h2><p>Preisgekrönte Linie mit vollständiger Rückverfolgbarkeit und genetischer Zertifizierung.</p><p class="sub">Landessieger · Zertifizierte DNA</p></div>
|
|
</div>
|
|
|
|
<!-- Entrance -->
|
|
<div id="tile-entrance" class="tile img-tile"><div class="tile-inner"></div></div>
|
|
|
|
<!-- Food production -->
|
|
<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 · Sin hormonas</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 · Hormone-free</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 · Hormonfrei</p></div>
|
|
</div>
|
|
|
|
<!-- Cow secondary -->
|
|
<div id="tile-cows" class="tile img-tile"><div class="tile-inner"></div></div>
|
|
|
|
<!-- Entrance secondary -->
|
|
<div id="tile-entrances" class="tile img-tile"><div class="tile-inner"></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="#" method="post">
|
|
<input type="text" placeholder="Nombre" required>
|
|
<input type="email" placeholder="Email" required>
|
|
<textarea placeholder="Mensaje" required></textarea>
|
|
<button type="submit">Enviar</button>
|
|
</form>
|
|
</div>
|
|
<div class="tile-inner" data-lang="en">
|
|
<h2>Contact</h2>
|
|
<form action="#" method="post">
|
|
<input type="text" placeholder="Name" required>
|
|
<input type="email" placeholder="Email" required>
|
|
<textarea placeholder="Message" required></textarea>
|
|
<button type="submit">Send</button>
|
|
</form>
|
|
</div>
|
|
<div class="tile-inner" data-lang="de">
|
|
<h2>Kontakt</h2>
|
|
<form action="#" method="post">
|
|
<input type="text" placeholder="Name" required>
|
|
<input type="email" placeholder="E-Mail" required>
|
|
<textarea 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</div>
|
|
</div>
|
|
|
|
<script>
|
|
function setLang(lang) {
|
|
localStorage.setItem('agape-lang', lang);
|
|
applyLang(lang);
|
|
}
|
|
function applyLang(lang) {
|
|
document.querySelectorAll('[data-lang]').forEach(el => {
|
|
el.style.display = el.getAttribute('data-lang') === lang ? 'flex' : 'none';
|
|
});
|
|
document.querySelectorAll('.lang-select a').forEach(a => a.classList.remove('active'));
|
|
var link = document.getElementById('lang-' + lang);
|
|
if (link) link.classList.add('active');
|
|
document.documentElement.lang = lang;
|
|
}
|
|
(function() {
|
|
var saved = localStorage.getItem('agape-lang');
|
|
var detected = (navigator.language || navigator.userLanguage || 'es').substring(0, 2);
|
|
detected = ['es','en','de'].includes(detected) ? detected : 'es';
|
|
applyLang(saved || detected);
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |