---
# System prepended metadata

title: Linguagem Web

---

# Linguagem Web 

[toc]



### HTML Home | Moonchain Capital

````csharp=

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../comum/comum.css">
    <link rel="stylesheet" href="index.css">
    <title> Home|Moonchain Capital</title>
  </head>
  <body>


  <div claas = "conteiner-faixa1">

   <div class = "Faixa1">
    <div class = "cabecalho">
      <div class = "logo"> <img src = "../../assets/Images/Seta.webp"/> 
        <div> Moonchain Capital </div> 
      </div>

      <div class = "Menu-Banana">
        <div class = "Banana"> Home      </div>
        <div class = "Banana"> Services  </div>
        <div class = "Banana"> FAQ       </div>
        <div class = "Banana"> Contact   </div>
        <div class = "Banana"> Subscribe </div>
        <div class = "Banana"> <img src = "../../assets/Images/Facebook.webp"/> </div>
        <div class = "Banana"> <img src = "../../assets/Images/Twitter.webp"/> </div>
        <div class = "Banana"> <img src = "../../assets/Images/Linked.webp"/> </div>
      </div> 
    </div>
    </div>



  <div class = "Conteudo">
      <div class = "conteudo-textos">
        <div class = "titulo-Texto">Cryptocurrency Consulting Services </div>
        <div class = "texto1"> I'm a paragraph. Click here to add your own text and edit me. Let your users get to know you. </div>
         <div class="botão-faixa1">
          <div class = "meu-botão"> <a href = "#"> See Our Services </a> </div>
      </div>
    </div>
    <div class = "imagem-texto"><img src = "../../assets/Images/Imagen.webp"/> </div>
  </div> 


  
<div class="faixa2">

<div class="titulo-faixa2"> Our Services </div>

  <div class=""> 





      <div class="Bloco1"> 

      </div>

        <div class="Bloco2"> 

        </div>

          <div class="Bloco3"> 

          </div>

            <div class="Bloco4">
               </div>

                <div class="Bloco5"> 

                </div>


                
                  <div class="Bloco6"> 

                  </div>
                    

    </div>



</div>



</div> 





  </body>
</html>

````

## CSS Moonchain Capital

````csharp=

.conteiner-faixa1 {
display: flex; 
flex-direction: column; 

font-family: Font4; 
font-size: 14px; 
  
}

.Faixa1{
display: flex; 
flex-direction: column; 

padding: 30px 70px 150px 70px

}

.cabecalho{
display: flex; 
flex-direction: row;
 
justify-content: space-between; 
align-items: cernter; 

}


.logo {
display: flex; 
flex-direction: row; 
align-items: center; 
}



.logo div {
font: 22px Font1; 
}



.logo img {
height: 80px;
width: 80px; 

margin-right: 15px; 
}


.Menu-Banana{
display:flex; 
flex-direction: row; 

align-items: center; 
}

.Banana{
padding: 10px; 
cursor:pointer; 
}






.Conteudo{
display: flex; 
flex-direction: row; 
justify-content: space-between; 
align-items: center; 

padding-left: 50px; 
margin: 0px 50px 0px 100px ; 
}

.conteudo-textos {
display: felx; 
flex-direction: column; 

}


.titulo-Texto{
font: 50px Font1; 
color: #842Ae3; 
line-height: 70px; 
margin: 50px; 


}


.texto1{
font: 18px Font4; 
line-height: 30px;

margin: 50px; 
}

.botão-faixa{
display: flex;  
flex-direction: row;


}

.meu-botão{
  align-items: center;
  margin: 0px 50px;
  padding: 10px 15px 10px 15px ;  
 
  width: 110px; 
  color: white;
  background-color: #842Ae3; 
  border-radius: 50px;   

}


a{
  align-items:center;
  font: 10px Font4; 
  text-decoration: none;
  color: white;
}
``````


## CSS Comum 


```csharp= 
@font-face {
font-family: "Font1"; 
src: url('../../assets/fonts/Font1\ \(1\).woff2'); 
}

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

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

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


body {
  margin: 0px; 
}


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



Obs: Prof vou terminar o resto do site e depois vou anexar tudo, estou enviado para não entregar com muito atraso!!!!!