# Session Two: Getting Better | Ling. Programação
>[color=purple]**Autor:** Letícia Rodrigues da Silva
**Turma:** IndoD
**Número:** 25
[TOC]
## Responsividade
https://edz8v.csb.app/src/pages/home/index.html
### index.html
```htmlmixed=
<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"/>
<link rel="stylesheet" href="responsivo.css"/>
<title>Home|Moonchain</title>
</head>
<body>
<div class="container">
<div class="faixa1">
<div class="cabecalho">
<div class="logo"><img src="../../assets/images/logo.webp"/>
Moonchain Capital</div>
<div class="menu">
<div class="menu-item">Home</div>
<div class="menu-item">Services</div>
<div class="menu-item">FAQ</div>
<div class="menu-item">Contact</div>
<div class="menu-item">Subscribe</div>
</div>
<div class="logo-f1">
<div class="menu-logo"><img src="../../assets/images/Facebook.png"/></div>
<div class="menu-logo"><img src="../../assets/images/twitter.png"/></div>
<div class="menu-logo"><img src="../../assets/images/linkedin.png"/></div>
</div>
</div>
<div class="f1">
<div class="box-text">
<div class="titulo">Cryptocurrency Consulting Services</div>
<div class="descricao">I'm a paragraph. Click here to add your own text and edit me. Let your users get to know you.</div>
<div class="botao"><button type="button" class="efeito"> See Our Services</button></div>
</div>
<div class="box-img"><img src="../../assets/images/img.webp"/></div>
</div>
<div class="faixa2">
<div class="titulo-f2">Our Services</div>
<div class="fila-1">
<div class="box">
<div class="img-box"><img src="../../assets/images/coinn.png"/></div>
<div class="titulo-box">Coin Acquisition</div>
<div class="descricao-box">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="box">
<div class="img-box"><img src="../../assets/images/currency.webp"/></div>
<div class="titulo-box">Currency Mining</div>
<div class="descricao-box">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="box">
<div class="img-box"><img src="../../assets/images/initial.webp"/></div>
<div class="titulo-box">Initial Coin Offerings</div>
<div class="descricao-box">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="fila2">
<div class="box">
<div class="img-box"><img src="../../assets/images/exchanges.webp"/></div>
<div class="titulo-box">Exchanges</div>
<div class="descricao-box">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="box">
<div class="img-box"><img src="../../assets/images/blockchain.webp"/></div>
<div class="titulo-box">Blockchain Tech</div>
<div class="descricao-box">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="box">
<div class="img-box"><img src="../../assets/images/storing.webp"/></div>
<div class="titulo-box">Storing Your Coins</div>
<div class="descricao-box">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="botao-f2"><button>Contact Us Today</button></div>
</div>
<div class="faixa3">
<div class="titulo-b3">About Moonchain</div>
<div class="crypto">Strategic Crypto Consultants Since 2015</div>
<div class="descricao-b3">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 class="img-linha">
<div class="box1">
<div class="img1"><img src="../../assets/images/mulher2.webp"/></div>
<div class="nome">Jordan Foster</div>
<div class="descricao1">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="box1">
<div class="img1"><img src="../../assets/images/homem-img.webp"/></div>
<div class="nome">Jesse Dunn</div>
<div class="descricao1">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="box1">
<div class="img1"><img src="../../assets/images/homem2-img.webp"/></div>
<div class="nome">Calvin Wang</div>
<div class="descricao1">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="faixa4">
<div class="aspas"><img src="../../assets/images/aspas.png"/></div>
<div class="texto">“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="pessoa">Carl Calvert | Joji.set</div>
</div>
<div class="faixa5">
<div class="box-texto">
<div class="titulo-f5">FAQ</div>
<div class="ds-f5">Below we’ve provided some info on how we work, blockchain technology, Bitcoin, and cryptocurrencies in general.</div>
<div class="box-texto-t1">
<div class="titulo-t1"> How do I buy cryptocurrency in my country?</div>
<div class="descricao-t1">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="box-texto-t1">
<div class="titulo-t1">Do I have to pay taxes on any profits I make from Bitcoin?</div>
<div class="descricao-t1">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="box-texto-t1">
<div class="titulo-t1">Is it possible to create my own cryptocurrency?</div>
<div class="descricao-t1">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="faixa6">
<div class="titulo-f6">Contact</div>
<div class="f6-linha">
<div class="linha">
<input type="text" placeholder="Name">
<input type="text" placeholder="Email">
</div>
<div class="linha2">
<input type="text" placeholder="Subject">
</div>
<div class="linha3">
<textarea placeholder="Type your message here..."></textarea>
</div>
<div class="botao-f6"><button>Submit</button></div>
</div>
</div>
<div class="faixa7">
<div class="titulo-f7">Subscribe to Our Newsletter</div>
<div class="box-f7">
<input type="text" placeholder="Name">
<div class="espaco"></div>
<input type="text" placeholder="E-mail address">
<div class="botao-f7"><button>Submit</button></div>
</div>
<div class="faixa8">
<div class="titulo-f8">Moonchain Capital</div>
<div class="ds-f8">info@mysite.com</div>
<div class="ds-f8">123-456-7890</div>
<div class="ds-f8">500 Terry Francois Street San Francisco, CA 94158</div>
<div class="logo-f8">
<div class="logof8"><img src="../../assets/images/Facebook.png"></div>
<div class="logof8"><img src="../../assets/images/twitter.png"></div>
<div class="logof8"><img src="../../assets/images/linkedin.png"></div>
</div>
</div>
</div>
<div class="faixa9">
<div class="ds-f9">©2023 by Moonchain Capital.</div>
<div class="ds-f9">Proudly created with Wix.com</div>
</div>
</div>
</body>
</html>
```
### comum.css
```css=
@font-face {
font-family: font1;
src: url('../../assets/fonts/font.woff');
}
@font-face {
font-family: font2;
src: url('../../assets/fonts/font.woff2');
}
@font-face {
font-family: font3;
src: url('../../assets/fonts/font.woff3');
}
@font-face {
font-family: font4;
src: url('../../assets/fonts/font.woff4');
}
body {
margin: 0px;
}
* { box-sizing: border-box; }
```
### index.css
```css=
.container {
display: flex;
flex-direction: column;
}
.faixa1 {
display: flex;
flex-direction: column;
}
.cabecalho {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.menu {
display: flex;
flex-direction: row;
font-size: 14px;
color: #2d2d2d;
margin: 30px 15px 0px 0px;
}
.menu-item {
padding: 0px 15px;
font-size: 14px;
color: #2d2d2d;
font-family: font2;
}
.logo {
display: flex;
flex-direction: row;
align-items: center;
flex-grow: 1;
font: 22px font3;
color: #181818;
margin: 30px 0px 0px 100px;
}
.logo img {
margin-right: 15px;
height: 80px;
width: auto;
}
.menu-logo img {
width: 20px;
height: 20px;
}
.menu-logo {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0px 5px 5px 3px;
}
.logo-f1 {
display: flex;
flex-direction: row;
margin: 30px 30px 0px 0px;
}
.f1 {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-left: 90px;
}
.box-text {
display: flex;
flex-direction: column;
width: 480px;
}
.titulo {
color: #842ae3;
font-family: font3;
font-size: 50px;
line-height: 70px;
margin-bottom: 30px;
}
.descricao {
font-family: font2;
font-size: 18px;
color: #181818;
line-height: 30px;
}
.botao button {
width: 150px;
height: 45px;
background-color: #842ae3;
border: transparent;
border-radius: 30px;
color: white;
font-size: 14px;
font-family: font2;
margin-top: 60px;
cursor: pointer;
}
.botao button:hover {
background-color: #b57fee;
transition: 0.4s;
cursor: pointer;
}
.box-img img {
height: 740px;
width: auto;
}
.faixa2 {
display: flex;
flex-direction: column;
text-align: center;
background-color: #eeeeee;
justify-content: center;
align-items: center;
}
.titulo-f2 {
font: 2em font3;
color: #842ae3;
margin: 2em 0em 1em 0em;
}
.fila-1 {
display: flex;
flex-direction: row;
width: 80%;
justify-content: space-around;
}
.box {
display: flex;
flex-direction: column;
align-items: center;
margin: 1em;
}
.img-box img {
max-width: 60px;
max-height: 60px;
}
.titulo-box {
font-size: 20px;
color: #842ae3;
font-family: font2;
margin: 1em;
}
.descricao-box {
font-size: 14px;
color: #181818;
font-family: font2;
line-height: 25px;
text-align: center;
}
.botao-f2 button:hover {
background-color: #b57fee;
transition: 0.3s;
cursor: pointer;
}
.botao-f2 {
display: flex;
align-items: bottom;
}
.fila2 {
display: flex;
flex-direction: row;
width: 80%;
justify-content: space-around;
}
.botao-f2 button {
width: 148px;
height: 45px;
background-color: #842ae3;
border: transparent;
border-radius: 30px;
color: white;
font: 0.8em font2;
margin-top: 100px;
cursor: pointer;
margin-bottom: 5em;
}
.faixa3 {
display: flex;
flex-direction: column;
align-items: center;
padding: 6em 5em;
}
.titulo-b3 {
font: 1.7em font3;
color: #842ae3;
margin-bottom: 1em;
}
.crypto {
font: 0.9em font2;
font-style: italic;
color: #181818;
margin-bottom: 2em;
}
.descricao-b3 {
font: 0.8em font2;
color: #181818;
width: 900px;
text-align: center;
line-height: 25px;
}
.img-linha {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.img1 img{
max-width: 370px;
max-height: 540px;
margin: 3em 0em 0em 1em;
}
.box1 {
display: flex;
flex-direction: column;
align-items: center;
}
.nome {
font: 1.3em font3;
color: #842ae3;
text-align: center;
margin: 2em 0em;
}
.descricao1 {
font: 0.8em font2;
color: #181818;
text-align: center;
line-height: 25px;
width: 290px;
}
.faixa4 {
background-color: #27f5ce;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 320px;
}
.aspas img {
max-width: 40px;
max-height: 30px;
margin: 4em 0em 2em 0em;
}
.texto {
font: 0.7em font2;
line-height: 25px;
color: #181818;
text-align: center;
width: 700px;
}
.pessoa {
font: 0.7em font2;
color: #181818;
margin: 4em 0em 3em 0em;
}
.faixa5 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #eeeeee;
width: 100%;
}
.titulo-f5 {
font: 2em font4;
color: #842ae3;
text-align: center;
margin: 1em 0em 0.7em 0em;
}
.ds-f5 {
font: 1em font2;
color: #181818;
text-align: center;
margin-bottom: 7em;
}
.box-texto-t1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: right;
}
.titulo-t1 {
font: 1.3em font3;
color: #842ae3;
margin-bottom: 1.5em;
}
.descricao-t1 {
font: 0.8em font2;
color: #181818;
line-height: 25px;
width: 777px;
margin-bottom: 5em;
}
.faixa6 {
display: flex;
flex-direction: column;
align-items: center;
background-color: #ffffff;
margin-top: 2em;
width: 100%;
}
.titulo-f6 {
font: 1.7em font3;
color: #842ae3;
margin-top: 3em;
}
.linha2 input {
border-bottom: 1px solid black;
font: 0.7em font2;
width: 900px;
height: 42px;
border-top: none;
border-left: none;
border-right: none;
margin-top: 1em;
}
::-webkit-input-placeholder {
color: black;
}
.linha input {
border-bottom: 1px solid black;
font: 0.7em font2;
width: 450px;
height: 42px;
resize: none;
border-top: none;
border-left: none;
border-right: none;
}
.linha3 textarea {
font: 0.7em font2;
width: 100%;
height: 126px;
border-top: none;
border-left: none;
border-right: none;
margin-bottom: 2em;
}
.botao-f6 button {
font: 1em font2;
width: 900px;
height: 50px;
background-color: #181818;
color: white;
border: transparent;
}
.botao-f6 button:hover {
background-color: gray;
transition: 0.3s;
cursor: pointer;
}
.faixa7 {
display: flex;
flex-direction: column;
background-color: #ffffff;
align-items: center;
width: 100%;
}
.titulo-f7 {
font: 1.7em font3;
color: #842ae3;
text-align: center;
margin: 4em 0em 3em 0em;
}
.box-f7 {
display: flex;
flex-direction: row;
align-items: center;
}
.box-f7 input {
border-bottom: 1px solid black;
font: 0.7em font2;
width: 435px;
height: 42px;
border-top: none;
border-left: none;
border-right: none;
}
.espaco {
width: 0.6em;
}
.botao-f7 button {
background-color: #181818;
font: 1em font2;
color: #ffffff;
border: transparent;
width: 100px;
height: 35px;
margin: 0.5em 0em 0em 0.5em;
}
.botao-f7 button:hover {
background-color: gray;
transition: 0.3s;
cursor: pointer;
}
.faixa8 {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 130px;
}
.titulo-f8 {
font: 1em font3;
margin-bottom: 1em;
}
.ds-f8 {
font-family: woff3;
font-size: 15px;
color: #181818;
margin-bottom: 0.5em
}
.logo-f8 {
display: flex;
flex-direction: row;
margin: 1em 0em 1.5em 0em;
width: 80px;
height: 20px;
justify-content: space-between;
}
.logof8 img {
max-width: 20px;
max-height: 20px;
}
.faixa9 {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 1em;
}
.ds-f9 {
font: 0.7em font2;
color: #181818;
margin-bottom: 10px;
}
```
### responsivo.css
```css=
@media (max-width: 1024px) {
.logo,
.cabecalho,
.f1,
.box-text {
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0px;
margin: 0px;
width: 100%;
}
.logo img {
max-width: 60px;
max-height: 60px;
margin: 40px 0px 20px 0px;
}
.logo {
margin-bottom: 30px;
}
.logo-f1 {
display: flex;
justify-content: space-between;
}
.menu {
display: none;
}
.titulo {
width: 270px;
height: 70px;
font: 28px font4;
line-height: 35px;
padding: 50px 0px 80px 0px;
}
.descricao {
max-width: 320px;
max-height: 110px;
}
.f1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box-img img {
width: 320px;
height: auto;
align-items: center;
}
.faixa2 {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.fila-1 {
display: flex;
flex-direction: column;
}
.fila2 {
display: flex;
flex-direction: column;
}
.box {
display: flex;
flex-direction: column;
}
.img-box img {
margin-top: 50px;
}
.titulo-b3 {
font: 1.5em font3;
width: 220px;
}
.crypto {
font: 0.8em font2;
font-style: italic;
color: #181818;
width: 270px;
}
.descricao-box {
width: 350px;
height: 70px;
}
.descricao-b3 {
width: 300px;
margin-bottom: 2em;
}
.img-linha {
display: flex;
flex-direction: column;
}
.descricao1 {
font: 16px font2;
line-height: 30px;
width: 330px;
margin-bottom: 50px;
}
.box1:nth-child(1) img {
content: url('../../assets/images/mulherP.jpg')
}
.box1:nth-child(2) img {
content: url('../../assets/images/homemP.jpg')
}
.box1:nth-child(3) img {
content: url('../../assets/images/homem2P.jpg')
}
.img1 img {
width: 375px;
}
.faixa4 {
align-items: center;
width: 100%;
height: auto;
}
.aspas img{
max-width: 40px;
max-height: 60px ;
}
.texto {
width: 275px;
height: 70px;
font: 12px font2;
line-height: 25px;
}
.box-texto {
margin-top: 50px;
}
.ds-f5 {
width: 300px;
padding-left: 31px;
text-align: center;
line-height: 25px;
font: 15px font2;
line-height: 25px;
}
.faixa5 {
display: flex;
height: auto;
}
.ds-f5 {
width: 288px;
margin-left: 2em;
font: 0.8em font2;
line-height: 2em;
}
.box-texto-t1 {
width: 380px;
}
.titulo-t1 {
margin-left: 25px;
}
.descricao-t1 {
width: 280px;
margin-left: 25px;
}
.linha {
margin-left: 1em;
}
input {
max-width: 330px;
max-height: 50px;
}
.linha2 {
margin-left: 1em;
}
.linha3 {
margin-top: 1em;
width: 330px;
}
.linha3 textarea {
max-width: 330px;
margin-left: 1.5em;
padding-left: 2em;
border-color: black;
}
.f6-linha {
width: 100%;
}
.titulo-f6 {
font: 1.5em font3;
margin-bottom: 1em;
}
::-webkit-input-placeholder {
color: black;
}
::-webkit-textarea-placeholder {
color: black;
}
.botao-f6 button {
max-width: 330px;
margin-left: 1em;
}
.titulo-f7 {
font: 24px font3;
max-width: 190px;
margin: 100px 0px 70px 0px;
}
.box-f7 {
display: flex;
flex-direction: column;
max-width: 330px;
margin-right: 1em;
}
.botao-f7 button {
width: 330px;
height: 38px;
}
.titulo-f8 {
font: 1.3em font3;
}
.ds-f8 {
font: 0.9em font2;
text-align: center;
line-height: 30px;
}
.descricao-box {
margin-top: 10px;
}
.faixa9 {
margin-top: 15px;
}
}
```
{"metaMigratedAt":"2023-06-15T23:57:00.872Z","metaMigratedFrom":"Content","title":"Session Two: Getting Better | Ling. Programação","breaks":true,"contributors":"[{\"id\":\"f2f98191-1ff5-4afd-8e66-66ff77c4c5b1\",\"add\":21943,\"del\":0}]"}