polynux
/
pchl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix home styling with header

This commit is contained in:
Guillaume Dorce 2023-02-19 17:27:23 +01:00
parent b9c68319bb
commit 441cf30be7
1 changed files with 71 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/pages/index.tsx
View File

@ -4,13 +4,7 @@ import { FaGithub } from "react-icons/fa";
function Header() { function Header() {
return ( return (
<header <header className="flex w-full items-center justify-between bg-gray-800 p-8 text-white">
className="flex w-full items-center justify-between p-8 text-white"
style={{
background:
"linear-gradient(180deg, rgba(30, 29, 29, 0.8) 0%, rgba(38, 38, 38, 0.61) 37%, rgba(40, 40, 40, 0.49) 59%, rgba(255, 255, 255, 0) 100%)",
}}
>
<Link href="/"> <Link href="/">
<Image src="/logo.png" alt="My Site Logo" width={128} height={77} /> <Image src="/logo.png" alt="My Site Logo" width={128} height={77} />
</Link> </Link>
@ -86,7 +80,7 @@ function Layout({ children }: { children: React.ReactNode }) {
return ( return (
<div> <div>
<Header /> <Header />
<main className="container mx-auto p-8">{children}</main> <main>{children}</main>
<Footer /> <Footer />
</div> </div>
); );
@ -95,16 +89,15 @@ function Layout({ children }: { children: React.ReactNode }) {
function Home() { function Home() {
return ( return (
<Layout> <Layout>
<div className="h-[65vh]">
<Image <Image
src="/IMG_2439-CLUB-3 2.png" src="/IMG_2439-CLUB-3 2.png"
alt="" alt=""
width={1920} width={1920}
height={500} height={500}
className="absolute top-0 left-0 -z-10" className="top-0 left-0"
/> />
</div> <div className="container mx-auto p-8">
<div className="flex gap-10 mb-4"> <div className="mb-4 flex gap-10">
<div className="w-1/2"> <div className="w-1/2">
<h1 className="font-poppins text-5xl">Notre club photo</h1> <h1 className="font-poppins text-5xl">Notre club photo</h1>
<div className="line h-1 w-full bg-black"></div> <div className="line h-1 w-full bg-black"></div>
@ -114,25 +107,25 @@ function Home() {
<div className="flex gap-10"> <div className="flex gap-10">
<div className="flex w-1/2 flex-col gap-8"> <div className="flex w-1/2 flex-col gap-8">
<p className="text-xl"> <p className="text-xl">
Le Photo Club de Haute Lozère est une association loi 1901 créée en Le Photo Club de Haute Lozère est une association loi 1901 créée
2018. en 2018.
</p> </p>
<p className="text-xl"> <p className="text-xl">
Le club propose à ses adhérents de partager en groupe la Le club propose à ses adhérents de partager en groupe la pratique
pratique de la photographie, de l&apos;initiation à des techniques plus de la photographie, de l&apos;initiation à des techniques plus
avancées et en découvrir les multiples facettes. avancées et en découvrir les multiples facettes.
</p> </p>
<p className="text-xl"> <p className="text-xl">
L’échange de connaissances et de savoir-faire autour des techniques et de l’art L’échange de connaissances et de savoir-faire autour des
photographiques ainsi que l’organisation d’événements (rencontres, techniques et de l’art photographiques ainsi que l’organisation
sorties, reportages, concours liés à la pratique photographique) d’événements (rencontres, sorties, reportages, concours liés à la
travaux informatiques de post traitement font parties de nos pratique photographique) travaux informatiques de post traitement
activités. font parties de nos activités.
</p> </p>
<Image <Image
src={"/forum-eaee.png"} src={"/forum-eaee.png"}
alt="Forum photo club haute lozère" alt="Forum photo club haute lozère"
width={640} width={740}
height={320} height={320}
/> />
</div> </div>
@ -140,7 +133,7 @@ function Home() {
<Image <Image
src={"/132108978_o.png"} src={"/132108978_o.png"}
alt="Forum photo club haute lozère" alt="Forum photo club haute lozère"
width={640} width={740}
height={320} height={320}
/> />
<p className="text-xl"> <p className="text-xl">
@ -148,22 +141,26 @@ function Home() {
d’analyse des photos réalisées. d’analyse des photos réalisées.
</p> </p>
<p className="text-xl"> <p className="text-xl">
Nous proposons également des séances Nous proposons également des séances de formations aux différentes
de formations aux différentes techniques de la photographie techniques de la photographie (l’appareil photo, la prise de vue,
(l’appareil photo, la prise de vue, gestion de la lumière…). gestion de la lumière…).
</p> </p>
<p className="text-xl"> <p className="text-xl">
En fin de saison, pour finaliser et mettre en valeur nos travaux, une En fin de saison, pour finaliser et mettre en valeur nos travaux,
exposition de nos photographies sera proposée au public. Nous une exposition de nos photographies sera proposée au public. Nous
invitons tous les amateurs de photos à nous rejoindre et partager invitons tous les amateurs de photos à nous rejoindre et partager
cette passion. cette passion.
</p> </p>
<p className="text-xl"> <p className="text-xl">
N’hésitez à contacter le Président : Bernard Sapin au N’hésitez à contacter le Président : Bernard Sapin au
<a href="tel:0681818181" className="font-bold"> 06 81 81 81 81</a> <a href="tel:0681818181" className="font-bold">
{" "}
06 81 81 81 81
</a>
</p> </p>
</div> </div>
</div> </div>
</div>
</Layout> </Layout>
); );
} }