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

add header gradient and add home picture

This commit is contained in:
Guillaume Dorce 2023-02-11 17:56:48 +01:00
parent bcbaa5ebaf
commit 5d0c9ce93a
2 changed files with 40 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/IMG_2439-CLUB-3 2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

70
src/pages/index.tsx
View File

@ -4,7 +4,13 @@ import { FaGithub } from "react-icons/fa";
function Header() { function Header() {
return ( return (
<header className="flex w-full items-center justify-between bg-slate-800 p-8 text-white"> <header
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>
@ -37,34 +43,32 @@ function Footer() {
return ( return (
<footer className="absolute bottom-0 w-full bg-neutral-800"> <footer className="absolute bottom-0 w-full bg-neutral-800">
<div className="container mx-auto p-8"> <div className="container mx-auto p-8">
<div className="flex flex-col items-center justify-between md:flex-row"> <div className="flex items-center justify-around md:flex-row">
<div className="flex items-center md:flex-row"> <div className="flex items-center">
<div className="flex items-center"> <Image
<Image src="/logo.png"
src="/logo.png" alt="Logo photo club haute lozère"
alt="My Site Logo" width={128}
width={128} height={77}
height={77} />
/> </div>
</div> <div className="ml-4 flex flex-col items-center">
<div className="ml-4 flex flex-col"> <span className="text-neutral-300">
<span className="text-neutral-300"> © 2023 Photo Club de Haute Lozère
© 2023 Photo Club de Haute Lozère </span>
</span> <span className="text-neutral-300">Tous droits réservés</span>
<span className="text-neutral-300">Tous droits réservés</span> </div>
</div> <div className="ml-4 flex">
<div className="ml-4 flex"> <span className="text-neutral-300">
<span className="text-neutral-300">Développé par </span> Développé par{" "}
<span className="text-neutral-300"> <a
<a href="https://github.com/polynux"
href="https://github.com/polynux" target="_blank"
target="_blank" rel="noreferrer"
rel="noreferrer" >
> polynux <FaGithub className="inline" />
polynux <FaGithub /> </a>
</a> </span>
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -85,7 +89,13 @@ function Layout({ children }: { children: React.ReactNode }) {
function Home() { function Home() {
return ( return (
<Layout> <Layout>
<h1>My Site</h1> <Image
src="/IMG_2439-CLUB-3 2.png"
alt=""
width={1920}
height={500}
className="absolute top-0 -z-10"
/>
</Layout> </Layout>
); );
} }