Estilizando o form do projeto Triplo-X - curso html

3 years ago · 88619af620
--- a/estilos.css
+++ b/estilos.css
@ -2,7 +2,7 @@

 html,body{
  margin: 0;
  
  background:#e6e6e6; 
 }

 *{
@ -13,10 +13,15 @@ html,body{
 header{
  background: #EAD945;
  padding: 24px 40px;
  top: 0;
  right: 0;  
  left: 0;
  position: fixed;
 }

 main{
  margin: 24px 40px;
  padding-top:160px;
 }

 main table{
@ -27,11 +32,50 @@ main table{

 }

 main form{
  margin-top:50px;

 }

 form label{
 .form__label{
  font-size:18px;
 }
  

 label:last-child{
  font-weight:600;
  color:red;
 }

 .form__input{
  width: 275px;
  height: 30px;
  background: whitesmoke;
  border-radius: 4px;
  border:none;

 }

 input["checkbox"]{
  width: 16px;
  height: 16px;

 }

 button{
    background: white;
    font-size: 19px;
    margin-top: 45px;
    border: none;
    width: 100%;
    height: 40px;
 }

 div.form__infor{
  margin-top: 10px;
  padding-top: 10px;
  background:"pink";
 }

 footer{
  margin-top: 20%;
  padding:10% 10%;
--- a/index.html
+++ b/index.html
@ -2,7 +2,7 @@
 <html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <title>T&iacute;tulo P&aacute;gina</title>
    <title>T&iacute;tulo P&aacute;gina Triplo X</title>
    <link rel="stylesheet" href="estilos.css"/>
  </head>

@ -40,18 +40,27 @@

    <form action="salvar.html">
      <h2>Registre seu interesse</h2>
      <div>
        <label>Nome:</label>
        <input type="text" name="nome" />
      <div class="form__infor">
        <label class="form__label">Nome:</label>
        <input type="text" name="nome" class="form__input"/>
      </div>
      <div>
        <label for="campo_sobrenome">
      <div class="form__infor">
        <label class="form__label"  for="campo_sobrenome">
          Sobrenome:
        </label>
        <input id="campo_sobrenome" type="text" name="sobrenome" />
        <input id="campo_sobrenome" type="text" name="sobrenome" class="form__input"/>
      </div>
      <div>
        <label>

       <div class="form__infor">
        <label for="campo_email" class="form__label">
          Email:
        </label>
        <input id="campo_email" type="email" name="email" class="form__input"/>
      </div>


      <div class="form__infor">
        <label class="form__label">
          <input type="checkbox" name="autoriza" /> Receber novidades.
        </label>
      </div>