<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.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 ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <h1> <img src=" https://lh3.googleusercontent.com/proxy/HPlLVIT3M5LAQn5bXzFQID7IfNzEUULnaOiWRdYV2F0NLhDnrMi_QF0MgCuNqQCk3pLaCa10wcXKGZDFmShh-uvl3YWy5_mho18ldVkE"alt="some text" width=300 height=200> </h1> <h2> Carro Forte! </h2> <h3> Aqui dá Negócio! </h3> </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">Características</h4> <hr> </div> </div> <div class="row mb-4"> <div class="col-md-3"> <h5 class="text-secondary">Combustível<h> <h6><script> document.write(cars[8]) </script></h6> </div> <div class="col-md-3"> <h5 class="text-secondary">KMS DRIVEN</h5> <h6>24,500 Kms</h6> </div> <div class="col-md-3"> <h5 class="text-secondary">NO. OF OWNERS</h5> <h6>2nd Owner</h6> </div> <div class="col-md-3"> <h5 class="text-secondary">TRANSMISSION</h5> <h6>Automatic</h6> </div> </div> <div class="row mb-4"> <div class="col-md-3"> <h5 class="text-secondary">MAKE YEAR</h5> <h6>Petrol</h6> </div> <div class="col-md-3"> <h5 class="text-secondary">AR CONDICIONADO</h5> <h6>Petrol</h6> </div> <div class="col-md-3"> <h5 class="text-secondary">VALOR</h5> <h6>Petrol</h6> </div> <div class="col-md-3"> <h5 class="text-secondary">IPVA</h5> <h6>Petrol</h6> <script> document.write(cars[0]); </script> </div> </div> <div class="row mb-4"> <div class="col-md-12"> <h5 class="text-secondary">LOCALIZAÇÃO DO CARRO</h5> <h6>MG Road, Gurgaon</h6> </div> <hr> </div> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Formulário</legend> <!-- Search input--> <div class="form-group"> <label class="col-md-4 control-label" for="searchinput">Fabricante</label> <div class="col-md-4"> <input id="searchinput" name="searchinput" type="search" placeholder="Fabricante" class="form-control input-md" required=""> </div> </div> <!-- Search input--> <div class="form-group"> <label class="col-md-4 control-label" for="searchinput">Modelo</label> <div class="col-md-4"> <input id="searchinput" name="searchinput" type="search" placeholder="Modelo" class="form-control input-md" required=""> </div> </div> <!-- Select Multiple --> <div class="form-group"> <label class="col-md-4 control-label" for="Ano de Fabricação">Ano de Fabricação</label> <div class="col-md-4"> <select id="Ano de Fabricação" name="Ano de Fabricação" class="form-control" multiple="multiple"> <option value="1">2020</option> <option value="2">2019</option> <option value="3">2018</option> <option value="4">2017</option> <option value="5">2016</option> <option value="6">2015</option> <option value="">2014</option> </select> </div> </div> <!-- Select Multiple --> <div class="form-group"> <label class="col-md-4 control-label" for="Localização do Carro">Localização do Carro</label> <div class="col-md-4"> <select id="Localização do Carro" name="Localização do Carro" class="form-control" multiple="multiple"> <option value="1">Belo Horizonte</option> <option value="2">Contagem</option> <option value="3">Betim</option> <option value="4">Venda Nova</option> </select> </div> </div> <!-- Select Multiple --> <div class="form-group"> <label class="col-md-4 control-label" for="Cor">Cor</label> <div class="col-md-4"> <select id="Cor" name="Cor" class="form-control" multiple="multiple"> <option value="1">Preto</option> <option value="2">Prata</option> <option value="3">Branco</option> <option value="4">Vermelho</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="Ar Condicionado">Ar Condicionado</label> <div class="col-md-4"> <select id="Ar Condicionado" name="Ar Condicionado" class="form-control"> <option value="1">Sim</option> <option value="2">Não</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="IPVA">IPVA</label> <div class="col-md-4"> <select id="IPVA" name="IPVA" class="form-control"> <option value="1">Pago</option> <option value="2">A pagar</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Preço">Preço</label> <div class="col-md-4"> <input id="Preço" name="Preço" type="text" placeholder="Preço" class="form-control input-md" required=""> </div> </div> <input class="btn btn-primary" type="submit" value="Submit"> </fieldset> </form> </body> </html>

img {width:30% height=200;} h5 {font-size:16px;} body {background:#f2f2f2;}

var cars = ["Fiat", "Uno", "Vermelho", "Hidraulica","2019","Sim","Pago","BH","Flex"];