Positioning text before content

0

I wanted to make a border with content like this

ButIdonotknowhowtoputthetalkwithusinsidetheborder,itlookslikethismyimage

Mycode

.Campos {
  margin-left: 90px;
  border: 10px outset #ffc70e;
  border-radius: 0px 25px 0px 0px;
  margin-top: 26px;
  width: 100%;
}

#conosco {
  text-align: center;
}

.titulos {
  margin-left: 40px;
  font-size: 15pt;
  color: #101010;
}

.campo {
  width: 300px;
  border-radius: 5px;
  margin-left: 40px;
}
<div class="col-sm-5">
  <div class="Campos">
    <h3 id="conosco">Fale Conosco</h3>
    <p class="titulos">preencher os campos abaixo:</p>
    <p class="titulo"><span class="titulos">Nome:<span class="sub">(*)</span></span><br/><input type="text" class="campo"></p><br/>
    <p class="titulo"><span class="titulos">Email:</span><span class="sub">(*)</span><br/><input type="text" class="campo"></p><br/>
    <p class="titulo"><span class="titulos">Telefone:</span><span class="sub">(*)</span><br/><input type="text" class="campo"></p><br/>
    <p class="titulo"><span class="titulos">Celular:</span><span class="sub"></span><br/><input type="text" class="campo"></p><br/>
    <p class="titulo"><span class="titulos">Como nós conheceu ?:</span><span class="sub">(*)</span><br/><input list="opcoes" name="opcos" class="campo">
      <datalist id="opcoes" class="campo">
    <option value="Google">
    <option value="LikedInk">
    <option value="Facebook">
    </datalist></p><br/>
  </div>
</div>
    
asked by anonymous 01.07.2017 / 07:26

1 answer

0

I would do so, I do not know if you have any other way.

.Campos {
  margin-left: 90px;
  border: 10px outset #ffc70e;
  border-radius: 0px 25px 0px 0px;
  margin-top: 26px;
  width: 100%;
}

#conosco {
  margin: auto;
  text-align: center;
}

.titulos {
  margin-left: 40px;
  font-size: 15pt;
  color: #101010;
}

.campo {
  width: 300px;
  border-radius: 5px;
  margin-left: 40px;
}

.fundo {
  margin: 0 auto;
  background-color: #ffc70e;
  padding: 15px;
}
<div class="col-sm-5">
  <div class="Campos">
    <div class="fundo">
      <h3 id="conosco">Fale Conosco</h3>
    </div>
    <p class="titulos">preencher os campos abaixo:</p>
    <p class="titulo"><span class="titulos">Nome:<span class="sub">(*)</span></span><br/><input type="text" class="campo"></p><br/>
    <p class="titulo"><span class="titulos">Email:</span><span class="sub">(*)</span><br/><input type="text" class="campo"></p><br/>
    <p class="titulo"><span class="titulos">Telefone:</span><span class="sub">(*)</span><br/><input type="text" class="campo"></p><br/>
    <p class="titulo"><span class="titulos">Celular:</span><span class="sub"></span><br/><input type="text" class="campo"></p><br/>
  </div>
</div>
    
01.07.2017 / 08:58