LGCC
/
cdrdpyj
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Header.astro
View File

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

22
src/components/HeroHome.astro
View File

@ -6,34 +6,32 @@ import Header from './Header.astro';
<div class="top-16 relative mb container mx-auto"> <div class="top-16 relative mb container mx-auto">
<Header /> <Header />
</div> </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="grid md:grid-cols-2 h-full px-6">
<div class="gap-8 flex flex-col justify-end"> <div class="gap-8 md:flex flex-col justify-end">
<div>
<img <img
src="/img/logo-metalico.webp" src="/img/logo-metalico.webp"
alt="Logo Metalico" 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 sm:mb-24 mt-8">
<div class="text-primary font-semibold font-secondary mb-24 mt-40"> <h1 class="text-3xl md:text-6xl sm:mb-8">
<h1 class="text-6xl mb-8">
Dr. José Benjamín<br /> Pérez Matos Dr. José Benjamín<br /> Pérez Matos
</h1> </h1>
<h6 class="font-primary font-light uppercase text-white">Lider Fundador</h6> <h6 class="font-primary font-light uppercase text-white">Lider Fundador</h6>
</div> </div>
</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 <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 “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 profetas: un mundo de justicia y paz para el bien de
Israel y de toda la humanidad.” Israel y de toda la humanidad.”
</h2> </h2>
<div class="w-16 self-end mt-64"> <div class="w-16 self-end md:mt-64">
<img <img
src="/img/white-dove.webp" src="/img/white-dove.webp"
alt="White Dove" alt="White Dove"