informacoes.css

Informacoes{
=====================================================================================
  /*Google Fonts: https://fonts.google.com*/

  /*Color*/
  color: blue;
  color: rgb(0, 0, 0);
  color: rgba(0, 0, 0, 0.5);/*Opacidade*/
  background-color: rgb(0, 0, 0);


  /*Worst way*/
  border-color: rgb(255, 0, 0);
  border-width: thin || 5px;
  border-style: solid;
  /*Better way*/
  border: WIDTH, STYLE, COLOR;
  size: 100px;
  font-family: serif;
  font-family: Garamond, Times, serif; /*Se um não estiver disponivel utilize o próximo*/
  font-size: 18px;
  font-style: italic;
  font-weight: bold;/*Ou...*/
  /*100 (thin), 200, 300, 400 (normal weight), 500, 600, 700, 800, or 900 (bold)*/
  display: inline-block;/*Usado para preencher a largura do navegador*/

  /*EM -> Dinamic*/
  span font-size: 2.0em = /*o span sera o dobro das  outras fontes */
  line-height: 1.5em;/*Espaçamento das linhas*/
  word-spacing: 0.25em;/*Espaçamento das palavras*/
  letter-spacing: 0.3em;/*Espaçamento das letras*/

  text-transform: uppercase || lowercase;
  text-align: center || left || right;
  text-decoration: overline; /*Adiciona uma linha no texto*/

  width: 50%; /*Largura*/
  /*max-width*/
  padding/*(LEFT, RIGHT ...)*/: 10px;/*(LEFT, RIGHT ...)*/
  margin: 100px; /*Margem entre os objetos*/
  margin: (TOP BOTTOM) (RIGHT  LEFT)
  margin: 0 auto;/*Deixa o objeto sempre no centro, ou seja já responsivo*/

  float: left; /*Deixa os objetos um do lado do outro*//*Display the object side by side*/

  text-shadow: /*1*/2px /*2*/2px /*3*/2px /*4*/black
  [1] - Lateral displacement -
  [2] - Vertical displacement|
  [3] - Shadow scattering
  [4] - Color



  :hover Quando passar o mouse em cima
  .thumbnail:hover {
    transition: transform .5s;
    transform: scale(1.2);
  }


.relative1 {
  position: relative; /*Deixa relativo a possicao do elemento*/
}

.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

@media screen and (min-width:px)/*Deixa o site responsivo ditando o min ou max width*/
}
=====================================================================================
  /*TIPOS DE SELETORES*/{
    /*Element*/
    li {
    }
    /*class*/
    .hello {
    }
    /*id*/
    #name {
    }
    /*Star*/
    * {
    	border: 1px solid lightgrey;
    }
    /*Seletor Decedente*/
    li a { /*ALL TAG INSIDE A LIST*/
    	color: red;
    }
    /*Seletor adjacente*/
    h4 + ul { /*ALL LIST AFTER a H4*/
    	border: 4px solid red;
    }
    /*Seletor de Atributo*/
    a[href="http://www.google.com"]  /*TODOS OS LINKS COM ESSA URL*/
    	background: blue;
    }
    /*nth of type*/
    li:nth-of-type(2){ /*Somente o segundo elemento de cada lista */
    	background: purple;
    }
  }
  =====================================================================================
  /*EXEMPLOS*/

  /*Make all the <p>'s that are nested inside of divs 25px font(font-size: 25px)*/
  /*Faça todos os <p> que estão dentro de uma div 25px font(font-size: 25px)*/
  div p{
    font-size: 25px;
  }


  /*Make only inputs with type 'text' have a gray background*/
  /*Faça apenas inputs com tipo texto com o background cinza*/
  input[type="text"]{
    background-color: grey;
  }

  /* Give both <p>'s inside the 3rd <div> a pink background*/
  /* Colocar o <p> dentro da 3 <div> um background rosa*/
  div:nth-of-type(3) p {
    background-color: pink;
  }

  /* Give the 2nd <p> inside the 3rd <div> a 5px white border*/
  /* Colocar o 2 <p> dentro do 3 <div> uma borda branca de 5px */
  div:nth-of-type(3) p:nth-of-type(2){
    border: 5px solite white;
  }

  /* Make the <em> in the 3rd <div> element white and 20px font(font-size:20px)*/
  /* Faça todos os <em> dentro do 3 <div> branco e 20px font(font-size:20px)*/
  div:nth-of-type(3) em {
    font-size: 20px;
    color: white;
  }

  /*Make all "checked" checkboxes have a left margin of 50px(margin-left: 50px)*/
  /*Faça todos "checked" boxes ter uma margem a esquerda de 50px(margin-left: 50px)*/
  input:checked {
    margin-left: 50px;
  }

  /* Make the <label> elements all UPPERCASE without changing the HTML*/
  /* Faça os elementos <label> Letra maiuscula sem mudar o HTML*/
  label {
    text-transform: uppercase;
  }

  /*Make the first letter of the element with id 'special' green and 100px font size(font-size: 100)*/
  /*Faça a primeira letra do elemento com o id 'special' Verde e 100px font size(font-size: 100)*/
  #special::first-letter{
    color: green;
    font-size: 100px;
  }

  /*Make the <h1> element's color change to blue when hovered over */
  /*Faça o elemento <h1> mudar de cor quando o mouse passado em cima */
  h1:hover{
    color: blue;
  }

  /*Make the <a> element's that have been visited gray */
  /*Faça o elemeto <a> que já foi visitado cinza */
  a:visited{
    color: gray;
  }
=====================================================================================

}