Skip to content

F
front-ntflix
Commit 16b858d2 authored by Daniela Olinda Catarina's avatar Daniela Olinda Catarina
Browse files
Options

cadastro

parent d9c8b0c7
Hide whitespace changes
Inline Side-by-side
Showing with 192 additions and 528 deletions
src/views/Cadastro.vue
View file @ 16b858d2
<template>
<div class="cadastro">
<h2 class="title">Cadastro</h2>
<!--Dados de Pessoais-->
<fieldset>
<legend>Dados Pessoais</legend>
<table cellspacing="10">
<tr>
<label for="nome">Seu Nome:</label>
<input
type="text"
id="nome"
name="nome"
placeholder="Digite seu nome*"
required
/>
<label for="nome">Sobrenome:</label>
<input
type="text"
id="nome"
name="nome"
placeholder="Digite seu sobrenome*"
required
/>
<br />
<br />
</tr>
<tr>
<td>
Data de nascimento:
<input type="datetime-local" name="bdaytime" />
</td>
</tr>
<td>
Sexo:
<select name="sexo">
<option value="ac">Masculino</option>
<option value="al">Feminino</option>
<option value="am">Prefiro não informar</option>
</select>
</td>
<tr>
<label for="email">Seu E-Mail:</label>
<input
type="email"
id="email"
name="email"
placeholder="Digite seu E-Mail*"
required
/>
</tr>
<tr>
<td>
CPF
<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>
<div class="row">
<div class="col-75">
<div class="container">
<form action="/action_page.php">
<div id="form1" class="row">
<div class="col-50">
<h3>Pré-cadastro</h3>
<label for="fname"><i class="fa fa-user"></i> Nome: </label>
<input type="text" id="fname" name="firstname" placeholder="">
<label for="fname"><i class="fa fa-user"></i> Sobrenome: </label>
<input type="text" id="fname" name="firstname" placeholder="">
<label for="fname"><i class="fa fa-user"></i> CPF: </label>
<input type="text" id="fname" name="firstname" placeholder="xxx-xxx-xxx-xx">
<label for="fname"><i class="fa fa-user"></i> Telefone: </label>
<input type="text" id="fname" name="firstname" placeholder="(xx)xxxx-xxxx">
<label for="country">Sexo</label>
<select id="country" name="country">
<option value="australia">Masculino</option>
<option value="canada">Femino</option>
<option value="usa">Prefiro não informa</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>
<h3>Escolha seu meio de Pagamento</h3>
<div class="cartao">
<!--Dados de cartão-->
<!--modo de pagamento-->
<div class="modo-pagamento">
Modo de Pagamento
<h3>cartão</h3>
<fieldset>
<legend> Pagamento em Cartão: </legend>
<form>
Debito:
<input type="radio" checked name="Sex" value="male" />
<br />
Credito:
<input type="radio" name="Sex" value="female" />
</form>
<br />
<div class="input-group-cartao">
Dados de Cartão :
<br />
numero cartão
<br />
<input type="text" class="from-input" placeholder="" />
<br />
<br />
Expiração:
<select>
<option value="mes">Mês</option>
<option value="jan">Janeiro</option>
<option value="fev">Fevereiro</option>
<option value="mar">Março</option>
<option value="abr">Abril</option>
<option value="mai">Maio</option>
<option value="jun">Junho</option>
<option value="jul">Julho</option>
<option value="ago">Agosto</option>
<option value="Sept">Setembro</option>
<option value="out">Outubro</option>
<option value="nov">Novembro</option>
<option value="dev">Dezembro</option>
</select>
<select>
<option value="ano">Ano</option>
<option value="ano">2015</option>
<option value="ano">2016</option>
<option value="ano">2017</option>
<option value="ano">2018</option>
<option value="ano">2019</option>
<option value="ano">2020</option>
<option value="ano">2021</option>
<option value="ano">2022</option>
<option value="ano">2023</option>
<option value="ano">2024</option>
<option value="ano">2025</option>
<option value="ano">2026</option>
<option value="ano">2027</option>
<option value="ano">2028</option>
<option value="ano">2029</option>
<option value="ano">2030</option>
</select>
<br />
<br />
CVV
<input type="text" class="from-input" placeholder="" />
<br />
<br />
Nome Titular:
<input type="text" class="from-input" placeholder="" />
<br />
<label for="fname"><i class="fa fa-user"></i> Data Nascimento: </label>
<input id="date" type="date" name="firstname" placeholder="">
<br>
<label for="email"><i class="fa fa-envelope"></i> Email</label>
<input type="text" id="email" name="email" placeholder="text@example.com">
<label for="adr"><i class="fa fa-address-card-o"></i> Rua</label>
<input type="text" id="adr" name="address" placeholder="">
<label for="adr"><i class="fa fa-address-card-o"></i> Nº</label>
<input type="text" id="adr" name="address" placeholder="">
<label for="city"><i class="fa fa-institution"></i> Cidade</label>
<input type="text" id="city" name="city" placeholder="">
<label for="city"><i class="fa fa-institution"></i> Referecia/Complemento</label>
<input type="text" id="city" name="city" placeholder="">
<div class="row">
<div class="col-50">
<label for="state">Estado</label>
<input type="text" id="state" name="state" placeholder="">
</div>
<div class="col-50">
<label for="zip">Cep</label>
<input type="text" id="zip" name="zip" placeholder="00000-00">
</div>
</div>
<!--fim Dados de cartão-->
</fieldset>
<fieldset>
<legend> Boleto: </legend>
<form>
Banco
<input type="text" size="12" />
Ag
<input type="text" size="3" />
</form>
</fieldset>
<fieldset>
<legend> PIX: </legend>
<form>
Chave Pix
<input type="text" size="15" />
</form>
</fieldset>
</div>
<div class="col-50">
<h3>Pagamento</h3>
<label for="fname">bandeiras aceitas</label>
<div class="icon-container">
<i class="fa fa-cc-visa" style="color:navy;"></i>
<i class="fa fa-cc-amex" style="color:blue;"></i>
<i class="fa fa-cc-mastercard" style="color:red;"></i>
<i class="fa fa-cc-discover" style="color:orange;"></i>
</div>
<label for="cname">Nome Titular</label>
<input type="text" id="cname" name="cardname" placeholder="">
<label for="ccnum">Numero Cartão</label>
<input type="text" id="ccnum" name="cardnumber" placeholder="">
<label for="expmonth">Mês Expedição</label>
<input type="text" id="expmonth" name="expmonth" placeholder="">
<div class="row">
<div class="col-50">
<label for="expyear">Validade</label>
<input type="text" id="expyear" name="expyear" placeholder="">
</div>
<div class="col-50">
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv" placeholder="">
</div>
</div>
</div>
</div>
<label>
<input type="checkbox" checked="checked" name="sameadr">
Endereço de cobrança, mesmo de cadastro
</label>
<input type="submit" value="Cadastro" class="btn">
</form>
</div>
</div>
<!-- fim modo de pagamento-->
<br />
</div>
<button class="btn btn-primary input-group-btn">Confirma</button>
</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 class="col-25">
<div class="container">
<p>
Bem vindo a plataforma de animes!
</p><br><br>
<p> Deixe seu comentario aqui!</p>
<textarea rows="20px" cols="40px">
</textarea>
<br><br>
<button>Enviar</button>
</div>
</div>
</div>
</template>
......@@ -535,23 +120,94 @@ export default {
};
},
};
</script>
<style>
.input-groupdadospessoai {
text-align: left;
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
margin: 0 -16px;
}
.col-25 {
-ms-flex: 25%; /* IE10 */
flex: 25%;
}
.input-groupdadospessoai {
text-align: height;
.col-50 {
-ms-flex: 50%; /* IE10 */
flex: 50%;
}
.title {
padding: 25px 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
.col-75 {
-ms-flex: 75%; /* IE10 */
flex: 75%;
}
.col-25,
.col-50,
.col-75 {
padding: 0 16px;
}
.container {
background-color: #f2f2f2;
padding: 5px 20px 15px 20px;
border: 1px solid lightgrey;
border-radius: 3px;
}
input[type=text] , select {
width: 100%;
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
}
label {
margin-bottom: 10px;
display: block;
}
.icon-container {
margin-bottom: 20px;
padding: 7px 0;
font-size: 24px;
}
.btn , button {
background-color: #04AA6D;
color: white;
padding: 12px;
margin: 10px 0;
border: none;
width: 100%;
border-radius: 3px;
cursor: pointer;
font-size: 17px;
}
.btn:hover {
background-color: #45a049;
}
span.price {
float: right;
color: grey;
}
</style>
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (and change the direction - make the "cart" column go on top) */
@media (max-width: 800px) {
.row {
flex-direction: column-reverse;
}
.col-25 {
margin-bottom: 20px;
}
}
</style>
\ No newline at end of file
src/views/workspace.code-workspace 0 → 100644
View file @ 16b858d2
{
"folders": [
{
"path": "..\\..\\..\\..\\..\\Downloads\\bootstrap-5.2.0-beta1"
}
],
"settings": {}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment