Na

"HTML 5"
<!DOCTYPE html>
<html lang>
<head>
<title>frase 1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section id="s1" >
<h5>A melhor experiencia da tua vida</h5>
<div>
<h2>"Melhorar o trabalho"</h2>
<p>No meio de tanta informação e da quantidade de ferramentas que surgem todos os
dias, você precisa de alguém que te leve na direção certa e da quantidade de
ferramentas que surgem todos os dias, você precisa de alguém que te leve na direção
certa.</p>
</div>
<div>
<h2>"Financiar o trabalho"</h2>
<p>A informação e da quantidade de ferramentas que surgem todos os dias, você
precisa de alguém que te leve na direção certa e da quantidade de ferramentas que
surgem todos os dias.</p>
</div>
<div>
<h2>"Estruturar o trabalho"</h2>
<p>Você precisa de alguém que te leve na direção certa e da quantidade de
ferramentas que surgem todos os dias o meio de tanta informação e da quantidade de
ferramentas.</p>
</div>
</section>
<article id="conteudo">
<div>
<h2>Saber mais?</h2>
<p>O vídeo fornece uma maneira poderosa de ajudá-lo a provar seu argumento. Ao
clicar em Vídeo Online, você pode colar o código de inserção do vídeo que deseja
adicionar. Você também pode digitar uma palavra-chave para pesquisar online o vídeo
mais adequado ao seu documento. Para dar ao documento uma aparência
profissional.</p>
</div>
<div>
<h2>Curiosidade!</h2>
<p>Quando você aplica estilos, os títulos são alterados para coincidir com o novo
tema. Economize tempo no Word com novos botões que são mostrados no local em que
você precisa deles. Para alterar a maneira como uma imagem se ajusta ao seu
documento, clique nela e um botão de opções de layout será exibido ao lado. Ao
trabalhar em uma tabela.</p>
</div>
</article>
<section id="s2">
<h3>Preencha os dados</h3>
<form method="post" action="">
<article id="esquerda">
<p>
<label for="tnome">Nome:</label>
<input type="text" name="tnome" id="tnome" placeholder="Nome Completo">
</p>
<p>
<label for="tidade">Idade:</label>
<input type="text" name="tidade" id="tidade" placeholder="Sua idade" size="8"
maxlength="3">
</p>
<p>
<label for="temail">E-mail:</label>
<input type="email" name="temail" id="temail" placeholder="Usuário@hotmail.com">
</p>
<p>
<legend>Sexo</legend>
<fieldset>
<input type="radio" name="tsexo" id="cmasc" checked><label
for="cmasc">Masculino</label></br>
<input type="radio" name="tsexo" id="cfem"><label for="cfem">Feminino</label>
</fieldset>
</p>
<p>
<input type="submit" name="temail" value="Cadastrar" id="btn">
</p>
</article>
<article id="direita">
<p>
<textarea id="txtarea" cols="46" rows="20" placeholder="Deixe uma
mensagem..."></textarea>
</p>
</article>
</form>
</section>
<input type="text" name="texto" id="pesquisa" placeholder="Caixa de Pesquisa...">
<main id="rodape">
<div>
<h3>Atenção</h3>
<p>
A leitura também é mais fácil no novo modo de exibição de Leitura. Você pode
recolher partes do documento e colocar o foco no texto desejado. Se for preciso
interromper a leitura antes de chegar ao fim dela, o Word lembrará em que ponto
você parou - até mesmo em outro dispositivo. O vídeo fornece uma maneira poderosa
de ajudá-lo a provar seu argumento.
Ao clicar em Vídeo Online, você pode colar o código de inserção do vídeo que deseja
adicionar. Você também pode digitar uma palavra-chave para pesquisar online o vídeo
mais adequado ao seu documento. Para dar ao documento uma aparência profissional, o
Word fornece designs de cabeçalho, rodapé, folha de rosto e caixa de texto que se
complementam entre si. Por exemplo, você pode adicionar uma folha de rosto, um
cabeçalho e uma barra lateral correspondentes.
Clique em Inserir e escolha os elementos desejados nas diferentes galerias.
</p>
</div>
</main>
</body>
</html>
"CSS 3"
*{margin: 0px; padding: 0px; box-sizing: border-box; outline: none;}
body{
text-align: center;
}
h5{
font-size: 30px;
font-family: arial,sans-serif;
color: #fff;
padding-top: 30px;
padding-bottom: 30px;
/*grid-column-start: 1;
grid-column-end: 4;*/
grid-area: 1 / 1 / 1 / span 3;
}
section#s1{
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 120px;
width: 100%;
height: 650px;
background-color: rgb(46,161,161);
}
section#s1 div{
width: 360px;
height: 310px;
background-color: white;
margin: 0px auto;
border-radius: 10px;
}
section#s1 div h2{

padding: 10px 0px;
font-family: arial;
font-size: 23px;
}
section#s1 div p{
font-family: arial;
font-size: 17px;
text-indent: 10px;
padding: 14px;
text-align: left;
}
#conteudo{
display: flex;
background-color: #fff;
height: 600px;
}
#conteudo div{
background: linear-gradient(45deg, rgb(47,51,55),rgba(255,255,255,.2));
width: 480px;
height: 350px;
color: #fff;
margin: 150px auto;
padding-top: 25px;
font-family: arial;
}
#conteudo div h2{

font-size: 32px;
text-transform: uppercase;
text-decoration: underline;
}
#conteudo div p{
font-size: 20px;
padding: 15px;
text-align: left;
}
section#s2{
margin: 100px auto;
width: 100%;
max-width: 1000px;
height: 650px;
}
section#s2 h3{
padding-top: 30px;
font-size: 34px;
font-family: sans-serif;
color: rgb(46,161,161);
}
section#s2 form{
width: 850px;
height: 450px;
margin: 50px auto;
box-shadow: 3px 3px 3px #000;
}
section#s2 form article#esquerda p{

text-align: left;
font-family: arial;
font-size: 20px;
font-weight: bold;
padding: 14px;
}
section#s2 form article#direita{

float: right;
}
section#s2 form article#direita textarea{

font-family: arial;
font-size: 1rem;
font-weight: 400;
padding: 10px 0px 0px 5px;
border-left: 2px solid #000000;
border-bottom: 2px solid #000000;
border-radius: 0px 20px 0px 20px;
background-color: #ffffff;
}
section#s2 form article#esquerda{

float: left;
margin: 60px 0px 0px 20px;
}
section#s2 form input{

font-size: 1rem;
padding-left: 2px;
}
section#s2 form input#btn{

font-size: 20px;
padding: 14px;
border-radius: 5px;
margin-top: 30px;
color: #fff;
cursor: pointer;
transition: background-color 0.3s linear;
}
section#s2 form input#btn:hover{

background-color: black;
box-shadow: 3px 3px 2px rgba(255,255,255,.3);
}
section#s2 form article#esquerda legend{

margin-bottom: -16px;
}
section#s2 form article#esquerda fieldset{

text-align: left;
width: 150px;
height: 50px;
border: 1px solid black;
margin-left: 14px;
}
section#s2 form fieldset input{

color: red;
}
section#s2 form fieldset label{

margin-left: 2px;
}
input#pesquisa{
width: 561px;
height: 44px;
margin-bottom: 130px;
font-size: 19px;
outline: hidden;
}
main#rodape{
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto;
width: calc(100vw - 20);
height: 500px;
background-color: rgba(0,0,0,0.1);
}
main#rodape div{
font-family: arial;
font-weight: bold;
width: 70%;
height: 350px;
background-color: rgba(255,255,255,1);
margin: 75px auto;
overflow: auto;
main#rodape div h3{

text-align: center;
font-size: 27px;
width: 240px;
margin: 0 auto;
}
main#rodape div p{
padding-top: 26px;
text-align: left;
font-size: 19px;
}
@media (max-width: 1200px){
section#s1{
grid-template-columns: auto auto auto;
grid-gap: 0px 10px;
height: 500px;
}
section#s1 div{
width: 290px;
height: 210px;
border-radius: 8px;
}
section#s1 div h2{

padding: 9px 0px;
font-size: 19px;
}
section#s1 div p{
font-size: 15px;
text-indent: 6px;
padding: 9px;
}
h5{
font-size: 25px;
padding-top: 20px;
}
#conteudo{
height: 480px;
}
#conteudo div{
background: linear-gradient(45deg, rgb(47,51,55),rgba(255,255,255,.1));
width: 414px;
height: 308px;
margin: 120px auto;
padding-top: 20px;
}
#conteudo div h2{

font-size: 27px;
}
#conteudo div p{
font-size: 17px;
padding: 12px;
}
section#s2{
margin: 80px auto;
width: 100%;
max-width: 850px;
height: 590px;
border-radius: 8px;
}
section#s2 h3{
padding-top: 22px;
font-size: 27px;
color: rgb(46,161,161);
}
section#s2 form{
width: 690px;
height: 420px;
margin: 30px auto;
}

font-size: 18px;
padding: 12px;
}

font-size: 14px;
border-radius: 0px 17px 0px 17px;
}

}

font-size: 14px;
padding-left: 1px;
}

font-size: 17px;
padding: 12px;
border-radius: 4px;
margin-top: 30px;
cursor: pointer;
border-radius: 8px;
}

}

}

width: 130px;
height: 50px;
margin-left: 10px;
}
section#s2 form fieldset input{
}
main#rodape div h3{

font-size: 22px;
width: 220px;
}
main#rodape div p{
padding-top: 22px;
font-size: 18px;
}
h5{
font-size: 22px;
}
section#s1{
grid-template-columns: auto auto;
grid-gap: 0px 10px;
height: 600px;
}
#conteudo{
display: flex;
flex-direction: column;
height: auto;
}
#conteudo div{
width: 480px;
height: 350px;
color: #fff;
margin: 80px auto;
padding-top: 25px;
font-family: arial;
}
#conteudo div h2{

font-size: 29px;
}
#conteudo div p{
font-size: 18px;
}
section#s2{
margin: 70px auto;
width: 100%;
max-width: 750px;
height: 540px;
}
section#s2 h3{
padding-top: 18px;
font-size: 24px;
}
section#s2 form{
width: 650px;
height: 360px;
margin: 30px auto;
padding: 0px;
}

font-size: 18px;
padding: 8px 8px;
}

font-size: 15px;
padding-left: 1px;
}

font-size: 17px;
padding: 12px;
border-radius: 4px;
margin-top: 30px;
cursor: pointer;
border-radius: 8px;
}

}

}
main#rodape div h3{

font-size: 20px;
}
main#rodape div p{
font-size: 16px;
}
h5{
font-size: 22px;
grid-column-start: 1;
grid-column-end: span 1;
}
section#s1{
display: grid;
grid-template-columns: auto;
height: 1100px;
}
section#s1 div{
width: 340px;
height: 270px;
margin: 0px auto;
border-radius: 7px;
}
section#s1 div h2{

padding: 10px 0px;
font-family: arial;
font-size: 18px;
}
section#s1 div p{
font-family: arial;
font-size: 14px;
text-indent: 7px;
}
#conteudo{
display: flex;
flex-direction: column;
height: auto;
}
#conteudo div{
width: 430px;
height: 310px;
margin: 70px auto;
padding-top: 22px;
}
#conteudo div h2{

font-size: 24px;
}
#conteudo div p{
font-size: 17px;
}
section#s2{
max-width: 500px;
height: 950px;
}
section#s2 h3{
padding-top: 15px;
font-size: 20px;
}
section#s2 form{
width: 400px;
height: 720px;
margin: 20px auto;
padding: 0px;
}

font-size: 18px;
padding: 8px 8px;
}

font-size: 15px;
padding-left: 1px;
}

position: absolute;
font-size: 17px;
padding: 12px;
border-radius: 8px;
margin-top: 388px;
}
input#pesquisa{
width: 390px;
height: 44px;
font-size: 16px;
}
h5{
font-size: 19px;
}
section#s1{
display: grid;
height: 1100px;
}
section#s1 div{
width: 300px;
height: 250px;
margin: 0px auto;
border-radius: 7px;
}
section#s1 div h2{
padding: 8px 0px;
font-family: arial;
font-size: 17px;
}
section#s1 div p{
font-family: arial;
font-size: 14px;
text-indent: 6px;
}
#conteudo div{
width: 410px;
height: 280px;
margin: 70px auto;
padding-top: 20px;
}
#conteudo div h2{

font-size: 20px;
}
#conteudo div p{
font-size: 15px;
}
section#s2{
max-width: 500px;
height: 950px;
}
section#s2 h3{
padding-top: 15px;
font-size: 20px;
}
section#s2 form{
width: 400px;
height: 720px;
margin: 20px auto;
padding: 0px;
}

font-size: 18px;
padding: 8px 8px;
}

font-size: 15px;
padding-left: 1px;
}

position: absolute;
font-size: 17px;
padding: 12px;
border-radius: 8px;
margin-top: 388px;
}
input#pesquisa{
width: 390px;
height: 44px;
font-size: 16px;
}
main#rodape div h3{

font-size: 20px;
}
main#rodape div p{
font-size: 16px;
}
h5{
font-size: 17px;
}
section#s1{
display: grid;
height: 900px;
}
section#s1 div{
width: 240px;
height: 210px;
margin: 0px auto;
border-radius: 6px;
}
section#s1 div h2{

padding: 5px 0px;
font-family: arial;
font-size: 17px;
}
section#s1 div p{
font-family: arial;
font-size: 14px;
text-indent: 5px;
}
#conteudo div{
width: 300px;
height: 250px;
margin: 70px auto;
padding-top: 18px;
}
#conteudo div h2{

font-size: 20px;
}
#conteudo div p{
font-size: 15px;
}
section#s2{
max-width: 440px;
height: 850px;
}
section#s2 h3{
padding-top: 15px;
font-size: 19px;
}
section#s2 form{
width: 355px;
height: 690px;
margin: 20px auto;
padding: 0px;
}
input#pesquisa{
width: 350px;
height: 40px;
}
main#rodape div h3{

font-size: 20px;
width: 160px;
}
main#rodape div p{
padding-top: 16px;
}
h5{
font-size: 17px;
}
section#s1{
display: grid;
height: 900px;
}
section#s1 div{
width: 220px;
height: 190px;
margin: 0px auto;
border-radius: 6px;
}
section#s1 div h2{

padding: 5px 0px;
font-family: arial;
font-size: 17px;
}
section#s1 div p{
font-family: arial;
font-size: 14px;
text-indent: 5px;
}
#conteudo div{
width: 280px;
height: 240px;
margin: 70px auto;
padding-top: 18px;
}
#conteudo div h2{

font-size: 20px;
}
#conteudo div p{
font-size: 15px;
}
section#s2{
max-width: 286px;
height: 850px;
margin: 0 auto;
padding: 0px;
}
section#s2 h3{
padding-top: 15px;
font-size: 19px;
}
section#s2 form{
width: 230px;
height: 730px;
margin: 14px auto;
padding: 0px;
}
text-align: left;
font-size: 18px;
font-weight: bold;
padding: 10px 0px;
}

width: 200px;

float: left;
}

font-size: 1rem;
padding-left: 2px;
}

position: absolute;
font-size: 17px;
padding: 12px;
border-radius: 8px;
margin-top: 370px;
}

}

text-align: left;
width: 120px;
}
input#pesquisa{
margin-top: 80px;
width: 270px;
height: 38px;
}

Na

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Na

Enviado por

Direitos autorais:

Formatos disponíveis

"HTML 5"

<input type="text" name="texto" id="pesquisa" placeholder="Caixa de Pesquisa...">

*{margin: 0px; padding: 0px; box-sizing: border-box; outline: none;}

section#s1 div h2{

#conteudo div h2{

section#s2 form article#esquerda p{

section#s2 form article#direita{

section#s2 form article#direita textarea{

section#s2 form article#esquerda{

section#s2 form input{

section#s2 form input#btn{

section#s2 form input#btn:hover{

section#s2 form article#esquerda legend{

section#s2 form article#esquerda fieldset{

section#s2 form fieldset input{

section#s2 form fieldset label{

main#rodape div h3{

@media (max-width: 1200px){

section#s1 div h2{

#conteudo div h2{

section#s2 form article#esquerda p{

section#s2 form article#direita textarea{

section#s2 form article#esquerda{

section#s2 form input{

section#s2 form input#btn{

section#s2 form input#btn:hover{

section#s2 form article#esquerda legend{

section#s2 form article#esquerda fieldset{

main#rodape div h3{

@media (max-width: 1040px){

#conteudo div h2{

section#s2 form article#esquerda p{

section#s2 form input{

section#s2 form input#btn{

section#s2 form input#btn:hover{

section#s2 form article#esquerda legend{

main#rodape div h3{

@media (max-width: 800px){

section#s1 div h2{

#conteudo div h2{

section#s2 form article#esquerda p{

section#s2 form input{

section#s2 form input#btn{

@media (max-width: 670px){

#conteudo div h2{

section#s2 form article#esquerda p{

section#s2 form input{

section#s2 form input#btn{

main#rodape div h3{

@media (max-width: 570px){

section#s1 div h2{

#conteudo div h2{

main#rodape div h3{

@media (max-width: 470px){

section#s1 div h2{

#conteudo div h2{

section#s2 form article#direita textarea{

section#s2 form article#esquerda{

section#s2 form input{

section#s2 form input#btn{

section#s2 form article#esquerda legend{

section#s2 form article#esquerda fieldset{