Home Explore Help
Sign In
herton
/
bankline
forked from gabriel/bankline
Watch 1
Star 0
Fork 0
Files
Browse Source

trying to use flex

BuildTools 3 years ago
parent
c4f8be6607
commit
138bdc46ee
2 changed files with 83 additions and 87 deletions
Unified View Show Diff Stats
  1. 62 71
      index.html
  2. 21 16
      style.css

+ 62 - 71
index.html
View File 

@@ -9,7 +9,7 @@
 
     <link rel="stylesheet" href="style.css">
 
     <link rel="stylesheet" href="style.css">
 
     <title>Bankline</title>
 
     <title>Bankline</title>
 
 
 
-    <link href="crop_square.svg"rel="shortcut icon" type="image/x-icon">
 
+    <link href="crop_square.svg" rel="shortcut icon" type="image/x-icon">
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
@@ -18,76 +18,67 @@
 
     </header>
 
     </header>
 
     <div class="container">
 
     <div class="container">
 
         <h1> Formulário de cadastro </h1>
 
         <h1> Formulário de cadastro </h1>
 
-        <form>
 
-            <table>
 
-                <tr>
 
-                    <td colspan="3"> 
-                        <label for="name"><b>Nome</b></label>
 
-                        <input type="nome" placeholder="Digite seu nome" name="nome"  class="required">
 
-                    </td>
 
-                </tr>
 
-                <tr>
 
-                    <td> 
-                        <label for="cpf"><b>CPF</b> <span>inválido</span></label>
 
-                        <input onkeydown="cpfMask()"maxlength="14"type="text" placeholder="Digite seu cpf"  id="cpf" class="required">
 
-                    </td>
 
-                    <td>
 
-                        <label for="rg"><b>RG</b></label>
 
-                        <input type="nome" placeholder="Digite seu RG" name="rg">
 
-                    </td>
 
-                    <td>
 
-                        <label for="sexo"><b>Sexo</b></label>
 
-                        <select id="sexo" class="w100">
 
-                            <option selected>Escolha seu sexo</option>
 
-                            <option value="feminino">Feminino</option>
 
-                            <option value="masculino">Masculino</option>
 
-                            <option value="outro">Outro</option>
 
-                        </select>
 
-                    </td>
 
-                </tr>
 
-                <tr>
 
-                    <td>
 
-                        <label for="cep"><b>CEP</b></label>
 
-                        <input type="text" placeholder="Digite seu CEP" name="cep" onblur="searchCep(this.value)">
 
-                    </td>
 
-                    <td>
 
-                        <label for="endereco"><b>Endereço</b></label>
 
-                        <input type="text" placeholder="Digite seu endereço" name="endereco" class="required"  id="endereco">
 
-                    </td>
 
-                    <td>
 
-                        <label for="numero"><b>Número</b></label>
 
-                        <input type="text" placeholder="Digite o número" name="numero" class="required w100" >
 
-                    </td>
 
-                </tr>
 
-                <tr>
 
-                    <td>
 
-                        <label for="bairro"><b>Bairro</b></label>
 
-                        <input type="nome" placeholder="Digite seu bairro" name="bairro" id="bairro">
 
-                    </td>
 
-                    <td>
 
-                        <label for="cidade"><b>Cidade</b></label>
 
-                        <input type="nome" placeholder="Digite sua cidade" name="cidade" id="cidade">
 
-                    </td>
 
-                    <td>
 
-                        <label for="estado"><b>Estado</b></label>
 
-                        <input type="text" placeholder="Digite seu estado" name="estado" id="estado" class="w100">
 
-                    </td>
 
-                </tr>
 
-                <tr>
 
-                    <td>
 
-                        <label for="fixo"><b>Telefone fixo</b></label>
 
-                        <input type="text" placeholder="Digite o número do seu fixo" name="fixo">
 
-                    </td>
 
-                    <td>    
-                        <label for="celular"><b>Telefone celular</b></label>
 
-                        <input onkeydown="phoneMask()"type="text" placeholder="Digite número do celular" maxlength="15" id="celular" class="required" >
 
-                    </td>
 
-                    <td> 
-                        <button onclick="return validate()" type="submit" class="signupbtn">Cadastre-se</button> 
-                    </td>
 
-                </tr>
 
-            </table>
 
-        </form>
 
+
 
+        <section class ="wrapper">
 
+            <div class ="name">
 
+                <label for="name"><b>Nome</b></label>
 
+                <input type="nome" placeholder="Digite seu nome" name="nome" class="required">
 
+            </div>
 
+            <div>
 
+                <label for="cpf"><b>CPF</b> <span>inválido</span></label>
 
+                <input onkeydown="cpfMask()" maxlength="14" type="text" placeholder="Digite seu cpf" id="cpf"class="required">
 
+            </div>
 
+            <div>
 
+                <label for="rg"><b>RG</b></label>
 
+                <input type="nome" placeholder="Digite seu RG" name="rg">
 
+            </div>
 
+            <div>
 
+                <label for="sexo"><b>Sexo</b></label>
 
+                <select id="sexo" class="w100">
 
+                    <option selected>Escolha seu sexo</option>
 
+                    <option value="feminino">Feminino</option>
 
+                    <option value="masculino">Masculino</option>
 
+                    <option value="outro">Outro</option>
 
+                </select>
 
+            </div>
 
+            <div>
 
+                <label for="cep"><b>CEP</b></label>
 
+                <input type="text" placeholder="Digite seu CEP" name="cep" onblur="searchCep(this.value)">
 
+            </div>
 
+            <div>
 
+                <label for="endereco"><b>Endereço</b></label>
 
+                <input type="text" placeholder="Digite seu endereço" name="endereco" class="required" id="endereco">
 
+            </div>
 
+            <div>
 
+                <label for="numero"><b>Número</b></label>
 
+                <input type="text" placeholder="Digite o número" name="numero" class="required w100">
 
+            </div>
 
+            <div>
 
+                <label for="bairro"><b>Bairro</b></label>
 
+                <input type="nome" placeholder="Digite seu bairro" name="bairro" id="bairro">
 
+            </div>
 
+            <div>
 
+                <label for="cidade"><b>Cidade</b></label>
 
+                <input type="nome" placeholder="Digite sua cidade" name="cidade" id="cidade">
 
+            </div>
 
+            <div>
 
+                <label for="estado"><b>Estado</b></label>
 
+                <input type="text" placeholder="Digite seu estado" name="estado" id="estado" class="w100">
 
+            </div>
 
+            <div>
 
+                <label for="fixo"><b>Telefone fixo</b></label>
 
+                <input type="text" placeholder="Digite o número do seu fixo" name="fixo">
 
+            </div>
 
+            <div>
 
+                <label for="celular"><b>Telefone celular</b></label>
 
+                <input onkeydown="phoneMask()" type="text" placeholder="Digite número do celular" maxlength="15"id="celular" class="required">
 
+            </div>
 
+            <div>
 
+                <button onclick="return validate()" type="submit" class="signupbtn">Enviar</button>
 
+
 
+            </div>
 
+
 
+        </section>
 
     </div>
 
     </div>
 
     <footer>
 
     <footer>
 
         <p>Direitos reservados a Gabriel Fontineli</p>
 
         <p>Direitos reservados a Gabriel Fontineli</p>

+ 21 - 16
style.css
View File 

@@ -32,31 +32,24 @@ header p {
 
     font-size: 34px;
 
     font-size: 34px;
 
 }
 
 }
 
 h1{
 
 h1{
 
+    margin-top: 70px;
 
     text-align: center;
 
     text-align: center;
 
     padding-top:15px;
 
     padding-top:15px;
 
+    font-size: 40px;
 
 }
 
 }
 
-form {
 
+.wrapper {
 
     margin: auto;
 
     margin: auto;
 
     display: flex;
 
     display: flex;
 
+    flex-wrap: wrap;
 
     justify-content: center;
 
     justify-content: center;
 
+    align-items: center;
 
     padding: 15px 0;
 
     padding: 15px 0;
 
-}
 
-
 
-table {
 
     width: 90%;
 
     width: 90%;
 
 }
 
 }
 
 
 
-tr:nth-of-type(1) input:nth-of-type(1) {
 
-    width: 100%;
 
-}
 
-
 
-.w100 {
 
-    width: 100%;
 
-}
 
-
 
 input, select {
 
 input, select {
 
     border: 0px solid black;
 
     border: 0px solid black;
 
-    width: 95%;
 
+    width: 100%;
 
     display: inline-block;
 
     display: inline-block;
 
     padding: 15px;
 
     padding: 15px;
 
     background-color: #f1f1f1;
 
     background-color: #f1f1f1;
 
@@ -74,16 +67,28 @@ input:-webkit-autofill {
 
     height: 55%;
 
     height: 55%;
 
     margin: 4.4rem auto;
 
     margin: 4.4rem auto;
 
     border-radius: 15px;
 
     border-radius: 15px;
 
+    display: flex;
 
+    flex-direction: column;
 
+    
+}
 
+.name{
 
+    flex:1 1 100%;
 
+}
 
+div{
 
+    flex: 1 1 30%;
 
+    margin:5px;
 
 }
 
 }
 
 
 
 button {
 
 button {
 
     background-color: #ff6737;
 
     background-color: #ff6737;
 
     color: white;
 
     color: white;
 
-    padding: 15.5px 14px;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+    padding: 15px;
 
     border: none;
 
     border: none;
 
     cursor: pointer;
 
     cursor: pointer;
 
     width: 100%;
 
     width: 100%;
 
-    margin-top: 3px;
 
 }
 
 }
 
 
 
 span {
 
 span {
 
@@ -117,7 +122,7 @@ select:focus{
 
 [data-slots] { font-family: 'signika', sans-serif }
 
 [data-slots] { font-family: 'signika', sans-serif }
 
 
 
 @media only screen and (max-width: 700px) {
 
 @media only screen and (max-width: 700px) {
 
-    table, thead, tbody, th, td, tr { 
+    .wrapper { 
         display: block;
 
         display: block;
 
     }
 
     }
 
     input,select{
 
     input,select{