---
# System prepended metadata

title: 'Session one: Recomeçar | Linguagem de Programação'

---

# Session one: Recomeçar | Linguagem de Programação
**Autor**: Vitório Trindade Santana
**Turma**: Informática C
**Número**: 50

[toc]

## Página home Cryptocurreny

> https://www.wix.com/demone2/cryptocurrency-consu

> link codesandbox: https://codesandbox.io/s/crypto-nwjqg?file=/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>Home | Moonchain Capital</title>
    <link rel="stylesheet" href="../home/index.css" />
  </head>
  <body>
    <div class="container-cryptocurrency">
      <div class="faixa-1">
        <div class="f1-cabecalho">
            <div class="f1-logo-texto"> 
              <div class="f1-logo-cabecalho"> 
                <image src="https://static.wixstatic.com/media/82fcd3_25649baa84044cac93c61723b142c3da~mv2.png/v1/fill/w_72,h_72,al_c,q_85,usm_0.66_1.00_0.01/82fcd3_25649baa84044cac93c61723b142c3da~mv2.webp"/>
              </div>
              <div class="f1-logo-cabecalho"> Moonchain Capital </div>
            </div>
            <div class="f1-cabecalho-itens"> 
                <div class="f1-item"> Home </div>
                <div class="f1-item"> Services </div>
                <div class="f1-item"> FAQ </div>
                <div class="f1-item"> Contact </div>
                <div class="f1-item"> Subscribe </div>
                <div class="f1-item"> 
                  <image src="https://static.wixstatic.com/media/0fdef751204647a3bbd7eaa2827ed4f9.png/v1/fill/w_18,h_18,al_c,q_85,usm_0.66_1.00_0.01/Facebook.webp"/>
                </div>
                <div class="f1-item">
                  <image src="https://static.wixstatic.com/media/c7d035ba85f6486680c2facedecdcf4d.png/v1/fill/w_18,h_18,al_c,q_85,usm_0.66_1.00_0.01/Twitter.webp"/>
                </div>
                <div class="f1-item">
                  <image src="https://static.wixstatic.com/media/6ea5b4a88f0b4f91945b40499aa0af00.png/v1/fill/w_18,h_18,al_c,q_85,usm_0.66_1.00_0.01/LinkedIn.webp"/>
                </div>
            </div>
        </div>

        <div class="f1-textos-imagens">
            <div class="f1-textos"/>
              <div class="f1-titulo"> Cryptocurrency Consulting Services </div>
              <div class="f1-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-botao"> <button> See our services </button> </div>
            </div>
            <div class="f1-imagem-crypto">
              <image src="https://static.wixstatic.com/media/82fcd3_7b36b3badf9f4baea4277340386e3de1~mv2.png/v1/fill/w_583,h_666,fp_0.50_0.50,q_90,usm_0.66_1.00_0.01/82fcd3_7b36b3badf9f4baea4277340386e3de1~mv2.webp"/>
            </div>
        </div>
      </div>

      <div class="faixa-2">
        <div class="f2-titulo"> Our Services </div>
        <div class="f2-boxes"> 
                <div class="f2-box">
                    <div class="f2-box-imagem">
                      <image src="https://static.wixstatic.com/media/82fcd3_d6357967f3b3482b839c55056e4af4e0~mv2.png/v1/fill/w_54,h_54,al_c,q_85,usm_0.66_1.00_0.01/82fcd3_d6357967f3b3482b839c55056e4af4e0~mv2.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">
                      <image src="https://static.wixstatic.com/media/82fcd3_cfc5ddcc780a4051b9030c86450120fd~mv2.png/v1/fill/w_54,h_54,al_c,q_85,usm_0.66_1.00_0.01/82fcd3_cfc5ddcc780a4051b9030c86450120fd~mv2.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">
                        <image src="https://static.wixstatic.com/media/82fcd3_71bbc54fbb994059afcc2ccc7c1fbef0~mv2.png/v1/fill/w_54,h_54,al_c,q_85,usm_0.66_1.00_0.01/82fcd3_71bbc54fbb994059afcc2ccc7c1fbef0~mv2.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>
                <div class="f2-box">
                    <div class="f2-box-imagem">
                      <image src="https://static.wixstatic.com/media/82fcd3_134c13e1731a47e7836d24827fbe4340~mv2.png/v1/fill/w_54,h_54,al_c,q_85,usm_0.66_1.00_0.01/82fcd3_134c13e1731a47e7836d24827fbe4340~mv2.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">
                      <image src="https://static.wixstatic.com/media/82fcd3_e59963db04bc48f88e84ad8b20d6b25b~mv2.png/v1/fill/w_54,h_54,al_c,q_85,usm_0.66_1.00_0.01/82fcd3_e59963db04bc48f88e84ad8b20d6b25b~mv2.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">
                        <image src="https://static.wixstatic.com/media/82fcd3_328b0186428c457593d421e9cac07d23~mv2.png/v1/fill/w_54,h_54,al_c,q_85,usm_0.66_1.00_0.01/82fcd3_328b0186428c457593d421e9cac07d23~mv2.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"> <button> Contact Us Today </button> </div>
      </div>

      <div class="faixa-3">
            <div class="f3-textos">
              <div class="f3-titulo"> About Moonchain </div>
              <div class="f3-abaixo"> 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>
            <div class="f3-boxes-pessoas">
                <div class="f3-box">
                    <div class="f3-box-imagem"> 
                      <image src="https://static.wixstatic.com/media/82fcd3_a724a50cbde14d1f9fa961ebf2724b77~mv2_d_1784_1920_s_2.jpg/v1/fill/w_365,h_486,fp_0.46_0.23,q_80,usm_0.66_1.00_0.01/82fcd3_a724a50cbde14d1f9fa961ebf2724b77~mv2_d_1784_1920_s_2.webp"/>
                    </div>
                    <div class="f3-box-nome"> 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"> 
                      <image src="https://static.wixstatic.com/media/82fcd3_cf7d46e5d21a43d0aeeb64ebb67d772e~mv2_d_1784_1920_s_2.jpg/v1/fill/w_365,h_486,fp_0.48_0.23,q_80,usm_0.66_1.00_0.01/82fcd3_cf7d46e5d21a43d0aeeb64ebb67d772e~mv2_d_1784_1920_s_2.webp"/>
                    </div>
                    <div class="f3-box-nome"> 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"> 
                      <image src="https://static.wixstatic.com/media/82fcd3_92d2897de085402d902fbec9bdecf75a~mv2_d_1784_1920_s_2.jpg/v1/fill/w_365,h_486,fp_0.46_0.24,q_80,usm_0.66_1.00_0.01/82fcd3_92d2897de085402d902fbec9bdecf75a~mv2_d_1784_1920_s_2.webp"/>
                    </div>
                    <div class="f3-box-nome"> 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="faixa-4">
        <div class="f4-imagem"> 
          <image src="https://static.wixstatic.com/media/82fcd3_508cb068659c4e2db53302d7f5317cd6~mv2.png/v1/fill/w_36,h_27,al_c,q_85,usm_0.66_1.00_0.01/82fcd3_508cb068659c4e2db53302d7f5317cd6~mv2.webp"/>
        </div>
        <div class="f4-descricao"> 
            “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-pessoa"> Carl Calvert | Joji.set </div>
      </div>

      <div class="faixa-5">
          <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>
          <div class="f5-outros-textos">
            <div class="f5-subtitulo"> How do I buy cryptocurrency in my country? </div>
            <div class="f5-subdescricao"> 
                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="f5-subtitulo"> Do I have to pay taxes on any profits I make from Bitcoin? </div>
            <div class="f5-subdescricao"> 
                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="f5-subtitulo"> Is it possible to create my own cryptocurrency? </div>
            <div class="f5-subdescricao"> 
                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>
      </div>

      <div class="faixa-6">
          <div class="f6-contato">
              <div class="f6-contato-titulo"> Contact </div>
              <div class="f6-imputs-email-nome">
                <div class="f6-input-en"> <input type="name" placeholder="Name"/> </div>
                <div class="f6-input-en"> <input type="email" placeholder="Email"/> </div>
              </div>
              <div class="f6-input-subject"> <input type="text" placeholder="Subject"/> </div>
              <div class="f6-textarea"> 
                  <textarea placeholder="Type your message here..."></textarea>
              </div>
              <div class="f6-botao-contact"> <button> Submit </button> </div>
          </div>

          <div class="f6-inscreva-se">
              <div class="f6-subscribe-titulo"> Subscribe to Our Newsletter </div>
              <div class="f6-imputs-subscribe"> 
                  <div class="f6-input-subscribe"> <input type="name" placeholder="Name"/> </div>
                  <div class="f6-input-subscribe"> <input type="email" placeholder="Email Address"/> </div>
                  <div class="f6-botao-subscribe"> <button> Submit </button> </div>
              </div>
          </div>

          <div class="f6-informacoes-adicionais">
              <div class="f6-titulo-informacoes"> Moonchain Capital </div>
              <div class="f6-informacoes-textos"> 
                <div class="f6-informacoes-item"> info@mysite.com </div>
                <div class="f6-informacoes-item"> 123-456-7890 </div>
                <div class="f6-informacoes-item"> 500 Terry Francois Street San Francisco, CA 94158 </div>
              </div>
              <div class="f6-redes-sociais">
                  <div class="f6-rede-logo"> 
                      <image src="https://static.wixstatic.com/media/0fdef751204647a3bbd7eaa2827ed4f9.png/v1/fill/w_18,h_18,al_c,q_85,usm_0.66_1.00_0.01/Facebook.webp"/>
                    </div>
                    <div class="f6-rede-logo">
                      <image src="https://static.wixstatic.com/media/c7d035ba85f6486680c2facedecdcf4d.png/v1/fill/w_18,h_18,al_c,q_85,usm_0.66_1.00_0.01/Twitter.webp"/>
                    </div>
                    <div class="f6-rede-logo">
                      <image src="https://static.wixstatic.com/media/6ea5b4a88f0b4f91945b40499aa0af00.png/v1/fill/w_18,h_18,al_c,q_85,usm_0.66_1.00_0.01/LinkedIn.webp"/>
                    </div>
              </div>
          </div>
      </div>

      <div class="faixa-7">
        <div class="f7-rodape-texto"> ©2023 by Moonchain Capital. </div>
        <div class="f7-rodape-texto"> Proudly created with Wix.com </div>
      </div>

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

```

> index.css

```css=
body {
  margin: 0px;
}

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

.faixa-1 {
  margin: 30px 60px;
}

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

.f1-logo-texto {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: Roboto1;
  font-size: 17px;
  padding-left: 16px;
}

.f1-logo-cabecalho {
  font-size: 22px;
  padding-left: 8px;
}

.f1-logo-cabecalho img {
  width: 83px;
  height: 80px;
}

.f1-cabecalho-itens {
  display: flex;
  flex-direction: row;
}

.f1-item {
  padding-right: 18px;
  font-family: Roboto3;
  font-size: 14px;
}

.f1-textos-imagens {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: Roboto1;
  margin-top: 20px;
  justify-content: center;
}

.f1-textos {
  width: 500px;
  margin: 0px 50px;
}

.f1-titulo {
  font-size: 50px;
  color: #842ae3;
  font-family: Roboto1;
  padding-bottom: 35px;
  line-height: 67px;
}

.f1-descricao {
  word-spacing: 2px;
  font-family: Roboto3;
  font-size: 18px;
  padding-bottom: 10px;
  line-height: 30px;
}

.f1-botao {
  margin-top: 45px;
}

.f1-botao button {
  color: white;
  background-color: #842ae3;
  outline: none;
  border-radius: 40px;
  padding: 10px 15px;
  font-size: 15px;
  font-family: Roboto3;
}

.f1-imagem-crypto img {
  width: 630px;
  height: 750px;
}

.faixa-2 {
  display: flex;
  flex-direction: column;
  background-color: rgb(238, 238, 238);
  align-items: center;
  padding: 40px 140px 120px 140px;
}

.f2-titulo {
  color: #842ae3;
  font-family: Roboto1;
  font-size: 28px;
  margin: 100px 0px;
}

.f2-boxes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.f2-box {
  width: 310px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.f2-box-imagem {
  padding: 10px 0px;
}

.f2-box-imagem img {
  height: 65px;
}

.f2-box-titulo {
  color: #842ae3;
  font-family: Roboto3;
  font-size: 20px;
  margin: 40px 0px;
}

.f2-box-descricao {
  font-family: Roboto3;
  font-size: 14px;
  text-align: center;
  margin-bottom: 90px;
  line-height: 23px;
}

.f2-botao button {
  color: white;
  background-color: #842ae3;
  outline: none;
  border-radius: 40px;
  padding: 10px 15px;
  font-size: 15px;
  font-family: Roboto3;
}

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

.f3-textos {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 915px;
  padding-bottom: 40px;
}

.f3-titulo {
  color: #842ae3;
  font-family: Roboto1;
  font-size: 40px;
}

.f3-abaixo {
  font-size: 18px;
  font-style: italic;
  font-family: Roboto3;
  padding: 45px 0px;
}

.f3-descricao {
  font-family: Roboto3;
  font-size: 15px;
  margin-bottom: 50px;
  line-height: 27px;
}

.f3-boxes-pessoas {
  display: flex;
  flex-direction: row;
}

.f3-box {
  text-align: center;
}

.f3-box-imagem img {
  width: 400px;
  height: 540px;
}

.f3-box-nome {
  color: #842ae3;
  font-family: Roboto1;
  font-size: 22px;
  padding: 45px 0px;
}

.f3-box-descricao {
  font: 16px Roboto3;
  padding: 0px 65px;
  line-height: 27px;
}

.faixa-4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: rgb(39, 245, 206);
  padding: 130px 50px;
}

.f4-descricao {
  padding: 50px 0px;
  font: 13px Roboto3;
  width: 700px;
}

.f4-pessoa {
  font: 16px Roboto3;
}

.faixa-5 {
  padding: 120px 260px;
  background-color: rgb(238, 238, 238);
}

.f5-titulo {
  color: #842ae3;
  font: 42px Roboto1;
  text-align: center;
}

.f5-descricao {
  font: 18px Roboto3;
  text-align: center;
  padding: 30px 0px 120px 0px;
}

.f5-outros-textos {
  width: 780px;
}

.f5-subtitulo {
  color: #842ae3;
  font: 22px Roboto1;
  padding: 30px 0px;
}

.f5-subdescricao {
  font: 15px Roboto3;
  line-height: 33px;
  padding-bottom: 40px;
}

.faixa-6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 0px 30px 0px;
}

.f6-contato-titulo {
  color: #842ae3;
  font: 40px Roboto1;
  padding-top: 60px;
}

.f6-imputs-email-nome {
  display: flex;
  flex-direction: row;
  padding: 10px 0px 6px 0px;
  width: 920px;
}

.f6-imputs-email-nome input {
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 2px solid black;
  outline: none;
  font: 16px Roboto3;
  padding: 5px 7px 10px 12px;
  width: 455px;
}

.f6-input-en {
  padding-right: 8px;
}

.f6-input-en input:hover {
  background-color: white;
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
}

.f6-input-subject {
  padding: 6px 0px 10px 0px;
}

.f6-input-subject input {
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 2px solid black;
  outline: none;
  font: 16px Roboto3;
  padding: 10px 2px 10px 12px;
  width: 920px;
}

.f6-input-subject input:hover {
  background-color: white;
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
}

.f6-textarea textarea:hover {
  background-color: white;
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
}

.f6-textarea {
  padding-bottom: 30px;
}

.f6-textarea textarea {
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 2px solid black;
  outline: none;
  padding: 10px 10px;
  height: 100px;
  width: 920px;
  font: 16px Roboto3;
  resize: none;
}

.f6-botao-contact {
  padding-bottom: 60px;
}

.f6-botao-contact button {
  background-color: black;
  color: white;
  outline: none;
  font: 18px Roboto3;
  padding: 10px 430px;
}

.f6-subscribe-titulo {
  color: #842ae3;
  font: 40px Roboto1;
  padding: 80px 0px 120px 0px;
}

.f6-imputs-subscribe {
  display: flex;
  flex-direction: row;
  width: 920px;
  justify-content: space-between;
  align-content: center;
  padding: 40px 0px 130px 0px;
}

.f6-input-subscribe input {
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 2px solid black;
  outline: none;
  font: 16px Roboto3;
  width: 400px;
  padding: 8px 10px;
}

.f6-input-subscribe input:hover {
  background-color: white;
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
}

.f6-botao-subscribe button {
  background-color: black;
  color: white;
  outline: none;
  font: 17px Roboto3;
  padding: 7px 23px;
}

::placeholder {
  color: black;
}

.f6-titulo-informacoes {
  font: 23px Roboto1;
  padding: 30px 0px;
}

.f6-informacoes-item {
  font: 16px Roboto3;
  line-height: 26px;
}

.f6-redes-sociais {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 20px;
}
.f6-rede-logo {
  padding: 0px 4px;
}

.f6-rede-logo img {
  width: 20px;
  height: 20px;
}

.faixa-7 {
  text-align: center;
  padding: 10px 0px;
  background-color: rgb(238, 238, 238);
}

.f7-rodape-texto {
  font: 14px Roboto3;
  line-height: 25px;
}

@font-face {
  font-family: Roboto1;
  src: url("../../assets/fonts/roboto1.woff2");
}

@font-face {
  font-family: Roboto_Bold;
  src: url("../../assets/fonts/roboto2.woff2");
}

@font-face {
  font-family: Roboto3;
  src: url("../../assets/fonts/roboto3.woff");
}

@font-face {
  font-family: Roboto4;
  src: url("../../assets/fonts/roboto4.woff2");
}
```
