index.html

<!doctype html>

<html lang="PT">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Belas Artes Conservatório de Dança</title>
    <meta name="description" content="O Belas Artes Conservatório de Dança é uma escola voltada para as belas artes da dança, como Ballet Clássico, Contemporane, Jazz e Street Dance. Localizado em Águas Claras, Brasília-DF">
    <meta name="author" content="Bruno Neves">
    <link rel="icon" type="image/png" href="images/favicon.png" />
    <link rel="stylesheet" href="css/styles.css?v=1.0">
    <link rel="stylesheet" href="css/aos.css?v=1.0">
    <script src="https://kit.fontawesome.com/637a8e4096.js" crossorigin="anonymous"></script>
</head>

<body>
    <div>
        <!--Background -->
        <div class="background-wrapper">
            <div class="opacity-layer"></div>
            <div class="slideshow-image"></div>
        </div>

        <!--Header -->
        <div class="side-bar no-show">
            <img src="images/sidebar-logo.svg">
            <ul>
                <li><a href="javascript:;" onclick="navTo('.sobre-escola-wrapper', 1000, -70);menuToggle()">Sobre a escola</a></li>
                <li><a href="javascript:;" onclick="navTo('.instagram-gallery', 1000, -70);menuToggle()">Galeria</a></li>
                <li><a href="javascript:;" onclick="navTo('.modalidades', 1000, -70);menuToggle()">Modalidades</a></li>
                <li><a href="javascript:;" onclick="navTo('.passe-livre-wrapper', 1000, -70);menuToggle()">Passe Livre</a></li>
                <li><a href="javascript:;" onclick="navTo('.contato', 1000, -70);menuToggle()">Contato</a></li>
            </ul>
        </div>

        <div class="flex flex-row main-menu header-container dark">            
            <div class="flex grow2 menu justify-flex-start align-flex-center hidden-sm">
                <div class="logo">
            
                </div>
                <nav class="links" style="--items: 5;">
                    <a href="javascript:;" onclick="navTo('.sobre-escola-wrapper', 1000, -110)">Sobre a escola</a>
                    <a href="javascript:;" onclick="navTo('.instagram-gallery', 1000, -110)">Galeria</a>
                    <a href="javascript:;" onclick="navTo('.modalidades', 1000, -110)">Modalidades</a>
                    <a href="javascript:;" onclick="navTo('.passe-livre-wrapper', 1000, -110)">Passe Livre</a>
                    <a href="javascript:;" onclick="navTo('.contato', 1000, -110)">Contato</a>
                    <span class="line"></span>
                </nav>
            </div>
            <div class="flex grow1 justify-flex-end align-flex-center social">
                <a href="https://www.instagram.com/belasartesdanca" target="_blank" title="Belas Artes no Instagram!"><i class="fab fa-instagram"></i></a>
                <a href="https://www.facebook.com/belasartesdanca" target="_blank" title="Belas Artes no Facebook!"><i class="fab fa-facebook-f"></i></a>
                <a href="https://www.youtube.com/belasartesdanca" target="_blank" title="Belas Artes no YouTube!"><i class="fab fa-youtube"></i></a>
            </div>
        </div>
        <div class="flex flex-row menu-mobile header-container dark">

            <div class="flex grow1 justify-flex-start align-flex-center social">
                <a href="javascript:;" title="Menu Principal" onclick="menuToggle()"><i class="fas fa-bars"></i></a>
            </div>


            <div class="flex grow1 justify-flex-end align-flex-center social">
                <a href="https://www.instagram.com/belasartesdanca" target="_blank" title="Belas Artes no Instagram!"><i class="fab fa-instagram"></i></a>
                <a href="https://www.facebook.com/belasartesdanca" target="_blank" title="Belas Artes no Facebook!"><i class="fab fa-facebook-f"></i></a>
                <a href="https://www.youtube.com/belasartesdanca" target="_blank" title="Belas Artes no YouTube!"><i class="fab fa-youtube"></i></a>
            </div>
    
        </div>
        <!-- MAIN LOGO -->
        <div class="flex justify-flex-center grow1 main-logo">
            <div class="massage-placeholder-left"></div>
            <img src="images/logo-square-white.svg">    
            <div class="massage-placeholder-right"></div>        
        </div>
        <div class="flex justify-flex-center grow1">
            <p style="color:#FFF; text-align: center;">Ballet - Jazz - Contemporâneo - Street Dance - Alongamento <p>
        </div>
        <div class="flex justify-flex-center grow1">
            <button class="btn btn-default" onclick="navTo('.sobre-escola-wrapper', 1000, -70);">Conheça a escola</button>
        </div>
        <div class="instagram-gallery white-block flex justify-flex-center grow1">
            <script src="https://apps.elfsight.com/p/platform.js" defer></script>
            <div class="elfsight-app-39d9d976-ae15-42d0-bc2d-60391e7b857e"></div>
        </div>
        <div class="sobre-escola-wrapper flex flex-row">
            <div class="h-col-6 col-small">
                <div class="content-block">
                    <h4>SOBRE A ESCOLA</h4>
                    <h3>Belas Artes Conservatório de Dança</h1>
                    <div class="flex flex-row">
                        <div class="col-lg-6 col-small" data-aos="fade-right"  data-aos-easing="ease-in-sine" data-aos-duration="1500">
                            <h5>A Dança é para todos</h5>
                            <p>Acreditamos que que a dança é uma forma livre de expressão dos pensamentos e sentimentos. A dança é para todos!</p>
                        </div>
                        <div class="col-lg-6 col-small" data-aos="fade-right"  data-aos-easing="ease-in-sine" data-aos-duration="1500">
                            <h5>Nossa missão</h5>
                            <p>Levar a dança para pessoas de todas as idades, acolher as diferenças e tornar o aprendizado rico.</p>
                        </div>
                        <div class="col-lg-6 col-small" data-aos="fade-right"  data-aos-easing="ease-in-sine" data-aos-duration="1500">
                            <h5>Queremos ser vistos como</h5>
                            <p>Um espaço reconhecido por acolher a diversidade e onde o aprendizado na dança é prazeroso. Queremos que você se perca na dança!</p>
                        </div>
                        <div class="col-lg-6 col-small" data-aos="fade-right"  data-aos-easing="ease-in-sine" data-aos-duration="1500">
                            <h5>Nossos valores</h5>
                            <p>Pensamos o ensino da dança nas dimensões humanas, vendo os potenciais e limitações de cada pessoa e auxiliando no progresso consistente.</p>
                        </div>
                    </div>
                </div>

            </div>
            <div class="h-col-6 hidden-small" style="position:relative">
                <div class="bg-content-block"></div>
                <div class="container-bg-overlay"></div>
            </div>
        </div>
        <div class="modalidades white-block">
            <h3>Modalidades</h3>
            <h4>Para todas as idades, iniciante, intermediário e avançado. Venha nos conhecer!</h4>
            <div class=" card left flex" style="margin-top:80px" data-aos="fade-down" data-aos-easing="ease-in-sine" data-aos-duration="1500">
                <div class="left">
                    <div class="picture">
                        <img src="images/ballet.png">
                        <br/> Ballet Clássico
                    </div>
                </div>
                <div class="right">
                    <ul>
                        <li><i class="fa fa-check"></i> Trabalha coordenação motora</li>
                        <li><i class="fa fa-check"></i> Sociabilização</li>
                        <li><i class="fa fa-check"></i> Disciplina</li>
                        <li><i class="fa fa-check"></i> Desenvolvimento da memória e concentração</li>
                    </ul>
                </div>
            </div>

            <div class=" card right flex" data-aos="fade-up"  data-aos-easing="ease-in-sine" data-aos-duration="1500">
                <div class="left">
                    <ul>
                        <li><i class="fa fa-check"></i> Expressão corporal e facial</li>
                        <li><i class="fa fa-check"></i> Musicalidade</li>
                        <li><i class="fa fa-check"></i> Autonomia de movimentos</li>
                        <li><i class="fa fa-check"></i> Improvisação</li>
                        <li><i class="fa fa-check"></i> Criatividade</li>
                    </ul>
                </div>
                <div class="right">
                    <div class="picture" style="word-break: break-all;">
                        <img src="images/contemporaneo.png">
                        <br/> Contemporanêo
                    </div>
                </div>
            </div>

            <div class=" card left flex" data-aos="fade-down"  data-aos-easing="ease-in-sine" data-aos-duration="1500">
                <div class="left">
                    <div class="picture">
                        <img src="images/jazz.png">
                        <br/> Jazz
                    </div>
                </div>
                <div class="right">
                    <ul>
                        <li><i class="fa fa-check"></i> Ritmo e musicalidade</li>
                        <li><i class="fa fa-check"></i> Melhora auto-estime</li>
                        <li><i class="fa fa-check"></i> Melhora o condicionamento-físico</li>
                        <li><i class="fa fa-check"></i> Alto gasto calórico</li>
                    </ul>
                </div>
            </div>

            <div class=" card right flex" data-aos="fade-up" data-aos-easing="ease-in-sine" data-aos-duration="1500">
                <div class="left">
                    <ul>
                        <li><i class="fa fa-check"></i> Força e Agilidade</li>
                        <li><i class="fa fa-check"></i> Sociabilização</li>
                        <li><i class="fa fa-check"></i> Concentração</li>
                        <li><i class="fa fa-check"></i> Criatividade</li>
                        <li><i class="fa fa-check"></i> Melhoria da coordenação motora</li>
                    </ul>
                </div>
                <div class="right">
                    <div class="picture">
                        <img src="images/street.png">
                        <br/> Street Dance
                    </div>
                </div>
            </div>


            <div class=" card left flex" data-aos="fade-up" data-aos-easing="ease-in-sine" data-aos-duration="1500">
                
                <div class="left">
                    <div class="picture">
                        <img src="images/pilates.png">
                        <br/> Alongamento
                    </div>
                </div>
                <div class="right">
                    <ul>
                        <li><i class="fa fa-check"></i> Postura</li>
                        <li><i class="fa fa-check"></i> Mobilidade e flexibilidade</li>
                        <li><i class="fa fa-check"></i> Fortelecimento do abdomen</li>
                        <li><i class="fa fa-check"></i> Estabilidade da pélvis e ombros </li>
                        <li><i class="fa fa-check"></i> Melhor distribuição do tônus muscular</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="passe-livre-wrapper flex flex-row">
            <div class="h-col-6 col-small">
                <div class="content-block">
                    <h4>PASSE LIVRE</h4>
                    <h3>Todas as modalidades pelo preço de uma!</h3>
                    <div class="flex flex-row">
                        <div class="col-lg-12 col-small aos-init aos-animate" data-aos="fade-right" data-aos-easing="ease-in-sine" data-aos-duration="1500">
                            <h5>de R$ 229,00</h5>
                            <h1 style="margin:0px">por: R$ 215,00</h1>
                        </div>
                       
                        <div class="col-lg-6 col-small aos-init aos-animate" data-aos="fade-right" data-aos-easing="ease-in-sine" data-aos-duration="1500">
                            <h5>O que é?</h5>
                            <p>Com o passe livre, o aluno pode cursar todas as modalidades disponíveis no Belas Artes, sem restrição de horários. Havendo vaga na turma o aluno pode participar da aula!</p>
                        </div>

                        <div class="col-lg-6 col-small aos-init aos-animate" data-aos="fade-right" data-aos-easing="ease-in-sine" data-aos-duration="1500">
                            <h5>Até fevereiro de 2020.</h5>
                            <p>Essa promoção é válida até 28/02/2020. Após essa data o passe livre voltará ao preço normal de R$ 229,00.</p>
                        </div>

                    </div>
                </div>

            </div>
            <div class="h-col-6 hidden-small" style="position:relative">
                <div class="bg-content-block"></div>
                <div class="container-bg-overlay"></div>
            </div>
        </div>
        
        <div class="contato white-block flex flex-row">
            <div class="h-col-6 col-small">
                <div class="">
                    <h3>Contato</h3>
                    <h4>Se tiver alguma dúvida ou precisar de alguma informação adicional</h4>
                    <form id="contato" action="http://formmail.kinghost.net/formmail.cgi" method="POST">
                        <input type="hidden" name="recipient" value="contato@balletbelasartes.com.br"> <!-- Pode ser qualquer endereço de email -->
                        <input type="hidden" name="redirect" value="http://www.balletbelasartes.com.br#mensagemenviada"> <!-- Após o envio, o usuário será redirecionado para a página configurada aqui -->
                        <input type="hidden" name="subject" value="Contato - SITE">  <!-- Assunto da mensagem -->
                        <input type="hidden" name="email" value="no-reply@balletbelasartes.com.br">   <!-- Deve ser uma conta de email ativa em seu domínio -->
                        
                        <div class="flex flex-row">
                            <div class="col-lg-12 col-small">
                                <label>Seu nome completo</label>
                                <input type="text" id="nome" name="nome">
                            </div>
                            <div class="col-lg-12 col-small">
                                <label>Seu telefone</label>
                                <input type="tel" id="telefone" name="telefone">
                            </div>
                            <div class="col-lg-12 col-small">
                                <label>Seu e-mail</label>
                                <input type="text" name="replyto" id="replyto">
                            </div>
                            <div class="col-lg-12 col-small">
                                <label>Sua mensagem</label>
                                <textarea id="mensagem" name="comentarios" placeholder="Fique a vontade para perguntar o que quiser ou mandar um recado para nossa equipe. Responderemos com prazer!"></textarea>
                            </div>
                            <div class="col-lg-12 col-small">
                                <button type="submit">Enviar</button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
            <div class="h-col-6 col-small" style="position:relative">
                <div id="map"></div>
                <p>Localizado na avenida Parque Águas Claras, no mesmo edificio do Restaurante do Rubinho, da escola de inglês CNA e da escola de lutas Five Rounds.</p>
                <p><b>Endereço</b><br/>Av. Parque águas claras QD 301 cj 04 lote 1 sala 102 <br> Águas Claras Norte, Brasília - DF, 71907-000</p>
                <p><b>Telefones</b><br/>(61) 98178-7995</p>
                <p><b>Funcionamento</b><br/>Segunda a Sexta - 08h até 20h<br/>Sábado - 08h até 12h</p>
            <script>
                // Initialize and add the map
                function initMap() {
                  // The location of Belas Artes
                    var position = {lat: -15.829854, lng: -48.0125942};
                    
                  // The map, centered at Belas Artes
                  var map = new google.maps.Map(
                      document.getElementById('map'), {zoom: 18, center: position});

                     //Infowindow 
                    var contentString = '<div id="content">'+
                        '<img src="https://www.balletbelasartes.com.br/images/logo_small_h.svg">'+
                        '<div id="bodyContent">'+
                        '<p>Localizado na avenida Parque Águas Claras, no mesmo edificio do Restaurante do Rubinho, escola de inglês CNA e da escola de lutas Five Rounds.</p>'+
                        '<p><b>Endereço</b><br/>Av. Parque águas claras QD 301 cj 04 lote 1 sala 102 - Águas Claras Norte, Brasília - DF, 71907-000</p>'+
                        '<p><b>Telefones</b><br/>(61) 98178-7995</p>'+
                        '<p><b>Funcionamento</b><br/>Segunda a Sexta - 08h até 20h<br/>Sábado - 08h até 12h</p>'+
                        '</div>';

                    var infowindow = new google.maps.InfoWindow({
                        content: contentString
                    });    

                    // The marker, positioned at Belas Artes
                    var marker = new google.maps.Marker({
                        position: position, 
                        map: map,
                        icon: 'https://www.balletbelasartes.com.br/images/marker.png'
                    });

                    //marker listener
                    marker.addListener('click', function() {
                        infowindow.open(map, marker);
                    });
                }
            </script>
            <script async defer
                src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBtqZqIJ0M4MyTvjas3QWfMCn1kgmhB-Os&callback=initMap">
            </script>
            </div>
        </div>

    </div>
    <script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script src="js/aos.js" type="text/javascript"></script>

    <script src="js/main.js?v=2"></script>
    <script src="js/messages.js"></script>
    <script async data-id="26496" src="https://cdn.widgetwhats.com/script.min.js"></script>
    <footer>
        © 2019 - Todos os Direitos Reservados <br/> 
        Desenvolvido por <br>
        <a href="https://www.widgetsbrasil.com.br" target="_blank" title="WidgetsBrasil"><img src="images/wb-logo_o_.svg" width="30px"></a> </footer>
    </footer>
</body>
</htm>