Full screen ou Full size ou adaptativa? O.o
E ai galera, beleza?
venho humildemente aprimorar meus conhecimentos em html, css.. haha
bom, estou com dificuldade em aprender o que algumas pessoas chamam de full size ou full screen, algo assim o.O
Enfim, de maneira q o exemplo q vou dar logo abaixo se adapte ao tamanho de tela (o campo de formulario, as palavras e a imagem) juntas, porque abrir esse exemplo na tela de 14 polegadas fica legal mas na de 22 não (o formulario e a imagem ficam distante um do outro e eles não crescem junto com a tela de 22 polegadas)
Bom é isso galera, conto com o conhecimento de vocês! :)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style type="text/css">* img{
max-width:100% !important;
height:auto !important;
}
.coluna-esquerda {
float:left;
margin-left:5% ;
max-width:100%;
height:auto;
width: ;
}
.coluna-direita {
float:right;
display:block;
width: ;
}
.um {
background-color:#002f70 ;
border:1px solid #CCC ;
padding:5px;
font-family:eurofurence;
color:#f19800;
text-align:center;
}
.dois {
font-family:eurofurence;
padding: ;
color:#f19800;
font-size:20px;
text-align:center;
}
.treis {
text-align:center;
background-color:#f19800;
color:white;
padding:5px;
font-size:36px;
}
.quatro {
text-align:center;
background-color:#002f70 ;
color:white;
font-size:24px;
}
.junta {
background-color:#002f70 ;
height:10px;
}
.cinco {
text-align:center;
background-color:#002f70 ;
color:#f19800;
}button {
display:block;
width:227px;
height:35px;
color:white ;
text-align:center;
background-color:#f19800;
}fieldset {
border-color:#f19800;
border-style:solid;
border-top:none;
}
</style>
</head>
<body >
<div class="coluna-esquerda">
<div class="treis">LINGUIÇA ,</div>
<div class="quatro">LINGUIÇAS ,</div>
<div class="junta"></div>
<div class="cinco">FAÇA AQUI SEU PEDIDO <br>
DE LINGUIÇAS, </div>
<fieldset>
<div style="margin-top:30px"></div>
<form action="" method="post" name="contato" />
Nome*<br>
<input id="nome" type="text" size="28" /><br>
<div style="margin-top:5px"></div>
Email*<br>
<input id="email" type="email" size="28" /><br>
<div style="margin-top:5px"></div>
LINGUIÇA, *<br>
<input id="vidraçaria" type="text" size="28" /><br>
<div style="margin-top:5px"></div>
Telefone*<br>
<input id="telefone" type="tel" size="28" /><br>
<div style="margin-top:5px"></div>
Endereço*<br>
<input id="endereço" type="text" size="28" /><br>
<div style="margin-top:5px"></div>
Cep*<br>
<input id="cep" type="text" size="28" /><br>
<div style="margin-top:5px"></div>
LINGUIÇA, *<br>
<input id="cnpj" type="text" size="28" /><br>
<div style="margin-top:5px"></div>
Principal fornecedor de LINGUIÇA, <br>
<input id="principal fornecedor de vidros" type="text" size="28" /><br>
<br>
<button type="submit">Envie seu pedido<br> de amostras </button>
</form>
</fieldset>
<br>
</div>
<div class="coluna-direita">
<div class="um">
<b>LINGUIÇAS, </b>LINGUIÇA, LINGUIÇA, <b>LINGUIÇA, LINGUIÇA</b>
</div>
<div class="dois">
LINGUIÇA, LINGUIÇA, LINGUIÇA, LINGUIÇA
</div>
<img src="[[http://i.imgur.com/HCvpuRN.png](http://i.imgur.com/HCvpuRN.png)](http://i.imgur.com/HCvpuRN.png%5B/url%5D)" alt="" />
</div>
</body>
</html>Discussão (3)
Carregando comentários...