adiciona tela home e cadastro
parents
Showing
README.md
0 → 100644
index.html
0 → 100644
package-lock.json
0 → 100644
This source diff could not be displayed because it is too large.
You can
view the blob
instead.
package.json
0 → 100644
| { | |||
| "name": "ntflix-ntlabs", | |||
| "description": "A Vue.js project", | |||
| "version": "1.0.0", | |||
| "author": "Daniela Olinda", | |||
| "license": "MIT", | |||
| "private": true, | |||
| "scripts": { | |||
| "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", | |||
| "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" | |||
| }, | |||
| "dependencies": { | |||
| "vue": "^2.5.11" | |||
| }, | |||
| "browserslist": [ | |||
| "> 1%", | |||
| "last 2 versions", | |||
| "not ie <= 8" | |||
| ], | |||
| "devDependencies": { | |||
| "babel-core": "^6.26.0", | |||
| "babel-loader": "^7.1.2", | |||
| "babel-preset-env": "^1.6.0", | |||
| "babel-preset-stage-3": "^6.24.1", | |||
| "cross-env": "^5.0.5", | |||
| "css-loader": "^0.28.7", | |||
| "file-loader": "^1.1.4", | |||
| "vue-loader": "^13.0.5", | |||
| "vue-template-compiler": "^2.4.4", | |||
| "webpack": "^3.6.0", | |||
| "webpack-dev-server": "^2.9.1" | |||
| } | |||
| } |
src/App.vue
0 → 100644
| <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/[email protected]"></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> |
180 KB
127 KB
146 KB
src/assets/He-man.jpg
0 → 100644
266 KB
23 KB
src/assets/Pica-Pau-.jpg
0 → 100644
108 KB
27.2 KB
src/assets/cavaleiros.jpg
0 → 100644
186 KB
87.3 KB
src/assets/naruto.jpg
0 → 100644
258 KB
src/assets/samurai.jpg
0 → 100644
32.1 KB
src/assets/transformes.jpg
0 → 100644
73.9 KB
src/assets/ultraman.jpg
0 → 100644
199 KB
src/assets/witch.jpg
0 → 100644
8.81 KB
src/assets/yu-gi-oh.png
0 → 100644
907 KB
src/componentes/cadastro.vue
0 → 100644
src/main.js
0 → 100644
webpack.config.js
0 → 100644