toolbar.html

<!DOCTYPE html>
<html lang="fr-FR">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Toolbar</title>
        <link rel="stylesheet" href="style/toolbar.css" />
    </head>

    <body>
        <div class="black-overlay"></div>

        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque in,
            mollitia ipsam a aspernatur explicabo corrupti sequi aliquam tempore
            error labore nihil consequatur repudiandae vero sed quia repellat
            ullam sint!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque in,
            mollitia ipsam a aspernatur explicabo corrupti sequi aliquam tempore
            error labore nihil consequatur repudiandae vero sed quia repellat
            ullam sint!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque in,
            mollitia ipsam a aspernatur explicabo corrupti sequi aliquam tempore
            error labore nihil consequatur repudiandae vero sed quia repellat
            ullam sint!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque in,
            mollitia ipsam a aspernatur explicabo corrupti sequi aliquam tempore
            error labore nihil consequatur repudiandae vero sed quia repellat
            ullam sint!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque in,
            mollitia ipsam a aspernatur explicabo corrupti sequi aliquam tempore
            error labore nihil consequatur repudiandae vero sed quia repellat
            ullam sint!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque in,
            mollitia ipsam a aspernatur explicabo corrupti sequi aliquam tempore
            error labore nihil consequatur repudiandae vero sed quia repellat
            ullam sint!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque in,
            mollitia ipsam a aspernatur explicabo corrupti sequi aliquam tempore
            error labore nihil consequatur repudiandae vero sed quia repellat
            ullam sint!
        </p>

        <nav class="toolbar-nav">
            <img
                id="ticket-button"
                src="img/icon/ticket_icon.png"
                alt="Billetterie"
                style="cursor: pointer"
            />
            <div class="spliter"></div>
            <img
                id="info-button"
                src="img/icon/info_icon.png"
                alt="Informations"
                style="cursor: pointer"
            />
            <div class="spliter"></div>
            <img
                id="agenda-button"
                src="img/icon/agenda_icon.png"
                alt="Agenda"
                style="cursor: pointer"
            />
            <div class="spliter"></div>
            <img
                id="search-button"
                src="img/icon/search_icon.png"
                alt="Recherche"
                style="cursor: pointer"
            />
        </nav>

        <!--Sidenav de la barre de la billetterie-->
        <div id="billetterie" class="sidenav">
            <!--Script qui permet de ferme la sidenav-->
            <a href="javascript:void(0)" class="close-button">&times;</a>

            <h2 style="text-align: center">BILLETTERIE</h2>
            <br />
            <h3>HORAIRES</h3>

            <p>Du mardi au dimanche, de 11 h à 18 h</p>
            <p>Fermé les lundis et jours fériés</p>
            <p>Excepté le 14 juillet et le 15 août</p>
            <br />
            <h3>TARIFS</h3>

            <p>Plein tarif : 5€</p>
            <p>Tarif réduit : 3€</p>

            <p style="font-weight: bold">Gratuit pour les :</p>
            <p>&bull; Moins de 18 ans</p>
            <p>&bull; Scolaire</p>
            <p>&bull; Étudiants</p>
            <p>&bull; Personnes handicapés et accompagnateur</p>
        </div>

        <!--Sidenav des informations -->
        <div id="informations" class="sidenav">
            <!--Script qui permet de ferme la sidenav-->
            <a href="javascript:void(0)" class="close-button">&times;</a>

            <h2 style="text-align: center">CONTACT</h2>
            <br />
            <h3>ADRESSE</h3>

            <p>20 Cours Pasteur, 33000 Bordeaux</p>

            <!--https://www.google.com/maps/d/viewer?mid=10Is1WKPs9bVsvy-pYXgXqHtqOsg&msa=0&hl=fr&ie=UTF8&t=m&source=embed&ll=44.83864724610595%2C-0.5753659999999972&spn=0.010651%2C0.018239&z=15-->
            <a class="lien" href="https://cutt.ly/2gz07uG" target="_blank"
                >&rarr; Google Maps</a
            >
            <img
                src="img\icon\reseaux\google-maps_icon.png"
                class="icon"
                class="lien"
            />

            <br />
            <h3>TÉLÉPHONE</h3>

            <p>MUSÉE - 05 56 01 51 00</p>
            <p>ACCUEIL DE GROUPE - 05 56 01 51 04</p>
            <p>ACCESSIBILITÉ - 05 56 01 51 03</p>
            <br />
            <h3>MAILS</h3>

            <p>musaq@mairie-bordeaux.fr</p>
            <p>service.mediation.aquitaine@mairie-bordeaux.fr</p>
            <p>service.accueil@mairie-bordeaux.fr</p>
        </div>

        <!--Sidenav de la barre de l'agenda-->
        <div id="agenda" class="sidenav">
            <!--Script qui permet de ferme la sidenav-->
            <a href="javascript:void(0)" class="close-button">&times;</a>

            <h2 style="text-align: center">AGENDA</h2>
            <br />
            <h3>ACTIVITÉ DU JOUR</h3>

            <img
                src="img\section\visite_familiale.jpg"
                alt="Visite familiale guidée"
                height="200"
                width="436"
                id="activite"
            />

            <p style="font-weight: bold">
                Visite commentée - exposition "Comme une image"
            </p>
            <br />
            <p>Les audioguides sont temporairement indisponibles.</p>
            <p>
                L'application "Musée d'Aquitaine" est téléchargeable <br />
                sur Google Play Store
            </p>
            <br />
            <!--Lien vers la page Google Play du Musée d'Aquitaine-->
            <a
                class="lien"
                href="https://play.google.com/store/apps/details?id=fr.mbdx.maq"
                target="_blank"
                >&rarr; Google Play</a
            >
            <img
                src="img\icon\reseaux\google-play_icon.png"
                class="icon"
                class="lien"
            />
        </div>

        <!--Sidenav de la barre de recherche-->
        <div id="recherche" class="sidenav">
            <!--Script qui permet de ferme la sidenav-->
            <a href="javascript:void(0)" class="close-button">&times;</a>

            <h2 style="text-align: center">RECHERCHE</h2>
            <br />
            <div class="search-bar">
                <input
                    type="search"
                    id="site-search"
                    placeholder="Que recherchez-vous ?"
                />
                <!-- <button>Rechercher un produit</button> -->
            </div>
        </div>

        <!--Lien vers le script qui permet l'ouverture et la fermeture de la toolbar-->
        <script src="js/toolbar.js"></script>
    </body>
</html>