Ajout des nouveaux visuels et changement des couleurs
This commit is contained in:
Pierre-Yves
parent
1befa9de97
commit
c63a6fb476
BIN
images/affiche-jour1.jpg
Normal file
BIN
images/affiche-jour1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
images/flyer-verso.jpg
Normal file
BIN
images/flyer-verso.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 680 KiB |
75
index.html
75
index.html
@ -34,64 +34,31 @@
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<div id="premier-jour">
|
||||
<p class="titre-accueil"><strong>Premier jour : Le Kabärêve !</strong></p>
|
||||
<p class="soustitre">
|
||||
Le 5 juillet à Saint Genest d’Ambière et le 11 juillet à Saint-Vitte !
|
||||
</p>
|
||||
<p class="infos-date">
|
||||
Venez plongez dans l’univers du rêve avec un dîner spectaculaire sous chapiteau !
|
||||
</p>
|
||||
<p class="infos-date">
|
||||
Entrée-Plat-Dessert et Spectacle !
|
||||
</p>
|
||||
<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 class="jour-container">
|
||||
<div id="premier-jour">
|
||||
<p class="titre-accueil"><strong>Premier jour : Le Kabärêve!<br/></strong></p>
|
||||
<p class="soustitre"><br/>Le 5 juillet à Saint Genest d’Ambière et le 11 juillet à Saint-Vitte !</p>
|
||||
<p class="soustitre">Venez plongez dans l’univers du rêve avec un dîner spectaculaire sous chapiteau !</p>
|
||||
<p class="soustitre">Entrée-Plat-Dessert et Spectacle !</p>
|
||||
<p class="soustitre">19h : Ouverture du site<br/>20h : Kabärêve</p>
|
||||
<p class="soustitre">Au programme une cuisine faite maison mettant en avant des produits locaux et de saison...<br/></p>
|
||||
<p class="soustitre"><strong><br/>Prix fourchette au choix entre 30€ et 18€.<br/>Prix -12 ans : 10€</strong></p>
|
||||
</div>
|
||||
<img src="images/affiche-jour1.jpg" alt="Affiche jour 1" class="image-jour" />
|
||||
</div>
|
||||
|
||||
<div class="jour-container">
|
||||
<div class="jour-image">
|
||||
<img src="images/journee_festive.webp" alt="Chapiteau et public">
|
||||
</div>
|
||||
|
||||
<div id="deuxième-jour">
|
||||
<img src="images/flyer-verso.jpg" alt="Affiche jour 2" class="image-jour" />
|
||||
<div id="deuxieme-jour">
|
||||
<p class="titre-accueil"><strong>Deuxième jour : Journée festive</strong></p>
|
||||
<p class="soustitre">
|
||||
Le 6 juillet à Saint Genest d’Ambière et le 12 juillet à Saint-Vitte !
|
||||
</p>
|
||||
<p class="soustitre">
|
||||
Prix Libre !
|
||||
</p>
|
||||
<p class="soustitre">
|
||||
14h Ouverture du site ( buvette et crêpes aussi!)
|
||||
</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>
|
||||
<p class="soustitre"><br/>Le 6 juillet à Saint Genest d’Ambière et le 12 juillet à Saint-Vitte !</p>
|
||||
<p class="soustitre"><br/><strong>Prix Libre !</strong></p>
|
||||
<p class="soustitre"><br/>14h Ouverture du site ( buvette et crêpes aussi!)</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>
|
||||
|
||||
|
||||
@ -1,14 +1,17 @@
|
||||
/* karafon_style.css */
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Georgia, Verdana, sans-serif;
|
||||
background-color: #fde47d;
|
||||
background-color: #e3bd98;
|
||||
color: #6c324b;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100vw;
|
||||
align-items: center;
|
||||
background-color: #3897d1;
|
||||
background-color: #411431;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
@ -29,7 +32,7 @@ li {
|
||||
}
|
||||
|
||||
li a {
|
||||
color: rgb(250, 250, 200);
|
||||
color: #fdcb74;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
@ -49,36 +52,31 @@ li a {
|
||||
}
|
||||
|
||||
#collectif_karafon {
|
||||
color: rgb(248, 248, 218);
|
||||
color: #fdcb74;
|
||||
font-size: 2.2em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#festival_itinerant {
|
||||
color: rgb(248, 248, 218);
|
||||
color: #fdcb74;
|
||||
font-size: 1.3em;
|
||||
margin: 1em 0 1.2em;
|
||||
}
|
||||
|
||||
.corps {
|
||||
margin-top: 4em;
|
||||
margin-left: 20%;
|
||||
margin-right: 20%;
|
||||
margin: 4em 10%;
|
||||
text-align: center;
|
||||
color: rgb(29, 92, 117);
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
|
||||
#on_attend {
|
||||
margin-top: 0.5em;
|
||||
margin-left: 20%;
|
||||
margin-right: 20%;
|
||||
margin: 2em auto;
|
||||
max-width: 80%;
|
||||
text-align: center;
|
||||
color: rgb(29, 92, 117);
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
/* ===== Titres & sous-titres ===== */
|
||||
.titre-accueil {
|
||||
font-size: 2.2em;
|
||||
font-weight: bold;
|
||||
@ -90,40 +88,40 @@ li a {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#equipe{
|
||||
position:absolute;
|
||||
right:7%;
|
||||
top:30%;
|
||||
max-height:40%;
|
||||
|
||||
#equipe {
|
||||
position: absolute;
|
||||
right: 7%;
|
||||
top: 30%;
|
||||
max-height: 40%;
|
||||
}
|
||||
|
||||
#intro-prochain{
|
||||
#intro-prochain {
|
||||
margin: 8% 50% -10% 4%;
|
||||
}
|
||||
|
||||
.images{
|
||||
max-width:80%;
|
||||
.images {
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.centrer{
|
||||
.centrer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.encadre{
|
||||
color:rgb(29,92,117);
|
||||
padding:5%;
|
||||
.encadre {
|
||||
color: #6c324b;
|
||||
padding: 5%;
|
||||
font-size: 1.7em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #3897d1;
|
||||
color: rgb(248, 248, 218);
|
||||
background-color: #411431;
|
||||
color: #fdcb74;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
margin-top: 3em;
|
||||
@ -138,48 +136,41 @@ footer {
|
||||
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 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: 2em;
|
||||
margin: 4em 10%;
|
||||
justify-content: space-between;
|
||||
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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user