# session one | Linguagem de programação
Nome: Gustavo Antônio da Silva Teixeira
Numero:15
Info A
Link do CodeSandbox: https://codesandbox.io/s/winter-fast-82kox?file=/src/pages/home/index.html
## 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" />
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="../comum/comum.css" />
<title>Home | Moonchain Capital</title>
</head>
<body>
<div class="container-site">
<div class="faixa1">
<div class="faixa1-cabecalho">
<div class="faixa1-logo">
<div class="faixa1-logo1"><img src="../../assets/logo.webp" /></div>
<div class="faixa1-title">Moonchain Capital</div>
</div>
<div class="faixa1-menu">
<div class="faixa1-menu-items">Home</div>
<div class="faixa1-menu-items">Services</div>
<div class="faixa1-menu-items">Faq</div>
<div class="faixa1-menu-items">Contact</div>
<div class="faixa1-menu-items">Subscribe</div>
<div class="faixa1-menu-items">
<img src="../../assets/facebook.webp" />
</div>
<div class="faixa1-menu-items">
<img src="../../assets/twt.webp" />
</div>
<div class="faixa1-menu-items">
<img src="../../assets/lin.webp" />
</div>
</div>
</div>
<div class="faixa1-conteudo">
<div class="faixa1-text">
<div class="faixa1-text1">
<div class="faixa1-conteudo-title">
Cryptocurrency Consulting Services
</div>
<div class="faixa1-conteudo-info">
I'm a paragraph. Click here to add your own text and edit me.
Let your users get to know you.
</div>
</div>
<div class="faixa1-botao">
<div class="faixa1-conteudo-botao">
<a href="none">See Our Services</a>
</div>
</div>
</div>
<div class="faixa1-img">
<div class="faixa1-conteudo-img">
<img src="../../assets/faixa1img.webp" />
</div>
</div>
</div>
</div>
<div class="f2">
<div class="f2-titulo">Our Services</div>
<div class="f2-conteudo">
<div class="f2-conteudo1">
<div class="f2-box">
<div class="f2-box-img"><img src="../../assets/pino.webp" /></div>
<div class="f2-box-title">Coin Acquisition</div>
<div class="f2-box-text">
I'm a paragraph. Click here to add your own text and edit me.
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="f2-box">
<div class="f2-box-img">
<img src="../../assets/picareta.webp" />
</div>
<div class="f2-box-title">Currency Mining</div>
<div class="f2-box-text">
I'm a paragraph. Click here to add your own text and edit me.
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="f2-box">
<div class="f2-box-img"><img src="../../assets/wifi.webp" /></div>
<div class="f2-box-title">Initial Coin Offerings</div>
<div class="f2-box-text">
I'm a paragraph. Click here to add your own text and edit me.
I’m a great place for you to tell a story and let your users
know a little more about you.
</div>
</div>
</div>
<div class="f2-conteudo2">
<div class="f2-box">
<div class="f2-box-img">
<img src="../../assets/setas.webp" />
</div>
<div class="f2-box-title">Exchanges</div>
<div class="f2-box-text">
I'm a paragraph. Click here to add your own text and edit me.
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="f2-box">
<div class="f2-box-img">
<img src="../../assets/corrente.webp" />
</div>
<div class="f2-box-title">Blockchain Tech</div>
<div class="f2-box-text">
I'm a paragraph. Click here to add your own text and edit me.
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="f2-box">
<div class="f2-box-img"><img src="../../assets/cubo.webp" /></div>
<div class="f2-box-title">Storing Your Coins</div>
<div class="f2-box-text">
I'm a paragraph. Click here to add your own text and edit me.
I’m a great place for you to tell a story and let your users
know a little more about you.
</div>
</div>
</div>
<div class="f2-botao"><a href="#"> Contact Us Today </a></div>
</div>
</div>
<div class="f3">
<div class="f3-comeco">
<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 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-imagens">
<div class="f3=imagembox">
<div class="f3-imagem">
<img src="../../assets/imagemf31.webp" />
</div>
<div class="f3-box-titulo">Jordan Foster</div>
<div class="f3-box-texto">
I'm a paragraph. Click here to add your own text and edit me. Let
your users get to know you.
</div>
</div>
<div class="f3imagembox">
<div class="f3-imagem">
<img src="../../assets/imagemf32.webp" />
</div>
<div class="f3-box-titulo">Jesse Dunn</div>
<div class="f3-box-texto">
I'm a paragraph. Click here to add your own text and edit me. Let
your users get to know you.
</div>
</div>
<div class="f3-imagembox">
<div class="f3-imagem">
<img src="../../assets/imagemf33.webp" />
</div>
<div class="f3-box-titulo">Jordan Foster</div>
<div class="f3-box-texto">
I'm a paragraph. Click here to add your own text and edit me. Let
your users get to know you.
</div>
</div>
</div>
</div>
<div class="f4">
<div class="f4-logo"><img src="../../assets/logofaixa4.webp" /></div>
<div class="f4-texto1">
“I'm a testimonial. Click to edit me and add text that says something
nice about you and your services. Let your customers review you and
tell their friends how great you are.”
</div>
<div class="f4-texto2">Carl Calvert | Joji.set</div>
</div>
<div class="f5">
<div class="f5-titulo">FAQ</div>
<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-box">
<div class="f5-box-titulo">
How do I buy cryptocurrency in my country?
</div>
<div class="f5-box-info">
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 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="f5-box">
<div class="f5-box-titulo">
Do I have to pay taxes on any profits I make from Bitcoin?
</div>
<div class="f5-box-info">
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 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="f5-box">
<div class="f5-box-titulo">
Is it possible to create my own cryptocurrency?
</div>
<div class="f5-box-info">
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 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>
<div class="f6">
<div class="f6-titulo">Contact</div>
<div class="f6-box">
<div class="f6-form1">
<input type="text" placeholder="Name" />
<input type="text" placeholder="Email" />
</div>
<div class="f6-form2">
<input type="text" placeholder="Subject" />
</div>
<div class="f6-form3">
<textarea placeholder="Type your message here..."></textarea>
</div>
<div class="f6-bot">
<button>Submit</button>
</div>
</div>
</div>
<div class="f7">
<div class="f7-titulo">Subscribe to Our Newsletter</div>
<div class="f7-form">
<input type="text" placeholder="Name" />
<input type="text" placeholder="E-mail adress" />
<button>Submit</button>
</div>
</div>
<div class="f8">
<div class="f8-titulo">
Moonchain Capital
</div>
<div class="f8-contato">
info@mysite.com <br />
123-456-7890 500<br />
Terry Francois Street San Francisco, CA 94158
</div>
<div class="f8-social">
<div class="f8-img"><img src="../../assets/facebook.webp" /></div>
<div class="f8-img2 f8-img"><img src="../../assets/twt.webp" /></div>
<div class="f8-img"><img src="../../assets/lin.webp" /></div>
</div>
<div class="f8-final">
©2023 by Moonchain Capital.<br />
Proudly created with Wix.com
</div>
</div>
</div>
</body>
</html>
```
## Css:
```css=
.container-site {
font-family: font2;
font-size: 14px;
}
.faixa1 {
display: flex;
flex-direction: column;
padding: 40px 70px 150px 70px;
}
.faixa1-cabecalho {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.faixa1-logo {
display: flex;
flex-direction: row;
align-items: center;
}
.faixa1-logo1 {
height: 80px;
width: 80px;
margin-right: 10px;
}
.faixa1-title {
font-family: font1;
font-size: 22px;
}
.faixa1-menu {
display: flex;
flex-direction: row;
}
.faixa1-menu-items {
padding: 10px;
cursor: pointer;
}
.faixa1-menu-items img {
width: 20px;
height: 20px;
}
.faixa1-conteudo {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 10px;
margin: 0px 40px 0px 100px;
}
.faixa1-text1 {
width: 500px;
}
.faixa1-conteudo-title {
font-size: 50px;
color: #842ae3;
font-family: font1;
}
.faixa1-conteudo-info {
font-size: 18px;
font-family: font2;
margin: 40px 0px 60px 0px;
}
.faixa1-conteudo-botao a {
color: white;
background-color: #842ae3;
padding: 15px 25px 15px 25px;
border-radius: 25px;
}
a:hover {
background-color: #b074ec;
transition: 0.3s;
}
.faixa1-conteudo-img img {
width: 680px;
}
.f2 {
text-align: center;
padding: 126px 140px 126px 140px;
background-color: #eeeeee;
}
.f2-titulo {
margin-bottom: 84px;
font-family: font1;
color: #842ae3;
font-size: 28px;
}
.f2-conteudo {
display: flex;
flex-direction: column;
align-items: center;
}
.f2-conteudo1 {
display: flex;
flex-direction: row;
}
.f2-conteudo2 {
display: flex;
flex-direction: row;
}
.f2-box {
width: 307px;
height: 280px;
margin: 42px;
}
.f2-box-img img {
}
.f2-box-title {
margin: 42px 0px;
font-size: 21px;
color: #842ae3;
}
.f2-box-text {
}
.f2-botao a {
background-color: #842ae3;
border-radius: 25px;
padding: 15px 17px;
color: white;
}
a:hover {
background-color: #b074ec;
transition: 0.3s;
}
.f3 {
display: flex;
flex-direction: column;
padding: 150px 85px 150px 85px;
}
.f3-comeco {
display: flex;
flex-direction: column;
align-items: center;
}
.f3-titulo {
font-family: font1;
color: #842ae3;
font-size: 40px;
}
.f3-subtitulo {
margin: 2em;
font-style: italic;
font-size: 1.23em;
}
.f3-texto {
padding: 0px 8em;
font-size: 15px;
line-height: 2em;
text-align: center;
margin-bottom: 4.5em;
}
.f3-imagens {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
}
.f3-imagembox {
width: 300px;
justify-content: center;
align-items: center;
}
.f3-box-titulo {
font: 1.7em font1;
color: #842ae3;
margin: 2.2em 0px;
}
.f3-box-texto {
width: 300px;
}
.f3-imagem img {
width: 300px;
height: auto;
}
.f4 {
display: flex;
flex-direction: column;
align-items: center;
background-color: #27f5ce;
padding: 10em 20em;
line-height: 2em;
}
.f4-texto1 {
margin: 5em 0em;
text-align: center;
max-width: 60em;
}
.f5 {
display: flex;
flex-direction: column;
text-align: center;
padding: 8em 1.5em;
background-color: #eeeeee;
align-items: center;
}
.f5-titulo {
font: 3em font1;
color: #842ae3;
}
.f5-subtitulo {
font-size: 1.3em;
padding: 2em 0em 6em 0em;
}
.f5-box {
max-width: 80em;
margin: 2em 0em;
text-align: left;
}
.f5-box-titulo {
margin-bottom: 3em;
color: #842ae3;
font-family: font1;
font-size: 1.7em;
}
.f5-box-info {
line-height: 2em;
text-align: left;
}
.f6 {
display: flex;
flex-direction: column;
align-items: center;
padding: 8em 1.5em;
}
.f6-titulo {
color: #842ae3;
font-family: font1;
font-size: 3em;
}
.f6-box {
width: 60vw;
}
.f6-form1 {
display: flex;
flex-direction: row;
}
.f6-form2 {
margin: 0.7em 0em;
}
input,
textarea {
font-size: 1.1em;
width: 100%;
margin: 0.2em;
padding: 1em;
border: none;
border-bottom: 1px solid black;
outline: none;
resize: none;
}
input:hover,
textarea:hover {
border: 1px solid black;
}
textarea {
height: 12em;
}
.f6-bot button,
.f7-form button {
background-color: black;
color: white;
font-size: 1.2em;
padding: 1em 0em;
margin-top: 2em;
outline: none;
width: 100%;
transition: 0.3s;
}
.f6-bot button:hover,
.f7-form button:hover {
background-color: rgb(121, 121, 121);
}
.f7 {
display: flex;
flex-direction: column;
align-items: center;
padding: 4em 1.5em;
}
.f7-titulo {
font-family: font1;
font-size: 3em;
color: #842ae3;
margin-bottom: 2em;
}
.f7-form {
display: flex;
flex-direction: row;
width: 60vw;
}
.f7-form button {
width: 15em !important;
margin: 0.3em !important;
}
.f8 {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 2.5em;
}
.f8-titulo {
padding: 2em 0em;
font: 1.65em font1;
}
.f8-contato {
text-align: center;
font: 1.05em font2;
padding: 1em;
line-height: 1.7em;
}
.f8-social {
display: flex;
flex-direction: row;
}
.f8-img {
padding: 0.5em;
}
.f8-img img {
width: 1.2em;
}
.f8-final {
text-align: center;
font: 1.05em font2;
padding-top: 1em;
line-height: 1.7em;
}
```
## Css Comum:
```css=
@font-face{
font-family: font1;
src: url(../../assets/font1.woff2)
}
@font-face{
font-family: font2;
src: url(../../assets/font3.woff)
}
body{
margin: 0px;
}
a, a:link, a:hover, a:visited{
text-decoration: none;
}
* { box-sizing: border-box; }
```
Sign in with Wallet
Connect another wallet