---
# System prepended metadata

title: Recomeçar

---

# Recomeçar

autor: Felipe Oliveira Verissimo
turma: InfoC
número: 16

[toc]


# Faixas

> https://e5dzf.csb.app/src/pages/home/index.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">
    <title>site bitcoins</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <div class="container">
      <div class="faixa1">
        <div class="partedecima">
        <div class="parte1">
          <img src="../../assets/images/1.webp"/>
          <div class="texto1">
              Moonchain Capital
          </div>
        </div>
        <div class="textoss">
        <div class="texto2">
          Home
        </div>
        <div class="texto2">
          Services
        </div>
        <div class="texto2">
          FAQ
        </div>
        <div class="texto2">
          Contact
        </div>
        <div class="texto2">
          Subscribe
        </div>
    
        <div class="imagens2">
            <img src="../../assets/images/13.webp"/>
            <img src="../../assets/images/14.webp"/>
            <img src="../../assets/images/15.webp"/>
        </div>
      </div>
    </div>
    <div class="partedebaixo">
      <div class="textospartedebaixo">
       <div class="texto7">
              Cryptocurrency<br> Consulting Services
          </div>
          <div class="texto8">
              I'm a paragraph. Click here to add your own text and edit<br> me. Let your users get to know you.
          </div>
          <div class="butonnn">
          <button> See Our Services </button>
          </div>
        </div>
        <div class="imagempartebaixo">
          <div class="imagen3">
           <img src="../../assets/images/2.webp"/>
          </div>
        </div>
        </div>
        </div>


         <div class="faixa2">
           <div class="texto88">
            Our Services
           </div>
           <div class="caixa">
           <div class="tresprimeiros">
           <div class="parte2">
             <div class="primeiraimagemfaixa2">
               <img src="../../assets/images/3.webp"/>
             </div>
             <div class="primeirotextofaixa2">
                Coin Acquisition
             </div>
             <div class="segundotextofaixa2">
                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="parte2">
             <div class="primeiraimagemfaixa2">
                <img src="../../assets/images/4.webp"/>
              </div>
              <div class="primeirotextofaixa2">
                  Currency Mining
              </div>
              <div class="segundotextofaixa2">
                 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="parte2">
              <div class="primeiraimagemfaixa2">
                  <img src="../../assets/images/5.webp"/>
                </div>
                <div class="primeirotextofaixa2">
                    Initial Coin Offerings
                </div>
                <div class="segundotextofaixa2">
                   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="tresprimeiros2">
            <div class="parte2">
                    <div class="primeiraimagemfaixa2">
                      <img src="../../assets/images/6.webp"/>
                    </div>
                    <div class="primeirotextofaixa2">
                        Exchanges
                    </div>
                    <div class="segundotextofaixa2">
                       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="parte2">                                                        
                    <div class="primeiraimagemfaixa2">
                       <img src="../../assets/images/7.webp"/>
                     </div>
                     <div class="primeirotextofaixa2">
                        Blockchain Tech
                     </div>
                     <div class="segundotextofaixa2">
                        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="parte2">
                     <div class="primeiraimagemfaixa2">
                         <img src="../../assets/images/8.webp"/>
                       </div>
                       <div class="primeirotextofaixa2">
                          Storing Your Coins
                       </div>
                       <div class="segundotextofaixa2">
                          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 class="botao2">
                      <button> Contact Us Today </button>
                      </div>
                    </div>

                      <div class="faixa3">
                        <div class="parte1faixa3">
                          <div class="texto1faixa3">
                              About Moonchainc
                          </div>
                          <div class="texto2faixa3">
                              Strategic Crypto Consultants Since 2015
                          </div>
                          <div class="texto3faixa3">
                              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="imagensfaixa3">
                       <div class="parte2faixa3">
                         <div class="imagemfaixa3">
                           <img src="../../assets/images/9.webp"/>
                         </div>
                         <div class="texto4faixa3">
                            Jordan Foster
                         </div>
                         <div class="texto5faixa3">
                            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 class="parte2faixa3">
                            <div class="imagemfaixa3">
                              <img src="../../assets/images/10.webp"/>
                            </div>
                            <div class="texto4faixa3">
                                Jesse Dunn
                            </div>
                            <div class="texto5faixa3">
                               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 class="parte2faixa3">
                              <div class="imagemfaixa3">
                                <img src="../../assets/images/11.webp"/>
                              </div>
                              <div class="texto4faixa3">
                                  Calvin Wang
                              </div>
                              <div class="texto5faixa3">
                                 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 class="faixa4">
                        <div class="primeirapartefaixa4">
                          <div class="imagemfaixa4">
                            <img src="../../assets/images/12.webp"/>
                          </div>
                          <div class="textosfaixa4">
                            “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="texto2faixa4">
                              Carl Calvert | Joji.set
                          </div>
                        </div>
                      </div>

                      <div class="faixa5">
                        <div class="primeirostextosfaixa5">
                        <div class=primeirofaixa5>
                         FAQ
                        </div>
                        <div class="segundofaixa5">
                            Below we’ve provided some info on how we work, blockchain technology, Bitcoin, and cryptocurrencies in general.
                        </div>
                        </div>
                        
                        <div class="segundotextofaixa5">
                          <div class="parte2faixa5">
                          <div class="textosfaixa5">
                            How do I buy cryptocurrency in my country?
                          </div>
                          <div class="taxtos2faixa5">
                              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<br> 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 class="parte2faixa5">
                              <div class="textosfaixa5">
                                  Do I have to pay taxes on any profits I make from Bitcoin?
                              </div>
                              <div class="taxtos2faixa5">
                                  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<br> 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 class="parte2faixa5">
                                  <div class="textosfaixa5">
                                      Is it possible to create my own cryptocurrency?
                                  </div>
                                  <div class="taxtos2faixa5">
                                      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<br> 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="faixa6">
                          <div class="primeirotextofaixa6">
                              Contact
                          </div>

                          <div class="quadrados">
                            <div class="primeirosquedrados">
                          <input placeholder="Name"/>
                            
                          <input placeholder="Email"/>
                            </div>
                            
                          <div class="segundoquadrado">
                          <input placeholder="Subject"/>
                          </div>

                          <div class="terceiroquadrado">
                          <textarea placeholder="Type your message here..."></textarea>
                          </div>
                        </div>
         

                          <div class="botao1faixa6">
                          <button> Submit </button>
                          </div>
                          <div class="partedebaixofaixa6">
                          <div class="quintotextofaixa6">
                            Subscribe to Our Newsletter
                          </div>

                          <div class="quadradinhos">
                            <input placeholder="Name"/>

                            <input placeholder="Email address"/>
                        


                          <div class="botaofaixa6">
                          <button> Submit </button>
                          </div>
                        </div>
                          <div class="patefinal">
                            <div class="partefinalfaixa6">
                              Moonchain Capital
                              </div>

                              <div class="partefinalfaixa66">
                                  info@mysite.com
                                  </div>

                                  <div class="partefinalfaixa66">
                                      123-456-7890
                                      </div>

                                      <div class="partefinalfaixa66">
                                          500 Terry Francois Street San Francisco, CA 94158
                                          </div>


                                         <div class="imagemsfinais">
                                        <div class="imagemfaixa6">
                                          <img src="../../assets/images/13.webp"/>
                                        </div>

                                        <div class="imagem2faixa6">
                                            <img src="../../assets/images/14.webp"/>
                                          </div>

                                          
                                          <div class="imagem3faixa6">
                                              <img src="../../assets/images/15.webp"/>
                                            </div>
                                          </div>
                                          
                                            <div class="colorir">          
                                            <div class="final">
                                              ©2023 by Moonchain Capital.<br>
                                              Proudly created with Wix.com
                                            </div>
                                          </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </body>
                               </html>
```

> index.css
```css=
.partedecima{
display: flex;
justify-content: space-between;
}

.textoss{
display: flex;
flex-direction: row;
margin-top: 55px;
margin-right: 70px;
}

.parte1{
  display: flex;
  flex-direction: row;
  margin-top: 28px;
  margin-left: 70px;
  }

  .texto1{
    margin-top: 28px;
    font-size: 22px;
    color: #181818;
    margin-left: 10px;
    font-family: font1;
  }

  .texto2{
    margin-left: 10px;
    margin-right: 10px;
    font-family: font3;
  }

.texto7{
font-size: 50px;
color: #842AE3;
margin-top: 30px;
font-family: font1;
}

.texto8{
  font-size: 18px;
  color: #181818;
  margin-top: 30px;
  font-family: font3;
  }

.butonnn button, .botao2 button{
  font-size: 14px;
  color: #ffffff;
  background-color: #842AE3;
  padding: 13PX 14px;
  border-radius: 22px;
  border: none;
}

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

.butonnn{
margin-top: 50px;
}

.textospartedebaixo{
  margin-top: 200px;
}

.imagen3 img{
  margin-left: 80px;
}

.primeirafaixa{
  display: flex;
flex-direction: row;
}


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

.tresprimeiros2{
display: flex;
flex-direction: row;
}

.tresprimeiros{
  display: flex;
  flex-direction: row;
}
.parte2{
text-align: center;
margin-left: 40px;
margin-right: 40px;
}

.faixa2{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
  background-color: #eeeeee;
  width: 1348px;
  margin-left: -7px;
}

.texto88{
 font-size: 28px;
 color: #842AE3;
margin-bottom: 120px;
padding-top: 100px;
font-family: font1;
}

.primeirotextofaixa2{
font-size: 20px;
color: #842AE3;
margin-bottom: 40px;
font-family: font3;
}

.segundotextofaixa2{
font-size: 14PX;
color: #181818;
line-height: 25px;
margin-bottom: 50px;
font-family: font3;
}

.primeiraimagemfaixa2{
margin-bottom: 50px;
}

.botao2{
margin-top: 70px;
margin-bottom: 250px;
}

.imagensfaixa3{
display: flex;
flex-direction: row;

}

.parte1faixa3{
display: flex;
align-items: center;
text-align: center;
flex-direction: column;
}

.texto1faixa3{
font-size: 40px;
color: #842AE3;
margin-bottom: 40px;
padding-top: 120px;
font-family: font1;
}

.texto2faixa3{
  font-size: 18px;
  color: #181818;
  margin-bottom: 40px;
  font-style: italic;
  font-family: font3;
}

.texto5faixa3{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-family: font3;
font-size: 15px;
}

.texto4faixa3{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40px;
font-size: 22px;
color: #842AE3;
font-family: font1;
}

.faixa3{
align-items: center;
}

.imagensfaixa3{
  display: flex;
justify-content: center;
}

.imagemfaixa3{
margin-left: 20px;
margin-right: 20px;
margin-bottom: 45px;
}

.texto3faixa3{
  margin-bottom: 90px;
  font-size: 15px;
  color: #181818;
  font-family: font3;
}

.faixa4{
display: flex;
justify-content: center;
text-align: center;
padding-top: 155px;
width: 1348px;
margin-left: -8px;
background-color: #27F5CE;
margin-top: 100px;
height: 370px;
}

.texto2faixa4{
  font-size: 15px;
  color: #181818;
  font-family: font3;
}

.imagemfaixa4{
padding-top: -100px;
margin-bottom: 70px;
}

.textosfaixa4{
  margin-bottom: 50px;
  font-size: 14px;
  color: #181818;
  font-family: font3;
}

.primeirofaixa5{
font-size: 40px;
color: #842AE3;
margin-bottom: 50px;
padding-top: 150px;
font-family: font1;
}

.segundofaixa5{
  font-size: 18px;
  color: #181818;
  margin-bottom: 120px;
  font-family: font3;
  
}

.textosfaixa5{
  font-size: 22px;
  color: #842AE3;
  margin-bottom: 50px;
  font-family: font1;
}

.taxtos2faixa5{
  font-size: 15px;
  color: #181818;
  margin-bottom: 110px;
  font-family: font3;
  line-height: 28px;
  margin-right: 140px;
  
}

.parte2faixa5{

}

.segundotextofaixa5{

}

.faixa5{
 display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #eeeeee;
  width: 1348px;
  margin-left: -7;
}

.primeirostextosfaixa5{
  text-align: center;
}

.faixa6{
  background-color: #ffffff;
  width: 1348px;
  margin-left: -7;
  text-align: center;
}

.botaofaixa6 button{
color: #ffffff;
font-size: 18px;
background-color: #181818;
border: none;
height: 32px;
width: 100px;
}

.botao1faixa6 button{
  background-color: #181818;
  width: 964;
  border: none;
  color: #eeeeee;
  height: 50px;
  font-size: 18px;
  margin-bottom: 200px;
  }

  .primeirotextofaixa6{
font-size: 40px;
color:#842AE3;
text-align: center;
margin-bottom: 20px;
font-family: font1;
margin-top: 120px;
  }

.primeirosquedrados input{
  width: 480px;
  margin-bottom: 10px;
  height: 40px;
  
}

.segundoquadrado input{
  width: 964px;
  margin-bottom: 10px;
  height: 40px;
}

.terceiroquadrado textarea{
  margin-bottom: 30px;
  height: 130px;
  width: 964;
  
}

.quintotextofaixa6{
font-size: 22px;
color: #181818;
}

.partefinalfaixa6{
font-size: 22px;
color: #181818;
text-align: center;
font-family: font1;
}

.quadradinhos input {
height: 34px;
width: 400px;
display: flex;
flex-direction: row;
margin-right: 10px;
}

.quintotextofaixa6{
font-size: 40px;
color: #842AE3;
text-align: center;
margin-bottom: 150px;
font-family: font1;
}

.quadradinhos {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 130px;
}

.partefinalfaixa66{
font-size: 15px;
line-height: 28px;
color: #181818;
font-family: font3;
}

.imagemsfinais{
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 50px;
}

.imagemfaixa6{
margin-right: 10px;
}

.imagem3faixa6{
  margin-right: 10px;
}

.imagem2faixa6{
margin-right: 10px;
}

.colorir{
  background-color: #eeeeee;
  width: 1348px;
  margin-left: -7;
  height: 80px;
}

.final{
padding-top: 20px;
margin-top: 10px;
font-size: 14px;
font-family: font3;
line-height: 28px;
padding-bottom: 20px;
}

.quadrados{
  font-family: font3;
}

@font-face{
  font-family: font1;
  src:url('../../assets/fontes/111.woff2');
}

@font-face{
  font-family: font2;
  src:url('../../assets/fontes/222.woff2');
}

@font-face{
  font-family: font3;
  src:url('../../assets/fontes/333.woff');
}

@font-face{
  font-family: font4;
  src:url('../../assets/fontes/444.woff2');
}

```

