---
# System prepended metadata

title: 'Session One: Recomeçar  | Web'

---

# Session One: Recomeçar  | Web

autor : Isabea Silva Sousa

[toc]

## 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="faixa-1.css" />
    <link rel="stylesheet" href="faixa-2.css" />
    <link rel="stylesheet" href="faixa-3.css" />
    <link rel="stylesheet" href="faixa-4.css" />
    <link rel="stylesheet" href="faixa-5.css" />
    <link rel="stylesheet" href="faixa-6.css" />
    <link rel="stylesheet" href="faixa-7.css" />
    <title>Cripto moeda</title>
  </head>
  <body>
    <div class="container-cripto_moeda">
      <div class="faixa1">
        <div class="f1-cabecalho">
          <div class="f1-esquerda">
            <div class="f1-logo">
              <img
                src="../../assets/images/logo-cripto-f1.webp"
                alt="Moonchain Capital"
              />
            </div>
            <div class="f1-logo_text">Moonchain Capital</div>
          </div>

          <div class="f1-direita">
            <div class="f1-palavras">
              <div class="f1-home">Home</div>
              <div class="f1-services">Services</div>
              <div class="f1-faq">FAQ</div>
              <div class="f1-contact">Contact</div>
              <div class="f1-subscribe">Subscribe</div>
            </div>

            <div class="f1-logos">
              <div class="f1-face">
                <img
                  src="../../assets/images/Facebook-f1.webp"
                  alt="Facebook"
                />
              </div>
              <div class="f1-twitter">
                <img src="../../assets/images/Twitter-f1.webp" alt="Twitter" />
              </div>
              <div class="f1-linkedin">
                <img
                  src="../../assets/images/LinkedIn-f1.webp"
                  alt="linkedin"
                />
              </div>
            </div>
          </div>
        </div>

        <div class="f1-centro">
          <div class="f1-textos">
            <div class="f1-titulo">
              Cryptocurrency <br />
              Consulting Services
            </div>
            <div class="f1-text">
              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="f1-botao">
              <button>
                See Our Services
              </button>
            </div>
          </div>
          <div class="f1-imagem">
            <img
              src="../../assets/images/cripto-moeda_f1.webp"
              alt="Cover.png"
            />
          </div>
        </div>
        <div class="f1-botao_fixed">
          <button>
            <svg
              viewBox="0 0 23 23.36"
              fill="currentColor"
              width="26px"
              height="26px"
            >
              <path
                d="M22.81,9.41a11.49,11.49,0,1,0-7.47,12.93.47.47,0,0,1,.3,0l3.05,1a1,1,0,0,0,1.3-1V19.42a.48.48,0,0,1,.13-.32,11.63,11.63,0,0,0,1.3-1.79A11.47,11.47,0,0,0,22.81,9.41ZM7.5,12.5a1,1,0,1,1,1-1A1,1,0,0,1,7.5,12.5Zm4,0a1,1,0,1,1,1-1A1,1,0,0,1,11.5,12.5Zm4,0a1,1,0,1,1,1-1A1,1,0,0,1,15.5,12.5Z"
              ></path>
            </svg>
          </button>
        </div>
      </div>

      <div class="faixa-2">
        <div class="f2-faixa1">
          <div class="f2-titulo">Our Services</div>
        </div>

        <div class="f2-faixa2">
          <div class="f2-box">
            <div class="f2-logo">
              <img
                src="../../assets/images/logo1-f2.webp"
                alt="Coin Acquisition"
              />
            </div>
            <div class="f2-subtitulo">Coin Acquisition</div>
            <div class="f2-text">
              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="f2-box">
            <div class="f2-logo">
              <img
                src="../../assets/images/logo2-f2.webp"
                alt="Currency Mining"
              />
            </div>
            <div class="f2-subtitulo">Currency Mining</div>
            <div class="f2-text">
              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="f2-box">
            <div class="f2-logo">
              <img
                src="../../assets/images/logo3-f2.webp"
                alt="
                      Initial Coin Offerings"
              />
            </div>

            <div class="f2-subtitulo">
              Initial Coin Offerings
            </div>
            <div class="f2-text">
              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="f2-box">
            <div class="f2-logo">
              <img src="../../assets/images/logo4-f2.webp" alt="Exchanges" />
            </div>
            <div class="f2-subtitulo">Exchanges</div>
            <div class="f2-text">
              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="f2-box">
            <div class="f2-logo">
              <img
                src="../../assets/images/logo5-f2.webp"
                alt="Blockchain Tech"
              />
            </div>
            <div class="f2-subtitulo">Blockchain Tech</div>
            <div class="f2-text">
              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="f2-box">
            <div class="f2-logo">
              <img
                src="../../assets/images/logo6-f2.webp"
                alt="Storing Your Coins"
              />
            </div>
            <div class="f2-subtitulo">Storing Your Coins</div>
            <div class="f2-text">
              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="f2-faixa3">
          <div class="f2-botao"><button>Contact Us Today</button></div>
        </div>
      </div>

      <div class="faixa-3">
        <div class="f3-faixa1">
          <div class="f3-titulo">About Moonchain</div>
          <div class="f3-subtitulo">
            Strategic Crypto Consultants Since 2015
          </div>
          <div class="f3-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 <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="f3-faixa2">
          <div class="f3-box">
            <div class="f3-imagem">
              <img
                src="../../assets/images/jordan-f3.webp"
                alt="Jordan Foster"
              />
            </div>
            <div class="f3-nome">Jordan Foster</div>
            <div class="f3-text">
              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="f3-box">
            <div class="f3-imagem">
              <img src="../../assets/images/jesse-f3.webp" alt="Jesse Dunn" />
            </div>
            <div class="f3-nome">Jesse Dunn</div>
            <div class="f3-text">
              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="f3-box">
            <div class="f3-imagem">
              <img src="../../assets/images/calvin-f3.webp" alt="Calvin Wang" />
            </div>
            <div class="f3-nome">Calvin Wang</div>
            <div class="f3-text">
              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="faixa-4">
        <div class="f4-faixa">
          <div class="f4-aspas">
            <img src="../../assets/images/aspas-f4.webp" alt="Aspas" />
          </div>
          <div class="f4-setinha_esquerda">
            <svg viewBox="0 0 21 41">
              <path d="M20.3 40.8L0 20.5 20.3.2l.7.7L1.3 20.5 21 40.1z"></path>
            </svg>
          </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<br />
            review you and tell their friends how great you are.”
          </div>
          <div class="f4-nome">Rodger Horrell | CPT</div>
          <div class="f4-setinha_direita">
            <svg viewBox="0 0 21 41">
              <path d="M20.3 40.8L0 20.5 20.3.2l.7.7L1.3 20.5 21 40.1z"></path>
            </svg>
          </div>
          <div class="f4-bolinhas">
            <div class="f4-bolinha"></div>
            <div class="f4-bolinha"></div>
            <div class="f4-circulo"></div>
          </div>
        </div>
      </div>

      <div class="faixa-5">
        <div class="f5-titulo">FAQ</div>
        <br />
        <div class="f5-subtitulo">
          Below we’ve provided some info on how we work, blockchain technology,
          Bitcoin, and cryptocurrencies in general.
        </div>
        <div class="f5-tit">How do I buy cryptocurrency in my country?</div>
        <div class="f5-text">
          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="f5-tit">
          Do I have to pay taxes on any profits I make from Bitcoin?
        </div>
        <div class="f5-text">
          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="f5-tit">
          Is it possible to create my own cryptocurrency?
        </div>
        <div class="f5-text">
          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 class="faixa-6">
        <div class="f6-titulo">Contact</div>
        <div class="f6-botoes">
          <div class="f6-coluna">
            <div class="f6-name">Name</div>
            <div class="f6-entrar">Email</div>
          </div>
          <div class="f6-sub">Subject</div>
          <div class="f6-type">Type your message here...</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-botoes">
          <div class="f7-name">Name</div>
          <div class="f7-email">Email Address</div>
          <div class="f7-sub"><button>Submit</button></div>
        </div>
        <div class="f7-inferior">
          <br />
          <div class="f7-subtitulo">Moonchain Capital</div>
          <div class="f7-endereco">
            info@mysite.com<br />
            123-456-7890<br />
            500 Terry Francois Street San Francisco, CA 94158
          </div>
          <div class="f7-icons">
            <div class="f7-face">
              <img src="../../assets/images/Facebook-f1.webp" alt="Facebook" />
            </div>
            <div class="f7-twitter">
              <img src="../../assets/images/Twitter-f1.webp" alt="Twitter" />
            </div>
            <div class="f7-linkedin">
              <img src="../../assets/images/LinkedIn-f1.webp" alt="linkedin" />
            </div>
          </div>
        </div>
        <div class="f7-rodape">
          ©2023 by Moonchain Capital.<br />

          Proudly created with Wix.com
        </div>
      </div>
    </div>
  </body>
</html>
```

## CSS

- **FAIXA 1**
```
body {
  margin: 0px;
  background-color: white;
}

.faixa1 {
  padding: 0px 70px;
}

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

  justify-content: space-between;
}

.f1-esquerda {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between;
}

.f1-logo {
  padding: 0px;
  padding-top: 30px;
}

.f1-logo_text {
  color: #181818;
  font-size: 22px;
  font-weight: bold;

  padding-top: 55px;
  padding-left: 15px;
}

.f1-direita {
  display: flex !important;
  flex-direction: row !important;
  padding-top: 60px;
}

.f1-palavras {
  display: flex !important;
  flex-direction: row !important;
  padding-right: 10px;
}

.f1-home {
  color: #181818;
  font-size: 14px;
  padding: 0px 10px;
}

.f1-services {
  color: #181818;
  font-size: 14px;
  padding: 0px 10px;
}

.f1-faq {
  color: #181818;
  font-size: 14px;
  padding: 0px 10px;
}

.f1-contact {
  color: #181818;
  font-size: 14px;
  padding: 0px 10px;
}

.f1-subscribe {
  color: #181818;
  font-size: 14px;
  padding: 0px 10px;
}

.f1-logos {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between;

  width: 80px;
}

.f1-centro {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 30px;
}

.f1-textos {
  width: 595px;
  padding-left: 90px;
}

.f1-titulo {
  color: #842ae3;
  font-size: 50px;
  font-weight: bold;

  padding-bottom: 30px;
  padding-top: 190px;
}

.f1-text {
  color: #181818;
  font-size: 18px;
  padding-bottom: 70px;
}

.f1-botao button {
  color: #ffffff;
  font-size: 14px;
  font-weight: normal !important;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  background-color: #842ae3 !important;
  border: 0px;
  border-radius: 30px;

  padding: 10px 12px;

  width: 150px;
  height: 45px;
}

.f1-botao button:hover {
  background-color: #be8ff0 !important;
  border-color: #be8ff0 !important;
}

.f1-imagem {
  width: 595px;
}

.f1-botao_fixed button {
  color: #ffffff;

  background-color: #842ae3 !important;
  border: 0px;
  border-radius: 44px;
  transition: box-shadow 0.3s;

  padding: 11px;

  width: 60px;
  height: 60px;

  position: fixed;
  margin-left: 1200px;
  top: 88%;
  width: 4.5em;
}

.f1-botao_fixed button:hover {
  box-shadow: 0 0 10px #b178ed;
}
```

- **FAIXA 2** 
```
body {
  margin: 0px !important;
}

.faixa-2 {
  background-color: #eeeeee;
  height: 1240px;
}

.f2-faixa1 {
  text-align: center !important;
  padding-top: 110px;
}

.f2-titulo {
  color: #842ae3;
  font-size: 28px;
  font-weight: bold;

  margin-bottom: 90px;
}

.f2-faixa2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
  padding: 50px 60px 50px 60px;
}

.f2-box {
  text-align: center !important;
}

.f2-logo {
  margin-bottom: 40px;
}

.f2-subtitulo {
  color: #842ae3;
  font-size: 20px;
  margin-bottom: 35px;
  width: 380px;
}

.f2-text {
  color: #181818;
  font-size: 14px;
  line-height: 1.7;
  padding-bottom: 90px;
}

.f2-faixa3 {
  text-align: center !important;
  margin-top: 40px;
}

.f2-botao button {
  color: #ffffff;
  font-size: 14px;
  font-weight: normal !important;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  background-color: #842ae3 !important;
  border: 0px;
  border-radius: 30px;

  padding: 10px 12px;

  width: 150px;
  height: 45px;
}

.f2-botao button:hover {
  background-color: #be8ff0 !important;
  border-color: #be8ff0 !important;
}
```

- **FAIXA 3**
```
.faixa-3 {
  padding-top: 80px;
  height: 1200px;
  background-color: #ffffff;
}

.f3-faixa1 {
  text-align: center !important;
}

.f3-titulo {
  color: #842ae3;
  font-size: 40px;
  font-weight: bold;

  margin-top: 0px;
  line-height: 2.1;
}

.f3-subtitulo {
  color: #181818;
  font-size: 18px;
  font-style: italic;

  line-height: 5;
}

.f3-texto {
  color: #181818;
  font-size: 15px;
  line-height: 1.7;
  padding-bottom: 90px;
}

.f3-faixa2 {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;

  padding: 0px 35px;
}

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

.f3-nome {
  color: #842ae3;
  font-size: 22px;
  font-weight: bold;

  margin-top: 7px;
  line-height: 5.1;
}

.f3-text {
  color: #181818;
  font-size: 15px;
  line-height: 2.1;
}
```

- **FAIXA 4**
```
body {
  margin: 0px;
}

.faixa-4 {
  background-color: rgb(39, 245, 206);
  text-align: center !important;
  height: 510px;
}

.f4-faixa {
  height: 280px;
}

.f4-aspas {
  padding-top: 115px;
}

.f4-setinha_esquerda {
  height: 29px;
  width: 15px;
  margin-left: 80px;
  padding-top: 60px;
}

.f4-texto {
  color: #181818;
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 40px;
}

.f4-nome {
  color: #181818;
  font-size: 15px;
}

.f4-setinha_direita {
  height: 29px;
  width: 15px;
  margin-left: 1250px;
  padding-bottom: 80px;

  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);

  top: 0px;
}

.f4-bolinhas {
  display: flex;
  flex-direction: row;
  align-items: center !important;
  margin-left: 650px;
  width: 100px;
}

.f4-bolinha {
  background-color: #181818 !important;
  border-radius: 50%;
  padding: 0.2px;

  margin: 2px 7.5px;

  width: 6px;
  height: 6px;
}

.f4-circulo {
  background-color: rgb(39, 245, 206) !important;
  border: 2px solid #181818;
  border-radius: 50%;
  padding: 0.1px;

  margin: 0px 7.5px;

  width: 6px;
  height: 6px;
}
```

- **FAIXA 5**
```
body {
  margin: 0px;
}

.faixa-5 {
  background-color: #eeeeee;
  padding-bottom: 30px;
}

.f5-titulo {
  color: #842ae3;
  font-size: 40px;
  font-weight: bold;

  padding-top: 100px;
  padding-bottom: 30px;
  text-align: center !important;
}

.f5-subtitulo {
  color: #181818;
  font-size: 18px;
  text-align: center !important;
  padding-bottom: 120px;
}

.f5-tit {
  color: #842ae3;
  font-size: 22px;
  font-weight: bold;

  padding-bottom: 30px;
  padding-left: 100px;
  margin-left: 120px;
}

.f5-text {
  color: #181818;
  font-size: 15px;
  line-height: 2;
  padding-bottom: 90px;
  padding-left: 100px;
  margin-left: 120px;
}
```

- **FAIXA 6**
```
.faixa-6 {
  background-color: white;
}

.f6-titulo {
  color: #8421e3;
  font-size: 40px;
  font-weight: bold;

  text-align: center !important;
  padding-top: 110px;
}

.f6-botoes {
  padding-left: 200px;
}

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

.f6-name {
  color: #181818;
  font-size: 16px;
  background-color: #ffffff00;
  padding: 13px 3px 3px 12px;
  border-bottom: 1px solid #181818;
  height: 25px;
  width: 450px;
}

.f6-name:hover {
  border-left: 1px solid #181818 !important;
  border-top: 1px solid #181818;
  border-right: 1px solid #181818;
}

.f6-entrar {
  color: #181818;
  font-size: 16px;
  background-color: #ffffff00;

  padding: 13px 3px 3px 12px;
  margin-left: 12px;
  border-bottom: 1px solid #181818;

  height: 25px;
  width: 450px;
}
.f6-entrar:hover {
  border-left: 1px solid #181818 !important;
  border-top: 1px solid #181818;
  border-right: 1px solid #181818;
}

.f6-sub {
  color: #181818;
  font-size: 16px;
  background-color: #ffffff00;
  padding: 13px 3px 3px 12px;
  border-bottom: 1px solid #181818;
  margin-top: 10px;
  height: 25px;
  width: 925px;
}

.f6-sub:hover {
  border-left: 1px solid #181818 !important;
  border-top: 1px solid #181818;
  border-right: 1px solid #181818;
}

.f6-type {
  color: #181818;
  font-size: 16px;
  background-color: #ffffff00;
  padding: 13px 3px 3px 12px;
  border-bottom: 1px solid #181818;
  margin-top: 10px;
  height: 109px;
  width: 925px;
}

.f6-type:hover {
  border-left: 1px solid #181818 !important;
  border-top: 1px solid #181818;
  border-right: 1px solid #181818;
}

.f6-botao button {
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;

  background-color: #181818 !important;
  border: 0px;
  border-radius: 0px;

  padding: 14px 25px;
  margin: 40px 0px 0px;

  width: 940px;
  height: 50px;
}

.f6-botao button:hover {
  background-color: #737373 !important;
  border-color: #737373 !important;
}
```

- **FAIXA 7**
```
body {
  margin: 0px;
  font-family: Arial, Helvetica, sans-serif;
}

.faixa-7 {
  padding-top: 110px;
}

.f7-titulo {
  color: #8421e3;
  font-size: 40px;
  font-weight: bold;

  text-align: center !important;
  padding-top: 40px;
  padding-bottom: 150px;
}

.f7-botoes {
  display: flex;
  flex-direction: row;
  padding-left: 220px;
}

.f7-name {
  color: #181818;
  font-size: 16px;
  background-color: #ffffff00;

  padding: 10px 3px 3px 8px;
  border-bottom: 1px solid #181818;

  height: 22px;
  width: 398px;
}

.f7-name:hover {
  border-left: 1px solid #181818 !important;
  border-top: 1px solid #181818;
  border-right: 1px solid #181818;
}

.f7-email {
  color: #181818;
  font-size: 16px;
  background-color: #ffffff00;

  padding: 10px 3px 3px 8px;
  margin-left: 10px;
  border-bottom: 1px solid #181818;

  height: 22px;
  width: 398px;
}

.f7-email:hover {
  border-left: 1px solid #181818 !important;
  border-top: 1px solid #181818;
  border-right: 1px solid #181818;
}

.f7-sub button {
  color: #ffffff;
  font-size: 16px;
  font-weight: normal !important;

  background-color: #181818 !important;
  border: 0px;
  border-radius: 0px;

  padding: 0px 25px;
  margin-left: 10px;

  width: 102px;
  height: 35px;
}

.f7-sub button:hover {
  background-color: #737373 !important;
  border-color: #737373 !important;
}

.f7-inferior {
  text-align: center !important;
  margin-top: 120px;
}

.f7-subtitulo {
  color: #181818;
  font-size: 22px;
  font-weight: bold;
  line-height: 4;
}

.f7-endereco {
  color: #181818;
  font-size: 15px;
  line-height: 1.9;
  padding-bottom: 30px;
}

.f7-icons {
  display: flex;
  flex-direction: row;

  padding-left: 640px;
  text-align: center !important;
  padding-bottom: 30px;
}

.f7-rodape {
  text-align: center !important;
  color: #181818;
  background-color: #eeeeee;
  font-size: 14px;
  line-height: 1.5;
  padding-top: 15px;

  height: 50px;
}
```

- **FONTE CSS**
```
@font-face {
  font-family: font-1;
  src: url(font1.woff2);
}

@font-face {
  font-family: font-2;
  src: url(font2.woff2);
}

@font-face {
  font-family: font-3;
  src: url(font3.woff2);
}

@font-face {
  font-family: font-4;
  src: url(font4.woff2);
}
```


