<template>
  <div class= "home">

          <div class="Menu-Principal">
             
                <ul>
                  <li><a href="#home">Home</a></li>
                  <li><a href="#news">cadastro</a></li>
                  <li><a href="#contact">planos</a></li>
                  <li><a href="#about">login</a></li>
                </ul>

          </div>
            <br><br><br><br>
           <div class="blocologo"> <img class="img-responsive img-logo" alt="Vue logo" src="./assets/NTFLIXLogo - Copia.jpg"></div>
           
          <div conteiner ="filmes">
          <fieldset>
                      <div class="img">
                        <a target="_blank" href="https://animesonline.vip/power-rangers-dublado/">
                          <img src="./assets/09-Power-Rangers-1-Temporada.jpg" alt="Forest" width="1000" height="900">
                        </a>
                        <div class="desc">

                        power rangers<br>
                        A jornada de cinco adolescentes que devem buscar algo extraordinário quando eles tomam consciência 
                        que a sua pequena cidade Angel Grove - e o mundo - estão à beira de sofrer um ataque alienígena. Escolhidos 
                        pelo destino, eles irão descobrir que são os únicos que poderão salvar
                        o planeta. Mas para isso, eles devem superar seus problemas pessoais e juntarem sua forças, antes que seja tarde demais.
                        
                        </div>
                    </div>

                   <div class="img">
                    <a target="_blank" href="https://animesonline.vip/os-cavaleiros-do-zodiaco-dublado/">
                      <img src="./assets/cavaleiros.jpg" alt="Forest" width="600" height="400">
                    </a>
                      <div class="desc">
                        <p>cavaleiros de zodiaco</p>
                        conta a história de um grupo de cinco jovens guerreiros 
                        cuja função era proteger Saori Kido, reencarnação de Atena, a deusa grega da sabedoria. Para lutar, 
                        eles utilizam a energia interior e do cosmos, e suas armaduras que são inspiradas em constelações e 
                        na mitologia grega.
                     </div>
                  </div>
                <div class="img">
                  <a target="_blank" href="https://www.anitube.site/25883/">
                    <img src="./assets/04-Entenda-Melhor-SAILOR-MOON-1.jpg" alt="Sailon  Moon" width="300" height="200">
                  </a>
                  <div class="desc">
                  Sailor Moon <br>
                  Usagi Tsukino, uma estudante do ensino médio de 14 anos, descobre por meio de uma gata falante 
                  chamada Luna que é uma guerreira mágica, com habilidades especiais. Ela então se transforma em
                  Sailor Moon e, junto com suas amigas também superpoderosas, está destinada a proteger a Terra das forças do mal
                
                  </div>
            </div>
          <div class="img">
                  <a target="_blank" href="https://animesonline.vip/caverna-do-dragao/">
                    <img src="./assets/cavena-do-dragao.jpg" alt="Forest" width="600" height="400">
                  </a>
                  <div class="desc">Caverna do Dragão 
                    conta a história de seis jovens que, durante uma brincadeira numa montanha-russa, 
                    são transportados num portal para um Reino. Lá, com armas e roupas mágicas, eles contam 
                    com dicas do Mestre dos Magos para se livrar dos vilões e voltar para suas casas
                  
                  </div>
            </div>
            
            <div class="img">
                    <a target="_blank" href="https://animesbr.biz/anime/dragon-ball/">
                      <img src="./assets/Dragon-Ball-Super-brasil.jpg" alt="Forest" width="600" height="400">
                    </a>
                    <div class="desc">
                    Dragon Ball Z 
                    A série segue as aventuras do protagonista, Son Goku, desde sua infância até a idade adulta enquanto ele 
                    treina artes marciais e explora o mundo em busca de sete esferas conhecidas como as Esferas do Dragão, 
                    que convocam um dragão que concede um desejo quando reunidas.
                    </div>
            </div>

              <div class="img">
                    <a target="_blank" href="https://animesonline.cc/anime/samurai-x/">
                      <img src="./assets/samurai.jpg" alt="Forest" width="600" height="400">
                    </a>
                    <div class="desc">
                    Samurai X 

                    A série, ambientada nos primeiros anos da Era Meiji no Japão, conta a história de Kenshin Himura 
                    um pacífico espadachim que prometeu nunca mais matar. Entretanto, seu passado como retalhador a 
                    serviço da Ishin Shishi fará o jovem Himura brandir novamente sua espada contra velhos e novos inimigos.  
                    </div>
            </div>

            <div class="img">
                      <a target="_blank" href="https://goyabu.org/animes/transformers-cyberverse">
                        <img src="./assets/transformes.jpg" alt="Forest" width="600" height="400">
                      </a>
                      <div class="desc">transformers cyberverse
                      
                      A recém-formada equipe de Autobots deve impedir que a Shockwave destrua toda a vida no planeta. 
                      A equipe Autobot finalmente descobre a localização da Arca. A equipe Autobot deve lutar contra o
                      Shockwave e seus Decepticons para defender a Arca e despertar o Optimus Prime e os outros Autobots.
                     
                      </div>
            </div>
            <div class="img">
                      <a target="_blank" href="https://animesonlinen.com/legendados/532990">
                        <img src="./assets/naruto.jpg" alt="Forest" width="1000" height="900">
                      </a>
                      <div class="desc">
                     Naruto<br>
                     Naruto é um jovem órfão habitante da Vila da Folha que sonha se tornar o quinto Hokage, o maior guerreiro 
                     e governante da vila. Ao se graduar como ninja, descobre que tem um demônio raposa selado dentro de si.
                      </div>
                </div>
                <div class="img">
                      <a target="_blank" href="https://animesonlinegames.com/animes/as-meninas-super-poderosas/a">
                        <img src="./assets/as-meninas-superpoderosas-hbo-max.jpg" alt="Forest" width="1000" height="900">
                      </a>
                      <div class="desc">
                      meninas super poderosas
                      Desiludidas de que perderam a infância por estarem combatendo o crime, 
                      as irmãs enfrentam vários dilemas em suas vidas pessoais e, quando o mundo precisa delas novamente, se 
                      sentem divididas em voltarem ao papel de super-heroínas.
                      
                      </div>
                </div>
               <div class="img">
                      <a target="_blank" href="https://animefire.net/animes/ultraman-dublado-todos-os-episodios">
                        <img src="./assets/ultraman.jpg" alt="Forest" width="500" height="1500">
                      </a>
                      <div class="desc">
                     ultraman <br>
                      Um alienígena vindo da Galáxia M-78 a bordo de uma cúpula vermelha, ao perseguir o monstro Bemular,
                     choca-se com a nave do oficial Hayata da S.I.A Hayata não suporta a gravidade dos ferimentos e morre. 
                     Para reparar o erro, o  alienígena funde sua energia vital à de Hayata, trazendo-o de volta a vida 
                     e entregando-lhe a Cápsula Beta. e agora Hayata pode se 
                     transformar em Ultraman para defender a Terra de qualquer ameaça.
                      </div>
                </div>
                <div class="img">
                      <a target="_blank" href="https://www.anitube.site/6428/">
                        <img src="./assets/yu-gi-oh.png" alt="Forest" width="1000" height="900">
                      </a>
                      <div class="desc">
                      yu-gi-oh<br>
                      O jovem estudante do ensino médio Yugi Muto derrota o campeão mundial, Seto Kaiba, em um duelo 
                      de cartas com a misteriosa ajuda do quebra-cabeça Millenium. Em razão de sua vitória inesperada, 
                      Yugi se torna famoso em todo o mundo e passa a participar de outros duelos para salvar os amigos e a
                       família.
                      
                      </div>
                </div>

                 <div class="img">
                      <a target="_blank" href="https://animesonlinegames.com/animes/pica-pau/a">
                        <img src="./assets/Pica-Pau-.jpg" alt="Forest" width="1000" height="900">
                      </a>
                      <div class="desc">
                     Pica Pal<br>
                      O pássaro falante Pica-Pau sempre tenta se dar bem em qualquer situação. Na companhia de seu amigo,
                       o cavalo medroso Pé de Pano, ele adora pregar peças em seus inimigos Zeca Urubu, Zé Jacaré, Meany 
                       Ranheta, entre outros.
                      
                      </div>
                </div>
                 <div class="img">
                      <a target="_blank" href="https://animesonlinegames.com/animes/he-man/a">
                        <img src="./assets/He-man.jpg" alt="Forest" width="1000" height="900">
                      </a>
                      <div class="desc">
                     He-Man <br>
                     He-Man é o homem mais poderoso do universo. Ele enfrenta as forças do mal para salvar o planeta Eternia dos
                      planos de Esqueleto, e proteger os segredos do Castelo de Grayskull.

                      
                      </div>
                </div>
                
                 <div class="img">
                      <a target="_blank" href="https://animesonline.vip/w-i-t-c-h-dublado/">
                        <img src="./assets/witch.jpg" alt="Forest" width="1000" height="900">
                      </a>
                      <div class="desc">
                     Witch <br>
                    , o desenho animado conta a história de cinco meninas: Will, Irma, Taranee,
                     Cornélia e Hay Lin que ganharam poderes mágicos e se tornaram as "Guardians of 
                     the Veil" (Guardiãs do Véu).
                      </div>
                </div>
                </fieldset>
          </div>   

        <div class="Menu">

                  <h1>Cadastro </h1>

                         <!--Dados de Pessoais-->
                          <fieldset>
                                <legend>Dados Pessoais</legend>
                                <table cellspacing="10">
                                  <tr>
                                      <td>
                                        <label for="nome">Nome: </label>
                                      </td>
                                      <td align="left">
                                        <input type="text" name="nome">
                                      </td>
                                      <td>
                                        <label for="sobrenome">Sobrenome: </label>
                                      </td>
                                      <td align="left">
                                        <input type="text" name="sobrenome">
                                      </td>
                                      <td>
                                        <label for="sobrenome">Sexo: </label>
                                      </td>
                                      <td>
                                        <select name="sexo"> 
                                          <option value="ac">Masculino</option> 
                                          <option value="al">Feminino</option> 
                                          <option value="am">Prefiro não informar</option>
                                        </select> 
                                      </td>
                                   </tr>
                                  <tr>
                                      <td>
                                        <label>Nascimento: </label>
                                      </td>
                                      <td align="left">
                                        <input type="text" name="dia" size="2" maxlength="2" value="dd"> 
                                      <input type="text" name="mes" size="2" maxlength="2" value="mm"> 
                                      <input type="text" name="ano" size="4" maxlength="4" value="aaaa">
                                      </td>
                                  </tr>
                                  <tr>
                                        <td>
                                          <label for="rg">E-mail: </label>
                                        </td>
                                        <td align="left">
                                          <input type="text" name="rg" size="13" maxlength="13"> 
                                        </td>
                                  </tr>
                                  <tr>
                                      <td>
                                        <label>CPF:</label>
                                      </td>
                                      <td align="left">
                                        <input type="text" name="cpf" size="9" maxlength="9"> - <input type="text" name="cpf2" size="2" maxlength="2">
                                      </td>
                                  </tr>
                                </table>
                          </fieldset>


                              <!--Dados de Endereço-->
                            <fieldset>
                           <legend>Dados de Endereço</legend>
                    <table cellspacing="10">

                      <tr>
                      <td>
                        <label for="rua">Rua:</label>
                      </td>
                      <td align="left">
                        <input type="text" name="rua">
                      </td>
                      <td>
                        <label for="numero">Numero:</label>
                      </td>
                      <td align="left">
                        <input type="text" name="numero" size="4">
                      </td>
                      </tr>
                      <tr>
                      <td>
                        <label for="bairro">Bairro: </label>
                      </td>
                      <td align="left">
                        <input type="text" name="bairro">
                      </td>
                      </tr>
                      <tr>
                      <td>
                        <label for="estado">Estado:</label>
                      </td>
                      <td align="left">
                        <select name="estado"> 
                        <option value="ac">Acre</option> 
                        <option value="al">Alagoas</option> 
                        <option value="am">Amazonas</option> 
                        <option value="ap">Amapá</option> 
                        <option value="ba">Bahia</option> 
                        <option value="ce">Ceará</option> 
                        <option value="df">Distrito Federal</option> 
                        <option value="es">Espírito Santo</option> 
                        <option value="go">Goiás</option> 
                        <option value="ma">Maranhão</option> 
                        <option value="mt">Mato Grosso</option> 
                        <option value="ms">Mato Grosso do Sul</option> 
                        <option value="mg">Minas Gerais</option> 
                        <option value="pa">Pará</option> 
                        <option value="pb">Paraíba</option> 
                        <option value="pr">Paraná</option> 
                        <option value="pe">Pernambuco</option> 
                        <option value="pi">Piauí</option> 
                        <option value="rj">Rio de Janeiro</option> 
                        <option value="rn">Rio Grande do Norte</option> 
                        <option value="ro">Rondônia</option> 
                        <option value="rs">Rio Grande do Sul</option> 
                        <option value="rr">Roraima</option> 
                        <option value="sc">Santa Catarina</option> 
                        <option value="se">Sergipe</option> 
                        <option value="sp">São Paulo</option> 
                        <option value="to">Tocantins</option> 
                      </select>
                      </td>
                      </tr>
                <tr>
                <td>
                  <label for="cidade">Cidade: </label>
                </td>
                <td align="left">
                  <input type="text" name="cidade">
                </td>
                </tr>
                <tr>
                <td>
                  <label for="cep">CEP: </label>
                </td>
                <td align="left">
                  <input type="text" name="cep" size="5" maxlength="5"> - <input type="text" name="cep2" size="3" maxlength="3">
                </td>
                </tr>
              </table>

                            </fieldset>
                <!--Dados de Pagamento-->
                          
                          <fieldset>

                              <div class="input-group">
                                Dados de Pagamento :                                
                                  Cartão <input type="text" class="from-input" placeholder=""><br><br>
                                  Boleto <input type="text" class="from-input" placeholder=" "><br><br>
                                  PIX  <input type="text" class="from-input" placeholder=""><br><br>  
                                  <button class="btn btn-primary input-group-btn">Confirma</button>
                              </div>


                               


                          </fieldset>




                             <!--Dados de Login-->
                          <fieldset>
                    <legend>Dados de login</legend>
                    <table cellspacing="10">
                      <tr>
                      <td>
                        <label for="email">E-mail: </label>
                      </td>
                      <td align="left">
                        <input type="text" name="email">
                      </td>
                      </tr>
                      <tr>
                      <td>
                        <label for="imagem">Imagem de perfil:</label>
                      </td>
                      <td>
                        <input type="file" name="imagem" >

                      </td>
                      </tr>
                      <tr>
                      <td>
                        <label for="login">Login de usuário: </label>
                      </td>
                      <td align="left">
                        <input type="text" name="login">
                      </td>
                      </tr>
                      <tr>
                      <td>
                        <label for="pass">Senha: </label>
                      </td>
                      <td align="left">
                        <input type="password" name="pass">
                      </td>
                      </tr>
                      <tr>
                      <td>
                        <label for="passconfirm">Confirme a senha: </label>
                      </td>
                      <td align="left">
                        <input type="password" name="passconfirm">
                      </td>
                      </tr>
                    </table>
                    <input type="submit">
                    <input type="reset" value="Limpar">
                          </fieldset>
           </div>
           
</div>
</template>


<script src = "https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
<script src = "https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
    }
  },
}

</script>
 
<style>


div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}	

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
a{
  display: block;
  padding: 8px;
  background-color: #199782;
}
#menu li {
border-right: 1px solid #bbb;height:1px; /* IE5.0 bug */
padding: 3px 1px; 
margin:0;
border: 1px solid #f00; 
background: #999;
text-decoration: none;
}

li:last-child {
  border-right: none;
}

.blocologo{
       text-align: center;

}
 .img-blocologo{
     size: 15px;
     max-width: 25px;
     margin-top:  50px;
     text-align: center;
   }
  .menu{
    height:1px; /* IE5.0 bug */

    font-size: smaller;
    size: 50px;
    text-align: center;
    background: rgb(7, 148, 96);
  }
  ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
   overflow: hidden
}
li{
   float: left;
}
  .input-groupdadospessoai{
     text-align: left;
  }
  .input-groupdadospessoai{
     text-align: height;
  }
  blocologo{
     size: 50px;
     text-align: center;
  }
.filmes{

  text-align: left;
  max-width: 50px;
  border-block-color: blue;


}
.menu{
  background: rgb(12, 186, 220);

}
/*Menu - inicial */
.Menu-Principal{
   width: 100%; 
  background: #199782;
  float: left;
  display: block;
   font: medium;
    color: hsl(154, 28%, 95%);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border-bottom: 2px solid transparent;
  position: relative;
    top: 0;
    left: 0;
    transform: none;
}


</style>
