---
# System prepended metadata

title: session two | línguagem de programação | 2°bimestre

---

# session two | línguagem de programação | 2°bimestre
**Nome** Kevin Ribeiro de Andrade
**Número** 27
**turma** INFO A



**Ainda estou acabando as faixas**


## HTML 

```htmlembedded=
<!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">
    <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"> <b> Moonchain Capital </b></div>
          </div>
          <div class="cabecalho2"> 
<div class = "menu">
            <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>
            <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="f1-textos">
          <div class="f1-titulo"><b> Cryptocurrency Consulting Services </b></div>
          <div class="f1-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="f1-botao"> <a href = "https://www.wix.com/demone2/cryptocurrency-consu"> See Our Services </a> </div>
        </div>
        <div class="f1-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>

    </body>
</html>
```

## CSS

```css=
.container {
  display: flex;
  flex-direction: column;
  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: center;
  }
  
  .cabecalho1 {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  
  .cabecalho1-img {

  }
  
  .cabecalho1-img {
  width: 80px;
  height: 80px;
  margin-right: 10 px;
  }
  
  
  .cabecalho1-texto {
  
  
  font-weight: bold;
  font-size: 22px;
  }
  
  .cabecalho2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  }

  .menu {
display: flex;
flex-direction: row;
  }
  

  .cabecalho-item {
  font-size: 14px;
  padding: 10px;
    cursor: pointer;
  }

  
  .cabecalho-logos {
    display: flex;
    flex-direction: row;
    align-items: center;

flex-grow: 1;
  }
  
  .cabecalho-logo {
   
    
    padding: 10px;
    cursor: pointer;
  }
  .faixa2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  
    margin: 0px 40px 0px 100px;
  }
  
  .f1-textos {
  padding: 0px 10px 0px 10px;
  width: 500px;
  
  
  }
  
  .f1-titulo { 
    font-size: 52px;
    color: #842AE3;
  
    line-height: 70px;
  }
  
  .f1-desc {
  font-size: 18px;
  font-weight: bold;
  line-height: 30px;
    
    margin: 40px 0px 60px 0px;
    width: 400px;
  }
  
  .f1-botao {
  font-size: 18px;
  
  }
  
  .f1-botao a {
  
    color: #ffffff;
    background-color: #842AE3;
    border-radius: 25px;
    padding: 15px 20px;
    margin-top: 15px;
    cursor: pointer;
  
    text-decoration: none;
  
  }
  
  a: :hover {
  bsckground-color:  #b074ec;
  transition: 0.3s;
  
  }
  .f1-img {
margin-left: -55px;
  }
  .f1.img img {
  
   width: auto;
  height: 740px;
  }
  
  @media  (max-width: 1024px) {
.cabecalho, .cabecalho1, .cabecalho2, .menu,  .faixa2 {
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;

padding: 0px;
margin: 0px;
width: 100%;
}

.faixa1 {
padding: 2em;
}
.menu{
  display: none;
}

.cabecalho-logos {
margin-top: 2em;
margin-bottom: 2em;
}

.cabecalho-logo {
width: 1,5em;
height: auto;
}

.f1-titulo {
  font: 2em;
  line-height: 1.5em;
  
  }
  
  .f1-desc {
  font-size: 1.2em;
  margin:  1em 0px 1em 0px;

  padding-left: 65px;
  }

  .f1-botao {
padding-top: 20px;
  }

.f1-img img {
width: 100%;
height: auto;

margin: none;
}


  }
```