antoine/sitecharienko
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changement de template html5up + retouche du logo

Browse Source
This commit is contained in:
Antoine Ouvrard
2021-09-17 15:27:59 +02:00
parent 5e97fdcb3b
commit 9e54cbbd7d
60 changed files with 4230 additions and 5463 deletions
Download Patch File Download Diff File Expand all files Collapse all files

307
index.html
View File

@ -1,174 +1,135 @@
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html lang="fr">
<head>
<title>CharienkO</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Header -->
<section id="header">
</section>
<article class="container box style2">
<header>
<h2>CHARIENKO</h2>
<p>Groupe de musique du monde.<br />
Produit des bonnes ondes de musique tzigane dans la région nantaise.</p>
</header>
</article>
<article id="first" class="container box style1 left">
<a href="#" class="image fit"><img src="images/Antoine.jpg" alt="" /></a>
<div class="inner">
<header>
<h2>Antoine</h2>
</header>
<p>
Autodidacte et amoureux de la musique, du jazz à l’électronique en passant par le rap et les musiques du monde,
il fait battre le coeur de ses Komarades en tenant la pulsation. Ses outils ? La guitare, le cajon ou la basse,
il n’hésite pas non plus à taper du pied et à faire vibrer les cymbalettes.
</p>
</div>
</article>
<article class="container box style1 right">
<a href="#" class="image fit"><img src="images/Claire.jpg" alt="" /></a>
<div class="inner">
<header>
<h2>Claire</h2>
</header>
<p>
Internationaliste de coeur, elle a grandit au son des guitares manouche et flamenca mais a la passion secrète
des musiques extrêmes. Linguiste et poète, elle voyage. Son moyen de transport préféré ? Le train, là où les
langues se confondent.
</p>
</div>
</article>
<article class="container box style1 left">
<a href="#" class="image fit"><img src="images/Jacques.jpg" alt="" /></a>
<div class="inner">
<header>
<h2>Jacques</h2>
</header>
<p>
Un transmetteur du language par lequel il exprime ses émotions depuis plus d’une trentaine d’années déjà. Il a
écouté Ravi Shankar, chanté du Brassens et du Ferré. Il en a bu des coupes pleines de jazz, s’en est tellement
enivré qu’il en a fait son métier. Avide de découvertes, il joue volontiers ce que les autres ont à dire.
</p>
</div>
</article>
<article class="container box style1 right">
<a href="#" class="image fit"><img src="images/Laurence.jpg" alt="" /></a>
<div class="inner">
<header>
<h2>Laurence</h2>
</header>
<p>
Elle connaît les mystères classico-mélodiques et déchiffre la portée aussi vite que son ombre. Elle a le souci
du détail mais ne s’interdit pas de belles envolées acrobatiques quand le coeur lui en dit. Un petit pécher mignon ?
Les jeux ( on se ferait pas une petite partie de ton Galèrapagos ? )
</p>
</div>
</article>
<article class="container box style1 left">
<a href="#" class="image fit"><img src="images/Pamphile.jpg" alt="" /></a>
<div class="inner">
<header>
<h2>Pamphile</h2>
</header>
<p>
On a pour habitude de dire qu’il est tombé dans la soupe musicale étant petit, outre le fait qu’il aime bien manger,
c’est indéniablement un virtuose de l’accordéon. Petite libellule sans cesse en quête de nouvelles inspirations,
il joue pour le théâtre, crée ses propres courts-métrage, s’adonne au rock celtique, rien ne semble l’arrêter !
</p>
</div>
</article>
<!-- Portfolio -->
<article class="container box style2">
<header>
<h2>Photos</h2>
</header>
<div class="inner gallery">
<div class="row gtr-0">
<div class="col-3 col-12-mobile"><a href="images/fulls/01.jpg" class="image fit"><img src="images/thumbs/01.jpg" alt="" title="Concert chez l'habitant" /></a></div>
<div class="col-3 col-12-mobile"><a href="images/fulls/02.jpg" class="image fit"><img src="images/thumbs/02.jpg" alt="" title="Concert dans un Pub" /></a></div>
<div class="col-3 col-12-mobile"><a href="images/fulls/03.jpg" class="image fit"><img src="images/thumbs/03.jpg" alt="" title="Raven" /></a></div>
<div class="col-3 col-12-mobile"><a href="images/fulls/04.jpg" class="image fit"><img src="images/thumbs/04.jpg" alt="" title="I'll have a cup of Disneyland, please" /></a></div>
</div>
<div class="row gtr-0">
<div class="col-3 col-12-mobile"><a href="images/fulls/05.jpg" class="image fit"><img src="images/thumbs/05.jpg" alt="" title="Cherish" /></a></div>
<div class="col-3 col-12-mobile"><a href="images/fulls/06.jpg" class="image fit"><img src="images/thumbs/06.jpg" alt="" title="Different." /></a></div>
<div class="col-3 col-12-mobile"><a href="images/fulls/07.jpg" class="image fit"><img src="images/thumbs/07.jpg" alt="" title="History was made here" /></a></div>
<div class="col-3 col-12-mobile"><a href="images/fulls/08.jpg" class="image fit"><img src="images/thumbs/08.jpg" alt="" title="People come and go and walk away" /></a></div>
</div>
<div class="row gtr-0">
<div class="col-3 col-12-mobile"><a href="images/fulls/09.jpg" class="image fit"><img src="images/thumbs/09.jpg" alt="" title="Cherish" /></a></div>
<div class="col-3 col-12-mobile"><a href="images/fulls/10.jpg" class="image fit"><img src="images/thumbs/10.jpg" alt="" title="Different." /></a></div>
<div class="col-3 col-12-mobile"><a href="images/fulls/11.jpg" class="image fit"><img src="images/thumbs/11.jpg" alt="" title="History was made here" /></a></div>
<div class="col-3 col-12-mobile"><a href="images/fulls/12.jpg" class="image fit"><img src="images/thumbs/12.jpg" alt="" title="People come and go and walk away" /></a></div>
</div>
</div>
</article>
<!-- Contact
<article class="container box style3">
<header>
<h2>Envoyer un message</h2>
<p>Diam dignissim lectus eu ornare volutpat orci.</p>
</header>
<form method="post" action="#">
<div class="row gtr-50">
<div class="col-6 col-12-mobile"><input type="text" class="text" name="name" placeholder="Name" /></div>
<div class="col-6 col-12-mobile"><input type="text" class="text" name="email" placeholder="Email" /></div>
<div class="col-12">
<textarea name="message" placeholder="Message"></textarea>
</div>
<div class="col-12">
<ul class="actions">
<li><input type="submit" value="Envoyer un message" /></li>
</ul>
</div>
</div>
</form>
</article>
-->
<section id="footer">
<ul class="icons">
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon brands fa-google-plus-g"><span class="label">Google+</span></a></li>
<li><a href="#" class="icon brands fa-pinterest"><span class="label">Pinterest</span></a></li>
<li><a href="#" class="icon brands fa-dribbble"><span class="label">Dribbble</span></a></li>
<li><a href="#" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
</ul>
<div class="copyright">
<ul class="menu">
<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</section>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
<!DOCTYPE HTML>
<!--
Dimension by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>CHARIENKO</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<nav>
<ul>
<li><a href="#intro">Intro</a></li>
<li><a href="#work">Couplet</a></li>
<li><a href="#about">Refrain</a></li>
<li><a href="#contact">Solo</a></li>
</ul>
</nav>
</header>
<!-- Main -->
<div id="main">
<!-- Intro -->
<article id="intro">
<h2 class="major">CHARIENKO</h2>
<p>
Groupe de musique du monde</br>
Produit des bonnes ondes de musique tzigane dans la région nantaise.
</p>
</article>
<!-- Work -->
<article id="work">
<h2 class="major">Le groupe</h2>
<span class="image main"><img src="images/Antoine.jpg" alt="" /></span>
<h3>ANTOINE</h3>
<p>
Autodidacte et amoureux de la musique, du jazz à l’électronique en passant par le rap et les musiques du monde,
il fait battre le coeur de ses Komarades en tenant la pulsation. Ses outils ? La guitare, le cajon ou la basse,
il n’hésite pas non plus à taper du pied et à faire vibrer les cymbalettes.
</p>
<span class="image main"><img src="images/Claire.jpg" alt="" /></span>
<h3>CLAIRE</h3>
<p>
Internationaliste de coeur, elle a grandit au son des guitares manouche et flamenca mais a la passion secrète
des musiques extrêmes. Linguiste et poète, elle voyage. Son moyen de transport préféré ? Le train, là où les
langues se confondent.
</p>
<span class="image main"><img src="images/Jacques.jpg" alt="" /></span>
<h3>JACQUES</h3>
<p>
Un transmetteur du language par lequel il exprime ses émotions depuis plus d’une trentaine d’années déjà. Il a
écouté Ravi Shankar, chanté du Brassens et du Ferré. Il en a bu des coupes pleines de jazz, s’en est tellement
enivré qu’il en a fait son métier. Avide de découvertes, il joue volontiers ce que les autres ont à dire.
</p>
<span class="image main"><img src="images/Laurence.jpg" alt="" /></span>
<h3>LAURENCE</h3>
<p>
Elle connaît les mystères classico-mélodiques et déchiffre la portée aussi vite que son ombre. Elle a le souci
du détail mais ne s’interdit pas de belles envolées acrobatiques quand le coeur lui en dit. Un petit pécher mignon ?
Les jeux ( on se ferait pas une petite partie de ton Galèrapagos ? )
</p>
<span class="image main"><img src="images/Pamphile.jpg" alt="" /></span>
<h3>PAMPHILE</h3>
<p>
On a pour habitude de dire qu’il est tombé dans la soupe musicale étant petit, outre le fait qu’il aime bien manger,
c’est indéniablement un virtuose de l’accordéon. Petite libellule sans cesse en quête de nouvelles inspirations,
il joue pour le théâtre, crée ses propres courts-métrage, s’adonne au rock celtique, rien ne semble l’arrêter !
</p>
</article>
<!-- About -->
<article id="about">
<h2 class="major">En concert...</h2>
<span class="image main"><img src="images/01.jpg" alt="" title="Concert chez l'habitant" /></span>
<span class="image main"><img src="images/02.jpg" alt="" title="Concert dans un Pub" /></span>
<span class="image main"><img src="images/03.jpg" alt="" title="Raven" /></span>
<span class="image main"><img src="images/04.jpg" alt="" title="I'll have a cup of Disneyland, please" /></span>
<span class="image main"><img src="images/05.jpg" alt="" title="Cherish" /></span>
<span class="image main"><img src="images/06.jpg" alt="" title="Different." /></span>
<span class="image main"><img src="images/07.jpg" alt="" title="History was made here" /></span>
<span class="image main"><img src="images/08.jpg" alt="" title="People come and go and walk away" /></span>
<span class="image main"><img src="images/09.jpg" alt="" title="Cherish" /></span>
<span class="image main"><img src="images/10.jpg" alt="" title="Different." /></span>
<span class="image main"><img src="images/11.jpg" alt="" title="History was made here" /></span>
<span class="image main"><img src="images/12.jpg" alt="" title="People come and go and walk away" /></span>
</article>
<!-- Contact -->
<article id="contact">
<h2 class="major">Contact</h2>
<form action="https://formspree.io/f/xpzkbdgd" method="POST">
<div class="fields">
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="4"></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Envoyer Message" class="primary" /></li>
<li><input type="reset" value="Reset" /></li>
</ul>
</form>
<ul class="icons">
<li><a href="https://fr-fr.facebook.com/charienko.band" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href="https://soundcloud.com/charienko" class="icon brands fa-soundcloud"><span class="label">Soundcloud</span></a></li>
</ul>
</article>
</div>
</div>
<!-- BG -->
<div id="bg"></div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>