nouveau header

This commit is contained in:
eleonore12345 2024-06-20 14:04:42 +02:00
parent 9755383f8b
commit 20a1843b25
18 changed files with 123 additions and 166 deletions

View File

@ -4,26 +4,26 @@
<meta charset="utf-8" />
<title> Karäfon contact</title>
<link rel="stylesheet" href="karafon_style.css" />
<link rel="shortcut icon" type="image/x-icon" href="images/logo.png" />
<link rel="shortcut icon" type="image/x-icon" href="images/logo.jpeg" />
</head>
<body>
<header>
<div class="titre">
<img src="images/logo.png" alt="logo de l'association" height="70" width="70"/>
<h1 id="collectif_karafon">Collectif Karäfon</h1>
<p id="festival_itinerant">Festival itinérant</p>
</div>
<div class="buttons">
<input name="button" id="boutonAccueil" onclick="fonctionAccueil()" value="Accueil" type="button" > <br/>
<input name="button" id="boutonPresentation" onclick="fonctionPresentation()" value="Présentation" type="button" > <br/>
<input name="button" id="boutonHistorique" onclick="fonctionHistorique()" value="Historique" type="button" > <br/>
<input name="button" id="boutonProchainsEvenements" onclick="fonctionProchainsEvenements()" value="Prochains événements" type="button" > <br/>
<span class="encours">
<input name="button" id="boutonContact" value="Contact" type="button" > <br/>
</span>
<img src="images/logo_citi.png" alt="logo de l'association" id="citi"/>
<img src="images/logo.jpeg" alt="logo de l'association" id="logo"/>
<h1 id="collectif_karafon"> Collectif Karäfon</h1>
<h2 id="festival_itinerant">Festival itinérant</h2>
<ul>
<li><a href="index.html"> Accueil </a></li>
<li><a href="presentation.html"> Présentation </a></li>
<li><a href="prochains_evenements.html"> Prochains évènements </a></li>
<li><a href="historique.html"> Historique </a></li>
<li><a href="contact.html"> Contact </a></li>
</ul>
</div>
</header>
<div class="corps">
<div class="centrer">
<p> Vous pouvez contacter le collectif Karäfon à l'adresse mail ___ ou bien au numéro de téléphone ___ </p>
@ -38,18 +38,5 @@
</body>
<script id=historique type="text/javascript">
function fonctionPresentation(){
window.location="presentation.html";
}
function fonctionHistorique(){
window.location="historique.html";
}
function fonctionAccueil(){
window.location="index.html";
}
function fonctionProchainsEvenements(){
window.location="prochains_evenements.html";
}
</script>
</html>

View File

@ -4,40 +4,27 @@
<meta charset="utf-8" />
<title> Karäfon historique</title>
<link rel="stylesheet" href="karafon_style.css" />
<link rel="shortcut icon" type="image/x-icon" href="images/logo.png" />
<link rel="shortcut icon" type="image/x-icon" href="images/logo.jpeg" />
</head>
<body>
<header>
<div class="titre">
<img src="images/logo.png" alt="logo de l'association" height="70" width="70"/>
<h1 id="collectif_karafon">Collectif Karäfon</h1>
<p id="festival_itinerant">Festival itinérant</p>
</div>
<div class="buttons">
<input name="button" id="boutonAccueil" onclick="fonctionAccueil()" value="Accueil" type="button" > <br/>
<input name="button" id="boutonPresentation" onclick="fonctionPresentation()" value="Présentation" type="button" > <br/>
<span class="encours">
<input name="button" id="boutonHistorique" value="Historique" type="button" > <br/>
</span>
<input name="button" id="boutonProchainsEvenements" onclick="fonctionProchainsEvenements()" value="Prochains événements" type="button" > <br/>
<input name="button" id="boutonContact" onclick="fonctionContact()" value="Contact" type="button" > <br/>
<img src="images/logo_citi.png" alt="logo de l'association" id="citi"/>
<img src="images/logo.jpeg" alt="logo de l'association" id="logo"/>
<h1 id="collectif_karafon"> Collectif Karäfon</h1>
<h2 id="festival_itinerant">Festival itinérant</h2>
<ul>
<li><a href="index.html"> Accueil </a></li>
<li><a href="presentation.html"> Présentation </a></li>
<li><a href="prochains_evenements.html"> Prochains évènements </a></li>
<li><a href="historique.html"> Historique </a></li>
<li><a href="contact.html"> Contact </a></li>
</ul>
</div>
</header>
<p>Voici l'historique</p>
</body>
<script type="text/javascript">
function fonctionAccueil(){
window.location.href="index.html";
}
function fonctionPresentation(){
window.location="presentation.html";
}
function fonctionContact(){
window.location="contact.html";
}
function fonctionProchainsEvenements(){
window.location="prochains_evenements.html";
}
</script>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 957 KiB

BIN
images/equipe.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 180 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 127 KiB

BIN
images/logo.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 208 KiB

BIN
images/logo_citi.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 MiB

BIN
images/programme1.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 874 KiB

BIN
images/programme2.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
images/spectacle.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 637 KiB

View File

@ -4,30 +4,35 @@
<meta charset="utf-8" />
<title> Karäfon accueil</title>
<link rel="stylesheet" href="karafon_style.css" />
<link rel="shortcut icon" type="image/x-icon" href="images/logo.png" />
<link rel="shortcut icon" type="image/x-icon" href="images/logo.jpeg" />
</head>
<body>
<header>
<div class="titre">
<img src="images/logo.png" alt="logo de l'association" height="70" width="70"/>
<h1 id="collectif_karafon">Collectif Karäfon</h1>
<p id="festival_itinerant">Festival itinérant</p>
</div>
<div class="buttons">
<span class="encours">
<input name="button" id="boutonAccueil" value="Accueil" type="button" > <br/>
</span>
<input name="button" id="boutonPresentation" onclick="fonctionPresentation()" value="Présentation" type="button" > <br/>
<input name="button" id="boutonHistorique" onclick="fonctionHistorique()" value="Historique" type="button" > <br/>
<input name="button" id="boutonProchainsEvenements" onclick="fonctionProchainsEvenements()" value="Prochains événements" type="button" > <br/>
<input name="button" id="boutonContact" onclick="fonctionContact()" value="Contact" type="button" > <br/>
<img src="images/logo_citi.png" alt="logo de l'association" id="citi"/>
<img src="images/logo.jpeg" alt="logo de l'association" id="logo"/>
<h1 id="collectif_karafon"> Collectif Karäfon</h1>
<h2 id="festival_itinerant">Festival itinérant</h2>
<ul>
<li><a href="index.html"> Accueil </a></li>
<li><a href="presentation.html"> Présentation </a></li>
<li><a href="prochains_evenements.html"> Prochains évènements </a></li>
<li><a href="historique.html"> Historique </a></li>
<li><a href="contact.html"> Contact </a></li>
</ul>
</div>
</header>
<div class="corps">
<div class="centrer">
<img src="/images/festival.jpg" alt="photo du festival"/>
<h1> prochaine édition en juillet</h1>
<h1> Le Collectif Karäfon pose ses valises et implante son chapiteau pour la
seconde fois à Beauvoir en Royans du 3 au 7 juillet !
Un festival convivial, familial et festif proposé par la troupe Karäfon
!</h1>
<img src="images/equipe.jpeg" alt="photo du festival" height="200"/>
<img src="images/spectacle.jpeg" alt="photo du festival" height="200"/>
<div id="texte-intro">
<p>Art, cuisine, associations, action territoriale… Le Karäfon est un projet fondamentalement ouvert et curieux qui mélange les influences dans un objectif clair : démocratiser par tous les moyens l'accès à la culture.
Travaillant en chapiteau, le Karäfon a aujourd'hui à son actif trois éditions très réussies de son festival itinérant : plusieurs mois de tournée à travers la France avec un spectacle pluridisciplinaire, un restaurant semi-gastronomique sous chapiteau à base de produits locaux, des ateliers, une inclusion systématique des écoles, des associations et des habitant-e-s.
@ -40,18 +45,5 @@
</body>
<script type="text/javascript">
function fonctionPresentation(){
window.location="presentation.html";
}
function fonctionHistorique(){
window.location="historique.html";
}
function fonctionContact(){
window.location="contact.html";
}
function fonctionProchainsEvenements(){
window.location="prochains_evenements.html";
}
</script>
</html>

View File

@ -1,15 +1,12 @@
html {
font-family: Arial, Helvetica, sans-serif;
font-family: Georgia, Verdana, sans-serif;
}
header {
display: flex;
flex-direction: column;
align-items: center;
background-color: rgb(40,140,180);
padding: 20px;
text-align: center;
}
body{
@ -17,48 +14,68 @@ body{
background-color: rgb(250, 250, 200);
}
img{
position: static;
margin:2%;
}
input[type=button] {
display: inline-block;
bottom: 10px;
font-weight: bold;
background-color: rgb(250, 250, 200);
border-radius: 4px;
width: 150px;
padding: 7px;
cursor:pointer;
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;
}
h1{
color:rgb(223, 56, 27);
margin-left: 22%;
margin-right: 22%;
}
.centrer{
text-align: center;
}
.buttons{
text-align: center;
display: flex;
align-items: flex-end;
box-sizing: border-box;
gap: 10px;
}
.title {
text-align: center;
}
.corps{
margin-top: 5%;
}
.encours > input[type=button]{
background-color: rgb(189, 191, 145);
margin-top: 8%;
}
#texte-intro{
text-align: center;
margin-left: 20%;
margin-right: 20%;
}
#citi{
position:absolute;
left: 80%;
max-width: 3%;
}
#logo{
position:absolute;
left: 5%;
max-width:10%;
}
#collectif_karafon{
color: rgb(248, 248, 218);
}
#festival_itinerant{
color:rgb(248,248,218);
}

View File

@ -4,39 +4,26 @@
<meta charset="utf-8" />
<title> Karäfon présentation</title>
<link rel="stylesheet" href="karafon_style.css" />
<link rel="shortcut icon" type="image/x-icon" href="images/logo.png" />
<link rel="shortcut icon" type="image/x-icon" href="images/logo.jpeg" />
</head>
<body>
<header>
<div class="titre">
<img src="images/logo.png" alt="logo de l'association" height="70" width="70"/>
<h1 id="collectif_karafon">Collectif Karäfon</h1>
<p id="festival_itinerant">Festival itinérant</p>
</div>
<div class="buttons">
<input name="button" id="boutonAccueil" onclick="fonctionAccueil()" value="Accueil" type="button" > <br/>
<span class="encours">
<input name="button" id="boutonPresentation" value="Présentation" type="button" > <br/>
</span>
<input name="button" id="boutonHistorique" onclick="fonctionHistorique()" value="Historique" type="button" > <br/>
<input name="button" id="boutonProchainsEvenements" onclick="fonctionProchainsEvenements()" value="Prochains événements" type="button" > <br/>
<input name="button" id="boutonContact" onclick="fonctionContact()" value="Contact" type="button" > <br/>
<img src="images/logo_citi.png" alt="logo de l'association" id="citi"/>
<img src="images/logo.jpeg" alt="logo de l'association" id="logo"/>
<h1 id="collectif_karafon"> Collectif Karäfon</h1>
<h2 id="festival_itinerant">Festival itinérant</h2>
<ul>
<li><a href="index.html"> Accueil </a></li>
<li><a href="presentation.html"> Présentation </a></li>
<li><a href="prochains_evenements.html"> Prochains évènements </a></li>
<li><a href="historique.html"> Historique </a></li>
<li><a href="contact.html"> Contact </a></li>
</ul>
</div>
</header>
</body>
<script id=historique type="text/javascript">
function fonctionHistorique(){
window.location="historique.html";
}
function fonctionAccueil(){
window.location="index.html";
}
function fonctionContact(){
window.location="contact.html";
}
function fonctionProchainsEvenements(){
window.location="prochains_evenements.html";
}
</script>
</html>

View File

@ -4,38 +4,25 @@
<meta charset="utf-8" />
<title> Karäfon prochains événements</title>
<link rel="stylesheet" href="karafon_style.css" />
<link rel="shortcut icon" type="image/x-icon" href="images/logo.png" />
<link rel="shortcut icon" type="image/x-icon" href="images/logo.jpeg" />
</head>
<body>
<header>
<div class="titre">
<img src="images/logo.png" alt="logo de l'association" height="70" width="70"/>
<h1 id="collectif_karafon">Collectif Karäfon</h1>
<p id="festival_itinerant">Festival itinérant</p>
</div>
<div class="buttons">
<input name="button" id="boutonAccueil" onclick="fonctionAccueil()" value="Accueil" type="button" > <br/>
<input name="button" id="boutonPresentation" onclick="fonctionPresentation()" value="Présentation" type="button" > <br/>
<input name="button" id="boutonHistorique" onclick="fonctionHistorique()" value="Historique" type="button" > <br/>
<span class="encours">
<input name="button" id="boutonProchainsEvenements" value="Prochains événements" type="button" > <br/>
</span>
<input name="button" id="boutonContact" onclick="fonctionContact()" value="Contact" type="button" > <br/>
<img src="images/logo_citi.png" alt="logo de l'association" id="citi"/>
<img src="images/logo.jpeg" alt="logo de l'association" id="logo"/>
<h1 id="collectif_karafon"> Collectif Karäfon</h1>
<h2 id="festival_itinerant">Festival itinérant</h2>
<ul>
<li><a href="index.html"> Accueil </a></li>
<li><a href="presentation.html"> Présentation </a></li>
<li><a href="prochains_evenements.html"> Prochains évènements </a></li>
<li><a href="historique.html"> Historique </a></li>
<li><a href="contact.html"> Contact </a></li>
</ul>
</div>
</header>
</body>
<script id=historique type="text/javascript">
function fonctionPresentation(){
window.location="presentation.html";
}
function fonctionHistorique(){
window.location="historique.html";
}
function fonctionAccueil(){
window.location="index.html";
}
function fonctionContact(){
window.location="contact.html";
}
</script>
</html>