"Lenize - Exercício 3"
Bootstrap 4.1.1 Snippet by psd06t

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> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <head> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>Auto Road</h1> </div> </div> </div> <div class="container"> <div class="row mb-3"> <div class="col-md-12"> <img src="https://spncr.s3.amazonaws.com/img/VcPQ8Wc7RSmmnMJVqe9OAQ/file.jpg"> </div> </div> </div> <div class="container"> <div class="row mb-2"> <div class="col-md-8"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-md-12"> <h4 class="text-danger">Informações</h4> <hr> </div> </div> <div class="row mb-4"> <div class="col-md-3"> <h5 class="text-secondary">Marca</h5> <h6> <script> document.write(cars[0]); </script> </h6> </div> <div class="col-md-3"> <h5 class="text-secondary">Modelo</h5> <h6> <script> document.write(cars[1]); </script> </h6> </div> <div class="col-md-3"> <h5 class="text-secondary">Cor</h5> <h6> <script> document.write(cars[2]); </script> </h6> </div> <div class="col-md-3"> <h5 class="text-secondary">Fabricante</h5> <h6> <script> document.write(cars[0]); </script> </h6> </div> </div> <div class="row mb-4"> <div class="col-md-3"> <h5 class="text-secondary">Direção</h5> <h6> <script> document.write(cars[3]); </script> </h6> </div> <div class="col-md-3"> <h5 class="text-secondary">Ano de Fabricação</h5> <h6> <script> document.write(cars[4]); </script> </h6> </div> <div class="col-md-3"> <h5 class="text-secondary">Valor</h5> <h6> <script> document.write(cars[5]); </script> </h6> </div> <div class="col-md-3"> <h5 class="text-secondary">Ipva</h5> <h6> <script> document.write(cars[6]); </script> </h6> </div> </div> <div class="row mb-4"> <div class="col-md-12"> <h5 class="text-secondary">Localização do Carro</h5> <h6> <script> document.write(cars[7]); </script> </h6> <br><br> <div> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Dados do Automóvel</legend> <!-- Prepended text--> <div class="form-group"> <label class="col-md-4 control-label" for="prependedtext">Fabricante</label> <div class="col-md-6"> <div class="input-group"> <span class="input-group-addon">Fabricante</span> <input id="prependedtext" name="prependedtext" class="form-control" placeholder="insira o fabricante" type="text" required=""> </div> <p class="help-block">Não sei meu fabricante</p> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Modelo">Modelo</label> <div class="col-md-6"> <input id="Modelo" name="Modelo" type="text" placeholder="insira o modelo" class="form-control input-md" required=""> <span class="help-block">Não sei qual o modelo</span> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="Ano/Fab">Ano de Fabricação</label> <div class="col-md-5"> <select id="Ano/Fab" name="Ano/Fab" class="form-control"> <option value="1">selecione</option> <option value="2">1983</option> <option value="">1984</option> <option value="">1985</option> <option value="">1986</option> </select> </div> </div> </fieldset> </form> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
img {width:100%;} h5 {font-size:20px;} body {background:#f2f2f2;} legend { color:#f3f3f3; background-color:#ffffff; }
var cars = ["Ford", "Dimas", "Prata", "Manual", "1986", "calcular", "pago", "BH"]; cars[0];[1];[2];[3];[4];[5];[6];[7];

Related: See More

BLK• Design System

Questions / Comments: