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

home page responsive

This commit is contained in:
Guillaume Dorce 2024-01-21 15:54:55 +01:00
parent fd9f4cac65
commit fa55018735
2 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/assets/IMG_2439-CLUB-3 2.png → src/assets/banner.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

15
src/pages/index.astro
View File

@ -3,20 +3,21 @@ import Layout from '../layouts/Layout.astro';
import { Image } from 'astro:assets'; import { Image } from 'astro:assets';
import forum from "../assets/forum-eaee.png"; import forum from "../assets/forum-eaee.png";
import autreForum from "../assets/132108978_o.png"; import autreForum from "../assets/132108978_o.png";
import banner from "../assets/banner.png";
--- ---
<Layout title="Accueil"> <Layout title="Accueil">
<main> <main>
<Image src={banner} alt="Photo club haute lozère" width={1920} height={1080} class="w-full" />
<div class="container mx-auto p-8"> <div class="container mx-auto p-8">
<div class="mb-4 flex gap-10"> <div class="mb-4">
<div class="w-1/2"> <div class="w-full md:w-1/2">
<h1 class="font-poppins text-5xl">Notre club photo</h1> <h1 class="font-poppins text-5xl mb-4">Notre club photo</h1>
<div class="line h-1 w-full bg-black"></div> <div class="line h-1 w-full bg-black"></div>
</div> </div>
<div class="w-1/2"></div>
</div> </div>
<div class="flex gap-10"> <div class="flex gap-10 flex-col md:flex-row">
<div class="flex w-1/2 flex-col gap-8"> <div class="flex w-full md:w-1/2 flex-col gap-8">
<p class="text-xl"> <p class="text-xl">
Le Photo Club de Haute Lozère est une association loi 1901 créée Le Photo Club de Haute Lozère est une association loi 1901 créée
en 2018. en 2018.
@ -35,7 +36,7 @@ import autreForum from "../assets/132108978_o.png";
</p> </p>
<Image src={forum} alt="Forum photo club haute lozère" width={740} height={320} /> <Image src={forum} alt="Forum photo club haute lozère" width={740} height={320} />
</div> </div>
<div class="flex w-1/2 flex-col gap-6"> <div class="flex w-full md:w-1/2 flex-col gap-8">
<Image src={autreForum} alt="Forum photo club haute lozère" width={740} height={320} /> <Image src={autreForum} alt="Forum photo club haute lozère" width={740} height={320} />
<p class="text-xl"> <p class="text-xl">
Ainsi, des sorties à thème sont programmées avec des séances Ainsi, des sorties à thème sont programmées avec des séances