130 lines
6.8 KiB
HTML
130 lines
6.8 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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
|
|
<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="../meta.html"><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-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>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- EVENT -->
|
|
<div class="meta">
|
|
|
|
<div class="card-meta-100">
|
|
<div class="img-card-full">
|
|
<div class="effet"></div>
|
|
<div class="info-fullcard B">
|
|
<h1 class="title-fullcard">ZAN MARI BARE</h1>
|
|
<h1 class="title-fullcard">LE BISIK 20H00</h1>
|
|
<h3 class="date-fullcard">12 Octobre 2021</h3>
|
|
<h3 class="style-fullcard">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-meta-50 artiste-bloc" style="background-color: #140f0c;">
|
|
<div class="description">
|
|
<div class="arttop" style="display: flex; flex-direction: row; justify-content: space-between; width: 100%; align-items: center; margin-bottom: 20px;">
|
|
<h1 class="title-artiste">Le Bisik</h1>
|
|
|
|
<img src="../img/aside/lieux.svg" alt="billeterie Ti Billet" style="max-width: 30px; margin-right: 5%;">
|
|
|
|
</div>
|
|
|
|
<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="" style="padding: 5px; color: black;"><i class="fab fa-facebook-square fa-2x"></i></a>
|
|
<a href="" style="padding: 5px; color: black;"><i class="fab fa-instagram-square fa-2x"></i></a>
|
|
</div>
|
|
<a href="#" style="text-decoration:none; color:black;padding-left:5%;"><i class="fas fa-globe fa-1x"></i> http://www.chakouataventure.re</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="card-meta-50 artiste-bloc" style="background-color: #140f0c;">
|
|
<div class="description">
|
|
<div class="arttop" style="display: flex; flex-direction: row; justify-content: space-between; width: 100%; align-items: center; margin-bottom: 20px;">
|
|
<h1 class="title-artiste">BalaPhonik Sound System</h1>
|
|
<img src="../img/aside/artistes.svg" alt="billeterie Ti Billet" style="max-width: 30px; margin-right: 5%;">
|
|
|
|
</div>
|
|
|
|
<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="" style="padding: 5px; color: black;"><i class="fab fa-facebook-square fa-2x"></i></a>
|
|
<a href="" style="padding: 5px; color: black;"><i class="fab fa-instagram-square fa-2x"></i></a>
|
|
</div>
|
|
<a href="#" style="text-decoration:none; color:black;padding-left:5%;"><i class="fas fa-globe fa-1x"></i> http://www.chakouataventure.re</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<!-- FOOTER -->
|
|
<div class="footer">
|
|
<a href="" style="padding: 5px; color: black;"><i class="fab fa-facebook-square fa-2x"></i></a>
|
|
<a href="" style="padding: 5px; color: black;"><i class="fab fa-instagram-square fa-2x"></i></a>
|
|
</div>
|
|
|
|
|
|
<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>
|