# 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;
}
````
{"metaMigratedAt":"2023-06-15T23:40:29.070Z","metaMigratedFrom":"Content","title":"Session One | Web","breaks":true,"contributors":"[{\"id\":\"1ac86fe9-aad5-49b4-b562-fee077af4a56\",\"add\":4697,\"del\":2}]"}