planos.html

<!DOCTYPE html>
<html>

<head>
  <title>Vinow - Planos</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/style.css">

</head>

<body>

  <!--  Modal   -->


  <div class="modal fade" tabindex="-1" role="dialog" id="modalplano">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Obrigado pela Preferencia!</p>
        </div>
      </div>
    </div>
  </div>


  <!--  Modal login   -->
  <div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="modalLoginTitulo"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalLoginTitulo">
            Entre na Sua Conta
          </h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="loginEmail">Email</label>
            <input type="email" id="email" class="form-control" id="loginEmail">
          </div>
          <div class="form-group">
            <label for="loginSenha">Senha</label>
            <input type="password" id="senha" class="form-control" id="loginSenha">
          </div>
          <button type="submit" class="btn btn-primary" onclick="logar()">Entrar na Conta</button>
          <small class="form-text text-muted">Esqueceu a senha? <a href="#">Clique aqui</a>.</small>

          <div class="form-group centro mt-2">
            <input type="button" class="btn google" value="Login com o Google">
          </div>

          <div class="form-group centro ">
            <input type="button" class="btn fb" value="Login com o Facebook">
          </div>


        </div>
      </div>
    </div>
  </div>
  <!--  Modal login   -->

  <!-- Modal perfil -->
  <div class="modal fade" tabindex="-1" role="dialog" id="modalperfil">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Meu Perfil</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <label for="upload"><img class="d-block m-auto circulo" id="img" class="img-fluid" onclick="mudarfoto()">
            <div id="co"><input type="file" id="upload" class="d-none"></div>
          </label>
          <h3><output id="nome_perfil" class="centro mt-3"></output></h3>
          <div id="dadopesso"></div>
          <section>
            <h3 class="text-center mt-3">Postagens</h3>
            <p class="blockquote mt-3">Viagem hoje para o Rio de Janeiro foi maravilhoso! <small
                class="form-text text-muted">03 de novembro às 20:22</small></p>
            </p>
            <div class="row">
              <div class="centro">
                <img class="img-fluid mb-4 imagemp" src="img/a.jpg" alt="Foto 1">
                <img class="img-fluid mb-4 imagemp" src="img/b.jpg" alt="Foto 1">
                <img class="img-fluid mb-4 imagemp" src="img/c.jpg" alt="Foto 1">
              </div>
            </div>
            <div class="dropdown-divider"></div>
            <p class="blockquote">A melhor viagem que eu fiz foi para paris!<small class="form-text text-muted">28 de
                outubro às 10:45</small></p>
            <div class="row">
              <div class="centro">
                <img class="img-fluid mb-4 imagemp" src="img/d.jpg" alt="Foto 1">
                <img class="img-fluid mb-4 imagemp" src="img/e.jpg" alt="Foto 1">
                <img class="img-fluid mb-4 imagemp" src="img/f.jpg" alt="Foto 1">
              </div>
            </div>
            <div class="dropdown-divider"></div>
          </section>

          <form class="bg-light box-shadow2 form-row centro">
            <h4 class="centro2 h5">Deixe seu comentário</h4>

            <div class="container-3 col-md-9 justify-content-center d-block">
              <p>
                <output id="comenta" class="d-block"></output>
              </p>
            </div>

            <div class="form-group">
              <label for="nomeComent" class="lead">Nome: </label>
              <input type="text" size="50" maxlength="60" id="nomeComent">
            </div>

            <div class="form-group">
              <label for="coment" class="lead">Deixe sua mensagem:</label>
              <input type="text" size="32" id="coment">
            </div>

            <div class="form-group col-4">
              <input type="button" class="btn btn-primary" value="Comentar" onclick="comentario()">
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- Modal Perfil -->

  <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top py-3 box-shadow">
    <a href="index.html" class="navbar-brand">
      <img src="img/vinow.png" class="logo" alt="ViNow">
    </a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Abrir Navegação">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">Locais</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="rj.html">Rio de Janeiro</a>
            <a class="dropdown-item" href="sp.html">São Paulo</a>
            <a class="dropdown-item" href="ba.html">Salvador</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="planos.html">Planos</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contato.html">Contato</a>
        </li>
        <li class="nav-item" id="login">
          <a class="nav-link" href="#" data-toggle="modal" data-target="#modalLogin">Login</a>
        </li>
        <li class="nav-item" id="sair">
          <a class="btn btn-outline-primary ml-md-2" href="inscricao.html">Inscreva-se</a>
        </li>
      </ul>
    </div>
  </nav>

  <section class="container">
    <div class="text-center my-5">
      <span class="h6 d-block">SEU PLANO, SUA VIAGEM</span>
      <h1 class="display-4 text-primary">Escolha o Plano</h1>
    </div>
    <div class="row">
      <div class="col-md mb-5" id="gold">
        <div class="bg-light rounded p-4 box-shadow">
          <h2>Gold</h2>
          <ul class="list-unstyled linha">
            <li>Classe Econômica</li>
            <li>
              <div class="form-check">
                <input type="checkbox" id="tourr">
                <label for="tourr">Tour pela cidade</label>
              </div>
            </li>

            <li>
              <div class="form-check">
                <input type="checkbox" id="ingressoo">
                <label for="ingressoo">Ingresso para festas</label>
              </div>
            </li>

            <li>
              <div class="form-check">
                <input type="checkbox" id="diariaa">
                <label for="diariaa">Primeira diária por conta da empresa</label>
              </div>
            </li>
          </ul>

          <form action="">
            <div class="form-group">
              <select id="cidade" class="form-control bg-light">
                <option value="selecione">Selecione a Cidade</option>
                <option value="rj">Rio de Janeiro</option>
                <option value="sp">São Paulo</option>
                <option value="sa">Salvador</option>
              </select>
            </div>
          </form>
          <div class="row align-items-center mt-4">
            <div class="col">
              <a href="#" class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#modalplano">Comprar
                Plano</a>
            </div>
            <div class="col">
              <span class="h4">R$<output id="total">0</output></span>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md mb-5" id="vip">
        <div class="bg-light rounded p-4 box-shadow">
          <h2>VIP <span class="badge badge-success">Novo</span></h2>
          <ul class="list-unstyled linha">
            <li>Classe Executiva</li>
            <li>
              <div class="form-check">
                <input type="checkbox" id="tour">
                <label for="tour">Tour pela cidade</label>
              </div>
            </li>

            <li>
              <div class="form-check">
                <input type="checkbox" id="ingresso">
                <label for="ingresso">Ingresso para festas</label>
              </div>
            </li>

            <li>
              <div class="form-check">
                <input type="checkbox" id="diaria">
                <label for="diaria">Primeira diária por conta da empresa</label>
              </div>
            </li>
          </ul>

          <form action="">
            <div class="form-group">
              <select id="cidadesa" class="form-control bg-light">
                <option value="selecione">Selecione a Cidade</option>
                <option value="rj">Rio de Janeiro</option>
                <option value="sp">São Paulo</option>
                <option value="sa">Salvador</option>
              </select>
            </div>
          </form>
          <div class="row align-items-center mt-4">
            <div class="col">
              <a href="#" class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#modalplano">Comprar
                Plano</a>
            </div>
            <div class="col">
              <span class="h4">R$<output id="totala">0</output></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <footer class="bg-dark text-white mt-5">
    <div class="container py-4">
      <div class="row">
        <div class="col-md-3 col-6">
          <h4 class="h6">PÁGINAS</h4>
          <ul class="list-unstyled">
            <li><a href="planos.html">Planos</a></li>
            <li><a href="contato.html">Contato</a></li>
            <li><a href="inscricao.html">Inscreva-se</a></li>
          </ul>
        </div>
        <div class="col-md-3 col-6">
          <h4 class="h6">LOCAIS</h4>
          <ul class="list-unstyled">
            <li><a href="rj.html">Rio de Janeiro</a></li>
            <li><a href="sp.html">São Paulo</a></li>
            <li><a href="ba.html">Salvador</a></li>
          </ul>
        </div>
        <div class="col-md-4">
          <h4 class="h6">DADOS DE CONTATO</h4>
          <ul class="list-unstyled text-secondary">
            <li>(21) 3460-4040</li>
            <li>(21) 2548-7070</li>
            <li>Segunda a Sexta das 07hrs - 18hrs</li>
          </ul>
        </div>
        <div class="col-md-2">
          <h4 class="h6">REDES SOCIAIS</h4>
          <ul class="list-unstyled">
            <li><a class="btn btn-outline-secondary btn-sm btn-block mb-2" href="#"
                style="max-width: 140px">Facebook</a></li>
            <li><a class="btn btn-outline-secondary btn-sm btn-block mb-2" href="#" style="max-width: 140px">Twitter</a>
            </li>
            <li><a class="btn btn-outline-secondary btn-sm btn-block mb-2" href="#" style="max-width: 140px">Youtube</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>

  <script src="js/popper.min.js"></script>
  <script src="js/jquery-3.2.1.slim.min.js"></script>
  <script src="js/bootstrap.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
</body>

</html>