# Final Session | Linguagem de Programação
**Autor: Vitório Trindade Santana**
**Número: 50**
**Turma: Informática C**
[TOC]
## Faixa 1
> https://www.figma.com/
> link codesandbox: https://codesandbox.io/s/faixa1-figma-final-session-ldr84?file=/index.html:0-934
> 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">
<title> Figma faixa 1</title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<div class="container-faixa1">
<div class="figma-imagem"> <image src="figma-imagem.png"/>
</div>
<div class="figma-textos">
<div class="collaboration"> Collaboration </div>
<div class="figma-titulo"> Team Up To move even faster </div>
<div class="figma-descricao"> Share a link to your design files or prototypes, and get feedback in context. Or, jump into the same file with your teammates—no matter where y’all are in the world—and co-edit live.
</div>
<div class="figma-botao"> <button> Work Together </div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
body {
margin: 0px;
}
.container-faixa1 {
display: flex;
flex-direction: row;
background-color: #ffc700;
background-size: 100% 100%;
justify-content: center;
padding: 30px 200px;
margin-top: 50px;
}
.figma-imagem img {
width: 500px;
height: 518px;
}
.figma-textos {
display: flex;
flex-direction: column;
font-family: Whyte, sans-serif;
padding: 0px 50px;
}
.collaboration {
padding-top: 10px;
font-size: 16px;
}
.figma-titulo {
padding: 10px 90px 0px 0px;
font-size: 54px;
font-weight: bold;
}
.figma-descricao {
padding: 50px 20px 0px 0px;
font-size: 22px;
}
.figma-botao {
align-items: center;
}
.figma-botao button {
background-color: #ffc700;
font-size: 18px;
font-family: Whyte, sans-serif;
font-weight: bold;
border-radius: 6px;
outline: none;
margin-top: 30px;
padding: 5px 15px;
border: 3px solid #000000;
}
```
## Faixa 2
> https://www.figma.com/
> link codesandbox: https://codesandbox.io/s/faixa-2-figma-g0ooq?file=/index.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" />
<title> Figma </title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container-figma-login">
<div class="titulo"> Try Figma for free. </div>
<div class="criar-conta">
<div class="criar-google">
<button> <svg class="svg" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z" fill-rule="evenodd" fill-opacity="1" fill="#4285f4" stroke="none"></path><path d="M9.003 18c2.43 0 4.467-.806 5.956-2.18L12.05 13.56c-.806.54-1.836.86-3.047.86-2.344 0-4.328-1.584-5.036-3.711H.96v2.332C2.44 15.983 5.485 18 9.003 18z" fill-rule="evenodd" fill-opacity="1" fill="#34a853" stroke="none"></path><path d="M3.964 10.712c-.18-.54-.282-1.117-.282-1.71 0-.593.102-1.17.282-1.71V4.96H.957C.347 6.175 0 7.55 0 9.002c0 1.452.348 2.827.957 4.042l3.007-2.332z" fill-rule="evenodd" fill-opacity="1" fill="#fbbc05" stroke="none"></path><path d="M9.003 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.464.891 11.428 0 9.002 0 5.485 0 2.44 2.017.96 4.958L3.967 7.29c.708-2.127 2.692-3.71 5.036-3.71z" fill-rule="evenodd" fill-opacity="1" fill="#ea4335" stroke="none"></path></svg>
Sign up with google </button>
</div>
<div class="ou"> or </div>
<div class="criar-com-email">
<div class="input1">
<label for="email"> </label>
<input type="email" name="email" id="email" placeholder="Email" />
</div>
<div class="input2">
<label for="password"> </label>
<input type="password" name="password" id="password" placeholder="Password">
</div>
</div>
</div>
<div class="botao-criar">
<button> Create account </button>
</div>
<div class="entrar-saml">
<div class="entra-com"> Sign up with SAML SSO </div>
<div class="login"> Already have an account? <span style="color: #5551ff"> Log in </span> </div>
</div>
<div class="termos-privacidade">
<div class="captcha"> This site is protected by reCAPTCHA and the Google
<span style="color: #5551ff"> Privacy </span>
</div>
<div class="privacidade"> <span style="color: #5551ff"> Policy </span> and
<span style="color: #5551ff">Terms of Service </span> apply.
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
.container-figma-login {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.titulo {
font-size: 32px;
font-family: Whyte Regular;
font-weight: bold;
padding: 40px 0px;
}
.criar-conta {
display: flex;
flex-direction: column;
}
.criar-google button {
background-color: white;
padding: 10px 70px;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
outline: none;
border: 3px solid black;
}
.ou {
font-family: Whyte Regular;
font-size: 16px;
padding: 20px 0px;
}
.input1 {
padding-bottom: 20px;
}
input {
border-radius: 4px;
padding-right: 150px;
padding-top: 10px;
padding-bottom: 10px;
text-align: start;
border: 3px solid black;
}
.botao-criar {
padding-top: 40px;
}
.botao-criar button {
background-color: black;
color: white;
padding: 5px 90px;
border-radius: 8px;
font-size: 18px;
font-weight: bold;
outline: none;
font-family: Whyte Bold;
}
.entrar-saml {
font-size: 12px;
padding: 30px 0px;
font-family: Whyte Regular;
}
.entra-com {
padding-bottom: 10px;
color: #5551ff;
}
.termos-privacidade {
font-size: 12px;
font-family: Whyte Regular;
}
@font-face {
font-family: Whyte Regular;
src: url("whyteregular.woff2");
}
@font-face {
font-family: Whyte Bold;
src: url("Whyte-Bold2.woff2");
}
```
## Faixa 4
> www.udemy.com
> link codesandbox: https://codesandbox.io/s/faixa-3-udemy-e6q9r?file=/index.html:0-2167
> 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" />
<title>Udemy</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container-udemy">
<div class="imagem-e-textos">
<div class="imagem-professora">
<image
src="https://s.udemycdn.com/home/non-student-cta/udlite-lohp-promo-teacher.jpg"
/>
</div>
<div class="textos">
<div class="titulo">Torne-se um instrutor</div>
<div class="descricao">
Os melhores instrutores do mundo lecionam a milhões de alunos na
Udemy. Oferecemos as ferramentas e habilidades para ensinar o que
você ama.
</div>
<div class="botao"><button>Comece a ensinar hoje mesmo</button></div>
</div>
</div>
<hr size="1" width="95%" color="gray" />
<div class="empresas">
<div class="empresas-titulo">
Ganhou a confiança de empresas de todos os tamanhos
</div>
<div class="empresas-logo">
<div class="empresa">
<image
src="https://s.udemycdn.com/partner-logos/booking-logo.svg"
/>
</div>
<div class="empresa">
<image
src="https://s.udemycdn.com/partner-logos/volkswagen-logo.svg"
/>
</div>
<div class="empresa">
<image
src="https://s.udemycdn.com/partner-logos/mercedes-logo-v2.svg"
/>
</div>
<div class="empresa">
<image src="https://s.udemycdn.com/partner-logos/adidas-logo.svg" />
</div>
<div class="empresa">
<image
src="https://s.udemycdn.com/partner-logos/eventbrite-logo.svg"
/>
</div>
</div>
</div>
<hr size="1" width="95%" color="gray" />
</div>
</body>
</html>
```
> index.css
```css=
body {
margin: 0px;
}
.container-udemy {
display: flex;
flex-direction: column;
margin: 40px 0px;
align-items: center;
padding: 10px 100px;
font-family: sf pro display, -apple-system, BlinkMacSystemFont, Roboto,
segoe ui, Helvetica, Arial, sans-serif, apple color emoji, segoe ui emoji,
segoe ui symbol;
background-size: 100% 100%;
}
.imagem-e-textos {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20px 130px;
}
.imagem-professora img {
width: 320px;
height: 320px;
padding-left: 50px;
}
.textos {
align-items: center;
padding: 0px 80px;
}
.titulo {
font-size: 32px;
font-weight: bold;
}
.descricao {
font-size: 19px;
padding-top: 20px;
padding-right: 130px;
}
.botao {
padding-top: 10px;
}
.botao button {
font-size: 16px;
color: white;
background-color: rgb(87, 36, 209);
border-radius: 5px;
outline: none;
padding: 10px 5px;
font-weight: bold;
}
hr {
height: -5px;
}
.empresas {
padding: 10px 40px;
}
.empresas-titulo {
font-size: 24px;
font-weight: bold;
padding-top: 10px;
padding-bottom: 20px;
}
.empresas-logo {
display: flex;
flex-direction: row;
padding-bottom: 20px;
}
.empresas-logo img {
width: 120px;
height: 26px;
}
```
## Faixa 5
> https://www.typingclub.com/
> link codesandbox: https://codesandbox.io/s/faixa-5-typing-club-xb8wg?file=/index.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" />
<title>Typing CLub</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container-typing-club">
<div class="imagem">
<image src="typing-club.png" />
</div>
<div class="textos">
<div class="the-amazing">THE AMAZING</div>
<div class="titulo">TypingClub School Edition</div>
<div class="descricao">
TypingClub School Edition is the most powerful and popular software
used by teachers, schools and districts.
</div>
<div class="botao"><button>Learn more</button></div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
body {
margin: 0px;
}
.container-typing-club {
display: flex;
flex-direction: row;
background-color: rgb(38, 47, 54);
justify-content: center;
align-items: center;
font-family: Work sans, Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 60px 240px;
margin: 50px 0px;
background-size: 100% 100%;
}
.textos {
padding: 0px 50px;
}
.the-amazing {
font-size: 13px;
color: #bec8ce;
font-family: Work Sans200;
}
.titulo {
font-size: 28px;
color: white;
padding-top: 10px;
font-family: Work Sans200;
font-weight: bold;
}
.descricao {
font-size: 19px;
color: #bec8ce;
padding: 10px 0px;
font-family: Work Sans200;
}
.botao button {
color: black;
background-color: white;
border-radius: 5px;
padding: 10px 40px;
font-size: 15px;
outline: none;
font-family: Work Sans200;
}
@font-face {
font-family: Work Sans;
src: url(worksansbold.woff2);
}
@font-face {
font-family: Work Sans200;
src: url(worksans2.woff2);
}
```
## Faixa 6
> https://www.typingclub.com/
> link codesandbox: https://codesandbox.io/s/faixa-6-typing-club-kxtoq?file=/index.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" />
<title>Typing Club</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container-typing-club">
<div class="imagem"><image src="gambiarra2.png" /></div>
<div class="textos">
<div class="o-que-e-typing">WHAT IS TYPINGCLUB?</div>
<div class="titulo">
TypingClub is the most effective way to learn how to type.
</div>
<div class="descricao">
It is web based and highly effective. TypingClub is (and will always
be) free for both individuals and schools. There is an optional paid
school edition.
</div>
<div class="botao"><button>Get Started Now</button></div>
</div>
</div>
<div class="fundo-sombra"><image src="gambiarra.png" /></div>
</body>
</html>
```
> index.css
```css=
body {
margin: 0px;
}
.container-typing-club {
display: flex;
flex-direction: row;
padding: 50px 200px;
justify-content: center;
margin-top: 100px;
margin-bottom: -55px;
}
.textos {
font-family: Work Sans;
padding: 0px 60px 0px 50px;
}
.o-que-e-typing {
letter-spacing: 2px;
font-size: 11px;
color: #bec8ce;
font-family: Work Sans Bold;
}
.titulo {
color: black;
font-size: 28px;
font-weight: bold;
padding: 7px 30px 20px 0px;
}
.descricao {
font-size: 18px;
color: #6c6f73;
}
.botao {
padding-top: 15px;
}
.botao button {
outline: none;
color: white;
background-color: #2595ff;
border-radius: 3px;
padding: 5px 20px;
font-size: 16px;
font-weight: bold;
font-family: Work Sans;
border-color: #2595ff;
}
.fundo-sombra {
width: 100%;
height: 100%;
box-shadow: 0px -12px 10px 0px rgba(177, 173, 173, 0.5);
background-color: white;
margin-bottom: 50px;
}
.fundo-sombra img {
width: 100%;
height: 100%;
}
@font-face {
font-family: Work Sans;
src: url(worksans2.woff2);
}
@font-face {
font-family: Work Sans Bold;
src: url(worksansbold.woff2);
}
```
## Faixa 7
> https://about.twitter.com/
> link codesandbox: https://codesandbox.io/s/faixa-7-twitter-gbfwl?file=/index.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">
<title> Twitter </title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container-twitter">
<div class="cabecalho">
<div class="sobre-twitter">
<div class="logo"> <image src="passarinho.png"/> </div>
<div class="sobre"> About </div>
</div>
<div class="informacoes-twitter">
<div class="item"> Who we are </div>
<div class="item"> Our priorities </div>
<div class="item"> Resources </div>
<div class="botao-informacao"> <button> Go to Twitter.com </button> </div>
</div>
</div>
<div class="textos">
<div class="titulo"> Twitter is what’s happening and what people are talking about right now.
</div>
<div class="botao"> <button> Go to Twitter.com </button> </div>
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
/* Professor as fontes estâo erradas porque o site do twitter não deixa ter acesso a elas */
body {
margin: 0px;
}
.container-twitter {
display: flex;
flex-direction: column;
font-family: Chirp, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
Arial, sans-serif;
}
.cabecalho {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20px 50px;
}
.sobre-twitter {
display: flex;
flex-direction: row;
font-size: 24px;
font-weight: bold;
}
.sobre {
padding-left: 10px;
}
.informacoes-twitter {
display: flex;
flex-direction: row;
align-items: center;
}
.item {
padding-right: 22px;
font-size: 14px;
}
.botao-informacao button {
font-size: 14px;
background-color: white;
border-radius: 20px;
outline: none;
padding: 7px 14px;
border: 1px solid gray;
}
.textos {
background-image: url("background-twitter.png");
background-repeat: no-repeat;
align-items: center;
padding: 100px 100px 50px 120px;
}
.titulo {
font-size: 64px;
font-weight: bold;
font-family: Chirp Display, -apple-system, BlinkMacSystemFont, Segoe UI,
Helvetica, Arial, sans-serif;
padding-right: 200px;
padding-bottom: 20px;
}
.botao button {
background-color: black;
color: white;
font-size: 18px;
font-weight: bold;
padding: 10px 20px;
border-radius: 40px;
outline: none;
}
```
## Faixa 10
> https://dotnet.microsoft.com/
> link codesandbox: https://codesandbox.io/s/faixa-10-netsla-p06pb?file=/index.html
> Professor, o espaçamento do código do html aqui no markdown está diferente do codesandbox porque eu ajeitava as divs e image la e quando salvava ele tirava todo o espaço, o código que está aqui tem o espaçamento do jeito que eu queria. Um exemplo sao a tag de imagem que ele separa o "/>" para a próxima linha.
> 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" />
<title>DotNet.microsoft</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container-dotnetmicrosoft">
<div class="faixa-1">
<div class="imagem">
<image src="https://dotnet.microsoft.com/static/images/illustrations/free-code-editor-tools-bot-desk.svg?v=WWIDocc21QEOeLjT9jofZosRF7KhqeGcGtaQr2ZB7TE"/>
</div>
<div class="textos">
<div class="titulo">Thank You to All the Contributors</div>
<div class="descricao"> .NET is open source and we are very thankful for the many contributions it receives from the community.
</div>
<div class="botao"> <button>See the Contributors</button> </div>
</div>
</div>
<div class="faixa-2">
<div class="logos">
<div class="logo-empresa1">
<image src="https://dotnet.microsoft.com/blob-assets/images/customers/chipotle.png"/>
</div>
<div class="logo-empresa2">
<image src="https://dotnet.microsoft.com/blob-assets/images/customers/ampas.png"/>
</div>
<div class="logo-empresa3">
<image src="https://dotnet.microsoft.com/blob-assets/images/customers/ge-aviation.png"/>
</div>
<div class="logo-empresa4">
<image src="https://dotnet.microsoft.com/blob-assets/images/customers/ups.svg"/>
</div>
<div class="logo-empresa5">
<image src="https://dotnet.microsoft.com/blob-assets/images/customers/stackoverflow.svg"/>
</div>
</div>
<div class="texto-final">Read customer stories</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
body {
margin: 0px;
}
.container-dotnetmicrosoft {
display: flex;
flex-direction: column;
}
.faixa-1 {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 40px 60px;
}
.textos {
font-family: Segoe UI, Helvetica, Arial, sans-serif;
padding: 0px 140px;
}
.titulo {
font-size: 32px;
font-weight: bold;
}
.descricao {
font-size: 15px;
padding: 15px 0px;
}
.botao button {
outline: none;
font-size: 16px;
border-color: #512bd4;
color: #512bd4;
background-color: white;
padding: 6px 12px;
}
.faixa-2 {
display: flex;
flex-direction: column;
justify-content: center;
background-color: rgb(240, 240, 240);
padding: 40px 180px;
}
.logos {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.logo-empresa1 img {
width: 176px;
height: 40px;
}
.logo-empresa2 img {
width: 52px;
height: 60px;
}
.logo-empresa3 img {
width: 150px;
height: 50px;
}
.logo-empresa4 img {
width: 50px;
height: 60px;
}
.logo-empresa5 img {
width: 203px;
height: 40px;
}
.texto-final {
text-decoration: underline;
font-size: 12px;
font-family: Segoe UI, Helvetica, Arial, sans-serif;
padding: 8px 0px;
text-align: center;
}
```
## Faixa 11
> https://ptbr.reactjs.org/
> link codesandbox: https://codesandbox.io/s/react-faixa-11-hgy40?file=/index.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" />
<title> React </title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container-react">
<div class="cabecalho-react">
<div class="logo">
<img class="logo-imagem" src="download.svg"/>
<div class="react-logotexto"> React </div>
</div>
<div class="cabecalho-comunidade">
<div class="menu-item"> Documentos </div>
<div class="menu-item"> Tutorial </div>
<div class="menu-item"> Blog </div>
<div class="menu-item"> Comunidade </div>
</div>
<div class="busca">
<label for="busca"> </label>
<div class="lupa"> <svg alt="Search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <path d=" M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609, 0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338, 4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" fill="#ffffff" /> </svg> </div>
<input type="name" name="busca" id="busca" placeholder="Buscar docs">
</div>
<div class="informacoes-adicionais2">
<div class="informaçoes-item"> v17.0.2 </div>
<div class="informaçoes-item"> <img class="imagem-languages" src="language.png"/> <div class="texto-languages"> Languages </div> </div>
<div class="informaçoes-item"> GitHub <svg class="github-simbolo" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="css-19vhmgv"><path fill="currentColor" d=" M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z "></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></div></header> </div>
</div>
</div>
<div class="faixa-1-react">
<div class="faixa-1-textos">
<div class="faixa-1-titulo">React</div>
<div class="faixa-1-descricao"> Uma biblioteca JavaScript para criar interfaces de usuário </div>
</div>
<div class="faixa-1-botoes">
<div class="botao-usar"> <button> Comece a usar </button> </div>
<div class="faixa-1-botao-tutorial">Faça o Tutorial ›</div>
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
body {
margin: 0px;
}
.cabecalho-react {
display: flex;
flex-direction: row;
background-color: #20232a;
color: white;
justify-content: space-around;
padding: 15px 50px 15px 50px;
font-family: Apple-System;
align-content: center;
}
.svg-languages {
color: withe;
}
.logo {
display: flex;
flex-direction: row;
}
.Search {
width: 18px;
}
.logo-imagem {
width: 25px;
}
.react-logotexto {
padding-left: 10px;
font-size: 20px;
font-family: Apple-System-200;
color: #61dafb;
}
.cabecalho-comunidade {
display: flex;
flex-direction: row;
justify-content: space-around;
padding-left: 30px;
align-items: center;
}
.menu-item {
padding-left: 45px;
font-size: 15px;
}
.informaçoes-item {
padding-left: 30px;
font-weight: lighter;
}
.busca {
display: flex;
flex-direction: row;
align-items: center;
padding-left: 10px;
}
.lupa {
width: 15px;
}
input {
background-color: #20232a;
border-radius: 3px;
color: gray;
outline: none;
font-size: 16px;
font-family: Apple-System;
align-items: center;
border: 0px;
padding-left: 6px;
}
.informacoes-adicionais2 {
display: flex;
flex-direction: row;
font-size: 15px;
padding: 0px 40px;
justify-content: space-between;
align-items: center;
font-weight: lighter;
}
.informaçoes-item {
display: flex;
flex-direction: row;
}
.informaçoes-item:hover {
color: #61dafb;
}
.imagem-languages img {
width: 24px;
}
.texto-languages {
padding-top: 3px;
text-align: center;
}
.github-simbolo {
color: gray;
}
.faixa-1-react {
background-image: url("background-react.png");
background-repeat: no-repeat;
padding: 80px 100px;
text-align: center;
font-family: Apple-System;
background-size: 100% 100%;
}
.faixa-1-textos {
display: flex;
flex-direction: column;
}
.faixa-1-titulo {
color: #61dafb;
font-size: 65px;
font-family: Apple-System-200;
}
.faixa-1-descricao {
font-size: 30px;
color: white;
padding-top: 10px;
padding-bottom: 50px;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-weight: lighter;
}
.faixa-1-botoes {
display: flex;
flex-direction: row;
justify-content: center;
}
.menu-item:hover {
color: #61dafb;
}
button {
font-size: 20px;
background-color: #61dafb;
padding: 10px 25px;
outline: none;
}
.botao-usar button:hover {
background-color: white;
}
.faixa-1-botao-tutorial {
font-size: 20px;
color: #61dafb;
padding: 10px 0px 0px 10px;
}
.faixa-1-botao-tutorial:hover {
color: white;
}
@font-face {
font-family: Apple-System;
src: url("apple-system.woff2");
}
@font-face {
font-family: Apple-System-200;
src: url("apple-system-sla.woff2");
}
```
## Faixa 13
> https://angular.io/
> link codesandbox: https://codesandbox.io/s/faixa-13-f787k?file=/index.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">
<title> Angular </title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<div class="container-angular">
<div class="parte-cima">
<div class="textos">
<div class="titulo"> LOVED BY MILLIONS </div>
<div class="descricao"> From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google's largest applications.
</div>
</div>
<div class="imagem"> <image src="https://angular.io/generated/images/marketing/home/loved-by-millions.svg"/>
</div>
</div>
<div class="parte-box">
<div class="imagem-box"> <image src="https://angular.io/generated/images/marketing/home/code-icon.svg"/>
</div>
<div class="textos-box">
<div class="titulo-box"> TRY IT NOW </div>
<div class="descricao-box"> Explore Angular's capabilities with a ready-made sample app. No setup required.
</div>
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
body {
margin: 0px;
}
.container-angular {
display: flex;
flex-direction: column;
padding: 10px 170px;
align-items: center;
margin: 50px 100px;
}
.parte-cima {
display: flex;
flex-direction: row;
padding-bottom: 35px;
}
.imagem {
padding-right: 100px;
}
.imagem img {
width: 380px;
height: 204px;
}
.textos {
display: flex;
flex-direction: column;
justify-content: center;
}
.titulo {
font-size: 20px;
color: #1976d2;
font-family: Roboto;
font-weight: bold;
padding: 0px 40px;
}
.descricao {
font-size: 16px;
font-family: Roboto;
padding: 0px 40px;
}
.parte-box {
display: flex;
flex-direction: row;
width: 526px;
height: 167px;
justify-content: center;
align-items: center;
box-shadow: 2px 2px 8px 5px rgb(20, 23, 26, 0.1);
}
.imagem-box {
padding: 0px 40px;
}
.imagem-box img {
width: 70px;
height: 70px;
}
.titulo-box {
font-size: 20px;
color: #1976d2;
font-family: Roboto2;
padding-bottom: 10px;
}
.descricao-box {
font-size: 16px;
font-family: Roboto;
padding-right: 20px;
}
@font-face {
font-family: Roboto;
src: url(roboto1.woff2);
}
@font-face {
font-family: Roboto2;
src: url(roboto2.woff2);
}
```
## Faixa 20
> https://aws.amazon.com/pt/
> link codesandbox: https://codesandbox.io/s/faixa-20-rvo7s?file=/index.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" />
<title>Amazon AWS</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container-aws-amazon">
<div class="titulo-e-desc">
<div class="titulo">Soluções de nuvem híbrida da AWS</div>
<div class="descricao"> Experiência consistente em toda a AWS e nos ambientes on-premises </div>
</div>
<div class="opcoes-aws">
<div class="box-esquerda">
<div class="imagem-box"> <image src="nuvem-servidor.png"/>
</div>
<div class="titulo-box"> VMware Cloud on AWS </div>
<div class="descricao-box"> Migre e amplie ambientes VMware para a Nuvem AWS </div>
<div class="saiba-mais-box"> Saiba mais » </div>
</div>
<div class="box-direita">
<div class="imagem-box"> <image src="servidor.png"/>
</div>
<div class="titulo-box"> AWS Outposts </div>
<div class="descricao-box-2 "> Execute a infraestrutura da AWS on-premises para ter uma
experiência híbrida verdadeiramente consistente
</div>
<div class="saiba-mais-box"> Saiba mais » </div>
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
body {
margin: 0px;
}
.container-aws-amazon {
display: flex;
flex-direction: column;
background-image: url("background-aws.png");
background-repeat: no-repeat;
background-size: 100% 100%;
justify-content: center;
padding: 40px 120px;
}
.titulo-e-desc {
text-align: center;
}
.titulo {
font-size: 30px;
font-family: Amazon Ember Bold;
color: white;
padding-bottom: 15px;
}
.descricao {
font-size: 20px;
font-family: Amazon Ember Regular;
color: white;
padding-bottom: 40px;
}
.opcoes-aws {
display: flex;
flex-direction: row;
font-family: Amazon Ember Regular;
color: white;
text-align: center;
}
.box-esquerda {
margin-left: 100px;
padding-left: 80px;
}
.box-direita {
padding-left: 20px;
}
.titulo-box {
font-family: Amazon Ember Bold;
font-size: 20px;
padding: 12px 0px;
}
.descricao-box {
font-size: 16px;
font-family: Amazon Ember Regular;
}
.descricao-box-2 {
font-size: 16px;
font-family: Amazon Ember Regular;
margin: 0px 120px;
}
.saiba-mais-box {
padding: 16px 0px;
}
@font-face {
font-family: Amazon Ember Bold;
src: url("AmazonEmber_Bd.woff2");
}
@font-face {
font-family: Amazon Ember Regular;
src: url("AmazonEmber_regular.woff2");
}
```
Google Drive
Gist
Clipboard
Sign in with Wallet
