# HTML
```htmlembedded=
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="../comum/comum.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="faixa1">
<div class="cabecalho">
<div class="cabecalho1">
<div class="cabecalho1-img"> <img src="https://static.wixstatic.com/media/82fcd3_25649baa84044cac93c61723b142c3da~mv2.png/v1/fill/w_80,h_80,al_c,q_85,usm_0.66_1.00_0.01/82fcd3_25649baa84044cac93c61723b142c3da~mv2.webp alt="/> </div>
<div class="cabecalho1-texto"> Moonchain Capital </div>
</div>
<div class="cabecalho2">
<div class="cabecalho-item"> Home </div>
<div class="cabecalho-item"> Services </div>
<div class="cabecalho-item"> FAQ </div>
<div class="cabecalho-item"> Contact </div>
<div class="cabecalho-item"> Subscribe </div>
<div class="cabecalho-logos">
<div class="cabecalho-logo"> <img src="https://static.wixstatic.com/media/0fdef751204647a3bbd7eaa2827ed4f9.png/v1/fill/w_20,h_20,al_c,q_85,usm_0.66_1.00_0.01/Facebook.webp" > </div>
<div class="cabecalho-logo"> <img src="https://static.wixstatic.com/media/c7d035ba85f6486680c2facedecdcf4d.png/v1/fill/w_20,h_20,al_c,q_85,usm_0.66_1.00_0.01/Twitter.webp" > </div>
<div class="cabecalho-logo"> <img src="https://static.wixstatic.com/media/6ea5b4a88f0b4f91945b40499aa0af00.png/v1/fill/w_20,h_20,al_c,q_85,usm_0.66_1.00_0.01/LinkedIn.webp" > </div>
</div>
</div>
</div>
</div>
<div class="faixa2">
<div class="f2-textos">
<div class="f2-titulo"> Cryptocurrency Consulting Services</div>
<div class="f2-desc"> I'm a paragraph. Click here to add your own text and edit me. Let your users get to know you. </div>
<div class="f2-botao"> <button> See Our Services </button> </div>
</div>
<div class="f2-img"> <img src="https://static.wixstatic.com/media/82fcd3_7b36b3badf9f4baea4277340386e3de1~mv2.png/v1/fill/w_873,h_740,fp_0.50_0.50,q_90,usm_0.66_1.00_0.01/82fcd3_7b36b3badf9f4baea4277340386e3de1~mv2.webp"> </div>
</div>
<div class="faixa3">
<div class="f3-texto1"> Our Services </div>
<div class="f3-boxes">
<div class="f3-box">
<div class="f3-box-img"> <img src="https://static.wixstatic.com/media/82fcd3_d6357967f3b3482b839c55056e4af4e0~mv2.png/v1/fill/w_60,h_60,al_c,q_85,usm_0.66_1.00_0.01/82fcd3_d6357967f3b3482b839c55056e4af4e0~mv2.webp"> </div>
<div class="f3-box-titulo"> Coin Acquisition </div>
<div class="f3-box-desc"> 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="f3-box">
<div class="f3-box-img"> <img src="https://static.wixstatic.com/media/82fcd3_cfc5ddcc780a4051b9030c86450120fd~mv2.png/v1/fill/w_60,h_60,al_c,q_85,usm_0.66_1.00_0.01/82fcd3_cfc5ddcc780a4051b9030c86450120fd~mv2.webp"> </div>
<div class="f3-box-titulo"> Currency Mining </div>
<div class="f3-box-desc"> 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="f3-box">
<div class="f3-box-img"> <img src="https://static.wixstatic.com/media/82fcd3_71bbc54fbb994059afcc2ccc7c1fbef0~mv2.png/v1/fill/w_60,h_60,al_c,q_85,usm_0.66_1.00_0.01/82fcd3_71bbc54fbb994059afcc2ccc7c1fbef0~mv2.webp"> </div>
<div class="f3-box-titulo"> Initial Coin Offerings </div>
<div class="f3-box-desc"> 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="f3-box">
<div class="f3-box-img"> <img src="https://static.wixstatic.com/media/82fcd3_134c13e1731a47e7836d24827fbe4340~mv2.png/v1/fill/w_60,h_60,al_c,q_85,usm_0.66_1.00_0.01/82fcd3_134c13e1731a47e7836d24827fbe4340~mv2.webp"> </div>
<div class="f3-box-titulo"> Exchanges </div>
<div class="f3-box-desc"> 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="f3-box">
<div class="f3-box-img"> <img src="https://static.wixstatic.com/media/82fcd3_e59963db04bc48f88e84ad8b20d6b25b~mv2.png/v1/fill/w_60,h_60,al_c,q_85,usm_0.66_1.00_0.01/82fcd3_e59963db04bc48f88e84ad8b20d6b25b~mv2.webp"> </div>
<div class="f3-box-titulo"> Blockchain Tech </div>
<div class="f3-box-desc"> 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="f3-box">
<div class="f3-box-img"> <img src="https://static.wixstatic.com/media/82fcd3_328b0186428c457593d421e9cac07d23~mv2.png/v1/fill/w_60,h_60,al_c,q_85,usm_0.66_1.00_0.01/82fcd3_328b0186428c457593d421e9cac07d23~mv2.webp"> </div>
<div class="f3-box-titulo"> Storing Your Coins </div>
<div class="f3-box-desc"> 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="f3-botao"> <button> Contact Us Today </button> </div>
</div>
<div class="faixa4">
<div class="f4-textos1">
<div class="f4-textos1-titulo"> About Moonchain </div>
<div class="f4-textos1-subtitulo"> Strategic Crypto Consultants Since 2015 </div>
<div class="f4-textos1-desc"> 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="f4-boxes">
<div class="f4-box">
<div class="f4-box-img"> <img src="https://static.wixstatic.com/media/82fcd3_a724a50cbde14d1f9fa961ebf2724b77~mv2_d_1784_1920_s_2.jpg/v1/fill/w_555,h_540,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="f4-box-titulo"> Jordan Foster </div>
<div class="f4-box-desc"> 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="f4-box">
<div class="f4-box-img"> <img src="https://static.wixstatic.com/media/82fcd3_cf7d46e5d21a43d0aeeb64ebb67d772e~mv2_d_1784_1920_s_2.jpg/v1/fill/w_555,h_540,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="f4-box-titulo"> Jesse Dunn </div>
<div class="f4-box-desc"> 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="f4-box">
<div class="f4-box-img"> <img src="https://static.wixstatic.com/media/82fcd3_92d2897de085402d902fbec9bdecf75a~mv2_d_1784_1920_s_2.jpg/v1/fill/w_555,h_540,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="f4-box-titulo"> Calvin Wang </div>
<div class="f4-box-desc"> 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="faixa5">
<div class="f5-textos">
<div class="f5-textos-img"> <img src="https://static.wixstatic.com/media/82fcd3_508cb068659c4e2db53302d7f5317cd6~mv2.png/v1/fill/w_40,h_30,al_c,q_85,usm_0.66_1.00_0.01/82fcd3_508cb068659c4e2db53302d7f5317cd6~mv2.webp"> </div>
<div class="f5-textos-desc"> “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="f5-textos-autor"> Carl Calvert | Joji.set </div>
</div>
</div>
<div class="faixa6">
<div class="FAQ">FAQ</div>
<div class="faq-desc">Below we’ve provided some info on how we work, blockchain technology, Bitcoin, and cryptocurrencies in general.</div>
<div class="f6-boxes">
<div class="f6-box">
<div class="f6-box-titulo">How do I buy cryptocurrency in my country?</div>
<div class="f6-box-desc">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="f6-box">
<div class="f6-box-titulo">Do I have to pay taxes on any profits I make from Bitcoin?</div>
<div class="f6-box-desc">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="f6-box">
<div class="f6-box-titulo">Is it possible to create my own cryptocurrency?</div>
<div class="f6-box-desc">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>
<div class="faixa7">
<div class="f7-contact"> Contact </div>
<div class="f7-botoes">
<div class="f7-botoes-name">
<input type="text" placeholder="Name">
</div>
<div class="f7-botoes-email">
<input type="text" placeholder="Email">
</div>
<div class="f7-botoes-subject">
<input type="text" placeholder="Subject">
</div>
<div class="f7-botoes-textarea">
<textarea placeholder="Type your message here..."></textarea>
</div>
<div class="f7-botoes-submit">
<button> Submit </button>
</div>
</div>
</div>
<div class="faixa8">
<div class="f8-subscribe"> Subscribe to Our Newsletter </div>
<div class="f8-botoes">
<div class="f8-botoes-name">
<input type="text" placeholder="Name">
</div>
<div class="f8-botoes-email">
<input type="text" placeholder="Email Address">
</div>
<div class="f8-botoes-submit">
<button> Submit </button>
</div>
</div>
</div>
<div class="faixa9">
<div class="f9-titulo"> Moonchain Capital </div>
<div class="f9-info"> info@mysite.com </div>
<div class="f9-info"> 123-456-7890 </div>
<div class="f9-info"> 500 Terry Francois Street San Francisco, CA 94158 </div>
<div class="f9-logos">
<div class="f9-logo-item"> <img src="https://static.wixstatic.com/media/0fdef751204647a3bbd7eaa2827ed4f9.png/v1/fill/w_20,h_20,al_c,q_85,usm_0.66_1.00_0.01/Facebook.webp"></div>
<div class="f9-logo-item"> <img src="https://static.wixstatic.com/media/c7d035ba85f6486680c2facedecdcf4d.png/v1/fill/w_20,h_20,al_c,q_85,usm_0.66_1.00_0.01/Twitter.webp"> </div>
<div class="f9-logo-item"> <img src="https://static.wixstatic.com/media/6ea5b4a88f0b4f91945b40499aa0af00.png/v1/fill/w_20,h_20,al_c,q_85,usm_0.66_1.00_0.01/LinkedIn.webp"> </div>
</div>
<div class="f9-gray">
<div class="f9-gray-info"> ©2023 by Moonchain Capital. </div>
<div class="f9-gray-info"> Proudly created with Wix.com </div>
</div>
</div>
</div>
</body>
</html>
```
# CSS
```css=
container {
display: flex;
flex-direction: column;
}
.faixa1 {
display: flex;
flex-direction: column;
}
.cabecalho {
display: flex;
flex-direction: row;
justify-content: space-between;
font: 22px font2;
padding: 30px 75px 25px 80px;
align-items: center;
}
.cabecalho1 {
display: flex;
flex-direction: row;
align-items: center;
}
.cabecalho1-texto {
font: 22px font2;
padding-left: 15px;
padding-bottom: 5px;
}
.cabecalho2 {
display: flex;
flex-direction: row;
}
.cabecalho-item {
font: 14px font3;
padding-left: 10px;
padding: 10px;
color: #181818;
}
.cabecalho-logos {
display: flex;
flex-direction: row;
padding-left: 10px;
}
.cabecalho-logo {
padding: 5px;
}
.faixa2 {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 70px;
}
.f2-textos {
width: 740px;
margin-left: 285px;
}
.f2-titulo {
width: 449px;
font: 50px font2;
color: #842AE3;
line-height: 67px;
}
.f2-desc {
width: 449px;
font: 18px font3;
margin: 29px 0px 60px 0px;
line-height: 31px;
color: #181818;
}
.f2-botao button {
font: 14px font3;
background-color: #842AE3;
padding: 15px 20px;
border-radius: 25px;
color: white;
outline: none;
border: none;
cursor: pointer;
}
.f2-botao button:hover {
background-color: #842AE399;
transition: 0.4s;
}
.f2-img img {
margin-right: 80px;
}
.faixa3 {
display: flex;
background-color: #EEEEEE;
flex-direction: column;
}
.f3-texto1 {
font: 28px font2;
display: flex;
justify-content: center;
color: #842AE3;
margin: 120px 0px 110px 0px;
}
.f3-boxes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin: 10px 100px;
}
.f3-box {
height: 300px;
width: 300px;
margin: 0px 85px 60px 80px;
text-align: center;
}
.f3-box-titulo {
margin: 55px 0px 40px 0px;
font: 20px font3;
color: #842AE3;
}
.f3-box-desc {
font: 14px font3;
color: #181818;
line-height: 25px;
}
.f3-botao {
text-align: center;
margin-top: 50px;
margin-bottom: 120px;
}
.f3-botao button {
font: 14px font3;
background-color: #842AE3;
padding: 15px 20px;
border-radius: 25px;
color: white;
outline: none;
border: none;
cursor: pointer;
}
.f3-botao button:hover {
background-color: #842AE399;
transition: 0.4s;
}
.faixa4 {
padding: 125px 0px;
}
.f4-textos1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.f4-textos1-titulo {
font: 40px font2;
color: #842AE3;
}
.f4-textos1-subtitulo {
font: italic 18px font3;
color: #181818;
margin: 47px 0px 37px 0px;
}
.f4-textos1-desc {
font: 15px font3;
color: #181818;
width: 915px;
text-align: center;
line-height: 28px;
margin-bottom: 88px;
}
.f4-boxes {
display: flex;
flex-direction: row;
justify-content: center;
}
.f4-box {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
align-items: center;
width: 555px;
margin: 0px 20px;
}
.f4-box-titulo {
font: 22px font2;
color: #842AE3;
margin: 55px 0px 35px 0px;
}
.f4-box-desc {
font: 15px font3;
color: #181818;
line-height: 28px;
width: 300px;
}
.faixa5 {
background-color: #27F5CE;
display: flex;
justify-content: center;
padding: 125px 0px 198px 0px;
}
.f5-textos {
width: 780px;
text-align: center;
}
.f5-textos-desc {
font: 14px font3;
margin: 55px 0px 35px 0px;
line-height: 30px;
}
.f5-textos-autor {
font: 15px font3;
}
.faixa6 {
display: flex;
flex-direction: column;
text-align: center;
background-color: #EEEEEE;
padding: 125px 0px 75px 0px;
}
.FAQ {
font: 40px font1;
color: #842AE3;
}
.faq-desc {
font: 18px font3;
color: #181818;
margin: 38px 0px 138px 0px;
}
.f6-boxes {
margin: 0% 0px 0px 25.5%;
}
.f6-box {
width: 778px;
text-align: left;
}
.f6-box-titulo {
font: 22px font2;
color: #842AE3;
}
.f6-box-desc {
font: 15px font3;
color: #181818;
margin: 30px 0px 70px 0px;
line-height: 30px;
}
.faixa7 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0px 50%;
padding: 125px 0px;
}
.f7-contact {
font: 40px font2;
color: #842AE3;
margin-bottom: 5px;
}
.f7-botoes {
display: flex;
flex-wrap: wrap;
}
.f7-botoes-name input {
width: 465px;
height: 42px;
margin-right: 10px;
font: 15px font3;
border: none;
border-bottom: 1px solid black;
padding-left: 15px;
}
.f7-botoes-email input {
width: 465px;
height: 42px;
font: 15px font3;
border: none;
border-bottom: 1px solid black;
padding-left: 15px;
}
.f7-botoes-subject input {
width: 940px;
height: 42px;
font: 15px font3;
border: none;
border-bottom: 1px solid black;
margin: 10px 0px;
padding-left: 15px;
}
.f7-botoes-textarea textarea {
width: 945px;
height: 126px;
border: none;
border-bottom: 1px solid black;
font: 15px font3;
resize: none;
outline: none;
padding: 15px 3px 3px 15px;
margin-bottom: 30px;
}
.f7-botoes-submit button {
width: 940px;
height: 50px;
background-color: #181818;
cursor: pointer;
color: white;
outline: none;
border:none;
font: 18px font3;
}
.f7-botoes-submit button:hover {
background-color: #18181899;
transition: 0.4s;
}
.faixa8 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.f8-subscribe {
font: 40px font2;
color: #842AE3;
margin-top: 38px;
}
.f8-botoes {
display: flex;
flex-direction: row;
margin: 160px 0px 0px 0px;
padding-bottom: 125px;
}
.f8-botoes-name input {
width: 409px;
height: 35px;
margin-right: 9px;
font: 15px font3;
border: none;
border-bottom: 1px solid black;
padding-left: 8px;
padding-bottom: 3px;
}
.f8-botoes-email input {
width: 409px;
height: 35px;
margin-right: 10px;
font: 15px font3;
border: none;
border-bottom: 1px solid black;
padding-left: 8px;
padding-bottom: 3px;
}
input:hover {
border: 1px solid black;
}
textarea:hover {
border: 1px solid black;
}
.f8-botoes-submit button {
width: 102px;
height: 35px;
font: 18px font3;
background-color: #181818;
border: none;
color: white;
}
.faixa9 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.f9-titulo {
font: 22px font2;
margin: 43px 0px 30px 0px;
color: #181818;
}
.f9-info {
font: 15px font3;
color: #181818;
margin-bottom: 11px;
}
.f9-logos {
display: flex;
flex-direction: row;
margin: 15px 0px 23px;
}
.f9-logo-item {
padding: 5px;
}
.f9-gray {
width: 100%;
background-color: #EEEEEE;
padding: 8px 0px 14px 0px;
text-align: center;
}
.f9-gray-info {
font: 14px font3;
color: #181818;
padding: 5px;
}
```
# CSS-2
```css=
@font-face {
font-family: font1;
src: url("../../assets/fonts/font1.woff2");
}
@font-face {
font-family: font2;
src: url("../../assets/fonts/font2.woff2");
}
@font-face {
font-family: font3;
src: url("../../assets/fonts/font3.woff");
}
body {
margin: 0px;
}
* { box-sizing: border-box; }
```
# Link do codesandbox
https://codesandbox.io/embed/admiring-leavitt-2v4ki?file=/src/pages/home/index.css&codemirror=1
{"metaMigratedAt":"2023-06-15T23:40:05.831Z","metaMigratedFrom":"Content","title":"HTML","breaks":true,"contributors":"[{\"id\":\"4c424d8f-f274-42df-9402-f6014d7ba673\",\"add\":19861,\"del\":0}]"}