bianca-maria
/
Triplo-X
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

Estilizando o form do projeto Triplo-X - curso html

master
bianca-maria 3 years ago
parent
325270fef3
commit
88619af620
2 changed files with 65 additions and 12 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +47
    -3
      estilos.css
  2. +18
    -9
      index.html

+ 47
- 3
estilos.css View File

@ -2,7 +2,7 @@
html,body{ html,body{
margin: 0; margin: 0;
background:#e6e6e6;
} }
*{ *{
@ -13,10 +13,15 @@ html,body{
header{ header{
background: #EAD945; background: #EAD945;
padding: 24px 40px; padding: 24px 40px;
top: 0;
right: 0;
left: 0;
position: fixed;
} }
main{ main{
margin: 24px 40px; margin: 24px 40px;
padding-top:160px;
} }
main table{ main table{
@ -27,11 +32,50 @@ main table{
} }
main form{
margin-top:50px;
}
form label{
.form__label{
font-size:18px; 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{ footer{
margin-top: 20%; margin-top: 20%;
padding:10% 10%; padding:10% 10%;


+ 18
- 9
index.html View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width,initial-scale=1"/> <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"/> <link rel="stylesheet" href="estilos.css"/>
</head> </head>
@ -40,18 +40,27 @@
<form action="salvar.html"> <form action="salvar.html">
<h2>Registre seu interesse</h2> <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>
<div>
<label for="campo_sobrenome">
<div class="form__infor">
<label class="form__label" for="campo_sobrenome">
Sobrenome: Sobrenome:
</label> </label>
<input id="campo_sobrenome" type="text" name="sobrenome" />
<input id="campo_sobrenome" type="text" name="sobrenome" class="form__input"/>
</div> </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. <input type="checkbox" name="autoriza" /> Receber novidades.
</label> </label>
</div> </div>


Write Preview
Loading…
Cancel
Save