Fixed responsive header

This commit is contained in:
Julio Ruiz 2026-02-12 02:49:03 -05:00
parent 75212c8862
commit d17bca09b1
2 changed files with 14 additions and 17 deletions

View File

@ -3,17 +3,16 @@ import Button from "./ui/Button.astro";
---
<div>
<div class="flex justify-between py-4">
<div class="md:flex justify-between px-8 md:px-0 md:py-4">
<div class="border-l-4 border-primary pl-4">
<p class="font-secondary text-primary font-bold leading-none py-2 text-md">
Centro del Reino<br /> De Paz y Justicia
<p class="font-secondary text-primary font-bold leading-none py-2 text-3xl md:text-lg">
<a href="/">Centro del Reino<br /> De Paz y Justicia</a>
</p>
</div>
<nav
class="flex justify-evenly gap-10 items-center uppercase text-md text-white"
>
<div class="flex gap-8 font-primary font-bold">
<a class="hover:text-primary transition" href="/">Inicio</a>
<div class="hidden md:flex gap-8 font-primary font-bold">
<a class="hover:text-primary transition" href="#somos">Somos</a>
<a class="hover:text-primary transition" href="#programs">Programas</a>
<a class="hover:text-primary transition" href="#news">Noticias</a>

View File

@ -6,34 +6,32 @@ import Header from './Header.astro';
<div class="top-16 relative mb container mx-auto">
<Header />
</div>
<div class="h-screen max-h-[1080px] container bg-[url(/img/DRJBP-1.webp)] bg-no-repeat bg-contain bg-bottom mx-auto mt-16">
<div class="h-screen pb-20 max-h-[700px] sm:max-h-[900px] md:max-h-[1080px] container bg-[url(/img/DRJBP-1.webp)] bg-no-repeat bg-contain bg-bottom mx-auto mt-16">
<div class="grid grid-cols-2 h-full">
<div class="gap-8 flex flex-col justify-end">
<div>
<div class="grid md:grid-cols-2 h-full px-6">
<div class="gap-8 md:flex flex-col justify-end">
<img
src="/img/logo-metalico.webp"
alt="Logo Metalico"
class="w-58 mb-4"
class="w-20 sm:24 md:w-32 lg:w-58 mb-4 mt-0"
/>
</div>
<div class="text-primary font-semibold font-secondary mb-24 mt-40">
<h1 class="text-6xl mb-8">
<div class="text-primary font-semibold font-secondary sm:mb-24 mt-8">
<h1 class="text-3xl md:text-6xl sm:mb-8">
Dr. José Benjamín<br /> Pérez Matos
</h1>
<h6 class="font-primary font-light uppercase text-white">Lider Fundador</h6>
</div>
</div>
<div class="flex flex-col justify-end items-end gap-8">
<div class="order-first md:order-last flex flex-col md:justify-end items-end gap-8 ">
<div
class="w-1/2 font-primary font-medium text-2xl text-primary gap-8 flex flex-col justify-end mb-24"
class="md:w-1/2 font-primary font-medium text-2xl text-primary gap-8 flex flex-col justify-end mb-24"
>
<h2 class="text-[#EAE6D2]">
<h2 class="text-[#EAE6D2] text-lg py-8">
“El sueño de mi vida es ver cumplida la visión de los
profetas: un mundo de justicia y paz para el bien de
Israel y de toda la humanidad.”
</h2>
<div class="w-16 self-end mt-64">
<div class="w-16 self-end md:mt-64">
<img
src="/img/white-dove.webp"
alt="White Dove"