# Session Recomeçar
autor: Guilherme Oliveira Verissimo
turma: InfoC
número: 21
[toc]
https://k6kf1.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" />
<link rel="stylesheet" href="index.css" />
<title>Home | Moonchain Capital</title>
</head>
<body>
<div class="Container-Moonchain">
<div class="faixa-1">
<div class="cabecalho">
<div class="logo-icon">
<img class="logo" src="../../assets/images/logo.webp"/>
<div class="texto-logo">Moonchain Capital</div>
</div>
<div class="links-cabecalho">
<div class="textos-links">
<div class="link">Home</div>
<div class="link">Services</div>
<div class="link">FAQ</div>
<div class="link">Contact</div>
<div class="link">Subscribe</div>
</div>
<div class="icons-links">
<img src="../../assets/images/facebook.webp"/>
<img src="../../assets/images/twitter.webp"/>
<img src="../../assets/images/linkedn.webp"/>
</div>
</div>
</div>
<div class="conteudo">
<div class="textos-conteudo">
<div class="titulo-faixa-1">Cryptocurrency <br> Consulting Services</div>
<div class="descricao-faixa-1">
I'm a paragraph. Click here to add your own text and edit <br> me. Let
your users get to know you.
</div>
<button class="botao-faixa-1">See Our Services</button>
</div>
<img src="../../assets/images/imagem.webp"/>
</div>
</div>
<div class="faixa-2">
<div class="titulo-faixa-2"> Our Services </div>
<div class="conteudo-faixa-2">
<div class="box-esquerda">
<div class="box-faixa-2">
<img src="../../assets/images/coin.webp"/>
<div class="titulo-box"> Coin Acquisition </div>
<div class="texto-box"> 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="box-faixa-2">
<img src="../../assets/images/exchanges.webp"/>
<div class="titulo-box"> Exchanges </div>
<div class="texto-box"> 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="box-meio">
<div class="box-faixa-2">
<img src="../../assets/images/mining.webp"/>
<div class="titulo-box"> Currency Mining </div>
<div class="texto-box"> 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="box-faixa-2">
<img src="../../assets/images/block.webp"/>
<div class="titulo-box"> Blockchain Tech </div>
<div class="texto-box"> 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="box-direita">
<div class="box-faixa-2">
<img src="../../assets/images/initial.webp"/>
<div class="titulo-box"> Initial Coin Offerings </div>
<div class="texto-box"> 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="box-faixa-2">
<img src="../../assets/images/storing.webp"/>
<div class="titulo-box"> Storing Your Coins </div>
<div class="texto-box"> 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>
<button class="botao-faixa-2"> Contact Us Today </button>
</div>
</div>
<div class="faixa-3">
<div class="textos-faixa-3">
<div class="titulo-faixa-3"> About Moonchain </div>
<div class="sibtitulo-faixa-3"> Strategic Crypto Consultants Since 2015 </div>
<div class="texto-faixa-3"> 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="conteudo-faixa-3">
<div class="box-esquerda">
<div class="box-faixa-3">
<div class="faixa2-imagem-1">
<img src="../../assets/images/jordan.webp"/>
</div>
<div class="faixa2-imagem-2">
<img src="../../assets/images/Jordan2.webp"/>
</div>
<div class="titulo-box-3"> Jordan Foster </div>
<div class="texto-box-3"> 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 class="box-meio">
<div class="box-faixa-3">
<div class="faixa2-imagem-1">
<img src="../../assets/images/jesse.webp"/>
</div>
<div class="faixa2-imagem-2">
<img src="../../assets/images/Jesse2.webp"/>
</div>
<div class="titulo-box-3"> Jesse Dunn </div>
<div class="texto-box-3"> 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 class="box-direita">
<div class="box-faixa-3">
<div class="faixa2-imagem-1">
<img src="../../assets/images/calvin.webp"/>
</div>
<div class="faixa2-imagem-2">
<img src="../../assets/images/Calvin2.webp"/>
</div>
<div class="titulo-box-3"> Calvin Wang </div>
<div class="texto-box-3"> 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>
<div class="faixa-4">
<div class="conteudo-faixa-4">
<img class="icon-faixa-4" src="../../assets/images/aspas.webp"/>
<div class="texto-faixa-4"> “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="texto-rodape"> Carl Calvert | Joji.set </div>
</div>
</div>
<div class="faixa-5">
<div class="conteudo-faixa-5">
<div class="top-faixa-5">
<div class="titulo-faixa-5"> FAQ </div>
<div class="descricao-faixa-5"> Below we’ve provided some info on how we work, blockchain technology, Bitcoin, and cryptocurrencies in general. </div>
</div>
<div class="perguntas">
<div class="perguntas-faixa-5">
<div class="texto-1-faixa-5"> How do I buy cryptocurrency in my country? </div>
<div class="texto-2-faixa-5"> 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 <br> 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 <br> more about you. </div>
</div>
<div class="perguntas-faixa-5">
<div class="texto-1-faixa-5"> Do I have to pay taxes on any profits I make from Bitcoin? </div>
<div class="texto-2-faixa-5"> 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 <br> 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 <br> more about you. </div>
</div>
<div class="perguntas-faixa-5">
<div class="texto-1-faixa-5"> Is it possible to create my own cryptocurrency? </div>
<div class="texto-2-faixa-5"> 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 <br> 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 <br> more about you. </div>
</div>
</div>
</div>
</div>
<div class="faixa-6">
<div class="conteudo-daixa-6">
<div class="titulo-faixa-6"> Contact </div>
<div class="inputs">
<div class="inputs-top-faixa-6">
<input placeholder="Name"/>
<input class="input-email" placeholder="Email"/>
</div>
<div class="inputs-bottom-faixa-6">
<input placeholder="Subject"/>
<textarea placeholder="Type your message here"></textarea>
<div class="botao-config">
<button> Submit </button>
</div>
</div>
</div>
</div>
</div>
<div class="faixa-7">
<div class="titulo-faixa-7"> Subscribe to Our Newsletter </div>
<div class="inputs/botao">
<div class="inputs-top-faixa-7">
<input placeholder="Name"/>
<input class="input-email" placeholder="Email Address"/>
<div class="botao-config">
<button class="botao-faixa-7"> Submit </button>
</div>
</div>
</div>
<div class="textos-faixa-7">
<div class="subtitulo-faixa-7"> Moonchain Capital </div>
<div class="informacoes"> info@mysite.com <br> 123-456-7890 <br> 500 Terry Francois Street San Francisco, CA 94158 </div>
</div>
<div class="icons-faixa-7">
<img src="../../assets/images/facebook.webp"/>
<img src="../../assets/images/twitter.webp"/>
<img src="../../assets/images/linkedn.webp"/>
</div>
</div>
<div class="mini-faixa-8">
<div class="texto-faixa-8"> ©2023 by Moonchain Capital. <br> Proudly created with Wix.com </div>
</div>
</div>
</body>
</html>
```
```css=
@font-face {
font-family: a;
src: url('../../assets/fonts/a.woff2');
}
@font-face {
font-family: b;
src: url('../../assets/fonts/b.woff');
}
@font-face {
font-family: c;
src: url('../../assets/fonts/c.woff2');
}
@font-face {
font-family: d;
src: url('../../assets/fonts/d.woff2');
}
.cabecalho {
display: flex;
justify-content: space-between;
margin: 30px 70px;
}
.logo-icon {
display: flex;
flex-direction: row;
}
.texto-logo {
margin-top: 27px;
margin-left: 19px;
font-size: 22px;
font-family: a;
color: #181818;
}
.links-cabecalho {
margin-right: 10px;
display: flex;
flex-direction: row;
}
.textos-links, .icons-links {
margin-top: 27px;
}
.textos-links {
display: flex;
flex-direction: row;
}
.link {
margin: 0px 10px;
font-family: b;
font-size: 14px;
color: #2d2d2d;
}
.icons-links img {
margin-left: 2px;
margin-right: 2px;
}
.icons-links {
margin-top: 25px;
}
.conteudo {
display: flex;
justify-content: space-evenly;
margin-left: 40px;
font-family: b;
}
.textos-conteudo {
margin-top: 205px;
}
.titulo-faixa-1 {
font-family: a;
font-size: 50px;
color: #842ae3;
}
.descricao-faixa-1 {
font-family: b;
margin-top: 30px;
font-size: 18px;
color: #181818;
}
.conteudo button {
margin-top: 51px;
background-color: #842ae3;
border: none;
font-size: 14px;
border-radius: 22px;
padding: 15px 20px;
color: white;
}
/*faixa-2*/
.faixa-2 {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 145px;
padding-top: 120px;
background-color: #eeeeee;
width: 1580px;
height: 1090px;
margin-left: -5px;
}
.titulo-faixa-2 {
font-size: 28px;
font-family: a;
color: #842ae3;
}
.conteudo-faixa-2 {
display: flex;
flex-direction: row;
margin-top: 110px;
}
.box-faixa-2 {
text-align: center;
margin-left: 51px;
margin-right: 51px;
margin-bottom: 73px;
}
.titulo-box {
font-size: 20px;
margin-top: 60px;
color: #842ae3;
font-family: b;
}
.texto-box {
font-size: 14px;
margin-top: 40px;
line-height: 25px;
color: #181818;
font-family: b;
}
.faixa-2 button {
margin-top: 51px;
background-color: #842ae3;
border: none;
font-size: 14px;
border-radius: 22px;
padding: 15px 20px;
color: white;
}
.faixa2-imagem-2 {
display: none;
}
/*faixa-3*/
.faixa-3 {
margin-top: 120px;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
}
.titulo-faixa-3 {
font-size: 40px;
font-family: a;
color: #842ae3;
}
.sibtitulo-faixa-3 {
margin-top: 39px;
font-size: 18px;
color: #181818;
font-style: italic;
font-family: b;
}
.texto-faixa-3 {
font-size: 15px;
line-Height: 28px;
color: #181818;
margin-top: 35px;
font-family: b;
}
.conteudo-faixa-3 {
display: flex;
flex-direction: row;
text-align: center;
margin-top: 100px;
}
.box-faixa-3 {
margin-left: 20px;
margin-right: 20px;
}
.titulo-box-3 {
color:#842ae3;
font-size: 22px;
font-family: a;
margin-top: 50px;
}
.texto-box-3 {
font-size: 15px;
line-Height: 28px;
margin-top: 35px;
font-family: b;
color: #181818;
}
/*faixa-4*/
.faixa-4 {
margin-top: 160px;
text-align: center;
font-family: b;
background-color: #27f5ce;
width: 1580px;
height: 528px;
margin-left: -5px;
}
.conteudo-faixa-4 img {
margin-top: 148px;
}
.conteudo-faixa-4 {
margin-right: 4px;
}
.texto-faixa-4 {
margin-top: 70px;
line-height: 25px;
color: #181818;
font-size: 14px;
}
.texto-rodape {
margin-top: 40px;
color: #181818;
font-size: 15px;
}
/*faixa-5*/
.faixa-5 {
background-color: #eeeeee;
width: 1580px;
height: 1090px;
display: flex;
flex-direction: row;
justify-content: center;
margin-left: -5px;
}
.titulo-faixa-5 {
font-size: 40px;
color: #842ae3;
font-family: c;
padding-top: 135px;
}
.top-faixa-5 {
text-align: center;
}
.descricao-faixa-5 {
font-size: 18px;
color: #181818;
font-family: b;
margin-top: 35px;
}
.perguntas {
margin-top: 130px;
margin-left: -21;
}
.texto-1-faixa-5 {
font-size: 22px;
color: #842ae3;
font-family: a;
margin-bottom: 42px;
}
.texto-2-faixa-5 {
line-height: 28px;
font-size: 15px;
color: #181818;
font-family: b;
margin-bottom: 68px;
}
/*faixa-6*/
.faixa-6 {
display: flex;
justify-content: center;
}
.titulo-faixa-6 {
font-size: 40px;
color: #842ae3;
font-family: a;
margin-top: 120px;
text-align: center;
}
.inputs-top-faixa-6 input {
border-top: 0px;
border-right: 0px;
border-left: 0px;
border-bottom: 1px solid black;
width: 465px;
height: 42;
font-size: 15px;
}
.inputs-bottom-faixa-6 input {
border-top: 0px;
border-right: 0px;
border-left: 0px;
border-bottom: 1px solid black;
width: 940px;
height: 42;
font-size: 15px;
margin-top: 10px;
}
.input-email {
margin-left: 6px;
}
.inputs-bottom-faixa-6 {
display: flex;
flex-direction: column;
}
.inputs-bottom-faixa-6 button{
width: 940px;
height: 50;
border: none;
background-color: #181818;
color: white;
font-family: b;
font-size: 18px;
margin-top: 40px;
}
textarea {
border-top: 0px;
border-right: 0px;
border-left: 0px;
border-bottom: 1px solid black;
width: 940px;
height: 126px;
resize: none;
font-size: 15px;
font-family: b;
color: #181818;
margin-top: 23px;
}
::-webkit-input-placeholder {
color: #181818;
}
/*faixa-7*/
.faixa-7 {
text-align: center;
}
.titulo-faixa-7 {
color: #842ae3;
font-size: 40px;
font-family: a;
margin-top: 150px;
}
.inputs-top-faixa-7 input {
border-top: 0px;
border-right: 0px;
border-left: 0px;
border-bottom: 1px solid black;
width: 409px;
height: 35;
font-size: 15px;
margin-top: 160px;
}
.faixa-7 button {
background-color: #181818;
color: white;
font-family: b;
font-size: 18px;
border: none;
padding: 7px 23px;
}
.subtitulo-faixa-7 {
font-size: 22px;
color: #181818;
font-family: a;
margin-top: 150px;
}
.informacoes {
font-size: 15px;
font-family: b;
color: #181818;
line-Height: 28px;
margin-top: 28px;
}
.icons-faixa-7 {
margin-top: 27px;
}
/*faixa-8*/
.mini-faixa-8 {
background-color:#eeeeee;
width: 1580px;
height: 70px;
margin-left: -5px;
}
.texto-faixa-8 {
padding-top: 7px;
font-size: 15px;
font-family: b;
color: #181818;
line-Height: 28px;
margin-top: 28px;
text-align: center;
}
```
{"metaMigratedAt":"2023-06-15T23:34:06.549Z","metaMigratedFrom":"Content","title":"Session Recomeçar","breaks":true,"contributors":"[{\"id\":\"31e7052c-d777-4fb0-b189-63fab945e035\",\"add\":37610,\"del\":36871}]"}