Olá, boa tarde! Preciso deixar duas caixa de texto uma ao lado da outra com os titulos em cima, gostaria que alguém pudesse me ajudar por gentileza, irei deixar o código que estou fazendo e a foto de como tem que ficar e como o meu está.
Código HTML:
<!doctype HTML>
<HTML lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Atividade Formulário</title>
<link rel="stylesheet" href="estilo.css"/>
</head>
<body>
<h1>Formulário Teste</h1>
<label id="nome" class="rotulo">
Nome:
</label>
<br>
<input type="text" name="nome"/>
<label>
Sobrenome:
</label>
<input type="text" name="sobrenome"/>
<br>
<label>Sexo</label>
<br>
<input type="radio" name="sexo" value="Masculino"/>Masculino
<input type="radio" name="sexo" value="Feminino"/>Feminino
<br>
<br>
<label id="email" class="rotulo">
E-mail
</label>
<br>
<input type="text" name="email"/>
<br>
<br>
<label id="telefone" class="rotulo">
Telefone
</label>
<br>
<input type="text" name="telefone"/>
<br>
<br>
<label id="cidade" class="rotulo">
Cidade
</label>
<br>
<input type="text" name="cidade"/>
<label>Estado</label>
<select name="estado"> <!---caixa de texto--->
<option value="acre">
AC
</option>
<option value="alagoas">
AL
</option>
<option value="Amapá">
AP
</option>
<option value="Amazonas">
AM
</option>
<option value="Bahia">
BA
</option>
<option value="ceara">
CE
</option>
<option value="df">
DF
</option>
<option value="es">
ES
</option>
<option value="goias">
GO
</option>
<option value="maranhao">
MA
</option>
<option value="mt">
MT
</option>
<option value="MS">
MS
</option>
<option value="minas gerais">
MG
</option>
<option value="para">
PA
</option>
<option value="paraiba">
PB
</option>
<option value="parana">
PR
</option>
<option value="pernambuco">
PE
</option>
<option value="piaui">
PI
</option>
<option value="rj">
RJ
</option>
<option value="rn">
RN
</option>
<option value="rs">
RS
</option>
<option value="rondonia">
RO
</option>
<option value="roraima">
RR
</option>
<option value="sc">
SC
</option>
<option value="sp">
SP
</option>
<option value="sergipe">
SE
</option>
<option value="tocantins">
TO
</option>
</select>
<br>
<br>
<label id="mensagem" class="rotulo">
Mensagem
</label>
<br>
<textarea name="texto" rows="5" cols="80">
</textarea>
<legend>Newsletter</legend>
<input type="checkbox" name="carac" value="valid"/>Gostaria de receber Newsletter da empresa
<br>
<br>
<input type="submit" id="botao" value="Enviar"/>
</body>
</html>
Código css:
label{
font: 12px Arial, Verdana;
color: black;
}
input[type="text"],[type="nome"],[type="sobrenome"]{
background-color: rgb(220, 220, 220);
border: 1px solid #333;
padding: 4px;
}
input[type="text"]:hover{
background-color: #CCFFCC;
border: 1px solid gray;
padding: 5px;
}
#botao{
padding: 5px;
background-color:#FFA500;
border: 1px solid #FFA500;
color: #fff;
font-weight: bold ;
}
#botao:hover{
padding: 5px;
background-color: #FF6600;
border: 1px solid #FF6600;
color: #fff;
font-weight: bold;
}
link com as fotos (
https://drive.google.com/drive/folders/1bU9RkcsItyJVCTgVw656gh5nE6OQVWOr?usp=sharing)
Desde já agradeço!!
