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

145
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,73 +89,76 @@ 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="top-0 left-0"
className="absolute top-0 left-0 -z-10" />
/> <div className="container mx-auto p-8">
</div> <div className="mb-4 flex gap-10">
<div className="flex gap-10 mb-4"> <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> </div>
<div className="w-1/2"></div>
</div> </div>
<div className="w-1/2"></div> <div className="flex gap-10">
</div> <div className="flex w-1/2 flex-col gap-8">
<div className="flex gap-10"> <p className="text-xl">
<div className="flex w-1/2 flex-col gap-8"> Le Photo Club de Haute Lozère est une association loi 1901 créée
<p className="text-xl"> en 2018.
Le Photo Club de Haute Lozère est une association loi 1901 créée en </p>
2018. <p className="text-xl">
</p> Le club propose à ses adhérents de partager en groupe la pratique
<p className="text-xl"> de la photographie, de l&apos;initiation à des techniques plus
Le club propose à ses adhérents de partager en groupe la avancées et en découvrir les multiples facettes.
pratique de la photographie, de l&apos;initiation à des techniques plus </p>
avancées et en découvrir les multiples facettes. <p className="text-xl">
</p> L’échange de connaissances et de savoir-faire autour des
<p className="text-xl"> techniques et de l’art photographiques ainsi que l’organisation
L’échange de connaissances et de savoir-faire autour des techniques et de l’art d’événements (rencontres, sorties, reportages, concours liés à la
photographiques ainsi que l’organisation d’événements (rencontres, pratique photographique) travaux informatiques de post traitement
sorties, reportages, concours liés à la pratique photographique) font parties de nos activités.
travaux informatiques de post traitement font parties de nos </p>
activités. <Image
</p> src={"/forum-eaee.png"}
<Image alt="Forum photo club haute lozère"
src={"/forum-eaee.png"} width={740}
alt="Forum photo club haute lozère" height={320}
width={640} />
height={320} </div>
/> <div className="flex w-1/2 flex-col gap-6">
</div> <Image
<div className="flex w-1/2 flex-col gap-6"> src={"/132108978_o.png"}
<Image alt="Forum photo club haute lozère"
src={"/132108978_o.png"} width={740}
alt="Forum photo club haute lozère" height={320}
width={640} />
height={320} <p className="text-xl">
/> Ainsi, des sorties à thème sont programmées avec des séances
<p className="text-xl"> d’analyse des photos réalisées.
Ainsi, des sorties à thème sont programmées avec des séances </p>
d’analyse des photos réalisées. <p className="text-xl">
</p> Nous proposons également des séances de formations aux différentes
<p className="text-xl"> techniques de la photographie (l’appareil photo, la prise de vue,
Nous proposons également des séances gestion de la lumière…).
de formations aux différentes techniques de la photographie </p>
(l’appareil photo, la prise de vue, gestion de la lumière…). <p className="text-xl">
</p> En fin de saison, pour finaliser et mettre en valeur nos travaux,
<p className="text-xl"> une exposition de nos photographies sera proposée au public. Nous
En fin de saison, pour finaliser et mettre en valeur nos travaux, une invitons tous les amateurs de photos à nous rejoindre et partager
exposition de nos photographies sera proposée au public. Nous cette passion.
invitons tous les amateurs de photos à nous rejoindre et partager </p>
cette passion. <p className="text-xl">
</p> N’hésitez à contacter le Président : Bernard Sapin au
<p className="text-xl"> <a href="tel:0681818181" className="font-bold">
N’hésitez à contacter le Président : Bernard Sapin au {" "}
<a href="tel:0681818181" className="font-bold"> 06 81 81 81 81</a> 06 81 81 81 81
</p> </a>
</p>
</div>
</div> </div>
</div> </div>
</Layout> </Layout>