TiBillet-Ticket-Nonfree/DjangoFiles/BaseBillet/static/arnaud_mvc/pages/festival.html

262 lines
12 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ti Billet, Billeterie en ligne de vos événements</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');</style>
<style>@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap');</style>
<link rel="stylesheet" href="../css/creative.css">
</head>
<body>
<!-- MENU -->
<nav class="menu">
<div><img src="../img/logotibillet.png" alt="logo billeterie Ti Billet" class="logotibillet"></div>
<ul class="menutb">
<li class="m"><a href="#Accueil"><img src="../img/menu/home.svg" alt="logo billeterie Ti Billet" class="menutibillet m1"></a></li>
<li class="m"><a href="#Apropos"><img src="../img/menu/like.svg" alt="logo billeterie Ti Billet" class="menutibillet m2"></a></li>
<li class="m"><a href="#Contact"><img src="../img/menu/calendrier.svg" alt="logo billeterie Ti Billet" class="menutibillet m3"></a></li>
<li class="m"><a href="#Contact"><img src="../img/menu/search.svg" alt="logo billeterie Ti Billet" class="menutibillet m4"></a></li>
<li class="m"><a id="filter" class="filter"><img src="../img/menu/filtrer.svg" alt="logo billeterie Ti Billet" class="menutibillet filter m5"></a></li>
<!-- onClick="asideswipe()" -->
</ul>
</nav>
<!-- ASIDE -->
<nav class="aside " id="aside">
<div class="menu-aside">
<!-- <a href="" class="btn-aside b1">
<img src="img/aside/concerts.svg" alt="logo billeterie Ti Billet" class="">
<h4>CONCERTS</h4>
</a>
<a href="" class="btn-aside b2">
<img src="img/aside/lieux.svg" alt="logo billeterie Ti Billet" class="">
<h4>LIEUX</h4>
</a>
<a href="" class="btn-aside b3">
<img src="img/aside/artistes.svg" alt="logo billeterie Ti Billet" class="">
<h4 class="H41">ARTISTES</h4>
</a> -->
<a href="#" class="btn-aside2">
<div class="btnside btnconcerts">
<img src="../img/aside/concerts.svg" alt="logo billeterie Ti Billet" class="imgaside-concert">
<h4 class="H41">CONCERTS</h4>
</div>
</a href="#">
<a href="#" class="btn-aside3">
<div class="btnside btnlieux">
<img src="../img/aside/lieux.svg" alt="logo billeterie Ti Billet" class="imgaside-lieux">
<h4 class="H42">LIEUX</h4>
</div>
</a href="#">
<a href="#" class="btn-aside4">
<div class="btnside btnartiste">
<img src="../img/aside/artistes.svg" alt="logo billeterie Ti Billet" class="imgaside-artiste">
<h4 class="H43">ARTISTES</h4>
</div>
</a href="#">
<!-- <ul>
<li><a href="#Accueil"><img src="img/aside/concerts.png" alt="logo billeterie Ti Billet" class="linkaside"></a></li>
<li><a href="#Apropos"><img src="img/aside/lieux.png" alt="logo billeterie Ti Billet" class="linkaside"></a></li>
<li><a href="#Contact"><img src="img/aside/artistes.png" alt="logo billeterie Ti Billet" class="linkaside"></a></li>
</ul> -->
</nav>
<!-- META BILLETERIE -->
<div class="meta">
<!-- PAGE ARTISTE -->
<div style="width: 100%; height:25px; background-color: black; color:white;" > VUE PAGE ARTISTES</div>
<div class="card-meta-50">
<a href="" class="img-card-full">
<div class="effet"><h1>BALAPHONIK SOUND SYSTEM</h1></div>
<img src="../img/meta/balafonik-1.jpg" alt="Image de la vignette" class="cover">
</a>
</div>
<div class="card-meta-50 artiste-bloc" style="background-color: #140f0c;">
<div class="artiste-description">
<h1 class="title-artiste">BIO DE L'ARTISTE</h1>
<span class="text-event">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem </span>
<div class="linksocial">
<a href=""><img src="../img/footer/facebook.png" alt="billeterie Ti Billet"></a>
<a href=""><img src="../img/footer/messenger.png" alt="billeterie Ti Billet"></a>
<a href=""><img src="../img/footer/twitter.png" alt="billeterie Ti Billet"></a>
<a href=""><img src="../img/footer/insta.png" alt="billeterie Ti Billet"></a>
<a href=""><img src="../img/footer/whats.png" alt="billeterie Ti Billet"></a>
</div>
</div>
<div class="menu-page">
<a href="" class="btn-menu-page">
<img src="../img/menu/micro.png" alt="billeterie Ti Billet">
<h4 style="font-size: 0.8rem;">CONCERTS</h4>
</a>
<a href="" class="btn-menu-page">
<img src="../img/menu/photo.png" alt="billeterie Ti Billet">
<h4 style="font-size: 0.8rem;">PHOTO</h4>
</a>
<a href="" class="btn-menu-page">
<img src="../img/menu/video.png" alt="billeterie Ti Billet">
<h4 style="font-size: 0.8rem;">VIDEO</h4>
</a>
<a href="" class="btn-menu-page" style="margin-right:0;">
<img src="../img/menu/programme.png" alt="billeterie Ti Billet">
<h4 style="font-size: 0.8rem;">PROGRAMME</h4>
</a>
</div>
</div>
<div class="card-meta-100">
<div class="img-card-full">
<div class="effet"></div>
<div style="background-color: #140f0c; height:100%; width: 25%; position: absolute; left:50%; z-index:9000; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<h1 style="margin-top:5px; margin-bottom: 5px; font-size:2rem;">BALAPHONIK</h1>
<h1 style="margin-top:0px; margin-bottom: 5px;">LE BISIK 20H00</h1>
<h3>Beat Box / Looper</h3>
<div class="card-footer-link">
<a href=""><img src="../img/meta/likebtn.png" alt="logo billeterie Ti Billet" class="linkcard" style="max-height: 50px;"></a>
<a href=""><img src="../img/meta/reserver.png" alt="logo billeterie Ti Billet" class="linkcard" style="max-height: 50px;"></a>
</div>
<h3 style="font-size: 1.7rem; margin-top:10px;">20€</h3>
</div>
<img src="../img/meta/zan.jpg" alt="Image de la vignette" class="cover">
</div>
</div>
<div class="card card-meta ">
<!-- PARTIE HAUTE DE LA DIV IMG ET CONTENT -->
<a href="" class="img-card-meta">
<div class="content-img">
<h1>BALAPHONIK SOUND SYSTEM</h1>
<div class="effetxt"></div>
</div>
<div class="effet"></div>
<div class="effetnoir"></div>
<img src="../img/meta/bala.jpg" alt="Image de la vignette" class="cover">
</a>
<!-- PARTIE BASSE INFO LIEUX / TARIFS -->
<div class="info-card-meta">
<h2 class="card-title">MANAPANY FESTIVAL 2022</h2>
<div class="card-footer" >
10 Octobre 2022
<div class="card-footer-link">
<a href=""><img src="../img/meta/likebtn.png" alt="logo billeterie Ti Billet" class="linkcard"></a>
<a href=""><img src="../img/meta/reserver.png" alt="logo billeterie Ti Billet" class="linkcard"></a>
<a href="" class="linkcard">20€</a>
</div>
</div>
</div>
</div>
<div class="card card-meta ">
<!-- PARTIE HAUTE DE LA DIV IMG ET CONTENT -->
<a href="" class="img-card-meta">
<div class="content-img">
<h1>BALAPHONIK SOUND SYSTEM</h1>
<div class="effetxt"></div>
</div>
<div class="effet"></div>
<div class="effetnoir"></div>
<img src="../img/meta/bala.jpg" alt="Image de la vignette" class="cover">
</a>
<!-- PARTIE BASSE INFO LIEUX / TARIFS -->
<div class="info-card-meta">
<h2 class="card-title">MANAPANY FESTIVAL 2022</h2>
<div class="card-footer" >
10 Octobre 2022
<div class="card-footer-link">
<a href=""><img src="../img/meta/likebtn.png" alt="logo billeterie Ti Billet" class="linkcard"></a>
<a href=""><img src="../img/meta/reserver.png" alt="logo billeterie Ti Billet" class="linkcard"></a>
<a href="" class="linkcard">20€</a>
</div>
</div>
</div>
</div>
<div class="card card-meta ">
<!-- PARTIE HAUTE DE LA DIV IMG ET CONTENT -->
<a href="" class="img-card-meta">
<div class="content-img">
<h1>BALAPHONIK SOUND SYSTEM</h1>
<div class="effetxt"></div>
</div>
<div class="effet"></div>
<div class="effetnoir"></div>
<img src="../img/meta/bala.jpg" alt="Image de la vignette" class="cover">
</a>
<!-- PARTIE BASSE INFO LIEUX / TARIFS -->
<div class="info-card-meta">
<h2 class="card-title">MANAPANY FESTIVAL 2022</h2>
<div class="card-footer" >
10 Octobre 2022
<div class="card-footer-link">
<a href=""><img src="../img/meta/likebtn.png" alt="logo billeterie Ti Billet" class="linkcard"></a>
<a href=""><img src="../img/meta/reserver.png" alt="logo billeterie Ti Billet" class="linkcard"></a>
<a href="" class="linkcard">20€</a>
</div>
</div>
</div>
</div>
<div class="card card-meta ">
<!-- PARTIE HAUTE DE LA DIV IMG ET CONTENT -->
<a href="" class="img-card-meta">
<div class="content-img">
<h1>BALAPHONIK SOUND SYSTEM</h1>
<div class="effetxt"></div>
</div>
<div class="effet"></div>
<div class="effetnoir"></div>
<img src="../img/meta/bala.jpg" alt="Image de la vignette" class="cover">
</a>
<!-- PARTIE BASSE INFO LIEUX / TARIFS -->
<div class="info-card-meta">
<h2 class="card-title">MANAPANY FESTIVAL 2022</h2>
<div class="card-footer" >
10 Octobre 2022
<div class="card-footer-link">
<a href=""><img src="../img/meta/likebtn.png" alt="logo billeterie Ti Billet" class="linkcard"></a>
<a href=""><img src="../img/meta/reserver.png" alt="logo billeterie Ti Billet" class="linkcard"></a>
<a href="" class="linkcard">20€</a>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<div class="footer">
<a href=""><img src="img/footer/facebook.png" alt="billeterie Ti Billet"></a>
<a href=""><img src="img/footer/messenger.png" alt="billeterie Ti Billet"></a>
<a href=""><img src="img/footer/twitter.png" alt="billeterie Ti Billet"></a>
<a href=""><img src="img/footer/insta.png" alt="billeterie Ti Billet"></a>
<a href=""><img src="img/footer/whats.png" alt="billeterie Ti Billet"></a>
</div>
<!-- AFFICHER CACHER ASIDE -->
<!-- <script type="text/javascript">
function asideswipe() {
var div = document.getElementById('aside'),
display = getComputedStyle(div, null).display;
if(display == "block") {
document.getElementById("aside").style.display = "none";
}else {
document.getElementById("aside").style.display = "block";
}
}
</script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/CSSRulePlugin.min.js"></script>
<script src="../tibillet.js"></script>
</body>
</html>