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

nouveau header

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
contact.html
View File

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

41
historique.html
View File

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

BIN
images/affiche_prochaine_edition.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
images/chapiteau_tentes.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 957 KiB

BIN
images/equipe.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 MiB

BIN
images/instagram.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 180 KiB

BIN
images/instagrammoche.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 127 KiB

BIN
images/logo.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 208 KiB

BIN
images/logo_citi.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
images/montage_chapiteau.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 MiB

BIN
images/programme1.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 874 KiB

BIN
images/programme2.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
images/spectacle.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 637 KiB

50
index.html
View File

@ -4,30 +4,35 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<title> Karäfon accueil</title> <title> Karäfon accueil</title>
<link rel="stylesheet" href="karafon_style.css" /> <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> </head>
<body> <body>
<header> <header>
<div class="titre"> <div class="titre">
<img src="images/logo.png" alt="logo de l'association" height="70" width="70"/> <img src="images/logo_citi.png" alt="logo de l'association" id="citi"/>
<h1 id="collectif_karafon">Collectif Karäfon</h1> <img src="images/logo.jpeg" alt="logo de l'association" id="logo"/>
<p id="festival_itinerant">Festival itinérant</p>
</div> <h1 id="collectif_karafon"> Collectif Karäfon</h1>
<div class="buttons"> <h2 id="festival_itinerant">Festival itinérant</h2>
<span class="encours"> <ul>
<input name="button" id="boutonAccueil" value="Accueil" type="button" > <br/> <li><a href="index.html"> Accueil </a></li>
</span> <li><a href="presentation.html"> Présentation </a></li>
<input name="button" id="boutonPresentation" onclick="fonctionPresentation()" value="Présentation" type="button" > <br/> <li><a href="prochains_evenements.html"> Prochains évènements </a></li>
<input name="button" id="boutonHistorique" onclick="fonctionHistorique()" value="Historique" type="button" > <br/> <li><a href="historique.html"> Historique </a></li>
<input name="button" id="boutonProchainsEvenements" onclick="fonctionProchainsEvenements()" value="Prochains événements" type="button" > <br/> <li><a href="contact.html"> Contact </a></li>
<input name="button" id="boutonContact" onclick="fonctionContact()" value="Contact" type="button" > <br/>
</ul>
</div> </div>
</header> </header>
<div class="corps"> <div class="corps">
<div class="centrer"> <div class="centrer">
<img src="/images/festival.jpg" alt="photo du festival"/> <h1> Le Collectif Karäfon pose ses valises et implante son chapiteau pour la
<h1> prochaine édition en juillet</h1> 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"> <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. <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. 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> </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> </html>

73
karafon_style.css
View File

@ -1,15 +1,12 @@
html { html {
font-family: Arial, Helvetica, sans-serif; font-family: Georgia, Verdana, sans-serif;
} }
header { header {
display: flex;
flex-direction: column;
align-items: center; align-items: center;
background-color: rgb(40,140,180); background-color: rgb(40,140,180);
padding: 20px; padding: 20px;
text-align: center; text-align: center;
} }
body{ body{
@ -17,44 +14,44 @@ body{
background-color: rgb(250, 250, 200); background-color: rgb(250, 250, 200);
} }
img{ img{
position: static; margin:2%;
} }
input[type=button] { ul {
display: inline-block; list-style-type: none;
bottom: 10px; margin: 0;
font-weight: bold; padding: 0;
background-color: rgb(250, 250, 200); position:relative;
border-radius: 4px; }
width: 150px;
padding: 7px; li {
cursor:pointer; 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{ .centrer{
text-align: center; text-align: center;
} }
.buttons{
text-align: center;
display: flex;
align-items: flex-end;
box-sizing: border-box;
gap: 10px;
}
.title { .title {
text-align: center; text-align: center;
} }
.corps{ .corps{
margin-top: 5%; margin-top: 8%;
}
.encours > input[type=button]{
background-color: rgb(189, 191, 145);
} }
#texte-intro{ #texte-intro{
@ -62,3 +59,23 @@ input[type=button] {
margin-left: 20%; margin-left: 20%;
margin-right: 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);
}

41
presentation.html
View File

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

41
prochains_evenements.html
View File

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