---
# System prepended metadata

title: 'SESSION TWO: Getting Better | Linguagem de Programação:'

---

# SESSION TWO: Getting Better | Linguagem de Programação:
> **Aluna:** Patricia Oliveira Paulino
> **Número:** 37
> **Turma:** Info D

## Faixa

> 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="../comum/comum.css">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="index-responsivo.css">
    <title>Home | Moonchain Capital</title>
  </head>
  <body>
    
<div class="container">

<div class="faixa1">

<div class="f1-cabecalho">
      <div class="f1-home">
        <img src="../../assets/images/img.webp"/>
        <div class="f1-titulo"> 
          Moonchain Capital 
        </div>
       </div>

  <div class="f1-pags">
    <div class="f1-textos"> Home </div>
    <div class="f1-textos"> Services </div>
    <div class="f1-textos"> FAQ </div>
    <div class="f1-textos"> Contact </div>
    <div class="f1-textos"> Subscribe </div>
  </div>
  <div class="f1-pages-redes-sociais">
    <div class="f1-img"> <img src="../../assets/images/Facebook.webp"/> </div>
    <div class="f1-img"> <img src="../../assets/images/Twitter.webp"/> </div>
    <div class="f1-img"> <img src="../../assets/images/LinkedIn.webp"/> </div>
  </div>
</div>

<div class="f1-conteudo">
  <div class="f1-conteudo-textos">
    <div class="f1-conteudo-titulo"> Cryptocurrency Consulting Services </div>
    <div class="f1-conteudo-descricao"> I'm a paragraph. Click here to add your own text and edit me. Let your users get to know you. </div>
    <div class="f1-conteudo-botao"> <a href="#"> See our Services </a> </div>
  </div>

  <div class="f1-conteudo-imagem">
    <img src="../../assets/images/img2.webp">
  </div>
</div>

</div>

<div class="faixa-2"> 
  <div class="f2-titulo"> Our Services </div>
  <div class="f2-conteudo">
    <div class="f2-box"> 
      <div class="f2-box-imagem"> <img src="../../assets/images/ovo.webp" /></div>
      <div class="f2-box-titulo">Coin Acquisition</div>
      <div class="f2-box-descricao">I'm a paragraph. Click here to add your own text and edit me. 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="f2-box"> 
      <div class="f2-box-imagem"> <img src="../../assets/images/picareta.webp" /></div>
      <div class="f2-box-titulo">Currency Mining</div>
      <div class="f2-box-descricao">I'm a paragraph. Click here to add your own text and edit me. 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="f2-box"> 
      <div class="f2-box-imagem"> <img src="../../assets/images/wifi.webp" /></div>
      <div class="f2-box-titulo">Initial Coin Offerings</div>
      <div class="f2-box-descricao"> I'm a paragraph. Click here to add your own text and edit me. I’m a great place for you to tell a story and let your users know a little more about you.
  </div>
  <div class="f2-box">
      <div class="f2-box-imagem"> <img src="../../assets/images/seta.webp" /></div>
      <div class="f2-box-titulo">Exchanges</div>
      <div class="f2-box-descricao"> I'm a paragraph. Click here to add your own text and edit me. 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="f2-box"> 
      <div class="f2-box-imagem"> <img src="../../assets/images/quadrados.webp" /></div>
      <div class="f2-box-titulo">Blockchain Tech</div>
      <div class="f2-box-descricao"> I'm a paragraph. Click here to add your own text and edit me. 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="f2-box"> 
      <div class="f2-box-imagem"> <img src="../../assets/images/marmita.webp" /></div>
      <div class="f2-box-titulo">Storing Your Coins</div>
      <div class="f2-box-descricao"> I'm a paragraph. Click here to add your own text and edit me. I’m a great place for you to tell a story and let your users know a little more about you. </div>
  </div>
</div>
  
  <div class="f2-botao"> 
    <a href="#">Contact Us Today</a>
  </div>

</div>


<div class="faixa-3">
  <div class="f3-titulo">About Moonchain</div>
  <div class="f3-subtitulo">Strategic Crypto Consultants Since 2015</div>
  <div class="f3-descricao">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 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 class="f3-conteudo">
    <div class="f3-box">
      <div class="f3-box-imagem"><img src="../../assets/images/mulher1.webp" /></div>
      <div class="f3-box-titulo">Jordan Foster</div>
      <div class="f3-box-descricao">I'm a paragraph. Click here to add your own text and edit me. Let your users get to know you.</div>
    </div>
    <div class="f3-box">
      <div class="f3-box-imagem"><img src="../../assets/images/carinha2-p.webp" /></div>
      <div class="f3-box-titulo">Jesse Dunn</div>
      <div class="f3-box-descricao">I'm a paragraph. Click here to add your own text and edit me. Let your users get to know you.</div>
    </div>
    <div class="f3-box">
      <div class="f3-box-imagem"><img src="../../assets/images/japinha3-p.webp" /></div>
      <div class="f3-box-titulo">Calvin Wang</div>
      <div class="f3-box-descricao">I'm a paragraph. Click here to add your own text and edit me. Let your users get to know you.</div>
    </div>
  </div>
</div>

<div class="faixa4">

  <div class="f4-img"> <img src="../../assets/images/aspasbf.webp"> </div>
  <div class="f4-texto"> 
    “I'm a testimonial. Click to edit me and add text 
    that says something nice about you and your services. 
    Let your customers review you and tell their friends 
    how great you are.” 
  </div>
  <div class="f4-autor"> Judi Kelly | Camcoin </div>

</div>

<div class="faixa5">

    <div class="f5-titulo">FAQ</div>
    <div class="f5-descricao"> Below we’ve provided some info on how we work, blockchain technology, Bitcoin, and cryptocurrencies in general.</div>
   
    <h3 class="f5-subtitulo">How do I buy cryptocurrency in my country? </h3>
    <p class="f5-texto"> 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 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. 
    </p>

    <h3 class="f5-subtitulo"> Do I have to pay taxes on any profits I make from Bitcoin? </h3>
    <p class="f5-texto"> 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 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. 
    </p>

    <h3 class="f5-subtitulo"> Is it possible to create my own cryptocurrency? </h3>
    <p class="f5-texto"> 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 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. 
    </p>

</div>

<div class="faixa-6">
  <div class="f6-titulo">Contact</div>
  <div class="f6-form">
    <div class="f6-form1">
      <input type="text" placeholder="Name">
      <input type="text" placeholder="Email">
    </div>
    <div class="f6-form2">
      <input type="text" placeholder="Subject">
    </div>
    <div class="f6-form3">
      <textarea placeholder="Type your message here..."></textarea>
    </div>
    <div class="f6-botao">
      <button>Submit</button>
    </div>
  </div>
</div>

<div class="faixa-7">
  <div class="f7-titulo">Subscribe to Our Newsletter</div>

  <div class="f7-form">
    <input type="text" placeholder="Name">
    <input type="text" placeholder="E-mail address">
    <button>Submit</button>
  </div>
</div>

<div class="faixa8">

<div class="f8-textos">

<p class="f8-titulo"> Moonchain Capital </p>
<p class="f8-informacoes"> info@mysite.com </p>
<p class="f8-informacoes"> 123-456-7890 </p>
<p class="f8-informacoes"> 500 Terry Francois Street San Francisco, CA 94158 </p>

</div>

<div class="f8-imgs">

<div class="f8-img"> <img src="../../assets/images/Facebook.webp"/> </div>
<div class="f8-img"> <img src="../../assets/images/Twitter.webp"/> </div>
<div class="f8-img"> <img src="../../assets/images/LinkedIn.webp"/> </div>

</div>

</div>

<div class="faixa9">

<div class="f9-final">
  <p class="f9-informacoes-finais"> ©2023 by Moonchain Capital. </p>
  <p class="f9-informacoes-finais"> Proudly created with Wix.com </p>
</div>

</div>

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

> index.css
```css=

body {
  margin: 0px;
}

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
}

.faixa1 {
  display: flex;
  flex-direction: column;
  padding: 40px 80px;
}

.f1-cabecalho {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.f1-home {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.f1-home img {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

.f1-home div {
  font: 22px font1;
}

.f1-pags {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.f1-pages-redes-sociais {
  display: flex;
  flex-direction: row;
}

.f1-pages-redes-sociais .f1-textos {
  padding: 10px 8px;
}

.f1-textos {
  font: 14px font4;
  padding: 10px;
}

.f1-conteudo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  padding: 0px 10px 0px 100px;
}

.f1-conteudo-textos {
  width: 450px;
  margin-right: 50px;
}

.f1-conteudo-titulo {
  font: 50px font1;
  line-height: 70px;

  color: #842ae3;
}

.f1-conteudo-descricao {
  font: 18px font4;
  line-height: 30px;

  margin: 30px 0px 60px 0px;
}

.f1-conteudo-botao a {
  font: 14px font4;
  color: white;
  background-color: #842ae3;
  border-radius: 25px;
  text-decoration: none;

  padding: 15px 20px;
}

.f1-conteudo-botao a:hover {
  background-color: #b57fee;
  transition: 0.3s;
}

.f1-conteudo-imagem img {
  height: 740px;
  width: auto;
}


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

  padding: 9em 10em;

  background-color: #EEEEEE;
  text-align: center;
}


.f2-titulo {
  font: 2em Font2;
  color: #842AE3;

  margin-bottom: 3em;
}


.f2-conteudo {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.f2-box {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 25%;
  margin: 3em;
}

.f2-box-imagem {

}

.f2-box-titulo {
  font: 1.5em Font1;
  color: #842AE3;

  margin: 2em 0em;
}

.f2-box-descricao {
  line-height: 2em;
}


.f2-botao {
  margin-top: 8em;
}

.f2-botao a {
  color: white;
  background-color: #842AE3;
  border-radius: 25px;

  padding: 15px 17px;
}


.faixa-3 {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 9em 5em;
  text-align: center;
}

.f3-titulo {
  font: 3em Font2;
  color: #842AE3;
}

.f3-subtitulo {
  font: 1.3em Font1;
  color: #181818;
  font-style: italic;

  margin: 2em 0em;
}

.f3-descricao {
  font: 1em Font1;
  color: #181818;
  line-height: 2em;
  max-width: 60em;

  margin-bottom: 4em;
}

.f3-conteudo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  flex-wrap: wrap;
}

.f3-box {
  display: flex;
  flex-direction: column;

  width: 30%;
  margin: 2em 0em;
}

.f3-box-imagem img {
  width: 100%;
  height: auto;
}

.f3-box-titulo {
  font: 1.7em Font2;
  color: #842AE3;

  margin: 2.2em 0px;
}

.f3-box-descricao {
  line-height: 2em;
  padding: 0em 5em;
}


.faixa4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgb(39, 245, 206);
  padding: 160px;
}

.f4-img {
  width: 40px;
  height: 30px;
  margin: 25px;
}

.f4-texto {
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  margin: 25px;
  line-height: 1.875em;
}

.f4-autor {
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

.faixa5 {
  display: flex;
  flex-direction: column;
  background-color: #EEEEEE;
  padding: 8em 1.5em;
}

.f5-titulo {
  font: 3em font3;
  color: #842ae3;
}

.f5-descricao {
  font-size: 18px;
  margin: 50px;
}

.faixa5 h3 {
  text-align: left;
  font-size: 20px;
  color: #842ae3;
  font-family: font4;
  font-weight: bold;
}

.faixa5 p {
  text-align: left;
  line-height: 1.875em;
  font-size: 18px;
  margin: 20px;
}

.f5-subtitulo {
  margin: 25px;
}

.faixa-6 {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 8em 1.5em;
}

.f6-titulo {
  font: 3em Font2;
  color: #842AE3;
}

.f6-form {
  width: 60vw;
}

.f6-form1 {
  display: flex;
  flex-direction: row;
}

input, textarea {
  font: 1.1em Font1;
  width: 100%;
  padding: 1em;
  border: none;
  border-bottom: 1px solid black;
  margin: 0.3em 0.2em;
  outline: none;
  resize: none;
}

input:hover, textarea:hover {
  border: 1px solid black;
}

textarea { height: 12em;}


.f6-form2 {

}

.f6-form3 {

}

.f6-botao button, .f7-form button {
  margin-top: 2em;
  padding: 0.8em 0em;

  transition: 0.3s;
  border:none;
  font: 1.2em Font1;
  width: 100%;
  background-color: black;
  color:white;
  outline: none;
}


.f6-botao button:hover, .f7-form button:hover {
  background-color: rgb(121, 121, 121);
}
.faixa-7 {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 4em 1.5em;
}

.f7-titulo {
  font: 3em Font2;
  color: #842AE3;

  margin-bottom: 2em;
  text-align: center;
}

.f7-form {
  display: flex;
  flex-direction: row;
  align-items: flex-end;

  width: 60vw;
}


.f7-form button {
  width: 15em !important;
  margin: 0.3em !important;
}


.faixa8 {
  padding: 150px 0px 0px 20px;
}

.f8-textos {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.f8-imgs {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.f8-titulo {
  font-style: bold;
  font: 22px font1;
}

.f8-informacoes {
  line-height: 1.875em;
  font: 15px font4;
  color: rgb(24,24,24);
  margin: 5px;
}

.f8-imgs {
  margin: 20px;
}

p {
  text-align: center;
}

.f9-informacoes-finais {
  line-height: 1.875em;
  font: 14px font4;
  color: rgb(24,24,24);
  margin: 5px;
}

.f9-final {
  background-color: rgb(238,238,238);
  padding: 15px 70px;
}
```

>index-responsivo.css
```respocive.css=

@media (max-width: 1024px) {

.f1-home, .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-pags {
  display: none;
}
  
.f1-home img {
  heigth: 2.8em;
  width: auto;
  margin: 0.9em 0px;
}
  
.f1-pages-redes-sociais {
  margin-top: 2em;
  margin-bottom: 2em;
}
  
.f1-pages-redes-sociais img {
  width: 1.5em;
  heigth: auto;
}
  
.f1-conteudo-titulo {
  font: 2em Font2;
  line-heigth: 1.5em;
  max-width: 400px; 
}
  
.f1-conteudo-descricao {
  font-size:1.2em;
  margin: 1em 0px 2em 0px;
  
  max-width: 500px;
}
  
.f1-conteudo-imagem img {
  width: 100%;
  height: auto;
}



.faixa-2 {
  padding: 9em 1em;    
}

.f2-box {
  width: 100%;    
  margin: 3em 0em;
}

.f2-box-titulo {
  margin: 1.3em 0em;
}

.f2-box-descricao {
  max-width: 25em;
}



.faixa-3 {
  padding: 0em;
}

.f3-titulo, .f3-subtitulo, .f3-descricao {
  padding: 0em 1.2em;
  margin: 0em;
}

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

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

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

.f3-box {
  width: 100%;
}

.f3-box-imagem img {
  width: 100%;
}

.f3-box-titulo {
  margin:1.5em 0em 1em 0em;
}

.f3-box-descricao {
  font-size: 1.2em;
  padding: 0em 1em;
  margin: 0em 1em;
}





.f6-form {
  width: 100%;
}

.f6-titulo {
  font-size: 2.5em;
}

.f6-form1 {
  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;
}

}
```