186 lines
2.5 KiB
CSS
186 lines
2.5 KiB
CSS
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: Georgia, Verdana, sans-serif;
|
|
background-color: #fde47d;
|
|
}
|
|
|
|
header {
|
|
width: 100vw;
|
|
align-items: center;
|
|
background-color: #3897d1;
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
img {
|
|
margin: 2%;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
position: relative;
|
|
}
|
|
|
|
li {
|
|
display: inline;
|
|
}
|
|
|
|
li a {
|
|
color: rgb(250, 250, 200);
|
|
text-align: center;
|
|
padding: 14px 16px;
|
|
text-decoration: none;
|
|
font-size: large;
|
|
}
|
|
|
|
#citi {
|
|
position: absolute;
|
|
left: 80%;
|
|
max-width: 8%;
|
|
}
|
|
|
|
#logo {
|
|
position: absolute;
|
|
left: 5%;
|
|
max-width: 13%;
|
|
}
|
|
|
|
#collectif_karafon {
|
|
color: rgb(248, 248, 218);
|
|
font-size: 2.2em;
|
|
margin: 0;
|
|
}
|
|
|
|
#festival_itinerant {
|
|
color: rgb(248, 248, 218);
|
|
font-size: 1.3em;
|
|
margin: 1em 0 1.2em;
|
|
}
|
|
|
|
.corps {
|
|
margin-top: 4em;
|
|
margin-left: 20%;
|
|
margin-right: 20%;
|
|
text-align: center;
|
|
color: rgb(29, 92, 117);
|
|
font-size: 1em;
|
|
}
|
|
|
|
|
|
#on_attend {
|
|
margin-top: 0.5em;
|
|
margin-left: 20%;
|
|
margin-right: 20%;
|
|
text-align: center;
|
|
color: rgb(29, 92, 117);
|
|
font-size: 2.5em;
|
|
}
|
|
|
|
.titre-accueil {
|
|
font-size: 2.2em;
|
|
font-weight: bold;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.soustitre {
|
|
font-size: 1.5em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
|
|
strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#equipe{
|
|
position:absolute;
|
|
right:7%;
|
|
top:30%;
|
|
max-height:40%;
|
|
}
|
|
|
|
#intro-prochain{
|
|
margin: 8% 50% -10% 4%;
|
|
}
|
|
|
|
.images{
|
|
max-width:80%;
|
|
}
|
|
|
|
.centrer{
|
|
text-align: center;
|
|
}
|
|
|
|
.encadre{
|
|
color:rgb(29,92,117);
|
|
padding:5%;
|
|
font-size: 1.7em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
footer {
|
|
background-color: #3897d1;
|
|
color: rgb(248, 248, 218);
|
|
text-align: center;
|
|
padding: 20px;
|
|
margin-top: 3em;
|
|
}
|
|
|
|
.footer-content {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.facebook-icon {
|
|
width: 10%;
|
|
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%;
|
|
}
|
|
|
|
|