---
# System prepended metadata

title: 'L.P Session One: Recomeçar'

---

### INFO B - Caroline Campos Lima, 04

# L.P Session One: Recomeçar

[toc]

## Site Oficial 
https://www.wix.com/demone2/cryptocurrency-consu

## Site CodeSandbox
https://codesandbox.io/s/session-one-recomecar-bbj9c

> 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"/>
    <title>Home Moonchain Capital</title>
  </head>
  <body>
    <div class="container">
      
    <div class="faixa1">
      <div class="f1-cabecalho">
        <div class="f1-logo">
          <img src="../../assets/images/Logo.webp">
          <div>Moonchain Capital</div>
        </div>
        <div class="f1-menu">
          <div class="f1-menu-item">Home</div>
          <div class="f1-menu-item">Services</div>
          <div class="f1-menu-item">FAQ</div>
          <div class="f1-menu-item">Contact</div>
          <div class="f1-menu-item">Subscribe</div>
          <div class="f1-menu-item"><img src="../../assets/images/Facebook.webp"></div>
          <div class="f1-menu-item"><img src="../../assets/images/Twitter.webp"></div>
          <div class="f1-menu-item"><img src="../../assets/images/LinkedIn.webp"></div>
        </div>
      </div>
      <div class="f1-conteudo">
        <div class="f1-parte1">
          <div class="f1-titulo">Cryptocurrency Consulting Services</div>
          <div class="f1-texto">I'm a paragraph. Click here to add your own text and edit me. Let your users get to know you.</div>
          <button class="f1-botao">See Our Services</button>
        </div>
        <div class="f1-imagem">
        <img src="../../assets/images/Criptomoeda.webp">
        </div>
      </div>
    </div>

    <div class="faixa2">
      <div class="f2-titulo">Our Services</div>
      <div class="f2-box">
        <div class="f2-box-item"> 
          <img src="../../assets/images/Moedas.webp">
          <div class="f2-conteudo">Coin Acquisition</div>
          <div class="f2-descricao">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-item"> 
          <img src="../../assets/images/Mineração.webp">
          <div class="f2-conteudo">Currency Mining</div>
          <div class="f2-descricao">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-item"> 
          <img src="../../assets/images/Ofertas.webp">
          <div class="f2-conteudo">Initial Coin Offerings</div>
          <div class="f2-descricao">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-item"> 
          <img src="../../assets/images/Intercâmbios.webp">
          <div class="f2-conteudo">Exchanges</div>
          <div class="f2-descricao">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-item"> 
          <img src="../../assets/images/Blockchain.webp">
          <div class="f2-conteudo">Blockchain Tech</div>
          <div class="f2-descricao">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-item"> 
          <img src="../../assets/images/Armazenamento.webp">
          <div class="f2-conteudo">Storing Your Coins</div>
          <div class="f2-descricao">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>
      <button class="f2-botao">Contact Us Today</button>
    </div>

    <div class="faixa3">
      <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 class="f3-conteudo">
        <div class="f3-box-item">
          <img src="../../assets/images/JordanFoster.webp">
          <div class="f3-nome">Jordan Foster</div>
          <div class="f3-descricao">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-item">
          <img src="../../assets/images/JesseDunn.webp">
          <div class="f3-nome">Jesse Dunn</div>
          <div class="f3-descricao">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-item">
          <img src="../../assets/images/CalvinWang.webp">
          <div class="f3-nome">Calvin Wang</div>
          <div class="f3-descricao">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="f4-conteudo">
        <img src="../../assets/images/Aspas.webp">
        <div class="f4-texto1">“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-texto2">Carl Calvert | Joji.set</div>
        <div class="f4-bolinha">
          <li> <li> <li>
        </div>
      </div>
    </div>

    <div class="faixa5">
      <div class="f5-titulo">FAQ</div>
      <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-conteudo">
        <div class="f5-pergunta">How do I buy cryptocurrency in my country?</div>
        <div class="f5-resposta">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="f5-conteudo">
        <div class="f5-pergunta">Do I have to pay taxes on any profits I make from Bitcoin?</div>
        <div class="f5-resposta">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="f5-conteudo">
        <div class="f5-pergunta">Is it possible to create my own cryptocurrency?</div>
        <div class="f5-resposta">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 class="faixa6">
      <div class="f6-titulo">Contact</div>
      <div class="f6-conteudo">
        <div class="f6-box">
          <input type="text" placeholder="Name"/>
          <input type="text" placeholder="Email"/>
        </div>
        <div class="f6-box">
          <input type="text" placeholder="Subject"/>
        </div>
        <div class="f6-box">
          <textarea type="text" placeholder="Type your menssage here..." cols="30" rows="10"></textarea>
        </div>  
        <button class="f6-botao">Submit</button>
      </div>
    </div>

    <div class="faixa7">
        <div class="f7-titulo">Subscribe to Our Newsletter</div>
        <div class="f7-conteudo">
          <div class="f7-box">
            <input type="text" placeholder="Name"/>
            <input type="text" placeholder="Email Address"/>
            <button class="f7-botao">Submit</button>
          </div>
        </div>
    </div>

    <div class="faixa8"> 
      <div class="f8-titulo">Moonchain Capital</div>
      <div class="f8-conteudo"> 
        <div>info@mysite.com</div>
        <div>123-456-7890</div>
        <div>500 Terry Francois Street San Francisco, CA 94158</div>
      </div>
      <img src="../../assets/images/Facebook.webp">
      <img src="../../assets/images/Twitter.webp">
      <img src="../../assets/images/LinkedIn.webp">
    </div>

    <div class="faixa9">
      <div class="f9-conteudo">
        <div>©2023 by Moonchain Capital.</div>
        <div>Proudly created with Wix.com</div>
      </div>
    </div>

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

> index.css
```css=
.container {
  display: flex;
  flex-direction: column;
}

.faixa1 {
  display: flex;
  flex-direction: column;
  padding: 30px 65px;
}

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

.f1-logo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font: 22px Font3;
}

.f1-logo img {
  padding: 0px 15px;
}

.f1-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  font: 14px Font2;
}

.f1-menu-item {
  align-items: center;
  padding: 10px;
}

.f1-menu-item img {
  width: 20px;
  height: auto;
}

.f1-conteudo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0px 0px 220px;
}

.f1-parte1 {
  display: flex;
  flex-direction: column;
  padding: 0px 200px 0px 0px;
}

.f1-titulo {
  font: 50px Font3;
  color: #842ae3;
}

.f1-texto {
  font: 18px font2;
  color: #181818;
  padding: 40px 0px 60px 0px;
  line-height: 30px;
}

.f1-botao {
  font: 14px font2;
  border-radius: 25px;
  border: none;
  color: #ffffff;
  background-color: #842ae3;
  width: 150px;
  padding: 15px 0px;
}

.faixa2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #eeeeee;
}

.f2-titulo {
  font: 28px Font3;
  color: #842ae3;
  padding-top: 120px;
  padding-bottom: 70px;
}

.f2-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
  padding: 20px 20px 20px 20px;
  width: 71.1%;
}

.f2-box-item {
  height: auto;
  text-align: center;
  padding: 40px 70px;
}

.f2-box-item img {
  margin-bottom: 30px;
}

.f2-conteudo {
  font: 20px Font2;
  color: #842ae3;
  padding: 40px;
}

.f2-descricao {
  font: 14px Font2;
  color: #181818;
  line-height: 25px;
}

.f2-botao {
  font: 14px font2;
  border-radius: 25px;
  border: none;
  color: #ffffff;
  background-color: #842ae3;
  width: 150px;
  padding: 15px 0px;
  margin-bottom: 100px;
}

.faixa3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.f3-titulo {
  font: 40px Font3;
  color: #842ae3;
  padding: 130px 0px 50px;
}

.f3-subtitulo {
  font: 18px Font2;
  color: #181818;
  font-style: oblique;
  padding: 0px 0px 40px;
}

.f3-texto {
  font: 15px font2;
  line-height: 27px;
}

.f3-conteudo {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
  padding: 70px 20px 170px 20px;
}

.f3-box-item {
  justify-content: center;
  text-align: center;
  padding: 0px 20px;
}

.f3-nome {
  font: 22px Font4;
  color: #842ae3;
  padding: 60px 0px 30px;
}

.f3-descricao {
  font: 15px Font2;
  line-height: 28px;
}

.faixa4 {
  background-color: #27f5ce;
  display: flex;
  justify-content: center;
  padding-top: 140px;
  padding-bottom: 60px;
}

.f4-conteudo {
  text-align: center;
  padding: 0px 420px;
}

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

.f4-texto1 {
  font: 14px Font2;
  line-height: 25px;
  padding: 80px 150px 40px;
}

.f4-texto2 {
  font: 15px Font2;
  line-height: 25px;
}

.f4-bolinha {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 80px; 
}

.faixa5 {
  background-color: #eeeeee;
  padding-top: 120px;
}

.f5-titulo {
  align-items: center;
  text-align: center;
  font: 40px Font4;
  color: #842ae3;
  padding-bottom: 40px;
}

.f5-subtitulo {
  align-items: center;
  text-align: center;
  font: 18px Font2;
  color: #181818;
  padding-bottom: 140px;
}

.f5-conteudo {
  align-items: center;
  padding: 0px 480px;
}

.f5-pergunta {
  font: 22px Font3;
  color: #842ae3;
  padding-bottom: 35px;
}

.f5-resposta {
  font: 15px Font2;
  color: #181818;
  line-height: 28px;
  padding-bottom: 70px;
}

.faixa6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 120px;
}

.f6-titulo {
  font: 40px Font3;
  color: #842ae3;
}

.f6-conteudo {
  width: 100%;
  padding: 0px 490px;
}

.f6-box {
  display: flex;
  flex-direction: row;
  padding: 3px;
}

.f6-box input, textarea {
  font: 15px Font2;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: solid 1px;
  width: 100%;
  padding: 10px;
  margin: 0px 5px;
}

.f6-botao {
  font: 18px font2;
  border: none;
  color: #ffffff;
  background-color: #181818;
  width: 100%;
  padding: 15px 0px;
  margin-top: 30px;
}

.faixa7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 120px;
}

.f7-titulo {
  font: 40px Font3;
  color: #842ae3;
  padding: 170px;
}

.f7-conteudo {
  width: 100%;
  padding: 0px 490px;
}

.f7-box {
  display: flex;
  flex-direction: row;
  padding: 3px;
}

.f7-box input {
  font: 15px Font2;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: solid 1px;
  width: 100%;
  height: 40px;
  padding: 10px;
  margin: 0px 5px;
}

.f7-botao {
  font: 18px font2;
  border: none;
  color: #ffffff;
  background-color: #181818;
  width: 230px;
  margin: 0px 5px;
}

.faixa8 {
  text-align: center;
  padding-bottom: 30px;
}

.f8-titulo {
  font: 22px Font3;
  color: #181818;
}

.f8-conteudo {
  font: 15px Font2;
  color: #181818;
  line-height: 28px;
  padding: 25px;
}

.faixa8 img {
  padding: 0px 3px;
}

.faixa9 {
  text-align: center;
  background-color: #eeeeee;
  padding: 10px;
}

.f9-conteudo {
  font: 14px Font2;
  color: #181818;
  line-height: 25px;
}
```

> comum.css
```css=
@font-face {
  font-family: Font1;
  src: url("../../assets/fonts/Font1.woff2");
}

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

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

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

body {
  margin: 0px;
}

* {
  box-sizing: border-box;
}
```