### 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">❘</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;
}
```
Google Drive
Gist
Clipboard
Sign in with Wallet
