---
# System prepended metadata

title: Final Session | Linguagem de Programação

---

# 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 &rsaquo;</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 &raquo </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 &raquo </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");
}
```
