---
# System prepended metadata

title: 'L.P Final Session: It''s all or nothing'

---

### INFO B - Caroline Campos Lima, 04

# L.P Final Session: It's all or nothing

[toc]

## Faixa 1
> https://www.figma.com/

> index.html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="index.css">
    <title>Static Template</title>
  </head>
  <body>

    <div class="faixa">
      <div class="imagem"><img src="imagem-figma.png"/></div>
      <div class="box">
        <div class="texto">Collaboration</div>
        <div class="titulo">Team up to move even faster</div>
        <div class="conteudo">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>
        <button class="botao">Work together</button>
      </div>
    </div>

  </body>
</html>
```

> index.css
```css=
body {
  margin: 0px;
}

.faixa {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: #ffc700;
  padding: 100px 320px;
}

.imagem {
  padding: 0px 50px;
}

.box {
  padding: 0px 50px;
}

.texto {
  font-family: Whyte, sans-serif;
  font: 22px sans-serif;
  color: 000000;
}

.titulo {
  font-family: Whyte, sans-serif;
  font: 64px sans-serif;
  font-weight: bold;
  color: 000000;
  margin: 15px 0px;
}

.conteudo {
  font-family: Whyte, sans-serif;
  font: 22px sans-serif;
  color: 000000;
}

.botao {
  background-color: #ffc700;
  font-family: Whyte, sans-serif;
  font: 18px sans-serif;
  font-weight: bold;
  color: #000000;
  border-radius: 5px;
  border-color: #000000;
  padding: 12px 30px;
  margin: 15px 0px;
}
```

## Faixa 4
> https://www.udemy.com/

> index.html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="index.css" />
    <title>UDEMY</title>
  </head>
  <body>

    <div class="faixa1">
      <div class="imagem-faixa1">
        <img src="https://s.udemycdn.com/home/non-student-cta/udlite-lohp-promo-teacher.jpg"/>
      </div>
      <div class="descricao-faixa1">
        <div class="titulo-faixa1">Torne-se um instrutor</div>
        <div class="conteudo-faixa1">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>
        <button class="botao">Comece a ensinar hoje mesmo</button>
      </div>
    </div>

    <hr/>

    <div class="texto">Ganhou a confiança de empresas de todos os tamanhos</div>
    <div class="logos">
      <div> <img alt="booking" width="151" height="26" src="https://s.udemycdn.com/partner-logos/booking-logo.svg"> </div>
      <div> <img alt="volkswagen" width="32" height="32" src="https://s.udemycdn.com/partner-logos/volkswagen-logo.svg"> </div>
      <div> <img alt="mercedes" width="148" height="28" src="https://s.udemycdn.com/partner-logos/mercedes-logo-v2.svg"> </div>
      <div> <img alt="adidas" width="47" height="32" src="https://s.udemycdn.com/partner-logos/adidas-logo.svg"> </div>
      <div> <img alt="eventbrite" width="115" height="32" src="https://s.udemycdn.com/partner-logos/eventbrite-logo.svg"> </div> 
    </div>

    <hr/>

  </body>
</html>
```

> index.css
```css=
body {
  margin: 0%;
}

.faixa1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 50px 450px;
}

.imagem-faixa1 {
  padding: 0px 50px;
}

.descricao-faixa1 {
  padding: 0px 50px;
}

.titulo-faixa1 {
  font: 32px arial;
  font-weight: bold;
  font-family: sf pro display,-apple-system,BlinkMacSystemFont,Roboto,segoe ui,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
}

.conteudo-faixa1 {
  font: 19px arial;
  font-family: sf pro text,-apple-system,BlinkMacSystemFont,Roboto,segoe ui,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
  padding: 15px 0px;
}

.botao {
  background-color: #5624d0;
  color: #ffffff;
  font: 16px arial;
  font-weight: bold;
  font-family: sf pro display,-apple-system,BlinkMacSystemFont,Roboto,segoe ui,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
  border-radius: 7px;
  border: none;
  padding: 15px;
}

.texto {
  text-align: center;
  font: 24px arial;
  font-weight: bold;
  font-family: sf pro text,-apple-system,BlinkMacSystemFont,Roboto,segoe ui,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
  padding-top: 25px;
}

.logos {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 25px 600px;
}
```

## Faixa 5
> https://www.typingclub.com/

> index.html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="index.css">
    <title>Static Template</title>
  </head>
  <body>

    <div class="faixa">
      <div class="imagem">
        <img src="//static.typingclub.com/m/tpmedia/img/district.svg" width="240px" style=""/>
      </div>
      <div class="box">
        <div class="texto">THE AMAZING</div>
        <div class="titulo">TypingClub School Edition</div>
        <div class="conteudo">TypingClub School Edition is the most powerful and popular software used by teachers, schools and districts.</div>
        <button class="botao">Learn more</button>
      </div>
    </div>

  </body>
</html>
```

> index.css
```css=
body {
  margin: 0px;
}

.faixa {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #262f36;
  padding: 100px 420px;
}

.imagem {
  padding: 0px 50px;
}

.box {
  padding: 0px 50px;
}

.texto {
  font-family: "Work sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font: 13px Arial;
  color: #ffffffb3;
}

.titulo {
  font-family: "Work sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font: 28px Arial;
  color: #ffffff;
  margin: 15px 0px;
}

.conteudo {
  font-family: "Work sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font: 19px Arial;
  color: #ffffffb3;
}

.botao {
  background-color: #ffffff;
  font-family: "Work sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font: 18px Arial;
  color: #333333;
  border-radius: 5px;
  border: none;
  padding: 12px 50px;
  margin: 15px 0px;
}
```

## Faixa 6
> https://www.typingclub.com/

> index.html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="index.css">
    <title>Static Template</title>
  </head>
  <body>

    <div class="faixa">
      <div class="imagem"><img src="TypingClub.png"/></div>
      <div class="box">
        <div class="texto">WHAT IS TYPINGCLUB?</div>
        <div class="titulo">TypingClub is the most effective way to learn how to type.</div>
        <div class="conteudo">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>
        <button class="botao">Get Started Now</button>
      </div>
    </div>

  </body>
</html>
```

> index.css
```css=
body {
  margin: 0px;
}

.faixa {
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: #ffffff;
  padding: 100px 370px;
}

.imagem {
  padding: 0px 50px;
}

.box {
  padding: 0px 50px;
}

.texto {
  font: 13px "Work sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #bec8ce;
  padding-top: 15px;
}

.titulo {
  font: 28px "Work sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #2d3238;
  margin: 15px 0px;
}

.conteudo {
  font: 18px "Work sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #6c6f78;
}

.botao {
  background-color: #2595ff;
  font: 16px "Work sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #ffffff;
  border-radius: 5px;
  border: none;
  padding: 12px 30px;
  margin: 15px 0px;
}
```

## Faixa 8
> https://developer.twitter.com/en

> index.html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="index.css" />
    <title>TWITTER</title>
  </head>
  <body>

    <div class="faixa">
      <div class="box">
        <div class="titulo">Solution</div>
        <div class="descricao">Academic<br/>Research</div>
        <div class="seta">
          <img src="https://lh3.googleusercontent.com/imQ4aIpegaIZNYYmuD5PYsutfn7Ib87cPZvR91DCij5bTV89_aPTTi8REIeXTuJCN_Kv=s86"/>
        </div>
      </div>

      <div class="box">
        <div class="titulo">Company</div>
        <div class="descricao">Product<br/>roadmap</div>
        <div class="seta">
          <img src="https://lh3.googleusercontent.com/imQ4aIpegaIZNYYmuD5PYsutfn7Ib87cPZvR91DCij5bTV89_aPTTi8REIeXTuJCN_Kv=s86"/>
        </div>
      </div>

      <div class="box">
        <div class="titulo">Solution</div>
        <div class="descricao">Business</div>
        <div class="seta">
          <img src="https://lh3.googleusercontent.com/imQ4aIpegaIZNYYmuD5PYsutfn7Ib87cPZvR91DCij5bTV89_aPTTi8REIeXTuJCN_Kv=s86"/>
        </div>
      </div>

      <div class="box">
        <div class="titulo">Community</div>
        <div class="descricao">Developer<br/>communities
        </div>
        <div class="seta">
          <img src="https://lh3.googleusercontent.com/imQ4aIpegaIZNYYmuD5PYsutfn7Ib87cPZvR91DCij5bTV89_aPTTi8REIeXTuJCN_Kv=s86"/>
        </div>
      </div>

      <div class="box">
        <div class="titulo">Updates</div>
        <div class="descricao">Developer Blog</div>
        <div class="seta">
          <img src="https://lh3.googleusercontent.com/imQ4aIpegaIZNYYmuD5PYsutfn7Ib87cPZvR91DCij5bTV89_aPTTi8REIeXTuJCN_Kv=s86"/>
        </div>
      </div>

      <div class="box">
        <div class="titulo">Community</div>
        <div class="descricao">Forum <br /></div>
        <div class="seta">
          <img src="https://lh3.googleusercontent.com/imQ4aIpegaIZNYYmuD5PYsutfn7Ib87cPZvR91DCij5bTV89_aPTTi8REIeXTuJCN_Kv=s86"/>
        </div>
      </div>
    </div>

  </body>
</html>
```

> index.css
```css=
* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  font-family: Helvetica Neue LT, Helvetica Neue, -apple-system,
    BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
}

.faixa {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  padding: 30px 15%;
  background-color: #f5f8fa;
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  margin: 15px;
  width: 300px;
  height: 240px;
  border-radius: 3px;
  box-shadow: 2px 2px 8px 2px rgb(20 23 26 / 10%);
  background-color: #fff;
}

.titulo {
  font-size: 14px;
  font-weight: bold;
}

.descricao {
  font-size: 32px;
  font-weight: bold;
}

.seta img {
  width: 30px;
  height: 30px;
}

.seta {
  align-self: flex-end;
}
```
## Faixa 9
> https://dotnet.microsoft.com/

> index.html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="font.css" />
    <link rel="stylesheet" href="index.css" />
    <title>Microsoft</title>
  </head>
  <body>
    <div class="cabecalho">
      <div class="menu">
        <div class="parte1">
          <img
            src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE1Mu3b?ver=5c31"
          />
          <div class="parte">
            <b class="menu-item">&#10072;</b>
            <b class="menu-item">.NET</b>
          </div>
          <div class="menu-item">About</div>
          <div class="menu-item">Learn</div>
          <div class="menu-item">Architecture</div>
          <div class="menu-item">Docs</div>
          <div class="menu-item">Downloads</div>
          <div class="menu-item">Community</div>
          <button class="botao">LIVE TV</button>
        </div>
      </div>
      <div class="parte2">All Microsoft</div>
    </div>

    <div class="faixa">
      <div class="titulo">.NET</div>
      <div class="descricao">
        Free. Cross-platform. Open source.
        <br />
        A developer platform for building desktop apps.
      </div>
      <div class="botoes">
        <button class="botao1">Get Started</button>
        <button class="botao2">Download</button>
      </div>
      <div class="botao-descricao">Supported on Windows, Linux, and macOS</div>
    </div>
  </body>
</html>

```

> index.css
```css=
body {
  margin: 0px;
  font-family: SegoeUI;
}

.cabecalho {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background: #ffffff;
  color: #262626;
  padding: 20px 5px;
}

.menu {
  justify-content: center;
  padding: 10px;
}

.menu-item {
  padding: 0px 10px;
}

.parte {
  padding: 0px 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font: 18px SegoeUI;
}

.parte1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  font: 13px SegoeUI;
}

.parte2 {
  align-items: center;
  padding: 20px 5px;
  font: 13px SegoeUI;
}

.botao {
  background-color: #ffffff;
  border-radius: 3px;
  padding: 5px 10px 5px;
  font: 13px SegoeUI;
}

.faixa {
  background-image: linear-gradient(#7014e8, #512bd4);
  color: #ffffff;
  padding: 100px;
  text-align: center;
}

.titulo {
  font: 62px SegoeUI;
}

.descricao {
  font: 32px SegoeUI;
}

.botoes {
  padding: 20px;
  border-radius: 3px;
  font: 20px SegoeUI;
}

.botao1 {
  color: #512bd4;
  padding: 10px 20px;
  border-bottom-color: #ffffff;
  border-color: #ffffff;
}

.botao2 {
  background-color: #512bd4;
  padding: 10px 20px;
  border-bottom-color: #ffffff;
  border-color: #ffffff;
}

.botao-descricao {
  font: 15px SegoeUI;
}

button {
  border-style: solid;
  margin: 0px 10px;
}
```

## Faixa 18
> https://azure.microsoft.com/pt-br/

> index.html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="index.css" />
    <title>MICROSOFT</title>
  </head>
  <body>
    
    <div class="faixa">
      <div class="conteudo">
        <div class="texto">A Make-A-Wish® fez a transição para o trabalho remoto em uma semana com o Azure, o Microsoft 365 e o Microsoft Teams e continua transformando desejos em realidade.</div>
        <div class="botao">Estudo de caso ></div>
      </div>
    </div>

  </body>
</html>
```

> index.css
```css=
* {
  box-sizing: border-box;
}

body {
  margin: 0px;
}

.faixa {
  background-image: url("https://azurecomcdn.azureedge.net/cvt-f5000c2f395708c3231e90e8e171ddaec439b663f8a076d3d8a9fb26e91cff23/images/page/home/customer-tabs/make-a-wish-desktop.jpg");
  background-position: center center;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  height: 71vh;
}

.conteudo {
  background-color: rgba(26, 26, 31, 0.94);
  width: 40%;
  font-family: "Segoe UI", SegoeUI, "Segoe WP", Tahoma, Arial, sans-serif;
  font-size: 20px;
  color: white;
  border-radius: 5px;
  padding: 20px;
  margin: 0px 0px 50px 150px;
}

.botao {
  font-size: 14px;
  font-weight: bold;
  text-decoration: underline;
  margin-top: 30px;
}
```