<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Section Form --> <section id="form"> <div class="container pt-5 pb-5"> <div class="row"> <div class="col-md-12 text-center"> <h3 class="text-uppercase">preencha os campos <br> <span class="blue">e faça seu cadastro</span> </h3> <img src="images/bottom-text-sobre.png" alt="cor de fundo"> <p>É muito importante que você preencha todos os campos para realizar o seu cadastro</p> <div class="row"> <div class="col-md-12"> <form> <div class="form-row"> <div class="form-group col-md-6"> <h5 class="text-left">Dados cadastrais</h5> <input type="name" class="form-control" id="inputDado" placeholder="Seu nome"> </div> <div class="form-group col-md-6"> <h5 class="text-left">Dados de acesso</h5> <input type="email" class="form-control" id="inputDado" placeholder="Seu e-mail"> </div> <div class="form-group col-md-3"> <input type="cpf" class="form-control" id="inputDado" placeholder="Seu cpf"> </div> <div class="form-group col-md-3"> <input type="age" class="form-control" id="inputDado" placeholder="Sua idade"> </div> <div class="form-group col-md-6"> <input type="password" class="form-control" id="inputDado" placeholder="Senha"> </div> <div class="form-group col-md-1"> <input type="ddd" class="form-control" id="inputDado" placeholder="DDD"> </div> <div class="form-group col-md-3"> <input type="number" class="form-control" id="inputDado" placeholder="Seu telefone"> </div> <div class="form-group col-md-2"> <input type="cep" class="form-control" id="inputDado" placeholder="Seu cep"> </div> <div class="form-group col-md-6"> <input type="password" class="form-control" id="inputDado" placeholder="Confirme a senha"> </div> <div class="form-group col-md-6"> <input type="street" class="form-control" id="inputDado" placeholder="Nome da rua pelo cep"> </div> <div class="form-group col-md-3"> <input type="number" class="form-control" id="inputDado" placeholder="Seu telefone"> </div> <div class="form-group col-md-3"> <input type="number" class="form-control" id="inputDado" placeholder="Seu telefone"> </div> <div class="com-md-6"> <h5>Clique aqui para ler o termo de Uso</h5> </div> <div class="form-group col-md-3"> <input type="number" class="form-control" id="inputDado" placeholder="Seu telefone"> </div> <div class="form-group col-md-3"> <input type="number" class="form-control" id="inputDado" placeholder="Seu telefone"> </div> </div> <div class="form-group"> <label for="inputAddress">Address</label> <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> </div> <div class="form-group"> <label for="inputAddress2">Address 2</label> <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> </div> <div class="form-row"> <div class="form-group col-md-6">> <label for="inputCity">City</label> <input type="text" class="form-control" id="inputCity"> </div> <div class="form-group col-md-4"> <label for="inputState">State</label> <select id="inputState" class="form-control"> <option selected>Choose...</option> <option>...</option> </select> </div> <div class="form-group col-md-2"> <label for="inputZip">Zip</label> <input type="text" class="form-control" id="inputZip"> </div> </div> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="gridCheck"> <label class="form-check-label" for="gridCheck"> Check me out </label> </div> </div> <button type="submit" class="btn btn-primary">Sign in</button> </form> </div> </div> </div> </div> </div> </section>

#form { background-color: #F9F9F9; } .blue { color: #2CAFFD; } #inputDado { border-radius: 30px; border: 1px solid #000; }