# Session Two: Getting Better Linguagem de Progamação
**Autor**: Elias de Freitas Cavalcante
**Número**: 12
**Turma**: INFO C

### Link:https://codesandbox.io/s/nervous-mountain-zw3v2?file=/src/pages/home/index.html

## @MEDIA Responsivo

@media (max-width : 1024px) {
   
  .f1-logo, .f1-cabecalho, .f1-conteudo, .f1-conteudo-textos{
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  padding: 0px;
  margin: 0px;
  width: 100%;
  }

  .faixa-1{
  padding: 2em;
  }

  .f1-logo img {
  height: 2.8em;
  width: auto;
  margin: 1em 0px; 
  }

  .f1-menu{
  display: none;
  }
      
  .f1-menu-redes{
  margin-top: 3em;
  margin-bottom: 2em;
  }

  .f1-menu-redes img {
  width: 1.5em;
  height: auto;
  }


  .f1-conteudo-titulo{
  font: 2em Font2;
  line-height: 1.5em;
  max-width: 400px;
  }

  .f1-conteudo-descricao{
  font-size: 1.2em;
  margin: 1em 0px 2em 0px;
      
  max-width: 400px;
  }

  .f1-conteudo-imagem img {
  width: 100%;
  height: auto;
  }

  .faixa2{
    padding: 9em 1em;
  }

  .maee{
    width: 100%;
    margin: 3em 0em;
  }
   
  .des{
    margin: 1.3em 0em;
  }
  
  .descri{
    max-width: 25em;
  }

  .conteiner-site3 {
    padding: 0em;
  }

  .f3-titulo, .f3-re, .f3-paragrafo {
    padding: 0em 1.2em;
    margin: 0em;
  }

  .f3-titulo {
    padding-top: 2em;
    font-size: 2em;
  }

  .f3-re {
    font-size: 1.3em;
    margin: 1em 0em;
  }

  .f3-paragrafo {
    font-size: 1.2em;
  }

  .f3-texts {
    width: 100%;
  }

  .imagnes img {
    width: 100%;
  }

  .dess {
    margin:1.5em 0em 1em 0em;
  }

  .descri {
    font-size: 1.2em;
    padding: 0em 1em;
    margin: 0em 1em;
  }

  .f3-texts:nth-child(1) img {
  content: url('../../assets/imagens/f3-imagem-1.jpg');
  }

  .f3-texts:nth-child(2) img {
  content: url('../../assets/imagens/f3-imagem-2.jpg');
  }

  .f3-texts:nth-child(3) img {
  content: url('../../assets/imagens/f3-imagem-3.jpg');
  }

  .f6-form {
    width: 100%;
  }

  .f6-titulo {
    font-size: 2.5em;
  }
  
  .f6-forms1 {
    flex-direction: column;
    width: 100%;
  }  

  .f7-form {
    flex-direction: column;
    width: 100%;
  }
  
  .f7-form button {
    width: 100% !important;
  }

  .f7-titulo {
    margin-bottom: 1em;
    font-size: 2.5em;
  }

}