### 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;
}
```
{"metaMigratedAt":"2023-06-15T23:34:03.840Z","metaMigratedFrom":"Content","title":"L.P Session One: Recomeçar","breaks":true,"contributors":"[{\"id\":\"d6d60c47-6731-4d86-b7bc-a795347a65ab\",\"add\":15306,\"del\":34}]"}