Skip to content

Mesclando o conteúdo que o joão criou #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gitarno wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Mesclando o conteúdo que o joão criou #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c4da912
Criado Formulário
joaohau Sep 9, 2014
095e88b
Aula sobre CSS
joaohau Sep 9, 2014
143e82a
Criando o CSS
joaohau Sep 9, 2014
48823b3
Aula sobre boxModel para o CSS
joaohau Sep 10, 2014
b11d6ea
Aula de CSS sobre Posicionamentos
joaohau Sep 10, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions boxModel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!doctype html>
<html>
<head>
<title>BOX MODEL</title>
<meta charset="utf-8">

<style type="text/css">
#header{
width: 200px;
height: auto;
padding: 10px;
background: aqua;
box-sizing: border-box;
margin: 5px;
border: 5px solid #0000FF;
border-bottom: 2px dotted #0000FF;
}

</style>
</head>
<body>
<div id="header">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor.
</div>
</body>
</html>
61 changes: 51 additions & 10 deletions form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,65 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="">

<!--Abaixo começa o formulário que está no método get que mostra as informações na URL. Poderia ser utilizado o método post, que é mais seguro. A action se refere ao arquivo que irá se comunicar com os dados enviados deste formulário-->
<form method="get" action="processadorformulario">
<!--O fieldset serve para deixar uma linha em volta do formulário-->
<fieldset>
<legend>Dados pessoais</legend>
<label for="nome"> Nome: </label>
<input id="nome" type="text" name="nome" placeholder="Digite seu nome"> <br>
<!--O legend que está abaixo é o título do formulário-->
<legend>Dados Pessoais</legend>
<label for="nome"> Nome: </label>
<input id="nome" type="text" name="nome" placeholder="Digite seu nome"> <br>

<label for="sobrenome"> Sobrenome: </label>
<input id="sobrenome" type="text" name="sobrenome" placeholder="Digite seu sobrenome">
</fieldset>
<label for="sobrenome"> Sobrenome: </label>
<input id="sobrenome" type="text" name="sobrenome" placeholder="Digite seu sobrenome">
<br>
<label for="senha"> Senha:</label>
<input type="password" name="senha" placeholder="Insira sua senha">
<br><br>
Qual seu gênero?
<br>
<input type="radio" name="sex" value="1"/>Masculino<br>
<input type="radio" name="sex" value="2"/>Feminino<br>
<br>

<input type="submit" value="enviar">
Qual sua renda?
<br>
<input type="radio" name="renda" value="1"/>1 a 5 salários mínimos<br>
<input type="radio" name="renda" value="2"/>6 a 10 salários mínimos<br>
<input type="radio" name="renda" value="3"/>11 a 15 salários mínimos<br>
<input type="radio" name="renda" value="4"/>Mais de 16 salários mínimos<br><br>

Como você vai trabalhar?
<br>
<input type="checkbox" name="transporte" value="carro"/>Carro<br>
<input type="checkbox" name="transporte" value="moto"/>Moto<br>
<input type="checkbox" name="transporte" value="onibus"/>Ônibus<br>
<br>


Qual a marca de seu carro?
<br>
<select name="carros">
<option value="volvo">Volvo</option>
<option value="GM">GM</option>
<option value="fiat">Fiat</option>
</select>
<br><br>

<br>
<input type="submit" value="enviar">
</fieldset>
</form>


<form>




</form>
</body>
</html>
62 changes: 48 additions & 14 deletions meuarquivo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,70 @@
/* ID */
#unico{
background: #CC0000;
}
/* TAG */
/*regra de css voltada para tag*/
div{
color: red;
background: #ECECEC;
padding: 20px;
text-align: center;
}
/* CLASS */

/*regra de css voltada para classe*/
.textoExemplo{
background: #0000CC;
color: blue;
background: #ff7979;
padding: 20px;
text-align: center;
}

/*regra de css voltada para id*/
#unico{
color: green;
background: #cc0000;
padding: 20px;
text-align: center;
}

/*regra de css para a classe artigo*/
.artigo{
color: black;
background: white;
padding: 5px;
text-align: left
}

/*regra de css para a classe cabecalho*/
.cabecalho{
color: blue;
color: red;
background: white;
padding: 5px;
text-align: center;
background: #aaa;
}

/*regra de css para a classe cabecalho que está dentro de artigo*/
.artigo .cabecalho{
color: green;
color: gray;
background: yellow;
text-align: left;
}
.artigo .cabecalho h3{

}
/*regra de css para a classe p que está dentro de artigo*/
.artigo p{
color: black;
background: white;
padding: 5px;
text-align: left

}
.artigo .rodape{

}
/*regra de css para a div a que está dentro de rodape que está dentro de artigo*/
.artigo .rodape a{
background: red;
}

/*regra de css para a tag h2 que está dentro de cabecalho que está dentro de artigo*/
.cabecalho h2{
color: red;
background: black;
padding: 0px;
text-align: center;
}


71 changes: 71 additions & 0 deletions posicionamentos.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!doctype html>
<html>
<head>
<title>Positions</title>
<meta charset="utf-8">
<!--CSS estruturado-->

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Roboto); /*Link copiado do Google Fonts para utilizar a fonte Roboto no site*/

*{/*o asterisco serve para colocar um defalut de CSS em todas divs*/
font-family: "Roboto", arial, verdana; /*fontes com espaço nas palavras tem que ter aspas ou fontes não muito */
margin: 0px;
padding: 0px;
box-sizing:border-box;
}

p{
position: relative;
float: left; /*para que eles flutue na esquerda*/
width: 300px;
height: 150px;
overflow: hidden;
background: #ccc;
margin: 1px;
padding: 5px;
}

#window-modal{
background: #c70;
color: #fff;
position: absolute;
left: 50px;
top: 50px;
z-index: 10;
}
#menubar {
position: fixed;
float: left;
width: 100%;
height: 40px;
padding: 10px;
background: #555;
color: white;
left: 0px;
top: 0px;
z-index: 100;
}

</style>
</head>
<body>
<div id="menubar">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>

<p id="window-modal">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>


</body>
</html>
43 changes: 43 additions & 0 deletions trabalhandoComCss.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<html>
<head>
<meta charset="utf-8">
<!--Link relacionado ao stylesheet, do tipo "texto/css", que está localizado em um link relativo em "meuarquivo.css"-->
<link rel="stylesheet" type="text/css" href="meuarquivo.css">
<style type="text/css">

</style>

<title>Trabalhando com CSS</title>
</head>
<body>
<h1>Um baita título</h1>

<div style="" class="textoExemplo" id="unico">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<div style="" class="textoExemplo">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<div style="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<div class="cabecalho">
<h2>RECEITAS</h2>
</div>

<div class="artigo">
<div class="cabecalho">
<h3>ARROZ COM FEIJÃO</h3>
</div>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

<div class="rodape">
Autor: Mussum
Data: 08/09/2014
Email: <a href="mailto:mussum@cacildis.com.br">mussum@cacildis.com.br </a>
</div>

</div>




</body>
</html>