---
# System prepended metadata

title: Session One | Web

---

# Session One | Web
autor: Alan Oliveira Rocha Santiago
turma: info b

[toc]

## Site Moonchain Capital

>https://www.wix.com/demone2/cryptocurrency-consu

>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" />
    <link rel="stylesheet" href="font.css" />
    <link rel="stylesheet" href="comum.css" />
    <title>Home | Moonchain Capital</title>
  </head>
  <body>
    <div class="conteiner">
      <div class="faixa1">
        <div class="cabecalho">
          <div class="logo-cf1">
              <img src="https://static.wixstatic.com/media/82fcd3_25649baa84044cac93c61723b142c3da~mv2.png/v1/fill/w_72,h_72,al_c,q_85,usm_0.66_1.00_0.01/82fcd3_25649baa84044cac93c61723b142c3da~mv2.webp"/>
            <div>Moonchain Capital</div>
          </div>
          <div class="menu-cf1">
            <div class="menu-item-cf1"> Home </div>
            <div class="menu-item-cf1"> Services </div>
            <div class="menu-item-cf1"> FAQ </div>
            <div class="menu-item-cf1"> Contacts </div>
            <div class="menu-item-cf1"> Subscribe </div>
            <div class="menu-item-cf1"><img src="Facebook-imagem.webp"/></div>
            <div class="menu-item-cf1"><img src="Twitter-imagem.webp"/></div>
            <div class="menu-item-cf1"><img src="LinkedIn-imagem.webp"/></div>
          </div>
        </div>
        <div class="conteudo-faixa1">
          <div class="conteudo-texto-f1">
            <div class="conteudo-titulo-f1">Cryptocurrency Consulting Services</div>
            <div class="conteudo-descricao-f1">
                I'm a paragraph. Click here to add your own text and edit me. Let your users get to know you.</div>
            <div class="conteudo-botao-f1"><button>See Our Services</a></div>
          </div>
          <div class="conteudo-imagem-f1">
            <img src="imagem-site-cripto.webp"/>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
```
> index.css
````css=
.conteiner{
  display: flex;
  flex-direction: column;

  font-family: roboto-300;
  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;
}

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

.logo-cf1 div{
  font-family: roboto-700;
  font-size: 20px;
}

.logo-cf1 img{
  margin-right: 10px;
  height: 70px;
  width: 70px;
}

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

.menu-item-cf1{
  margin: 10px;
  cursor: pointer;
}

.menu-item-cf1 img{
  height: 20px;
  width: 20px;
}

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

  margin: 0px 40px 0px 100px;
}

.conteudo-texto-f1{
  display: flex;
  flex-direction: column;

  width: 500px;
}

.conteudo-titulo-f1{
  font: 45px roboto-700;
  color: #842AE3;
  line-height: 60px;
}

.conteudo-descricao-f1{
  max-width: 450px;
  font: 18px roboto-300;
  line-height: 30px;
  
  margin: 40px 0px 60px 0px;
}

.conteudo-botao-f1 button{
  color:white;
  padding: 15px 20px;
  border-radius: 25px;
  background-color: #842AE3;
  cursor: pointer;
  outline: none;
  border: 1px solid#842AE3;
}

button:hover {
  background-color: #b074ec;
  border: 1px solid#b074ec;
  transition: 0.3s;
}

.conteudo-imagem-f1{
  padding-right: -100px;
  max-width: 600px;
}
````
>comum.css

````css=
@font-face {
  font-family: roboto-100;
  src: url('roboto-v27-latin-100.woff');
}

@font-face {
  font-family: roboto-100italic;
  src: url('roboto-v27-latin-100italic.woff');
}

@font-face {
  font-family: roboto-300;
  src: url('roboto-v27-latin-300.woff');
}

@font-face {
  font-family: roboto-300italic;
  src: url('roboto-v27-latin-300italic.woff');
}

@font-face {
  font-family: roboto-500;
  src: url('roboto-v27-latin-500.woff');
}

@font-face {
  font-family: roboto-500italic;
  src: url('roboto-v27-latin-500italic.woff');
}

@font-face {
  font-family: roboto-700;
  src: url('roboto-v27-latin-700.woff');
}

@font-face {
  font-family: roboto-700italic;
  src: url('roboto-v27-latin-700italic.woff');
}

@font-face {
  font-family: roboto-900;
  src: url('roboto-v27-latin-900.woff');
}

@font-face {
  font-family: roboto-900italic;
  src: url('roboto-v27-latin-900.woff');
}

body {
  margin: 0px;
}

* { box-sizing: border-box; }

a, a:link, a:hover, a:visited {
  text-decoration: none;
}
````

