audio.html

<!doctype html>
<html lang="en">

<!-- 
   Hi, you're looking at a web page built with love by:
   
   Ricardo

  /$$$$$$            /$$             /$$                        
 /$$__  $$          |__/            | $$                        
| $$  \ $$ /$$   /$$ /$$ /$$$$$$$  /$$$$$$    /$$$$$$   /$$$$$$$
| $$  | $$| $$  | $$| $$| $$__  $$|_  $$_/   |____  $$ /$$_____/
| $$  | $$| $$  | $$| $$| $$  \ $$  | $$      /$$$$$$$|  $$$$$$ 
| $$/$$ $$| $$  | $$| $$| $$  | $$  | $$ /$$ /$$__  $$ \____  $$
|  $$$$$$/|  $$$$$$/| $$| $$  | $$  |  $$$$/|  $$$$$$$ /$$$$$$$/
 \____ $$$ \______/ |__/|__/  |__/   \___/   \_______/|_______/ 
      \__/                                                                      
   http://www.ricardoquintas.com
   
   June/2023
-->

<head>  
    <script type="text/javascript" data-cmp-ab="1" src="https://cdn.consentmanager.net/delivery/autoblocking/d5f65c4162a39.js" data-cmp-host="a.delivery.consentmanager.net" data-cmp-cdn="cdn.consentmanager.net" data-cmp-codesrc="0"></script>

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-R49G5Y633V"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-R49G5Y633V');
    </script>
    
    <meta charset="utf-8" />
    <title>The Invisible Tuba</title>
    <link rel="shortcut icon" type="image/ico" href="favicon.png" />  
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="THE INVISIBLE TUBA is the most entertaining band from Lisbon"  />
    <meta name="keywords" content="trad jazz,swing,dixieland,new orleans,jazz,blues,clarinet,tuba,the invisible tuba,captain farms,mattia corda,trumpet,washboard,trombone,banjo,busking,ragtime,music band,lisbon,portugal" />
    <meta name="author" content="Ricardo Quintas" />
    <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" /> 
    <link href="assets/css/revolution5.min.css" rel="stylesheet" type="text/css" media="all" />
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
    <link rel="stylesheet" href="assets/css/grt-youtube-popup.css">
    <link href="assets/css/main.min.css" rel="stylesheet" type="text/css" media="all" />
    <!-- <link href="assets/css/cookie-banner.css" rel="stylesheet" type="text/css" media="all" /> -->
    <link href="assets/css/zrq.css" rel="stylesheet" type="text/css" media="all" />
    <script src="assets/scripts/jquery.min.js"></script>
    <script src="assets/scripts/jquery.themepunch.tools.min.js"></script>
    <script src="assets/scripts/jquery.themepunch.revolution.min.js"></script>
    <script type="text/javascript" src="assets/scripts/extensions/revolution.extension.actions.min.js"></script>
    <script type="text/javascript" src="assets/scripts/extensions/revolution.extension.carousel.min.js"></script>
    <script type="text/javascript" src="assets/scripts/extensions/revolution.extension.kenburn.min.js"></script>
    <script type="text/javascript" src="assets/scripts/extensions/revolution.extension.layeranimation.min.js"></script>
    <script type="text/javascript" src="assets/scripts/extensions/revolution.extension.migration.min.js"></script>
    <script type="text/javascript" src="assets/scripts/extensions/revolution.extension.navigation.min.js"></script>
    <script type="text/javascript" src="assets/scripts/extensions/revolution.extension.parallax.min.js"></script>
    <script type="text/javascript" src="assets/scripts/extensions/revolution.extension.slideanims.min.js"></script>
    <script type="text/javascript" src="assets/scripts/extensions/revolution.extension.video.min.js"></script>
    <script src="https://kit.fontawesome.com/0c3372b073.js" crossorigin="anonymous"></script>   
        
</head>

<body class="loading zrq-page-audio">

        <!--
        #################################
            - MENU -
        #################################
        -->    
        <header id="header" class="nav-shadow">
            <a id="sv__logo" href="index.html" class="zrq-header">
                <div class="sv__logo--img zrq-logo">
                    <img class="img-responsive logo-white" src="/assets/img/logo_transp_v00.png" alt="The Invisible Tuba" />
                    <img class="img-responsive logo-black" src="/assets/img/logo_transp_v00.png" alt="The Invisible Tuba" />
                </div>
            </a>
            <div class="cd-dropdown-wrapper open-to-left">
                <a href="#" class="cd-dropdown-trigger">Menu</a>
                <nav class="cd-dropdown">
                    <h2>Menu</h2>
                    <a href="#0" class="cd-close">Fechar</a>
                    <ul class="cd-dropdown-content">
                        <li class="single-item"><a href="index.html">Home</a></li>                    
                        <li class="single-item"><a href="pictures.html">Fotos/Videos</a></li>
                        <li class="single-item"><a href="audio.html">Audio</a></li>
                        <li class="single-item"><a href="contact.html">Contactos</a></li>
                        <li class="single-item"><a href="index_en.html"><img class="zrq-country-icon" src="/assets/img/icons/united-kingdom.png"></img>English</a></li>
                        <li class="single-item"><a href="index_es.html"><img class="zrq-country-icon" src="/assets/img/icons/spain.png"></img>Español</a></li>
                    </ul>
                </nav>
            </div>
        </header>

    <main class="sv__main--content">
        <div id="header-skr" class="section sv__container--fluid hero-container">
            <div class="hero-background hero-parallax" data-top-top="background-position: 50% 0px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target="#header-skr" style="background-image: url(http://placehold.it/2560x1600);">
                <div class="hero-spacer"></div>
            </div>
            <div class="hero-wrapper" data-0="opacity:1;top:50%;" data-300="opacity:0;top:100px">
                <div class="hero-content header">
                    <h2 class="hero-title">                        
                        Ouve a nossa música
                        <i class="zrq-brown-color fa fa-volume-up"></i>
                    </h2>
                    <h3>Em baixo podes ouvir uma série de músicas que gravámos ao vivo ou em estúdio
                        </h3>
                </div>
            </div>
        </div>
        <div class="section container-fluid grey-bg">
            <div class="angle-top" style="border-right-color: #e8e8e8;"></div>
            <div class="sv__container--md">
                <div class="about__desc">
                    <div class="content">
                        <h2>Estúdio</h2>
                        <p>The Sheik Of Araby | Studio</p>
                        <audio class="zrq-audio" src="/assets/audio/sheik_studio.mp3" controls></audio>
                        <p class="zrq-top">Slow Down | Studio</p>
                        <audio class="zrq-audio" src="/assets/audio/slowdown_studio.mp3" controls></audio>
                        <p class="zrq-top">Promenade | Studio</p>
                        <audio class="zrq-audio" src="/assets/audio/promenade.mp3" controls></audio>
                   
                        <h2 class="zrq-top">Ao Vivo</h2>
                        <p>Slow Down | Rehearsal</p>
                        <audio class="zrq-audio" src="/assets/audio/slowdown_rehearsal.mp3" controls></audio>
                        <p class="zrq-top">The Sheik Of Araby | Live</p>
                        <audio class="zrq-audio" src="/assets/audio/sheik_live.mp3" controls></audio>


                        <h2 class="zrq-top">Gravação CD</h2>
                        <p>Bellamina</p>
                        <audio class="zrq-audio" src="/assets/audio/cd_bellamina.mp3" controls></audio>
                        <p class="zrq-top">Chinatown</p>
                        <audio class="zrq-audio" src="/assets/audio/cd_chinatown.mp3" controls></audio>
                        <p class="zrq-top">Indiana</p>
                        <audio class="zrq-audio" src="/assets/audio/cd_indiana.mp3" controls></audio>
                        <p class="zrq-top">Jumbie Jamboree</p>
                        <audio class="zrq-audio" src="/assets/audio/cd_jumbie_jamboree.mp3" controls></audio>
                        <p class="zrq-top">Royal Garden Blues</p>
                        <audio class="zrq-audio" src="/assets/audio/cd_royal_garden.mp3" controls></audio>
                        <p class="zrq-top">Saint James Infirmary</p>
                        <audio class="zrq-audio" src="/assets/audio/cd_st_james_infirmary.mp3" controls></audio>
                        <p class="zrq-top">Wrap your troubles in dreams | Live</p>
                        <audio class="zrq-audio" src="/assets/audio/cd_wrap_your_troubles.mp3" controls></audio>
                    </div>
                </div>
            </div>
        </div>        
        <div class="section container-fluid no-padding black-bg">
            <div class="inner-sm">
                <div class="row no-margin">
                    <div class="col-xs-12">
                        <h4 class="text-center white">
                            Já alguma vez ouviste uma banda deste tamanho a tocar a 2mt de distância de ti ?
                            <br>
                            Não fazes ideia do que isto pode fazer ao teu corpo e alma.
                        </h4>
                    </div>
                </div>
            </div>
        </div>       
        <div class="section container-fluid no-padding single-image">
            <img class="img-responsive" src="/assets/img/1921_800_v01.png" alt="The Shave Barbershop HTML Theme" />
        </div>       
    </main>
 
      <!--
        #################################
            - Footer -
        #################################
        -->
        <div id="zrq-footer"></div>
        <footer class="loading zrq-footer">
            <div class="sv__container--md">
                <div class="footer__wrapper">
                    <div class="row footer__row">
                        <div class="footer__logo no-padding">
                            <div class="logo__container">
                                <a href="index.html" target="_blank">
                                    <div class="footer__logo--img zrq-logo">
                                        <img class="img-responsive logo-white" src="/assets/img/logo_transp_v00.png" alt="The Invisible Tuba" />
                                    </div>
                                    <p class="white zrq-text-size">A band that makes you <span class="zrq-normal-text">#HappyRightNow</span></p>
                                </a>                                
                            </div>
                        </div>
                        <div class="footer__desc">                
                            <div class="row footer__contact">
                                <h2 class="">Contactos</h2>
                                <div class="col-xs-12 col-sm-12 footer__address no-padding">
                                    <p>EMAIL</p>
                                    <a class="email" href="mailto:info@theinvisibletuba.com">info@theinvisibletuba.com</a>
                                    <br><br>
                                    <p>TELEFONE</p>
                                    <a class="phone" href="tel:(+351)967 285 043">(+351)967 285 043 | Ricardo</a>
                                    <br><br>
                                    <p>WHATSAPP</p>
                                    <a aria-label="Chat on WhatsApp" target="_blank" href="https://wa.me/351967285043"> 
                                        <img class="zrq-zapezape" alt="Chat on WhatsApp" src="/assets/img/icons/WhatsAppButtonGreenLarge.png" />
                                    </a>

                                </div>                     
                            </div>
                            <div class="row social-footer zrq-top-margin">
                                <div class="col-xs-12 col-sm-6 col-md-8">
                                    <p class="text-center">Social Media</p>
                                    <ul class="text-center">
                                        <li><a target="_blank" href="https://www.instagram.com/theinvisibletuba/"><img class="zrq-socialmedia-icon" alt="" src="/assets/img/icons/instagram.png"/></a></li>
                                        <li><a target="_blank" href="https://www.youtube.com/@theinvisibletuba4630"><img class="zrq-socialmedia-icon" alt="" src="/assets/img/icons/youtube.png"/></a></li>
                                        <li><a target="_blank" href="https://www.facebook.com/theinvisibletuba/"><img class="zrq-socialmedia-icon" alt="" src="/assets/img/icons/facebook.png"/></a></li>
                                    </ul>
                                </div>                       
                            </div>                                        
                        </div>
                    </div>
                </div>
            </div>
            <br><br><br>
            <!-- <div class="zrq-cookies">
                <p><a class="book__nav" href="https://www.cookiesandyou.com">Cookies</a> e 
                    <a class="book__nav" href="privacy.html">Privacy Policy</a>                                        
                </p>
            </div>   -->
        </footer>   

        <script src="assets/scripts/jquery.menu-aim.js"></script>
        <script src="assets/scripts/modernizr.min.js"></script>
        <script src="assets/scripts/bootstrap.min.js"></script>
        <script src="assets/scripts/skrollr.min.js"></script>
        <script src="assets/scripts/imagesloaded.min.js"></script>
        <script src="assets/scripts/jquery-placeholder.min.js"></script>
        <script src="assets/scripts/jquery.prefetch.min.js"></script>
        <script src="assets/scripts/ScrollMagic.min.js"></script>
        <script src="assets/scripts/debug.addIndicators.min.js"></script>
        <script src="assets/scripts/window-settings.min.js"></script>
        <script src="assets/scripts/nav-settings.min.js"></script>
        <script src="assets/scripts/main-settings.min.js"></script>
        <script src="assets/scripts/grt-youtube-popup.js"></script>
        <script src="assets/scripts/zrq.js"></script>
        <script>
        (function($) {
        'use strict';
            // Revolution Slider Settings
            // ==========================================================================
            var tpj = jQuery;
            var sliderId = "#rev_slider_46_1";

            if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
                sliderId = "#rev_slider_46_1_mobile";
            } 

            var revapi46;
            tpj(document).ready(function() {
                if (tpj(sliderId).revolution == undefined) {
                    revslider_showDoubleJqueryError(sliderId);
                } else {
                    revapi46 = tpj(sliderId).show().revolution({
                        sliderType: "standard",
                        jsFileLocation: "assets/scripts/",
                        sliderLayout: "fullscreen",
                        dottedOverlay: "none",
                        delay: 4500,
                        navigation: {
                            keyboardNavigation: "off",
                            keyboard_direction: "horizontal",
                            mouseScrollNavigation: "off",
                            onHoverStop:"false",
                            touch: {
                                touchenabled: "on",
                                swipe_threshold: 75,
                                swipe_min_touches: 1,
                                swipe_direction: "horizontal",
                                drag_block_vertical: false
                            },
                            arrows: {
                                style: "erinyen",
                                enable: true,
                                hide_onmobile: false,
                                hide_under: 600,
                                hide_onleave: false,
                                hide_delay: 200,
                                hide_delay_mobile: 1200,
                                // tmp: '<div class="tp-title-wrap">    <div class="tp-arr-imgholder"></div>    <div class="tp-arr-img-over">   </div><span class="tp-arr-titleholder"></span>     </div>',
                                left: {
                                    h_align: "left",
                                    v_align: "center",
                                    h_offset: 30,
                                    v_offset: 0
                                },
                                right: {
                                    h_align: "right",
                                    v_align: "center",
                                    h_offset: 30,
                                    v_offset: 0
                                }
                            },
                            thumbnails: {
                                style: "gyges",
                                enable: true,
                                width: 100,
                                height: 60,
                                min_width: 60,
                                wrapper_padding: 0,
                                wrapper_color: "transparent",
                                wrapper_opacity: "1",
                                // tmp: '<span class="tp-thumb-img-wrap">  <span class="tp-thumb-image"></span></span>',
                                visibleAmount: 0,
                                hide_onmobile: true,
                                hide_under: 800,
                                hide_onleave: false,
                                direction: "horizontal",
                                span: false,
                                position: "inner",
                                space: 0,
                                h_align: "center",
                                v_align: "bottom",
                                h_offset: 0,
                                v_offset: 20
                            }
                        },
                        responsiveLevels: [1300, 1186, 977, 778, 480],
                        gridwidth: [1400, 1186, 977, 778, 480],
                        gridheight: [960, 868, 768, 960, 720],
                        lazyType: "none",
                        parallax: {
                            type: "mouse",
                            origo: "slidercenter",
                            speed: 2000,
                            levels: [2, 3, 4, 5, 6, 7, 12, 16, 10, 50],
                            disable_onmobile: "on"
                        },
                        shadow: 0,
                        spinner: "off",
                        stopLoop: "off",
                        stopAfterLoops: 3,
                        shuffle: "off",
                        autoHeight: "off",
                        fullScreenAlignForce: "off",
                        fullScreenOffsetContainer: "",
                        fullScreenOffset: "0px",
                        disableProgressBar: "on",
                        hideThumbsOnMobile: "off",
                        hideSliderAtLimit: 0,
                        hideCaptionAtLimit: 0,
                        hideAllCaptionAtLilmit: 0,
                        debugMode: false,
                        fallbacks: {
                            simplifyAll: "off",
                            nextSlideOnWindowFocus: "off",
                            disableFocusListener: false,
                        }
                    });
                }
            }); /*ready*/

            $(window).bind('resizeEnd', function() {
                $(sliderId).revredraw();
            });
            $(window).on('resize', function() {
                if (this.resizeTO) clearTimeout(this.resizeTO);
                this.resizeTO = setTimeout(function() {
                    $(this).trigger('resizeEnd');
                }, 500);
            });

        })(jQuery);
        </script>

        <!-- Cookie Banner -->
        <!-- <div class="nk-cookie-banner alert alert-warning text-center mb-0" role="alert">
            &#x1F36A; Este site utiliza cookies de forma a garantir uma melhor experiência de navegação.
            <a href="https://www.cookiesandyou.com/" target="blank" class="alert-link">Saber mais</a>
            <button type="button" class="btn btn-primary btn-sm ml-3" onclick="closeCookies()">
            OK
            </button>
        </div>
        <script type="text/javascript" src="assets/scripts/cookie-banner.js"></script> -->
        <!-- End of Cookie Banner -->    


        <!--
        #################################
            - MODAL -
        #################################
        -->
        <div class="zrq-newsletter-modals">
            <div class="modal fade zrq-modal-newsletter"  id="warningModal" tabindex="-1">
                <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                    <form id="zrqForm" action="https://b7d65a72.sibforms.com/serve/MUIFALsqe_G-XgsqS1T0POOjPNBbyr4uYT3q5EDHVZIF3H_P5eYdzh9iJkntaqhlwu43_a7YyDEonpiaHT-K9nhDT2Pkha2B-Cnkv0NWrJnOWiGiQ8iPFt97ttSNqsWGB14KF_PsXwsXib_yjvejiRXqw9ButOhOW6YYNgy4QMECBImk27kZ8GkJZk_tyLiZcJ-JsVE03PqvuOuN" method="post">
                        <h4>Coloca o teu email</h4>
                        <div class="form-group">
                            <input class="form-control " type="email" id="EMAIL" name="EMAIL" autocomplete="off"
                                                placeholder="EMAIL" data-required="true" required />

                        </div>
                        <br>
                        <button type="submit" class="btn btn-success">ENVIAR</button>          
                        <button type="button" class="zrq-btn-close" data-bs-dismiss="modal" aria-label="Close">Cancelar</button>      
                        </form>

                    </div>
                </div>
                </div>
            </div>

            <!-- OBRIGADO Modal -->
            <div class="modal fade zrq-modal-newsletter"  id="obrigadoModal" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body">
                            <h2>Obrigado 😁</h2>
                            <p>Subscrição confirmada</p>
                            <button type="button" class="btn-primary zrq-btn-close" data-bs-dismiss="modal" aria-label="Close">Fechar</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- SPINNER Modal -->
            <div class="modal fade" id="spinnerModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                    <div class="text-center">
                        <div class="spinner-border m-5" role="status">
                        <span class="visually-hidden">A enviar...</span>
                        </div>
                        <div>
                            <i class="fa-solid fa-spinner fa-spin fa-2x"></i>
                            <h3 data-i18n="form.spinner">Por favor espera</h3>
                        </div>                
                    </div>
                    </div>
                </div>
            </div>
        </div>

</body>

</html>