# Session One: Recomeçar | Web
autor : Isabea Silva Sousa
[toc]
## HTML
> 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="faixa-1.css" />
<link rel="stylesheet" href="faixa-2.css" />
<link rel="stylesheet" href="faixa-3.css" />
<link rel="stylesheet" href="faixa-4.css" />
<link rel="stylesheet" href="faixa-5.css" />
<link rel="stylesheet" href="faixa-6.css" />
<link rel="stylesheet" href="faixa-7.css" />
<title>Cripto moeda</title>
</head>
<body>
<div class="container-cripto_moeda">
<div class="faixa1">
<div class="f1-cabecalho">
<div class="f1-esquerda">
<div class="f1-logo">
<img
src="../../assets/images/logo-cripto-f1.webp"
alt="Moonchain Capital"
/>
</div>
<div class="f1-logo_text">Moonchain Capital</div>
</div>
<div class="f1-direita">
<div class="f1-palavras">
<div class="f1-home">Home</div>
<div class="f1-services">Services</div>
<div class="f1-faq">FAQ</div>
<div class="f1-contact">Contact</div>
<div class="f1-subscribe">Subscribe</div>
</div>
<div class="f1-logos">
<div class="f1-face">
<img
src="../../assets/images/Facebook-f1.webp"
alt="Facebook"
/>
</div>
<div class="f1-twitter">
<img src="../../assets/images/Twitter-f1.webp" alt="Twitter" />
</div>
<div class="f1-linkedin">
<img
src="../../assets/images/LinkedIn-f1.webp"
alt="linkedin"
/>
</div>
</div>
</div>
</div>
<div class="f1-centro">
<div class="f1-textos">
<div class="f1-titulo">
Cryptocurrency <br />
Consulting Services
</div>
<div class="f1-text">
I'm a paragraph. Click here to add your own text and edit<br />
me. Let your users get to know you.
</div>
<div class="f1-botao">
<button>
See Our Services
</button>
</div>
</div>
<div class="f1-imagem">
<img
src="../../assets/images/cripto-moeda_f1.webp"
alt="Cover.png"
/>
</div>
</div>
<div class="f1-botao_fixed">
<button>
<svg
viewBox="0 0 23 23.36"
fill="currentColor"
width="26px"
height="26px"
>
<path
d="M22.81,9.41a11.49,11.49,0,1,0-7.47,12.93.47.47,0,0,1,.3,0l3.05,1a1,1,0,0,0,1.3-1V19.42a.48.48,0,0,1,.13-.32,11.63,11.63,0,0,0,1.3-1.79A11.47,11.47,0,0,0,22.81,9.41ZM7.5,12.5a1,1,0,1,1,1-1A1,1,0,0,1,7.5,12.5Zm4,0a1,1,0,1,1,1-1A1,1,0,0,1,11.5,12.5Zm4,0a1,1,0,1,1,1-1A1,1,0,0,1,15.5,12.5Z"
></path>
</svg>
</button>
</div>
</div>
<div class="faixa-2">
<div class="f2-faixa1">
<div class="f2-titulo">Our Services</div>
</div>
<div class="f2-faixa2">
<div class="f2-box">
<div class="f2-logo">
<img
src="../../assets/images/logo1-f2.webp"
alt="Coin Acquisition"
/>
</div>
<div class="f2-subtitulo">Coin Acquisition</div>
<div class="f2-text">
I'm a paragraph. Click here to add your own text<br />
and edit me. I’m a great place for you to tell a<br />
story and let your users know a little more about <br />you.
</div>
</div>
<div class="f2-box">
<div class="f2-logo">
<img
src="../../assets/images/logo2-f2.webp"
alt="Currency Mining"
/>
</div>
<div class="f2-subtitulo">Currency Mining</div>
<div class="f2-text">
I'm a paragraph. Click here to add your own text<br />
and edit me. I’m a great place for you to tell a<br />
story and let your users know a little more about <br />you.
</div>
</div>
<div class="f2-box">
<div class="f2-logo">
<img
src="../../assets/images/logo3-f2.webp"
alt="
Initial Coin Offerings"
/>
</div>
<div class="f2-subtitulo">
Initial Coin Offerings
</div>
<div class="f2-text">
I'm a paragraph. Click here to add your own text<br />
and edit me. I’m a great place for you to tell a<br />
story and let your users know a little more about <br />you.
</div>
</div>
<div class="f2-box">
<div class="f2-logo">
<img src="../../assets/images/logo4-f2.webp" alt="Exchanges" />
</div>
<div class="f2-subtitulo">Exchanges</div>
<div class="f2-text">
I'm a paragraph. Click here to add your own text<br />
and edit me. I’m a great place for you to tell a<br />
story and let your users know a little more about <br />you.
</div>
</div>
<div class="f2-box">
<div class="f2-logo">
<img
src="../../assets/images/logo5-f2.webp"
alt="Blockchain Tech"
/>
</div>
<div class="f2-subtitulo">Blockchain Tech</div>
<div class="f2-text">
I'm a paragraph. Click here to add your own text<br />
and edit me. I’m a great place for you to tell a<br />
story and let your users know a little more about <br />you.
</div>
</div>
<div class="f2-box">
<div class="f2-logo">
<img
src="../../assets/images/logo6-f2.webp"
alt="Storing Your Coins"
/>
</div>
<div class="f2-subtitulo">Storing Your Coins</div>
<div class="f2-text">
I'm a paragraph. Click here to add your own text<br />
and edit me. I’m a great place for you to tell a<br />
story and let your users know a little more about <br />you.
</div>
</div>
</div>
<div class="f2-faixa3">
<div class="f2-botao"><button>Contact Us Today</button></div>
</div>
</div>
<div class="faixa-3">
<div class="f3-faixa1">
<div class="f3-titulo">About Moonchain</div>
<div class="f3-subtitulo">
Strategic Crypto Consultants Since 2015
</div>
<div class="f3-texto">
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 <br />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="f3-faixa2">
<div class="f3-box">
<div class="f3-imagem">
<img
src="../../assets/images/jordan-f3.webp"
alt="Jordan Foster"
/>
</div>
<div class="f3-nome">Jordan Foster</div>
<div class="f3-text">
I'm a paragraph. Click here to add your own<br />
text and edit me. Let your users get to know<br />
you.
</div>
</div>
<div class="f3-box">
<div class="f3-imagem">
<img src="../../assets/images/jesse-f3.webp" alt="Jesse Dunn" />
</div>
<div class="f3-nome">Jesse Dunn</div>
<div class="f3-text">
I'm a paragraph. Click here to add your own<br />
text and edit me. Let your users get to know<br />
you.
</div>
</div>
<div class="f3-box">
<div class="f3-imagem">
<img src="../../assets/images/calvin-f3.webp" alt="Calvin Wang" />
</div>
<div class="f3-nome">Calvin Wang</div>
<div class="f3-text">
I'm a paragraph. Click here to add your own<br />
text and edit me. Let your users get to know<br />
you.
</div>
</div>
</div>
</div>
<div class="faixa-4">
<div class="f4-faixa">
<div class="f4-aspas">
<img src="../../assets/images/aspas-f4.webp" alt="Aspas" />
</div>
<div class="f4-setinha_esquerda">
<svg viewBox="0 0 21 41">
<path d="M20.3 40.8L0 20.5 20.3.2l.7.7L1.3 20.5 21 40.1z"></path>
</svg>
</div>
<div class="f4-texto">
“I'm a testimonial. Click to edit me and add text that says
something nice about you and your services. Let your customers<br />
review you and tell their friends how great you are.”
</div>
<div class="f4-nome">Rodger Horrell | CPT</div>
<div class="f4-setinha_direita">
<svg viewBox="0 0 21 41">
<path d="M20.3 40.8L0 20.5 20.3.2l.7.7L1.3 20.5 21 40.1z"></path>
</svg>
</div>
<div class="f4-bolinhas">
<div class="f4-bolinha"></div>
<div class="f4-bolinha"></div>
<div class="f4-circulo"></div>
</div>
</div>
</div>
<div class="faixa-5">
<div class="f5-titulo">FAQ</div>
<br />
<div class="f5-subtitulo">
Below we’ve provided some info on how we work, blockchain technology,
Bitcoin, and cryptocurrencies in general.
</div>
<div class="f5-tit">How do I buy cryptocurrency in my country?</div>
<div class="f5-text">
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<br />
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<br />
more about you.
</div>
<div class="f5-tit">
Do I have to pay taxes on any profits I make from Bitcoin?
</div>
<div class="f5-text">
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<br />
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<br />
more about you.
</div>
<div class="f5-tit">
Is it possible to create my own cryptocurrency?
</div>
<div class="f5-text">
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<br />
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<br />
more about you.
</div>
</div>
<div class="faixa-6">
<div class="f6-titulo">Contact</div>
<div class="f6-botoes">
<div class="f6-coluna">
<div class="f6-name">Name</div>
<div class="f6-entrar">Email</div>
</div>
<div class="f6-sub">Subject</div>
<div class="f6-type">Type your message here...</div>
<div class="f6-botao"><button>Submit</button></div>
</div>
</div>
<div class="faixa-7">
<div class="f7-titulo">Subscribe to Our Newsletter</div>
<div class="f7-botoes">
<div class="f7-name">Name</div>
<div class="f7-email">Email Address</div>
<div class="f7-sub"><button>Submit</button></div>
</div>
<div class="f7-inferior">
<br />
<div class="f7-subtitulo">Moonchain Capital</div>
<div class="f7-endereco">
info@mysite.com<br />
123-456-7890<br />
500 Terry Francois Street San Francisco, CA 94158
</div>
<div class="f7-icons">
<div class="f7-face">
<img src="../../assets/images/Facebook-f1.webp" alt="Facebook" />
</div>
<div class="f7-twitter">
<img src="../../assets/images/Twitter-f1.webp" alt="Twitter" />
</div>
<div class="f7-linkedin">
<img src="../../assets/images/LinkedIn-f1.webp" alt="linkedin" />
</div>
</div>
</div>
<div class="f7-rodape">
©2023 by Moonchain Capital.<br />
Proudly created with Wix.com
</div>
</div>
</div>
</body>
</html>
```
## CSS
- **FAIXA 1**
```
body {
margin: 0px;
background-color: white;
}
.faixa1 {
padding: 0px 70px;
}
.f1-cabecalho {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.f1-esquerda {
display: flex !important;
flex-direction: row !important;
justify-content: space-between;
}
.f1-logo {
padding: 0px;
padding-top: 30px;
}
.f1-logo_text {
color: #181818;
font-size: 22px;
font-weight: bold;
padding-top: 55px;
padding-left: 15px;
}
.f1-direita {
display: flex !important;
flex-direction: row !important;
padding-top: 60px;
}
.f1-palavras {
display: flex !important;
flex-direction: row !important;
padding-right: 10px;
}
.f1-home {
color: #181818;
font-size: 14px;
padding: 0px 10px;
}
.f1-services {
color: #181818;
font-size: 14px;
padding: 0px 10px;
}
.f1-faq {
color: #181818;
font-size: 14px;
padding: 0px 10px;
}
.f1-contact {
color: #181818;
font-size: 14px;
padding: 0px 10px;
}
.f1-subscribe {
color: #181818;
font-size: 14px;
padding: 0px 10px;
}
.f1-logos {
display: flex !important;
flex-direction: row !important;
justify-content: space-between;
width: 80px;
}
.f1-centro {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 30px;
}
.f1-textos {
width: 595px;
padding-left: 90px;
}
.f1-titulo {
color: #842ae3;
font-size: 50px;
font-weight: bold;
padding-bottom: 30px;
padding-top: 190px;
}
.f1-text {
color: #181818;
font-size: 18px;
padding-bottom: 70px;
}
.f1-botao button {
color: #ffffff;
font-size: 14px;
font-weight: normal !important;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial,
sans-serif;
background-color: #842ae3 !important;
border: 0px;
border-radius: 30px;
padding: 10px 12px;
width: 150px;
height: 45px;
}
.f1-botao button:hover {
background-color: #be8ff0 !important;
border-color: #be8ff0 !important;
}
.f1-imagem {
width: 595px;
}
.f1-botao_fixed button {
color: #ffffff;
background-color: #842ae3 !important;
border: 0px;
border-radius: 44px;
transition: box-shadow 0.3s;
padding: 11px;
width: 60px;
height: 60px;
position: fixed;
margin-left: 1200px;
top: 88%;
width: 4.5em;
}
.f1-botao_fixed button:hover {
box-shadow: 0 0 10px #b178ed;
}
```
- **FAIXA 2**
```
body {
margin: 0px !important;
}
.faixa-2 {
background-color: #eeeeee;
height: 1240px;
}
.f2-faixa1 {
text-align: center !important;
padding-top: 110px;
}
.f2-titulo {
color: #842ae3;
font-size: 28px;
font-weight: bold;
margin-bottom: 90px;
}
.f2-faixa2 {
display: flex;
flex-wrap: wrap;
align-items: center;
text-align: center;
padding: 50px 60px 50px 60px;
}
.f2-box {
text-align: center !important;
}
.f2-logo {
margin-bottom: 40px;
}
.f2-subtitulo {
color: #842ae3;
font-size: 20px;
margin-bottom: 35px;
width: 380px;
}
.f2-text {
color: #181818;
font-size: 14px;
line-height: 1.7;
padding-bottom: 90px;
}
.f2-faixa3 {
text-align: center !important;
margin-top: 40px;
}
.f2-botao button {
color: #ffffff;
font-size: 14px;
font-weight: normal !important;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial,
sans-serif;
background-color: #842ae3 !important;
border: 0px;
border-radius: 30px;
padding: 10px 12px;
width: 150px;
height: 45px;
}
.f2-botao button:hover {
background-color: #be8ff0 !important;
border-color: #be8ff0 !important;
}
```
- **FAIXA 3**
```
.faixa-3 {
padding-top: 80px;
height: 1200px;
background-color: #ffffff;
}
.f3-faixa1 {
text-align: center !important;
}
.f3-titulo {
color: #842ae3;
font-size: 40px;
font-weight: bold;
margin-top: 0px;
line-height: 2.1;
}
.f3-subtitulo {
color: #181818;
font-size: 18px;
font-style: italic;
line-height: 5;
}
.f3-texto {
color: #181818;
font-size: 15px;
line-height: 1.7;
padding-bottom: 90px;
}
.f3-faixa2 {
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: 0px 35px;
}
.f3-box {
text-align: center !important;
}
.f3-nome {
color: #842ae3;
font-size: 22px;
font-weight: bold;
margin-top: 7px;
line-height: 5.1;
}
.f3-text {
color: #181818;
font-size: 15px;
line-height: 2.1;
}
```
- **FAIXA 4**
```
body {
margin: 0px;
}
.faixa-4 {
background-color: rgb(39, 245, 206);
text-align: center !important;
height: 510px;
}
.f4-faixa {
height: 280px;
}
.f4-aspas {
padding-top: 115px;
}
.f4-setinha_esquerda {
height: 29px;
width: 15px;
margin-left: 80px;
padding-top: 60px;
}
.f4-texto {
color: #181818;
font-size: 14px;
line-height: 1.8;
margin-bottom: 40px;
}
.f4-nome {
color: #181818;
font-size: 15px;
}
.f4-setinha_direita {
height: 29px;
width: 15px;
margin-left: 1250px;
padding-bottom: 80px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
top: 0px;
}
.f4-bolinhas {
display: flex;
flex-direction: row;
align-items: center !important;
margin-left: 650px;
width: 100px;
}
.f4-bolinha {
background-color: #181818 !important;
border-radius: 50%;
padding: 0.2px;
margin: 2px 7.5px;
width: 6px;
height: 6px;
}
.f4-circulo {
background-color: rgb(39, 245, 206) !important;
border: 2px solid #181818;
border-radius: 50%;
padding: 0.1px;
margin: 0px 7.5px;
width: 6px;
height: 6px;
}
```
- **FAIXA 5**
```
body {
margin: 0px;
}
.faixa-5 {
background-color: #eeeeee;
padding-bottom: 30px;
}
.f5-titulo {
color: #842ae3;
font-size: 40px;
font-weight: bold;
padding-top: 100px;
padding-bottom: 30px;
text-align: center !important;
}
.f5-subtitulo {
color: #181818;
font-size: 18px;
text-align: center !important;
padding-bottom: 120px;
}
.f5-tit {
color: #842ae3;
font-size: 22px;
font-weight: bold;
padding-bottom: 30px;
padding-left: 100px;
margin-left: 120px;
}
.f5-text {
color: #181818;
font-size: 15px;
line-height: 2;
padding-bottom: 90px;
padding-left: 100px;
margin-left: 120px;
}
```
- **FAIXA 6**
```
.faixa-6 {
background-color: white;
}
.f6-titulo {
color: #8421e3;
font-size: 40px;
font-weight: bold;
text-align: center !important;
padding-top: 110px;
}
.f6-botoes {
padding-left: 200px;
}
.f6-coluna {
display: flex;
flex-direction: row;
}
.f6-name {
color: #181818;
font-size: 16px;
background-color: #ffffff00;
padding: 13px 3px 3px 12px;
border-bottom: 1px solid #181818;
height: 25px;
width: 450px;
}
.f6-name:hover {
border-left: 1px solid #181818 !important;
border-top: 1px solid #181818;
border-right: 1px solid #181818;
}
.f6-entrar {
color: #181818;
font-size: 16px;
background-color: #ffffff00;
padding: 13px 3px 3px 12px;
margin-left: 12px;
border-bottom: 1px solid #181818;
height: 25px;
width: 450px;
}
.f6-entrar:hover {
border-left: 1px solid #181818 !important;
border-top: 1px solid #181818;
border-right: 1px solid #181818;
}
.f6-sub {
color: #181818;
font-size: 16px;
background-color: #ffffff00;
padding: 13px 3px 3px 12px;
border-bottom: 1px solid #181818;
margin-top: 10px;
height: 25px;
width: 925px;
}
.f6-sub:hover {
border-left: 1px solid #181818 !important;
border-top: 1px solid #181818;
border-right: 1px solid #181818;
}
.f6-type {
color: #181818;
font-size: 16px;
background-color: #ffffff00;
padding: 13px 3px 3px 12px;
border-bottom: 1px solid #181818;
margin-top: 10px;
height: 109px;
width: 925px;
}
.f6-type:hover {
border-left: 1px solid #181818 !important;
border-top: 1px solid #181818;
border-right: 1px solid #181818;
}
.f6-botao button {
color: #ffffff;
font-size: 16px;
font-weight: bold;
background-color: #181818 !important;
border: 0px;
border-radius: 0px;
padding: 14px 25px;
margin: 40px 0px 0px;
width: 940px;
height: 50px;
}
.f6-botao button:hover {
background-color: #737373 !important;
border-color: #737373 !important;
}
```
- **FAIXA 7**
```
body {
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
.faixa-7 {
padding-top: 110px;
}
.f7-titulo {
color: #8421e3;
font-size: 40px;
font-weight: bold;
text-align: center !important;
padding-top: 40px;
padding-bottom: 150px;
}
.f7-botoes {
display: flex;
flex-direction: row;
padding-left: 220px;
}
.f7-name {
color: #181818;
font-size: 16px;
background-color: #ffffff00;
padding: 10px 3px 3px 8px;
border-bottom: 1px solid #181818;
height: 22px;
width: 398px;
}
.f7-name:hover {
border-left: 1px solid #181818 !important;
border-top: 1px solid #181818;
border-right: 1px solid #181818;
}
.f7-email {
color: #181818;
font-size: 16px;
background-color: #ffffff00;
padding: 10px 3px 3px 8px;
margin-left: 10px;
border-bottom: 1px solid #181818;
height: 22px;
width: 398px;
}
.f7-email:hover {
border-left: 1px solid #181818 !important;
border-top: 1px solid #181818;
border-right: 1px solid #181818;
}
.f7-sub button {
color: #ffffff;
font-size: 16px;
font-weight: normal !important;
background-color: #181818 !important;
border: 0px;
border-radius: 0px;
padding: 0px 25px;
margin-left: 10px;
width: 102px;
height: 35px;
}
.f7-sub button:hover {
background-color: #737373 !important;
border-color: #737373 !important;
}
.f7-inferior {
text-align: center !important;
margin-top: 120px;
}
.f7-subtitulo {
color: #181818;
font-size: 22px;
font-weight: bold;
line-height: 4;
}
.f7-endereco {
color: #181818;
font-size: 15px;
line-height: 1.9;
padding-bottom: 30px;
}
.f7-icons {
display: flex;
flex-direction: row;
padding-left: 640px;
text-align: center !important;
padding-bottom: 30px;
}
.f7-rodape {
text-align: center !important;
color: #181818;
background-color: #eeeeee;
font-size: 14px;
line-height: 1.5;
padding-top: 15px;
height: 50px;
}
```
- **FONTE CSS**
```
@font-face {
font-family: font-1;
src: url(font1.woff2);
}
@font-face {
font-family: font-2;
src: url(font2.woff2);
}
@font-face {
font-family: font-3;
src: url(font3.woff2);
}
@font-face {
font-family: font-4;
src: url(font4.woff2);
}
```
{"metaMigratedAt":"2023-06-16T03:50:52.075Z","metaMigratedFrom":"Content","title":"Session One: Recomeçar | Web","breaks":true,"contributors":"[{\"id\":\"efa8ac71-fa69-4ab5-8a89-20016d037e45\",\"add\":23912,\"del\":11}]"}