Update homepage
This commit is contained in:
AGAPE S.R.L
Binary file not shown.
|
Before Width: | Height: | Size: 455 KiB After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 MiB After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 629 KiB After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 MiB After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 569 KiB After Width: | Height: | Size: 126 KiB |
+234
-54
@@ -2,87 +2,267 @@
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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: 'Arial', sans-serif;
|
||||
background: #f5f5f0;
|
||||
height: 100vh;
|
||||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||||
background: #2a2a2a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.grid {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
min-height: 0;
|
||||
}
|
||||
.img-tile {
|
||||
.tile {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 6px;
|
||||
background-color: #d4c9b0;
|
||||
min-height: 0;
|
||||
}
|
||||
.text-tile {
|
||||
background: rgba(255,255,255,0.92);
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
.tile-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
padding: 18px;
|
||||
}
|
||||
.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 strong { display: block; margin-top: 4px; }
|
||||
.text-tile strong:first-child { margin-top: 0; }
|
||||
#logo {
|
||||
.text-tile h2 {
|
||||
font-size: clamp(11px, 1.4vw, 18px);
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
color: #1a3a1a;
|
||||
}
|
||||
.text-tile p {
|
||||
font-size: clamp(9px, 1vw, 14px);
|
||||
line-height: 1.4;
|
||||
color: #444;
|
||||
}
|
||||
.text-tile .sub {
|
||||
font-size: clamp(8px, 0.85vw, 12px);
|
||||
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: 5px 8px;
|
||||
font-size: clamp(9px, 0.85vw, 12px);
|
||||
font-family: inherit;
|
||||
background: white;
|
||||
}
|
||||
.contact-tile textarea {
|
||||
resize: none;
|
||||
height: 36px;
|
||||
}
|
||||
.contact-tile button {
|
||||
background: #1a3a1a;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
font-size: clamp(9px, 0.85vw, 12px);
|
||||
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'); }
|
||||
|
||||
.logo-tile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
}
|
||||
.logo-tile img {
|
||||
max-height: 50%;
|
||||
max-width: 80%;
|
||||
object-fit: contain;
|
||||
}
|
||||
#logo img { max-height: 70px; max-width: 90%; }
|
||||
#cow { background-image: url('images/cow.jpg'); }
|
||||
#entrance { background-image: url('images/entrance.jpg'); }
|
||||
#luft { background-image: url('images/luftbild1.jpg'); }
|
||||
#agape { background-image: url('images/agapei-1.jpg'); }
|
||||
#cowS { background-image: url('images/cowS.jpg'); }
|
||||
#entranceS { background-image: url('images/entranceS.jpg'); }
|
||||
|
||||
/* Tile layout - random scatter look */
|
||||
#logo { grid-column: 1; grid-row: 1; }
|
||||
#cow { grid-column: 2; grid-row: 1 / span 2; }
|
||||
#entrance { grid-column: 3; grid-row: 2 / span 2; }
|
||||
#luft { grid-column: 2; grid-row: 3; }
|
||||
#agape { grid-column: 1; grid-row: 2; }
|
||||
#cowS { grid-column: 1; grid-row: 3; }
|
||||
#entranceS{ grid-column: 3; grid-row: 1; }
|
||||
#text1 { grid-column: 2; grid-row: 1; }
|
||||
#text2 { grid-column: 3; grid-row: 1; }
|
||||
#text3 { grid-column: 1; grid-row: 1; }
|
||||
[data-lang] { display: none; }
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6px 16px;
|
||||
background: #1a1a1a;
|
||||
color: #888;
|
||||
font-size: 11px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.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 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
}
|
||||
.tile { min-height: 120px; }
|
||||
.tile-inner { padding: 10px; }
|
||||
.footer { flex-direction: column; gap: 4px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="logo" class="text-tile"><img src="images/logo.svg" alt="AGAPE S.R.L"></div>
|
||||
<div id="cow" class="img-tile"></div>
|
||||
<div id="entrance" class="img-tile"></div>
|
||||
<div id="luft" class="img-tile"></div>
|
||||
<div id="agape" class="img-tile"></div>
|
||||
<div id="cowS" class="img-tile"></div>
|
||||
<div id="entranceS" class="img-tile"></div>
|
||||
<div class="grid">
|
||||
<!-- Logo -->
|
||||
<div class="logo-tile tile">
|
||||
<img src="images/logo.svg" alt="AGAPE S.R.L">
|
||||
</div>
|
||||
|
||||
<div id="text1" class="text-tile">
|
||||
<strong>ES:</strong> Genética bovina de élite · trazabilidad sostenible
|
||||
<strong>EN:</strong> Elite cattle genetics · sustainable traceability
|
||||
<strong>DE:</strong> Elite-Rindergenetik · nachhaltige Rückverfolgbarkeit
|
||||
<!-- Cow hero -->
|
||||
<div id="tile-cow" 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 a la Estancia</h2><p>Ganadería de precisión con más de 20 años de experiencia en genética bovina.</p><p class="sub">Paraguay · Sudamérica</p></div>
|
||||
<div class="tile-inner" data-lang="en"><h2>Welcome to the Estancia</h2><p>Precision cattle farming with over 20 years of experience in bovine genetics.</p><p class="sub">Paraguay · South America</p></div>
|
||||
<div class="tile-inner" data-lang="de"><h2>Willkommen auf der Estancia</h2><p>Präzisionsrinderhaltung mit über 20 Jahren Erfahrung in der Rindergenetik.</p><p class="sub">Paraguay · Südamerika</p></div>
|
||||
</div>
|
||||
|
||||
<!-- Aerial view -->
|
||||
<div id="tile-luft" class="tile img-tile"><div class="tile-inner"></div></div>
|
||||
|
||||
<!-- Genetics text -->
|
||||
<div class="tile text-tile">
|
||||
<div class="tile-inner" data-lang="es"><h2>Genética Brangus</h2><p>Nuestra sangre Brangus es galardonada. Cría selectiva con trazabilidad completa y los mejores índices de conversión.</p><p class="sub">🐮 Campeones nacionales 2024 · ADN certificado</p></div>
|
||||
<div class="tile-inner" data-lang="en"><h2>Brangus Genetics</h2><p>Our Brangus bloodline is award-winning. Selective breeding with full traceability and top conversion rates.</p><p class="sub">🐮 National champions 2024 · Certified DNA</p></div>
|
||||
<div class="tile-inner" data-lang="de"><h2>Brangus Genetik</h2><p>Unsere Brangus-Linie ist preisgekrönt. Selektive Zucht mit vollständiger Rückverfolgbarkeit und besten Futterverwertungswerten.</p><p class="sub">🐮 Landessieger 2024 · Zertifizierte DNA</p></div>
|
||||
</div>
|
||||
|
||||
<!-- Entrance -->
|
||||
<div id="tile-entrance" class="tile img-tile"><div class="tile-inner"></div></div>
|
||||
|
||||
<!-- Food production text -->
|
||||
<div class="tile text-tile">
|
||||
<div class="tile-inner" data-lang="es"><h2>Nutrición Estable</h2><p>Producción de alimentos balanceados para una nutrición óptima. 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>Stable Nutrition</h2><p>Balanced feed production for optimal nutrition. Improved pastures and strategic supplementation.</p><p class="sub">🌾 Homegrown feed · Hormone-free</p></div>
|
||||
<div class="tile-inner" data-lang="de"><h2>Stabile Ernährung</h2><p>Ausgewogene Futterproduktion für optimale Nährstoffe. Verbesserte Weiden und strategische Ergänzungsfütterung.</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>
|
||||
|
||||
<!-- Agapei brand -->
|
||||
<div id="tile-agapei" class="tile img-tile"><div class="tile-inner"></div></div>
|
||||
|
||||
<!-- Contact form -->
|
||||
<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 id="text2" class="text-tile">
|
||||
<strong>ES:</strong> Innovación en manejo y bienestar animal
|
||||
<strong>EN:</strong> Innovation in animal handling & welfare
|
||||
<strong>DE:</strong> Innovation in Tierhaltung & Wohlbefinden
|
||||
</div>
|
||||
<div id="text3" class="text-tile">
|
||||
<strong>ES:</strong> Equipo de ingenieros y veterinarios especializados
|
||||
<strong>EN:</strong> Team of specialized engineers & veterinarians
|
||||
<strong>DE:</strong> Team aus spezialisierten Ingenieuren & Tierärzten
|
||||
|
||||
<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. Todos los derechos reservados.</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>
|
||||
</html>
|
||||
Reference in New Issue
Block a user