<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 ---------->
<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 ---------->
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>YOURBRAND a loja de carros mais incrivel</h1>
<p>
Você de carro novo sempre. Financie seu veículo pelo Ciclo <strong>CSCS</strong> e fique tranquilo com parcelas fixas que cabem no seu bolso e recompra garantida.
</p>
<img src="https://static.vecteezy.com/system/resources/previews/000/590/514/non_2x/automotive-car-logo-design-vector.jpg" alt="lodo da fabrica" style=" width: 200px; padding: 5px;">
</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">Overview</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">Direção</h5>
<h6>
<script>
document.write(cars[3]);
</script>
</h6>
</div>
</div>
<div class="row mb-4">
<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">Ar condicionado</h5>
<h6> <script>
document.write(cars[5]);
</script>
</div>
<div class="col-md-3">
<h5 class="text-secondary">Combustivel</h5>
<h6>
<script>
document.write(cars[6]);
</script>
</h6>
</div>
<div class="col-md-3">
<h5 class="text-secondary">IPVA</h5>
<h6>
<script>
document.write(cars[7]);
</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[8]);
</script>
</h6>
</div>
</div>
</div>
</div><div
</div>
</div>
<div >
</div>
</div>
</div>
</div>
</div>
<div>
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>DADOS DA EMPRESA</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="empresa">Nome da empresa</label>
<div class="col-md-6">
<input id="empresa" name="empresa" type="text" placeholder="Digite o nome da empresa" class="form-control input-md" required="">
<span class="help-block">Nome da empresa</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="empresa">Endereço da empresa</label>
<div class="col-md-8">
<input id="empresa" name="empresa" type="text" placeholder="Rua, numero, bairro ,cidade" class="form-control input-md" required="">
<span class="help-block">Endereço completo da emprea</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="empresa">CNPJ</label>
<div class="col-md-5">
<input id="empresa" name="empresa" type="text" placeholder="Digite o CNPJ da empresa" class="form-control input-md" required="">
<span class="help-block">CNPJ</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="empresa">Telefone da empresa</label>
<div class="col-md-4">
<input id="empresa" name="empresa" type="text" placeholder="(XX) XXXX-XXXX" class="form-control input-md" required="">
<span class="help-block">Telefone</span>
</div>
</div>
</fieldset>
</form>
</div>
<div>
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>DADOS DO CLIENTE</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="cliente">Nome do cliente</label>
<div class="col-md-6">
<input id="cliente" name="cliente" type="text" placeholder="Digite o nome do cliente" class="form-control input-md" required="">
<span class="help-block">Nome do cliente</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="cliente">Endereço do cliente</label>
<div class="col-md-8">
<input id="cliente" name="cliente" type="text" placeholder="Rua, numero, bairro ,cidade" class="form-control input-md" required="">
<span class="help-block">Endereço completo do cliente</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="cliente">CPF/CNPJ</label>
<div class="col-md-5">
<input id="cliente" name="cliente" type="text" placeholder="Digite o CPF/CNPJ do cliente" class="form-control input-md" required="">
<span class="help-block">CPF/CNPJ</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="cliente">Telefone do cliente</label>
<div class="col-md-4">
<input id="cliente" name="cliente" type="text" placeholder="(XX) XXXX-XXXX" class="form-control input-md" required="">
<span class="help-block">Telefone</span>
</div>
</div>
</fieldset>
</form>
</div>
<div>
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>DADOS DO VEICULO</legend>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Marcas</label>
<div class="col-md-5">
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1FIAT">FIAT</option>
<option value="TOYOTA">TOYOTA</option>
<option value="BMW">BMW</option>
<option value="CHEVROLET">CHEVROLET</option>
<option value="JEEP">JEEP</option>
<option value="NISSAN">NISSAN</option>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="fabricante">Modelos</label>
<div class="col-md-5">
<select id="fabricante" name="fabricante" class="form-control">
<option value="1TOURO">TOURO</option>
<option value="COROLA">COROLA</option>
<option value="BMWI8">BMWI8</option>
<option value="ONIX">ONIX</option>
<option value="JEEP">JEEP</option>
<option value="FRONTIER">FRONTIER</option>
</select>
</div>
</div>
<!-- Select Multiple -->
<div class="form-group">
<label class="col-md-4 control-label" for="fabricante">Cor</label>
<div class="col-md-5">
<select id="fabricante" name="fabricante" class="form-control" multiple="multiple">
<option value="1">Preto</option>
<option value="2">Prata</option>
<option value="">Branco</option>
<option value="">Vermelho</option>
</select>
</div>
</div>
<!-- Prepended text-->
<div class="form-group">
<label class="col-md-4 control-label" for="fabricante">Direção</label>
<div class="col-md-5">
<div class="input-group">
<span class="input-group-addon">Digite o tipo de direção</span>
<input id="fabricante" name="fabricante" class="form-control" placeholder="Digite a direção" type="text" required="">
</div>
<p class="help-block">entre com a direção</p>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="fabricante">Ano de fabricação</label>
<div class="col-md-4">
<select id="fabricante" name="fabricante" class="form-control">
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="fabricante">Ar condicionado</label>
<div class="col-md-4">
<select id="fabricante" name="fabricante" class="form-control">
<option value="sim">sim</option>
<option value="não">não</option>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="fabricante">Combustivel</label>
<div class="col-md-4">
<select id="fabricante" name="fabricante" class="form-control">
<option value="Gasolina">Gasolina</option>
<option value="Etanol">Etanol</option>
<option value="Diesel">Diesel</option>
<option value="Flexão">Flex</option>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="fabricante">IPVA</label>
<div class="col-md-4">
<select id="fabricante" name="fabricante" class="form-control">
<option value="Pago">Pago</option>
<option value="À pagar">À pagar</option>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="fabricante">Localização</label>
<div class="col-md-4">
<select id="fabricante" name="fabricante" class="form-control">
<option value="Belo Horizonte">Belo Horizonte</option>
<option value="Betim">Betim</option>
<option value="Contagem">Contagem</option>
</select>
</div>
</div>
</fieldset>
</form>
</div>
img {width:100%;}
h5 {font-size:16px;}
body {background:#f2f2f2;}
var cars = ["FIAT", "Touro", "Prata", "automatico","2020","sim","Flex","Pago","BH"];
//cars[0]
var empresa=["nome","endereco","cnpj","telefone"]
// empresa[0]
var cliente=["nome","endereco","cnpj","telefone"]
// cliente[0]
