Bootstrap Snippet Aurea - venda using HTML CSS Bootstrap Javascript

"Aurea - venda"
Bootstrap 4.1.1 Snippet by psd06t

4.1.1

460 0 Fav

Post to Facebook Tweet this

<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>  <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Veículos a venda </title> <meta name="description" content="Source code generated using layoutit.com"> <meta name="author" content="LayoutIt!"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="container-fluid"> <div class="row noprint"> <div class="col-md-12"> <ul class="nav"> <li class="nav-item"> <a class="nav-link active" href="https://bootsnipp.com/user/snippets/xbdbQ">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="https://bootsnipp.com/user/snippets/4dP9m">Modelos</a> <li class="nav-item"> <a class="nav-link" href="https://bootsnipp.com/user/snippets/eKZ7y">Cadastro</a> </li> </ul> </div> </div> <div class="row noprint"> <div class="col-md-12"> <div class="carousel slide" id="carousel-620049"> <ol class="carousel-indicators"> <li data-slide-to="0" data-target="#carousel-620049" class="active"> </li> <li data-slide-to="1" data-target="#carousel-620049"> </li> <li data-slide-to="2" data-target="#carousel-620049"> </li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" alt="Carousel Bootstrap First" src="https://img.r7.com/images/fiat-argo-s-design-02122019123518432?dimensions=660x360"> <div class="carousel-caption"> <h4> Fiat Argo </h4> <p> Eleito o melhor carro da categoria - Prêmio 2019 </p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" alt="Carousel Bootstrap Second" src="https://1.bp.blogspot.com/-Ux5i-d7TbDI/XXxV1Ej24eI/AAAAAAAAW8k/0nwB6sUkDIsfCtJ8RtA6cUduYYH_R6YXgCLcBGAsYHQ/s1600/Novo%2BOnix%2BPremier%2B%25281%2529.jpg"> <div class="carousel-caption"> <h4> Chevrolet Onix </h4> <p> Carro mais vendido da marca Chevrolet. Melhor Design e economia. </p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" alt="Carousel Bootstrap Third" src="https://statig3.akamaized.net/bancodeimagens/59/u0/zg/59u0zgm0cephojlha272w4jfy.jpg"> <div class="carousel-caption"> <h4> Ford Fusion </h4> <p> Toda linha Ford , e também a categoria econômica </p> </div> </div> </div> <a class="carousel-control-prev" href="#carousel-620049" data-slide="prev"><span class="carousel-control-prev-icon"></span> <span class="sr-only">Previous</span></a> <a class="carousel-control-next" href="#carousel-620049" data-slide="next"><span class="carousel-control-next-icon"></span> <span class="sr-only">Next</span></a> </div> </div> </div> <div class="section"> <div class="container"> <div class="row"> <div class="col-md-12" align="center"> <h2>Cadastro de Vendas</h2> </div> </div> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="col-md-12"> <form role="form" action=""> <div class="form-group"> <label for="nome-cliente"> Nome Cliente </label> <input type="text" required="required" class="form-control" name="nome-cliente" id="nome-cliente"> </div> <div class="form-group"> <label for="nascimento"> Data Nascimento </label> <input type="text" required="required" class="form-control" name="nascimento" id="nascimento"> </div> <div class="form-group"> <label for="telefone"> Telefone </label> <input type="text" required="required" class="form-control" name="telefone" id="telefone"> </div> <div class="form-group"> <label for="endereco-cliente"> Endereço/rua </label> <input type="text" required="required" class="form-control" name="endereco-cliente" id="endereco-cliente"> </div> <div class="form-group"> <label for="numero-residencia"> Número Residencial </label> <input type="text" required="required" class="form-control" name="numero-residencia" id="numero-residencia"> </div> <div class="form-group"> <label for="bairro-cliente"> Bairro </label> <input type="text" required="required" class="form-control" name="bairro-cliente" id="bairro-cliente"> </div> <div class="form-group"> <label for="cidade"> Cidade </label> <input type="text" required="required" class="form-control" name="cidade" id="cidade"> </div> <div class="form-group"> <label for="cpf"> CPF </label> <input type="text" required="required" class="form-control" name="cpf" id="cpf"> </div> <div class="form-group"> <label for="identidade"> Número Identidade </label> <input type="text" required="required" class="form-control" name="identidade" id="identidade"> </div> <div id="carro"> <label for="veiculo"> veículo:</label> </div> <button type="submit" class="btn-primary noprint" onclick="cadastrar()"> Comprar </button> </form> </div> </div> </div> </div> </div> </div> <footer class="rodape noprint"> <div class="container"> <div class="row"> <div class="col-md-4"> <h3>Agência Automotiva Áurea </h3> <p>Rua das Flores, 234 - Centro - Belo Horizonte</p> </div> <div class="col-md-4"> <h3>Acompanhe Nossa Rede Social</h3> </div> <div class="col-md-4"> <img alt="Bootstrap Image Preview" src="https://img.olx.com.br/thumbs256x256/57/570927116253017.jpg"> </div> </div> </div> <div class="row text-center"> <div class="col-md-12"> <p> Copyright ©<script>document.write(new Date().getFullYear());</script> - Áurea Mariza Todos os direitos reservados </p> </div> </div> </footer> </div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/scripts.js"></script> </body> </html>

body{ padding:50px; margin: auto; } .nav{ background-color: #101112; } a.nav-item{ color:#d0e9c6; } .rodape { background: #000000; color: #000; text-align: center; } @media print{ .noprint{ display:none; } } h3{ color:#ffffff; text-align: center; font-size: medium; } p{ color:#d0e9c6; text-align: center; } .container{ margin: auto; padding: 50px; } .card-text{ color: #464a4c; }

var carros = { marca:"Fiat", modelo:"Argo", portas:"4", ano:"2019", fabricante:"Fiat", cor: "Branca", } function cadastrar(){ var nome = document.getElementById("nome-cliente") var nasc = document.getElementById("nascimento") var tel = document.getElementById("telefone") var endereco = document.getElementById("endereco-cliente") var numero = document.getElementById("numero-residencia") var bairro = document.getElementById("bairro-cliente") var cid = document.getElementById("cidade") var cpf = document.getElementById("cpf-cliente") var ident = document.getElementById("identidade") document.getElementById("carro").innerHTML = carros["marca"] + " " + carros["modelo"]+ " "+ carros["portas"]+" "+carros["ano"]+ " "+carros["fabricante"]+" "+carros["cor"]; window.print() }

Related: See More

Material Dashboard React

Material Dashboard React

Questions / Comments:

Posting GuidelinesFormatting