nouveau header
43
contact.html
@ -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>
|
@ -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>
|
BIN
images/affiche_prochaine_edition.jpg
Normal file
After Width: | Height: | Size: 1.8 MiB |
BIN
images/chapiteau_tentes.jpeg
Normal file
After Width: | Height: | Size: 957 KiB |
BIN
images/equipe.jpeg
Normal file
After Width: | Height: | Size: 4.5 MiB |
Before Width: | Height: | Size: 180 KiB |
Before Width: | Height: | Size: 127 KiB |
BIN
images/logo.jpeg
Normal file
After Width: | Height: | Size: 73 KiB |
BIN
images/logo.png
Before Width: | Height: | Size: 208 KiB |
BIN
images/logo_citi.png
Normal file
After Width: | Height: | Size: 27 KiB |
BIN
images/montage_chapiteau.jpeg
Normal file
After Width: | Height: | Size: 11 MiB |
BIN
images/programme1.jpeg
Normal file
After Width: | Height: | Size: 874 KiB |
BIN
images/programme2.jpeg
Normal file
After Width: | Height: | Size: 1.2 MiB |
BIN
images/spectacle.jpeg
Normal file
After Width: | Height: | Size: 637 KiB |
50
index.html
@ -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>
|
||||
|
@ -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,44 +14,44 @@ 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{
|
||||
@ -62,3 +59,23 @@ input[type=button] {
|
||||
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);
|
||||
}
|
@ -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>
|
@ -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>
|