Position text before content

Asked

Viewed 58 times

0

I wanted to make an edge with content like this inserir a descrição da imagem aqui

But I don’t know how to put the talk to us inside the edge, it looks like this picture of me

inserir a descrição da imagem aqui

My code

.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>

1 answer

0


I’d do it like this, I don’t know if there’s 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>

  • valeu man worked the way I wanted thanks

  • Not at all expensive, tmj.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.