---
# System prepended metadata

title: Session Two

---

# Session Two
autor: Guilherme Oliveira Verissimo
turma: InfoC
número: 21

[toc]

https://k6kf1.csb.app/src/pages/home/index.html

#### HTML

>index.html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="index.css" />
    <title>Home | Moonchain Capital</title>
  </head>
  <body>
    <div class="Container-Moonchain">
      <div class="faixa-1">
        <div class="cabecalho">
          <div class="logo-icon">
            <img class="logo" src="../../assets/images/logo.webp"/>
            <div class="texto-logo">Moonchain Capital</div>
          </div>
          <div class="links-cabecalho">
            <div class="textos-links">
              <div class="link">Home</div>
              <div class="link">Services</div>
              <div class="link">FAQ</div>
              <div class="link">Contact</div>
              <div class="link">Subscribe</div>
            </div>
            <div class="icons-links">
              <img src="../../assets/images/facebook.webp"/>
              <img src="../../assets/images/twitter.webp"/>
              <img src="../../assets/images/linkedn.webp"/>
            </div>
          </div>
        </div>

        <div class="conteudo">
          <div class="textos-conteudo">
            <div class="titulo-faixa-1">Cryptocurrency <br> Consulting Services</div>
            <div class="descricao-faixa-1">
              I'm a paragraph. Click here to add your own text and edit <br> me. Let
              your users get to know you.
            </div>
            <button class="botao-faixa-1">See Our Services</button>
          </div>
          <img src="../../assets/images/imagem.webp"/>
        </div>
      </div>

      <div class="faixa-2">
        <div class="titulo-faixa-2"> Our Services </div>
        <div class="conteudo-faixa-2">
          <div class="box-esquerda">
            <div class="box-faixa-2"> 
              <img src="../../assets/images/coin.webp"/>
              <div class="titulo-box"> Coin Acquisition </div>
              <div class="texto-box"> I'm a paragraph. Click here to add your own text <br> and edit me. I’m a great place for you to tell a <br> story and let your users know a little more about <br> you. </div>
            </div>
            <div class="box-faixa-2"> 
              <img src="../../assets/images/exchanges.webp"/>
              <div class="titulo-box"> Exchanges </div>
              <div class="texto-box"> I'm a paragraph. Click here to add your own text <br> and edit me. I’m a great place for you to tell a <br> story and let your users know a little more about <br> you. </div>
            </div>
          </div>
          <div class="box-meio">
            <div class="box-faixa-2"> 
              <img src="../../assets/images/mining.webp"/>
              <div class="titulo-box"> Currency Mining </div>
              <div class="texto-box"> I'm a paragraph. Click here to add your own text <br> and edit me. I’m a great place for you to tell a <br> story and let your users know a little more about <br> you. </div>
            </div>
            <div class="box-faixa-2"> 
              <img src="../../assets/images/block.webp"/>
              <div class="titulo-box"> Blockchain Tech </div>
              <div class="texto-box"> I'm a paragraph. Click here to add your own text <br> and edit me. I’m a great place for you to tell a <br> story and let your users know a little more about <br> you. </div>
            </div>
          </div>
          <div class="box-direita">
            <div class="box-faixa-2"> 
              <img src="../../assets/images/initial.webp"/>
              <div class="titulo-box"> Initial Coin Offerings </div>
              <div class="texto-box"> I'm a paragraph. Click here to add your own text <br> and edit me. I’m a great place for you to tell a <br> story and let your users know a little more about <br> you. </div>
            </div>
            <div class="box-faixa-2"> 
              <img src="../../assets/images/storing.webp"/>
              <div class="titulo-box"> Storing Your Coins </div>
              <div class="texto-box"> I'm a paragraph. Click here to add your own text <br> and edit me. I’m a great place for you to tell a <br> story and let your users know a little more about <br> you. </div>
            </div>
          </div>
        </div>
        <div>
          <button class="botao-faixa-2"> Contact Us Today </button>
        </div>
      </div>

      <div class="faixa-3">
        <div class="textos-faixa-3">
          <div class="titulo-faixa-3"> About Moonchain </div>
          <div class="sibtitulo-faixa-3"> Strategic Crypto Consultants Since 2015 </div>
          <div class="texto-faixa-3"> I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and <br> make changes to the font. I’m a great place for you to tell a story and let your users know a little more about you. </div>
        </div>
        <div class="conteudo-faixa-3">
          <div class="box-esquerda">
            <div class="box-faixa-3">
              <div class="faixa2-imagem-1">
              <img src="../../assets/images/jordan.webp"/>
              </div>
              <div class="faixa2-imagem-2">
              <img src="../../assets/images/Jordan2.webp"/>
              </div>
              <div class="titulo-box-3"> Jordan Foster </div>
              <div class="texto-box-3"> I'm a paragraph. Click here to add your own <br> text and edit me. Let your users get to know <br> you. </div>
            </div>
          </div>
          <div class="box-meio">
            <div class="box-faixa-3">
              <div class="faixa2-imagem-1">
              <img src="../../assets/images/jesse.webp"/>
              </div>
              <div class="faixa2-imagem-2">
                <img src="../../assets/images/Jesse2.webp"/>
              </div>
              <div class="titulo-box-3"> Jesse Dunn </div>
              <div class="texto-box-3"> I'm a paragraph. Click here to add your own <br> text and edit me. Let your users get to know <br> you. </div>
            </div>
          </div>
          <div class="box-direita">
            <div class="box-faixa-3">
              <div class="faixa2-imagem-1">
              <img src="../../assets/images/calvin.webp"/>
              </div>
              <div class="faixa2-imagem-2">
                <img src="../../assets/images/Calvin2.webp"/>
              </div>
              <div class="titulo-box-3"> Calvin Wang </div>
              <div class="texto-box-3"> I'm a paragraph. Click here to add your own <br> text and edit me. Let your users get to know <br> you. </div>
            </div>
          </div>
        </div>
      </div>

      <div class="faixa-4">
        <div class="conteudo-faixa-4">
          <img class="icon-faixa-4" src="../../assets/images/aspas.webp"/>
          <div class="texto-faixa-4"> “I'm a testimonial. Click to edit me and add text that says something nice about you and your services. Let your customers <br> review you and tell their friends how great you are.” </div>
          <div class="texto-rodape"> Carl Calvert | Joji.set </div> 
        </div>
      </div>

      <div class="faixa-5">
        <div class="conteudo-faixa-5">
          <div class="top-faixa-5">
            <div class="titulo-faixa-5"> FAQ </div>
            <div class="descricao-faixa-5"> Below we’ve provided some info on how we work, blockchain technology, Bitcoin, and cryptocurrencies in general. </div>
          </div>
          <div class="perguntas">
            <div class="perguntas-faixa-5">
              <div class="texto-1-faixa-5"> How do I buy cryptocurrency in my country? </div>
              <div class="texto-2-faixa-5"> I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to <br> add your own content and make changes to the font. I’m a great place for you to tell a story and let your users know a little <br> more about you. </div>
            </div>
            <div class="perguntas-faixa-5">
              <div class="texto-1-faixa-5"> Do I have to pay taxes on any profits I make from Bitcoin? </div>
              <div class="texto-2-faixa-5"> I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to <br> add your own content and make changes to the font. I’m a great place for you to tell a story and let your users know a little <br> more about you. </div>
            </div>
            <div class="perguntas-faixa-5">
              <div class="texto-1-faixa-5"> Is it possible to create my own cryptocurrency? </div>
              <div class="texto-2-faixa-5"> I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to <br> add your own content and make changes to the font. I’m a great place for you to tell a story and let your users know a little <br> more about you. </div>
            </div>
          </div>
        </div>
      </div>

      <div class="faixa-6">
        <div class="conteudo-daixa-6">
          <div class="titulo-faixa-6"> Contact </div>
          <div class="inputs">
            <div class="inputs-top-faixa-6">
              <input placeholder="Name"/>
              <input class="input-email" placeholder="Email"/>
            </div>
            <div class="inputs-bottom-faixa-6">
              <input placeholder="Subject"/>
              <textarea placeholder="Type your message here"></textarea>
              <div class="botao-config">
              <button> Submit </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="faixa-7">
        <div class="titulo-faixa-7"> Subscribe to Our Newsletter </div>
        <div class="inputs/botao">
          <div class="inputs-top-faixa-7">
            <input placeholder="Name"/>
            <input class="input-email" placeholder="Email Address"/>
            <div class="botao-config">
            <button class="botao-faixa-7"> Submit </button>
            </div>
          </div>
        </div>
        <div class="textos-faixa-7">
          <div class="subtitulo-faixa-7"> Moonchain Capital </div>
          <div class="informacoes"> info@mysite.com <br> 123-456-7890 <br> 500 Terry Francois Street San Francisco, CA 94158 </div>
        </div>
        <div class="icons-faixa-7">
          <img src="../../assets/images/facebook.webp"/>
          <img src="../../assets/images/twitter.webp"/>
          <img src="../../assets/images/linkedn.webp"/>
        </div>
      </div>
      
      <div class="mini-faixa-8">
        <div class="texto-faixa-8"> ©2023 by Moonchain Capital. <br> Proudly created with Wix.com </div>
      </div>

    </div>
  </body>
</html>
```

#### CSS COMPLETO

>index.css
```css=
@font-face {
  font-family: a;
  src: url('../../assets/fonts/a.woff2');
}

@font-face {
  font-family: b;
  src: url('../../assets/fonts/b.woff');
}

@font-face {
  font-family: c;
  src: url('../../assets/fonts/c.woff2');
}

@font-face {
  font-family: d;
  src: url('../../assets/fonts/d.woff2');
}

.cabecalho {
  display: flex;
  justify-content: space-between;
  margin: 30px 70px;
}

.logo-icon {
  display: flex;
  flex-direction: row;
}

.texto-logo {
  margin-top: 27px;
  margin-left: 19px;
  font-size: 22px;
  font-family: a;
  color: #181818;
}

.links-cabecalho {
  margin-right: 10px;
  display: flex;
  flex-direction: row;
}

.textos-links, .icons-links {
  margin-top: 27px;
}

.textos-links {
  display: flex;
  flex-direction: row;
}

.link {
  margin: 0px 10px;
  font-family: b;
  font-size: 14px;
  color: #2d2d2d;
}

.icons-links img {
  margin-left: 2px;
  margin-right: 2px;
}

.icons-links {
  margin-top: 25px;
}

.conteudo {
  display: flex;
  justify-content: space-evenly;
  margin-left: 40px;
  font-family: b;
}

.textos-conteudo {
  margin-top: 205px;
}

.titulo-faixa-1 {
  font-family: a;
  font-size: 50px;
  color: #842ae3;
}

.descricao-faixa-1 {
  font-family: b;
  margin-top: 30px;
  font-size: 18px;
  color: #181818;
}

.conteudo button {
  margin-top: 51px;
  background-color: #842ae3;
  border: none;
  font-size: 14px;
  border-radius: 22px;
  padding: 15px 20px;
  color: white;
}

/*faixa-2*/

.faixa-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 145px;
  padding-top: 120px;
  background-color: #eeeeee;
  width: 1580px;
  height: 1090px;
  margin-left: -5px;
}

.titulo-faixa-2 {
  font-size: 28px;
  font-family: a;
  color: #842ae3;
}

.conteudo-faixa-2 {
  display: flex;
  flex-direction: row;
  margin-top: 110px;
}

.box-faixa-2 {
 text-align: center;
 margin-left: 51px;
 margin-right: 51px;
 margin-bottom: 73px;
}

.titulo-box {
  font-size: 20px;
  margin-top: 60px;
  color: #842ae3;
  font-family: b;
}

.texto-box {
  font-size: 14px;
  margin-top: 40px;
  line-height: 25px;
  color: #181818;
  font-family: b;
}

.faixa-2 button {
  margin-top: 51px;
  background-color: #842ae3;
  border: none;
  font-size: 14px;
  border-radius: 22px;
  padding: 15px 20px;
  color: white;
}

.faixa2-imagem-2 {
  display: none;
}

/*faixa-3*/

.faixa-3 {
  margin-top: 120px;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.titulo-faixa-3 {
  font-size: 40px;
  font-family: a;
  color: #842ae3;
}

.sibtitulo-faixa-3 {
  margin-top: 39px;
  font-size: 18px;
  color: #181818;
  font-style: italic;
  font-family: b;
}

.texto-faixa-3 {
  font-size: 15px;
  line-Height: 28px;
  color: #181818;
  margin-top: 35px;
  font-family: b;
}

.conteudo-faixa-3 {
  display: flex;
  flex-direction: row;
  text-align: center;
  margin-top: 100px;
}

.box-faixa-3 {
  margin-left: 20px;
  margin-right: 20px;
}

.titulo-box-3 {
  color:#842ae3;
  font-size: 22px;
  font-family: a;
  margin-top: 50px;
}

.texto-box-3 {
  font-size: 15px;
  line-Height: 28px;
  margin-top: 35px;
  font-family: b;
  color: #181818;
}

/*faixa-4*/

.faixa-4 {
  margin-top: 160px;
  text-align: center;
  font-family: b;
  background-color: #27f5ce;
  width: 1580px;
  height: 528px;
  margin-left: -5px;
}

.conteudo-faixa-4 img {
  margin-top: 148px;
}

.conteudo-faixa-4 {
  margin-right: 4px;
}

.texto-faixa-4 {
  margin-top: 70px;
  line-height: 25px;
  color: #181818;
  font-size: 14px;
}

.texto-rodape {
  margin-top: 40px;
  color: #181818;
  font-size: 15px;
}

/*faixa-5*/

.faixa-5 {
  background-color: #eeeeee;
  width: 1580px;
  height: 1090px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-left: -5px;
}

.titulo-faixa-5 {
  font-size: 40px;
  color: #842ae3;
  font-family: c;
  padding-top: 135px;
}

.top-faixa-5 {
  text-align: center;
}

.descricao-faixa-5 {
  font-size: 18px;
  color: #181818;
  font-family: b;
  margin-top: 35px;
}

.perguntas {
  margin-top: 130px;
  margin-left: -21;
}

.texto-1-faixa-5 {
  font-size: 22px;
  color: #842ae3;
  font-family: a;
  margin-bottom: 42px;
}

.texto-2-faixa-5 {
  line-height: 28px;
  font-size: 15px;
  color: #181818;
  font-family: b;
  margin-bottom: 68px;
}

/*faixa-6*/

.faixa-6 {
  display: flex;
  justify-content: center;
}

.titulo-faixa-6 {
  font-size: 40px;
  color: #842ae3;
  font-family: a;
  margin-top: 120px;
  text-align: center;
}

.inputs-top-faixa-6 input {
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-bottom: 1px solid black;
  width: 465px;
  height: 42;
  font-size: 15px;
}

.inputs-bottom-faixa-6 input {
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-bottom: 1px solid black;
  width: 940px;
  height: 42;
  font-size: 15px;
  margin-top: 10px;
}

.input-email {
  margin-left: 6px;
}

.inputs-bottom-faixa-6 {
  display: flex;
  flex-direction: column;
}

.inputs-bottom-faixa-6 button{
  width: 940px;
  height: 50;
  border: none;
  background-color: #181818;
  color: white;
  font-family: b;
  font-size: 18px;
  margin-top: 40px;
}

textarea {
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-bottom: 1px solid black;
  width: 940px;
  height: 126px;
  resize: none;
  font-size: 15px;
  font-family: b;
  color: #181818;
  margin-top: 23px;
}

::-webkit-input-placeholder {
  color: #181818;
}

/*faixa-7*/

.faixa-7 {
  text-align: center;
}

.titulo-faixa-7 {
  color: #842ae3;
  font-size: 40px;
  font-family: a;
  margin-top: 150px;
}

.inputs-top-faixa-7 input {
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-bottom: 1px solid black;
  width: 409px;
  height: 35;
  font-size: 15px;
  margin-top: 160px;
}

.faixa-7 button {
  background-color: #181818;
  color: white;
  font-family: b;
  font-size: 18px;
  border: none;
  padding: 7px 23px;
}

.subtitulo-faixa-7 {
  font-size: 22px;
  color: #181818;
  font-family: a;
  margin-top: 150px;
}

.informacoes {
  font-size: 15px;
  font-family: b;
  color: #181818;
  line-Height: 28px;
  margin-top: 28px;
}

.icons-faixa-7 {
  margin-top: 27px;
}

/*faixa-8*/

.mini-faixa-8 {
  background-color:#eeeeee;
  width: 1580px;
  height: 70px;
  margin-left: -5px;
}

.texto-faixa-8 {
  padding-top: 7px; 
  font-size: 15px;
  font-family: b;
  color: #181818;
  line-Height: 28px;
  margin-top: 28px;
  text-align: center;
}

@media (max-width: 1024px) {

  .Container-Moonchain {
    height: auto;
    width: 100vw;
  }

/*faixa1*/

  .cabecalho, .logo-icon, .links-cabecalho, .textos-links, .icons-links, .conteudo, .textos-conteudo {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0px;
    margin: 0px;
    width: 100vw;
  } 

  .faixa-1 {
    height: auto;
    width: 100vw;
  }

  .logo-icon img {
    width: 5em;
    margin-top: 2em;
  }
  
  .conteudo img {
    width: 90vw;
  }

  .texto-logo {
    font-size: 1.8em;
  }

  .textos-links {
    display: none;
  }

  .icons-links img {
    width: 2.2em;
    margin-top: 3em;
  }

  .titulo-faixa-1 {
    margin-top: 1.6em;
    font-size: 2em;
  }

  .descricao-faixa-1 {
    font-size: 1.2em;
  }

  .faixa-1 button {
    padding: 1.3em 2em;
    font-size: 0.9em;
    border-radius: 2em;
  }

  

/*faixa2*/

  .faixa-2 {
    height: auto;
    width: 100%;
    background-size: 100vw;
  }

  .conteudo-faixa-2 {
    display: flex;
    flex-direction: column;
  }

  .titulo-faixa-2 {
    font-size: 1.8em;
  }

  .box-faixa-2 img {
    width: 5em;
  }

  .titulo-box {
    font-size: 1.5em;
  }

  .texto-box {
    font-size: 1.1em;
  }

  .faixa-2 button {
    padding: 1.3em 2em;
    font-size: 0.9em;
    border-radius: 2em;
    margin-bottom: 4em;
  }

/*faixa3*/

  .faixa-3 {
    height: auto;
    width: 100vw;
  }

  .conteudo-faixa-3 {
    display: flex;
    flex-direction: column;
  }

  .titulo-faixa-3 {
    font-size: 2em;
  }

  .sibtitulo-faixa-3 {
    font-size: 1.1em;
  }

  .texto-faixa-3 {
    font-size: 1.1em;
  }

  .faixa2-imagem-1 {
    display: none;
  }

  .faixa2-imagem-2 {
    display: block;
  }

  .faixa2-imagem-2 img {
    width: 100vw;
    margin-top: 5em;
  }

  .titulo-box-3 {
    font-size: 1.5em;
  }

  .texto-box-3 {
    font-size: 1.2em;
    line-Height: 2em;
    margin-bottom: -2em;
  }
  
/*faixa4*/

  .faixa-4 {
    height: auto;
    width: 100vw;
  }

  .faixa-4 img {
    width: 5em;
    margin-top: 3em;
  }

  .texto-faixa-4 {
    font-size: 1em;
  }

  .texto-rodape {
    font-size: 1.2em;
    padding-bottom: 2.6em;
  }
  
/*faixa5*/

  .faixa-5 {
    height: auto;
    width: 100vw;
  }

  .titulo-faixa-5 {
    font-size: 2em;
    margin-top: -2em;
  }

  .descricao-faixa-5 {
    font-size: 1.2em;
    line-Height: 1.8em;

  }

  .perguntas {
    padding-left: 1.7em;
  }

  .texto-1-faixa-5 {
    font-size: 1.7em;
  }

  .texto-2-faixa-5 {
    font-size: 1.1em;
    line-Height: 1.8em;
  }

/*faixa6*/

  .faixa-6 {
    height: auto;
    width: 100vw;
    display: flex;
    justify-content: center;
  }

  .titulo-faixa-6 {
    font-size: 2em;
  }

  .inputs input {
    display: flex;
    flex-direction: column;
    width: 90vw;
    font-size: 1.2em;
    border-bottom: 1px solid black;
    margin-top: 2em;
  }

  .input-email {
    margin-left: 0.1em;
  }

  .inputs-bottom-faixa-6 textarea {
    width: 90vw;
    font-size: 1.2em;
    margin-top: 1em;
  }

  .inputs-bottom-faixa-6 button {
    width: 14em;
    height: 2.2em;
    font-size: 1.5em;
    margin-top: 2em;
  }

/*faixa7*/

  .faixa-7 {
    height: auto;
    width: 100vw;
  }

  .titulo-faixa-7 {
    font-size: 2em;
  }

  .inputs-top-faixa-7 {
    display: flex;
    flex-direction: column;
    margin-left: 0.8em;
    margin-left: 2em;
  }

  .inputs-top-faixa-7 input {
    display: flex;
    flex-direction: column;
    width: 90vw;
    font-size: 1.2em;
    border-bottom: 1px solid black;
    margin-top: 2em;
  }

  .inputs-top-faixa-7 button {
    width: 14em;
    height: 2em;
    font-size: 1.5em;
    margin-top: 2em;
  }

  .botao-config {
    display: flex;
    justify-content: center;
  }

  .subtitulo-faixa-7 {
    font-size: 1.8em;
  }

  .informacoes {
    font-size: 1.1em;
    line-height: 2.5em;
  }

  .icons-faixa-7 img {
    width: 2em;
  }

/*faixa8*/

  .mini-faixa-8  {
    height: auto;
    width: 100vw;
  }

  .texto-faixa-8 {
    font-size: 1em;
    line-Height: 1.7em;
    padding-top: 1.1em;
  }

}
```

#### CSS @MEDIA

```css=
@media (max-width: 1024px) {

  .Container-Moonchain {
    height: auto;
    width: 100vw;
  }

/*faixa1*/

  .cabecalho, .logo-icon, .links-cabecalho, .textos-links, .icons-links, .conteudo, .textos-conteudo {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0px;
    margin: 0px;
    width: 100vw;
  } 

  .faixa-1 {
    height: auto;
    width: 100vw;
  }

  .logo-icon img {
    width: 5em;
    margin-top: 2em;
  }
  
  .conteudo img {
    width: 90vw;
  }

  .texto-logo {
    font-size: 1.8em;
  }

  .textos-links {
    display: none;
  }

  .icons-links img {
    width: 2.2em;
    margin-top: 3em;
  }

  .titulo-faixa-1 {
    margin-top: 1.6em;
    font-size: 2em;
  }

  .descricao-faixa-1 {
    font-size: 1.2em;
  }

  .faixa-1 button {
    padding: 1.3em 2em;
    font-size: 0.9em;
    border-radius: 2em;
  }

  

/*faixa2*/

  .faixa-2 {
    height: auto;
    width: 100%;
    background-size: 100vw;
  }

  .conteudo-faixa-2 {
    display: flex;
    flex-direction: column;
  }

  .titulo-faixa-2 {
    font-size: 1.8em;
  }

  .box-faixa-2 img {
    width: 5em;
  }

  .titulo-box {
    font-size: 1.5em;
  }

  .texto-box {
    font-size: 1.1em;
  }

  .faixa-2 button {
    padding: 1.3em 2em;
    font-size: 0.9em;
    border-radius: 2em;
    margin-bottom: 4em;
  }

/*faixa3*/

  .faixa-3 {
    height: auto;
    width: 100vw;
  }

  .conteudo-faixa-3 {
    display: flex;
    flex-direction: column;
  }

  .titulo-faixa-3 {
    font-size: 2em;
  }

  .sibtitulo-faixa-3 {
    font-size: 1.1em;
  }

  .texto-faixa-3 {
    font-size: 1.1em;
  }

  .faixa2-imagem-1 {
    display: none;
  }

  .faixa2-imagem-2 {
    display: block;
  }

  .faixa2-imagem-2 img {
    width: 100vw;
    margin-top: 5em;
  }

  .titulo-box-3 {
    font-size: 1.5em;
  }

  .texto-box-3 {
    font-size: 1.2em;
    line-Height: 2em;
    margin-bottom: -2em;
  }
  
/*faixa4*/

  .faixa-4 {
    height: auto;
    width: 100vw;
  }

  .faixa-4 img {
    width: 5em;
    margin-top: 3em;
  }

  .texto-faixa-4 {
    font-size: 1em;
  }

  .texto-rodape {
    font-size: 1.2em;
    padding-bottom: 2.6em;
  }
  
/*faixa5*/

  .faixa-5 {
    height: auto;
    width: 100vw;
  }

  .titulo-faixa-5 {
    font-size: 2em;
    margin-top: -2em;
  }

  .descricao-faixa-5 {
    font-size: 1.2em;
    line-Height: 1.8em;

  }

  .perguntas {
    padding-left: 1.7em;
  }

  .texto-1-faixa-5 {
    font-size: 1.7em;
  }

  .texto-2-faixa-5 {
    font-size: 1.1em;
    line-Height: 1.8em;
  }

/*faixa6*/

  .faixa-6 {
    height: auto;
    width: 100vw;
    display: flex;
    justify-content: center;
  }

  .titulo-faixa-6 {
    font-size: 2em;
  }

  .inputs input {
    display: flex;
    flex-direction: column;
    width: 90vw;
    font-size: 1.2em;
    border-bottom: 1px solid black;
    margin-top: 2em;
  }

  .input-email {
    margin-left: 0.1em;
  }

  .inputs-bottom-faixa-6 textarea {
    width: 90vw;
    font-size: 1.2em;
    margin-top: 1em;
  }

  .inputs-bottom-faixa-6 button {
    width: 14em;
    height: 2.2em;
    font-size: 1.5em;
    margin-top: 2em;
  }

/*faixa7*/

  .faixa-7 {
    height: auto;
    width: 100vw;
  }

  .titulo-faixa-7 {
    font-size: 2em;
  }

  .inputs-top-faixa-7 {
    display: flex;
    flex-direction: column;
    margin-left: 0.8em;
    margin-left: 2em;
  }

  .inputs-top-faixa-7 input {
    display: flex;
    flex-direction: column;
    width: 90vw;
    font-size: 1.2em;
    border-bottom: 1px solid black;
    margin-top: 2em;
  }

  .inputs-top-faixa-7 button {
    width: 14em;
    height: 2em;
    font-size: 1.5em;
    margin-top: 2em;
  }

  .botao-config {
    display: flex;
    justify-content: center;
  }

  .subtitulo-faixa-7 {
    font-size: 1.8em;
  }

  .informacoes {
    font-size: 1.1em;
    line-height: 2.5em;
  }

  .icons-faixa-7 img {
    width: 2em;
  }

/*faixa8*/

  .mini-faixa-8  {
    height: auto;
    width: 100vw;
  }

  .texto-faixa-8 {
    font-size: 1em;
    line-Height: 1.7em;
    padding-top: 1.1em;
  }

}
```