eleonore/site_web_karafon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajout des nouveaux visuels et changement des couleurs

Browse Source
This commit is contained in:
Pierre-Yves 2025-05-28 14:16:43 +02:00
parent 1befa9de97
commit c63a6fb476
4 changed files with 79 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/affiche-jour1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
images/flyer-verso.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 680 KiB

75
index.html
View File

@ -34,64 +34,31 @@
</p> </p>
</main> </main>
<div id="premier-jour"> <div class="jour-container">
<p class="titre-accueil"><strong>Premier jour : Le Kabärêve !</strong></p> <div id="premier-jour">
<p class="soustitre"> <p class="titre-accueil"><strong>Premier jour : Le Kabärêve!<br/></strong></p>
Le 5 juillet à Saint Genest d’Ambière et le 11 juillet à Saint-Vitte ! <p class="soustitre"><br/>Le 5 juillet à Saint Genest d’Ambière et le 11 juillet à Saint-Vitte !</p>
</p> <p class="soustitre">Venez plongez dans l’univers du rêve avec un dîner spectaculaire sous chapiteau !</p>
<p class="infos-date"> <p class="soustitre">Entrée-Plat-Dessert et Spectacle !</p>
Venez plongez dans l’univers du rêve avec un dîner spectaculaire sous chapiteau ! <p class="soustitre">19h : Ouverture du site<br/>20h : Kabärêve</p>
</p> <p class="soustitre">Au programme une cuisine faite maison mettant en avant des produits locaux et de saison...<br/></p>
<p class="infos-date"> <p class="soustitre"><strong><br/>Prix fourchette au choix entre 30€ et 18€.<br/>Prix -12 ans : 10€</strong></p>
Entrée-Plat-Dessert et Spectacle ! </div>
</p> <img src="images/affiche-jour1.jpg" alt="Affiche jour 1" class="image-jour" />
<p class="infos-date">
19h : Ouverture du site<br/>
20h : Kabärêve
</p>
<p class="infos-date">
Au programme une cuisine faite maison mettant en avant des produits locaux et de saison...
</p>
<p class="infos-date">
<strong>Prix fourchette au choix entre 30€ et 18€.</strong>
</p>
</div>
<div class="banner-image">
<img src="images/photo_kabaret.webp" alt="Kabärêve ambiance chapiteau">
</div> </div>
<div class="jour-container"> <div class="jour-container">
<div class="jour-image"> <img src="images/flyer-verso.jpg" alt="Affiche jour 2" class="image-jour" />
<img src="images/journee_festive.webp" alt="Chapiteau et public"> <div id="deuxieme-jour">
</div>
<div id="deuxième-jour">
<p class="titre-accueil"><strong>Deuxième jour : Journée festive</strong></p> <p class="titre-accueil"><strong>Deuxième jour : Journée festive</strong></p>
<p class="soustitre"> <p class="soustitre"><br/>Le 6 juillet à Saint Genest d’Ambière et le 12 juillet à Saint-Vitte !</p>
Le 6 juillet à Saint Genest d’Ambière et le 12 juillet à Saint-Vitte ! <p class="soustitre"><br/><strong>Prix Libre !</strong></p>
</p> <p class="soustitre"><br/>14h Ouverture du site ( buvette et crêpes aussi!)</p>
<p class="soustitre"> <p class="soustitre">15h "Jus de chaussettes", Cie L’éffémémère...</p>
Prix Libre ! <p class="soustitre">15h45 – 18h : Ateliers, animations, jeux...</p>
</p> <p class="soustitre">18h : « Les désacordées », Cie Asso Téléplomb...</p>
<p class="soustitre"> <p class="soustitre">19h PIZZA</p>
14h Ouverture du site ( buvette et crêpes aussi!) <p class="soustitre">20h Scène ouverte</p>
</p>
<p class="soustitre">
15h "Jus de chaussettes", Cie L’éffémémère...
</p>
<p class="soustitre">
15h45 – 18h : Ateliers, animations, jeux...
</p>
<p class="soustitre">
18h : « Les désacordées », Cie Asso Téléplomb...
</p>
<p class="soustitre">
19h PIZZA
</p>
<p class="soustitre">
20h Scène ouverte
</p>
</div> </div>
</div> </div>

125
karafon_style.css
View File

@ -1,14 +1,17 @@
/* karafon_style.css */
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: Georgia, Verdana, sans-serif; font-family: Georgia, Verdana, sans-serif;
background-color: #fde47d; background-color: #e3bd98;
color: #6c324b;
} }
header { header {
width: 100vw; width: 100vw;
align-items: center; align-items: center;
background-color: #3897d1; background-color: #411431;
padding: 20px; padding: 20px;
text-align: center; text-align: center;
} }
@ -29,7 +32,7 @@ li {
} }
li a { li a {
color: rgb(250, 250, 200); color: #fdcb74;
text-align: center; text-align: center;
padding: 14px 16px; padding: 14px 16px;
text-decoration: none; text-decoration: none;
@ -49,36 +52,31 @@ li a {
} }
#collectif_karafon { #collectif_karafon {
color: rgb(248, 248, 218); color: #fdcb74;
font-size: 2.2em; font-size: 2.2em;
margin: 0; margin: 0;
} }
#festival_itinerant { #festival_itinerant {
color: rgb(248, 248, 218); color: #fdcb74;
font-size: 1.3em; font-size: 1.3em;
margin: 1em 0 1.2em; margin: 1em 0 1.2em;
} }
.corps { .corps {
margin-top: 4em; margin: 4em 10%;
margin-left: 20%;
margin-right: 20%;
text-align: center; text-align: center;
color: rgb(29, 92, 117);
font-size: 1em; font-size: 1em;
} }
#on_attend { #on_attend {
margin-top: 0.5em; margin: 2em auto;
margin-left: 20%; max-width: 80%;
margin-right: 20%;
text-align: center; text-align: center;
color: rgb(29, 92, 117);
font-size: 2.5em; font-size: 2.5em;
} }
/* ===== Titres & sous-titres ===== */
.titre-accueil { .titre-accueil {
font-size: 2.2em; font-size: 2.2em;
font-weight: bold; font-weight: bold;
@ -90,40 +88,40 @@ li a {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
strong { strong {
font-weight: bold; font-weight: bold;
} }
#equipe{
position:absolute; #equipe {
right:7%; position: absolute;
top:30%; right: 7%;
max-height:40%; top: 30%;
max-height: 40%;
} }
#intro-prochain{ #intro-prochain {
margin: 8% 50% -10% 4%; margin: 8% 50% -10% 4%;
} }
.images{ .images {
max-width:80%; max-width: 80%;
} }
.centrer{ .centrer {
text-align: center; text-align: center;
} }
.encadre{ .encadre {
color:rgb(29,92,117); color: #6c324b;
padding:5%; padding: 5%;
font-size: 1.7em; font-size: 1.7em;
font-weight: 600; font-weight: 600;
} }
footer { footer {
background-color: #3897d1; background-color: #411431;
color: rgb(248, 248, 218); color: #fdcb74;
text-align: center; text-align: center;
padding: 20px; padding: 20px;
margin-top: 3em; margin-top: 3em;
@ -138,48 +136,41 @@ footer {
margin-top: 10px; margin-top: 10px;
} }
#premier-jour {
margin: 4em 10% 0 10%;
text-align: left;
color: rgb(29, 92, 117);
font-size: 1em;
}
#deuxième-jour {
flex: 0 1 55%;
text-align: right;
color: rgb(29, 92, 117);
font-size: 1em;
margin: 0;
}
.banner-image {
width: 100%;
text-align: center;
margin: 0;
}
.banner-image img {
width: 100%;
max-width: 1000px;
height: auto;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.jour-image img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
.jour-container { .jour-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-start; align-items: flex-start;
gap: 2em; justify-content: space-between;
margin: 4em 10%; gap: 1.5em;
margin: 3em auto;
max-width: 90%;
} }
.image-jour {
flex: 0 1 45%;
max-width: 45%;
height: auto;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
}
#premier-jour {
flex: 0 1 45%;
max-width: 45%;
margin: 0;
box-sizing: border-box;
text-align: left;
color: #6c324b;
font-size: 1em;
}
#deuxieme-jour {
flex: 0 1 45%;
max-width: 45%;
margin: 0;
box-sizing: border-box;
text-align: right;
color: #6c324b;
font-size: 1em;
}