260 lines
9.4 KiB
HTML
260 lines
9.4 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 - Contact</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/contact.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-success has-text-black has-background-danger is-narrow is-hidden-mobile">
|
|
<aside id="sidebar" class="menu has-background-success has-text-black 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="ltqf.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-success has-text-black">
|
|
<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-success has-text-black">
|
|
<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="section">
|
|
<div class="container">
|
|
<h1>Contact</h1>
|
|
<div class="contact columns mt-2">
|
|
<div class="adresse column is-one-third is-flex is-align-items-center has-text-centered">
|
|
<div class="container">
|
|
<i class="fa-solid fa-location-dot fa-3x mb-5"></i>
|
|
<div class="mb-5">
|
|
<h2 class="title is-3 has-text-white">Adresse Postale:</h2>
|
|
<p class="subtitle is-5 has-text-white">3 rue Raoul Dufy 75020 Paris</p>
|
|
</div>
|
|
<div>
|
|
<h2 class="title is-3 has-text-white">Siège social:</h2>
|
|
<p class="subtitle is-5 has-text-white">Pors Al Louch 29430 Pounevez-Louchrist</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mail column is-flex is-align-items-center has-text-centered ml-3-tablet">
|
|
<div class="container">
|
|
<i class="fa-solid fa-envelope fa-3x mb-5"></i>
|
|
<h2 class="title is-3 has-text-white">Adresse Email:</h2>
|
|
<ul>
|
|
|
|
<li class="subtitle is-5 has-text-white">cie@letempsquilfaut.fr</li>
|
|
|
|
<li class="subtitle is-5 has-text-white">pierre-yves.chapalain@wanadoo.fr</li>
|
|
|
|
</ul>
|
|
<a class="mt-3 button is" href="mailto:[cie@letempsquilfaut.fr%20pierre-yves.chapalain@wanadoo.fr]">Cliquez-ici</a>
|
|
</div>
|
|
</div>
|
|
<div class="phone column is-flex is-align-items-center has-text-centered ml-3-tablet">
|
|
<div class="container">
|
|
<i class="fa-solid fa-phone fa-3x mb-5"></i>
|
|
<h2 class="title is-3 has-text-white">Numéro de téléphone:</h2>
|
|
<ul>
|
|
|
|
<li class="subtitle is-5 has-text-white">+33 6 63 91 23 46</li>
|
|
|
|
|
|
<li class="subtitle is-5 has-text-white">+33 6 15 08 30 80</li>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="p-5">
|
|
<div class="container contactform p-5">
|
|
<h2 class="mb-3">Formulaire de contact</h2>
|
|
<div class="columns">
|
|
<div class="column is-half">
|
|
<div class="field">
|
|
<label class="label">Nom</label>
|
|
<div class="control">
|
|
<input class="input" type="text" placeholder="Entrez votre nom">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">Email</label>
|
|
<div class="control">
|
|
<input class="input" type="email" placeholder="Entrez votre email" value="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="field">
|
|
<label class="label">Prénom</label>
|
|
<div class="control">
|
|
<input class="input" type="text" placeholder="Entrez votre prénom">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">Téléphone</label>
|
|
<div class="control">
|
|
<input class="input" type="tel" placeholder="Entrez votre numéro de téléphone">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column is-full">
|
|
<div class="field">
|
|
<label class="label">Message</label>
|
|
<textarea class="textarea" placeholder="Bonjour..." rows="10"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="button has-text-white is-medium is-responsive has-background-success">Envoyer</button>
|
|
|
|
</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-text-black" 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>
|
|
</body>
|
|
</html>
|
|
|
