Oliver/estancia-agape
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update homepage

Browse Source
This commit is contained in:
AGAPE S.R.L
2026-06-25 10:26:51 +00:00
parent 60fa262e4f
commit b0b324f30f
1 changed files with 49 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+45 -57
View File
@@ -12,15 +12,16 @@
background: #2a2a2a; background: #2a2a2a;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
justify-content: center;
} }
.grid { .grid {
flex: 1; width: 75vmin;
height: 75vmin;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
gap: 8px; gap: 6px;
padding: 8px;
min-height: 0;
} }
.tile { .tile {
border-radius: 8px; border-radius: 8px;
@@ -29,7 +30,6 @@
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-color: #d4c9b0; background-color: #d4c9b0;
min-height: 0;
} }
.tile-inner { .tile-inner {
width: 100%; width: 100%;
@@ -37,7 +37,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding: 18px; padding: 12px;
} }
.img-tile .tile-inner { .img-tile .tile-inner {
background: rgba(0,0,0,0.25); background: rgba(0,0,0,0.25);
@@ -51,18 +51,18 @@
color: #333; color: #333;
} }
.text-tile h2 { .text-tile h2 {
font-size: clamp(11px, 1.4vw, 18px); font-size: clamp(11px, 1.6vmin, 18px);
font-weight: 700; font-weight: 700;
margin-bottom: 4px; margin-bottom: 3px;
color: #1a3a1a; color: #1a3a1a;
} }
.text-tile p { .text-tile p {
font-size: clamp(9px, 1vw, 14px); font-size: clamp(9px, 1.1vmin, 13px);
line-height: 1.4; line-height: 1.35;
color: #444; color: #444;
} }
.text-tile .sub { .text-tile .sub {
font-size: clamp(8px, 0.85vw, 12px); font-size: clamp(8px, 0.9vmin, 11px);
color: #666; color: #666;
margin-top: 2px; margin-top: 2px;
} }
@@ -74,22 +74,22 @@
.contact-tile input, .contact-tile textarea { .contact-tile input, .contact-tile textarea {
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
padding: 5px 8px; padding: 4px 6px;
font-size: clamp(9px, 0.85vw, 12px); font-size: clamp(8px, 0.9vmin, 11px);
font-family: inherit; font-family: inherit;
background: white; background: white;
} }
.contact-tile textarea { .contact-tile textarea {
resize: none; resize: none;
height: 36px; height: 30px;
} }
.contact-tile button { .contact-tile button {
background: #1a3a1a; background: #1a3a1a;
color: white; color: white;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
padding: 5px; padding: 4px;
font-size: clamp(9px, 0.85vw, 12px); font-size: clamp(8px, 0.9vmin, 11px);
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 600;
} }
@@ -99,25 +99,18 @@
#tile-cow { background-image: url('images/cow.jpg'); } #tile-cow { background-image: url('images/cow.jpg'); }
#tile-luft { background-image: url('images/luftbild1.jpg'); } #tile-luft { background-image: url('images/luftbild1.jpg'); }
#tile-entrance{ background-image: url('images/entrance.jpg'); } #tile-entrance { background-image: url('images/entrance.jpg'); }
#tile-cows { background-image: url('images/cowS.jpg'); } #tile-cows { background-image: url('images/cowS.jpg'); }
#tile-agapei { background-image: url('images/agapei-1.jpg'); } #tile-agapei { background-image: url('images/agapei-1.jpg'); }
#tile-entrances{ background-image: url('images/entranceS.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;
}
[data-lang] { display: none; } [data-lang] { display: none; }
.footer { .footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@@ -125,7 +118,6 @@
background: #1a1a1a; background: #1a1a1a;
color: #888; color: #888;
font-size: 11px; font-size: 11px;
flex-shrink: 0;
} }
.footer .lang-select { .footer .lang-select {
display: flex; display: flex;
@@ -148,61 +140,57 @@
@media (max-width: 600px) { @media (max-width: 600px) {
.grid { .grid {
grid-template-columns: 1fr 1fr; width: 90vmin;
grid-template-rows: auto; height: 90vmin;
gap: 4px; gap: 4px;
padding: 4px;
} }
.tile { min-height: 120px; } .tile-inner { padding: 8px; }
.tile-inner { padding: 10px; }
.footer { flex-direction: column; gap: 4px; } .footer { flex-direction: column; gap: 4px; }
} }
</style> </style>
</head> </head>
<body> <body>
<div class="grid"> <div class="grid">
<!-- Logo -->
<div class="logo-tile tile">
<img src="images/logo.svg" alt="AGAPE S.R.L">
</div>
<!-- Cow hero --> <!-- Cow hero -->
<div id="tile-cow" class="tile img-tile"><div class="tile-inner"></div></div> <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 --> <!-- Aerial view -->
<div id="tile-luft" class="tile img-tile"><div class="tile-inner"></div></div> <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 --> <!-- Genetics text -->
<div class="tile text-tile"> <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="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 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="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 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 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> </div>
<!-- Entrance --> <!-- Entrance -->
<div id="tile-entrance" class="tile img-tile"><div class="tile-inner"></div></div> <div id="tile-entrance" class="tile img-tile"><div class="tile-inner"></div></div>
<!-- Food production text --> <!-- Food production -->
<div class="tile text-tile"> <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="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>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="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>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 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> </div>
<!-- Cow secondary --> <!-- Cow secondary -->
<div id="tile-cows" class="tile img-tile"><div class="tile-inner"></div></div> <div id="tile-cows" class="tile img-tile"><div class="tile-inner"></div></div>
<!-- Agapei brand --> <!-- 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> <div id="tile-agapei" class="tile img-tile"><div class="tile-inner"></div></div>
<!-- Contact form --> <!-- Contact -->
<div class="tile text-tile contact-tile"> <div class="tile text-tile contact-tile">
<div class="tile-inner" data-lang="es"> <div class="tile-inner" data-lang="es">
<h2>Contacto</h2> <h2>Contacto</h2>
@@ -240,7 +228,7 @@
<a href="#" onclick="setLang('en')" id="lang-en">EN</a> <a href="#" onclick="setLang('en')" id="lang-en">EN</a>
<a href="#" onclick="setLang('de')" id="lang-de">DE</a> <a href="#" onclick="setLang('de')" id="lang-de">DE</a>
</div> </div>
<div class="copyright">© 2026 AGAPE S.R.L. Todos los derechos reservados.</div> <div class="copyright">© 2026 AGAPE S.R.L</div>
</div> </div>
<script> <script>