271 lines
8.8 KiB
HTML
271 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
||
<html><head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta name="robots" content="index, follow" />
|
||
<title>LTQF - Accueil - LTQF</title>
|
||
<link rel="icon" href="./favicon.png" />
|
||
<meta name="description" content="Un site de théatre." />
|
||
<meta name="generator" content="Hugo 0.111.3">
|
||
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.24/dist/css/bulma-carousel.min.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Advent+Pro:wght@100;200;300;400;500;600;700&family=Lato:wght@300;400;700;900&display=swap" rel="stylesheet">
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="./css/style.css">
|
||
|
||
<link rel="stylesheet" href="./css/index.css">
|
||
|
||
</head>
|
||
<body style="position:relative">
|
||
|
||
<main class="columns is-fullheight is-gapless m-0 has-background-black">
|
||
|
||
|
||
|
||
<nav class="navbar is-hidden-tablet is-black" role="navigation" aria-label="main navigation">
|
||
<div class="navbar-brand">
|
||
<a class="navbar-item" href="">
|
||
<img src="logo_home.webp">
|
||
</a>
|
||
|
||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="mynavbar">
|
||
<span aria-hidden="true"></span>
|
||
<span aria-hidden="true"></span>
|
||
<span aria-hidden="true"></span>
|
||
</a>
|
||
</div>
|
||
|
||
<div id="mynavbar" class="navbar-menu">
|
||
|
||
<a class="navbar-item is-uppercase" href="./compagnie">La compagnie</a>
|
||
|
||
<a class="navbar-item is-uppercase" href="./spectacles">Spectacles</a>
|
||
|
||
<a class="navbar-item is-uppercase" href="./actions_culturelles">Actions culturelles</a>
|
||
|
||
<a class="navbar-item is-uppercase" href="./partenaires">Partenaires</a>
|
||
|
||
<a class="navbar-item is-uppercase" href="./presse">Presse</a>
|
||
|
||
<a class="navbar-item is-uppercase" href="./contact">Contact</a>
|
||
|
||
|
||
</div>
|
||
</nav>
|
||
|
||
|
||
|
||
|
||
|
||
<div class="column is-fullheight is-one-fifth has-background-black has-text-white has-background-danger is-narrow is-hidden-mobile">
|
||
<aside id="sidebar" class="menu has-background-black has-text-white is-flex is-flex-direction-column is-justify-content-space-between" style="position: fixed; top: 0; height: 100vh; width: 20%">
|
||
<div>
|
||
<a href="">
|
||
<div class="figure">
|
||
|
||
<img src="logo_home.webp" class="image is-1by1 p-5">
|
||
|
||
</div>
|
||
</a>
|
||
<ul class="menu-list m-0 p-0">
|
||
|
||
<li>
|
||
<a class="p-3 is-uppercase" href="./compagnie">La compagnie</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="p-3 is-uppercase" href="./spectacles">Spectacles</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="p-3 is-uppercase" href="./actions_culturelles">Actions culturelles</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="p-3 is-uppercase" href="./partenaires">Partenaires</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="p-3 is-uppercase" href="./presse">Presse</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="p-3 is-uppercase" href="./contact">Contact</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
<div class="is-flex is-justify-content-center mb-5">
|
||
<div class="social-icons m-0 p-0 pl-3 pt-5">
|
||
<a href="https://www.facebook.com/votre_compte_facebook" class="mr-2 has-background-black has-text-white">
|
||
<span class="icon">
|
||
<i class="fab fa-facebook fa-2x"></i>
|
||
</span>
|
||
</a>
|
||
<a href="https://www.instagram.com/votre_compte_instagram" class="has-background-black has-text-white">
|
||
<span class="icon">
|
||
<i class="fab fa-instagram fa-2x"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
|
||
<div class="column is-four-fifths m-0 p-0">
|
||
<section class="has-background-black is-fullheight">
|
||
<div id="galerie" class="carousel">
|
||
|
||
|
||
<figure class="image">
|
||
<img src='./carousel/carousel1.webp' alt="/carousel/carousel1.webp">
|
||
</figure>
|
||
|
||
<figure class="image">
|
||
<img src='./carousel/carousel10.webp' alt="/carousel/carousel10.webp">
|
||
</figure>
|
||
|
||
<figure class="image">
|
||
<img src='./carousel/carousel2.webp' alt="/carousel/carousel2.webp">
|
||
</figure>
|
||
|
||
<figure class="image">
|
||
<img src='./carousel/carousel3.webp' alt="/carousel/carousel3.webp">
|
||
</figure>
|
||
|
||
<figure class="image">
|
||
<img src='./carousel/carousel4.webp' alt="/carousel/carousel4.webp">
|
||
</figure>
|
||
|
||
<figure class="image">
|
||
<img src='./carousel/carousel5.webp' alt="/carousel/carousel5.webp">
|
||
</figure>
|
||
|
||
<figure class="image">
|
||
<img src='./carousel/carousel6.webp' alt="/carousel/carousel6.webp">
|
||
</figure>
|
||
|
||
<figure class="image">
|
||
<img src='./carousel/carousel7.webp' alt="/carousel/carousel7.webp">
|
||
</figure>
|
||
|
||
<figure class="image">
|
||
<img src='./carousel/carousel8.webp' alt="/carousel/carousel8.webp">
|
||
</figure>
|
||
|
||
<figure class="image">
|
||
<img src='./carousel/carousel9.webp' alt="/carousel/carousel9.webp">
|
||
</figure>
|
||
|
||
</div>
|
||
<div id="galerie" class="box carousel overlay">
|
||
|
||
|
||
<div>
|
||
<div class="subtitle">Dans les plis de sa langue</div>
|
||
<p class="p-0-mobile px-4-tablet">Grâce à une résidence au CUBE à Hérisson en juillet 2023, l’écriture de la pièce a pu être achevée....</p>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<div>
|
||
<div class="subtitle">Un apprentissage</div>
|
||
<p class="p-0-mobile px-4-tablet">Spectacle tout terrain, soutenu par le TNB, continue sa tournée en Région Bretagne et en démarre une nouvelle en Île de France, produit par La Colline-théâtre national...</p>
|
||
</div>
|
||
|
||
|
||
|
||
<div>
|
||
<div class="subtitle">Promenade en robe de chambre</div>
|
||
<p class="p-0-mobile px-4-tablet">En répétition, sera monté en 2024...</p>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<div class="is-flex is-flex-direction-column is-justify-content-flex-end" style="position: fixed; bottom: 0%; right: 3%;">
|
||
<a href="#" class="has-background-black has-text-white" style="position: sticky; bottom: 0;">
|
||
<span class="icon">
|
||
<i class="fas fa-arrow-up"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
</main>
|
||
<script src="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.24/dist/js/bulma-carousel.min.js"></script>
|
||
|
||
<script>
|
||
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
|
||
|
||
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
|
||
|
||
|
||
$navbarBurgers.forEach( el => {
|
||
el.addEventListener('click', () => {
|
||
|
||
|
||
const target = el.dataset.target;
|
||
const $target = document.getElementById(target);
|
||
|
||
|
||
el.classList.toggle('is-active');
|
||
$target.classList.toggle('is-active');
|
||
|
||
});
|
||
});
|
||
|
||
});
|
||
|
||
</script>
|
||
<script>
|
||
bulmaCarousel.attach('#galerie', {
|
||
slidesToScroll: 1,
|
||
slidesToShow: 1,
|
||
navigation: false,
|
||
navigationKeys: false,
|
||
pagination: false,
|
||
loop: false,
|
||
infinite: true,
|
||
autoplay: true,
|
||
autoplaySpeed: 3000,
|
||
pauseOnHover: false,
|
||
duration: 300
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|
||
|
