# Final Session | Linguagem de Programação
Danielly Cristina do Carmo Neves
Info A
04
## Faixa 1
### Figma
```htmlmixed=
DOCTYPE html>
<html lang="pt-br">
<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>Figma</title>
</head>
<body>
<div class="container">
<div>
<div class="algo">
<img class="costela" src="adao.png" alt="entre" />
</div>
</div>
<div class="aqui">
<div class="col">Collaboration</div>
<div class="move">Team up to move even faster</div>
<div class="des">
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="tg">
<button><div>Work together</div></button>
</div>
</div>
</div>
</body>
</html>
```
```css=
@font-face {
font-family: Whyte;
src: url("Whyte-Regular.woff");
}
body {
margin: 0px;
font-family: Whyte;
background-color: #ffc700;
}
div.container {
display: flex;
flex-direction: row;
padding: 128px 42px;
}
.aqui {
width: 486px;
height: 590px;
}
.costela {
width: 604px;
height: 590px;
}
.sobrep {
position: absolute;
}
.col {
font-size: 22px;
height: 28px;
}
.move {
font-size: 64px;
font-weight: bolder;
margin: 19.2px 0px 64px;
height: 192px;
}
.des {
font-size: 22px;
margin: 22px 0px;
height: 112px;
}
button {
font-family: Whyte;
font-size: 18px;
padding: 14px 24px 16px;
border-radius: 8px;
background: transparent;
border: 3px solid #000000;
color: #000000;
margin-top: 8px;
font-weight: 700;
}
.algo {
margin-right: 70px;
margin-left: 40px;
position: relative;
}
```
### Resultado
https://codesandbox.io/s/upbeat-napier-m9ll7?file=/index.html&resolutionWidth=320&resolutionHeight=673
## Faixa 2
### Figma Create Account
```htmlmixed=
<!DOCTYPE html>
<html lang="pt-br">
<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>Login Figma</title>
</head>
<body>
<div class="container">
<div class="box">
<div class="try">Try Figma for free.</div>
<div>
<button class="entrar b">
<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="escrever"><input class="a b" type="email" /></div>
<div class="escrever"><input class="a b" type="password" /></div>
<button class="b a criar">
<div class="criado">Creat account</div>
</button>
<div class="texto1 j">Log in with SAML SSO</div>
<div class="texto3 j">
<div class="texto31 j">No account?</div>
<div class="texto32 j">Create one</div>
</div>
<div class="texto4 j">
This site is protected by reCAPTCHA and the Google Privacy Policy and
Terms of Service apply.
</div>
</div>
</div>
</body>
</html>
```
```css=
@font-face {
font-family: Whyte;
src: url("Whyte-Regular.woff");
}
body {
font-family: Whyte;
}
.container {
display: flex;
justify-content: center;
}
.box {
width: 400px;
height: 516px;
padding: 36x 10px;
margin-top: 80px;
}
.box div {
width: 348px;
}
.entrar {
height: 48px;
padding: 0px 20px;
background: transparent;
border-radius: 8px;
border: 3px solid #000000;
color: #000;
font-size: 16px;
font-weight: bolder;
}
.texto3 {
display: flex;
flex-direction: row;
}
.b {
width: 348px;
}
.ou {
height: 60px;
text-align: center;
line-height: 60px;
font-size: 16px;
color: #00000099;
}
.a {
height: 50px;
padding: 0px 6px 0px 12px;
margin-bottom: 24px;
background: transparent;
border-radius: 8px;
border: 3px solid #000000;
widows: 348px;
}
.criado {
font-weight: 700;
font-size: 18px;
color: #ffffff;
}
.criar {
background-color: #000;
margin-bottom: 60px;
}
.try {
font-size: 36px;
text-align: center;
margin-bottom: 45px;
font-weight: bolder;
}
.j {
font-size: 12px;
}
.texto1 {
color: #5551ff;
text-align: center;
width: 133px;
height: 19px;
margin-bottom: 12px;
}
.texto31 {
color: #00000099;
text-align: right;
}
.texto32 {
color: #5551ff;
text-align: left;
margin-left: 4px;
margin-bottom: 32px;
}
.texto4 {
text-align: center;
}
```
### Resultado
https://codesandbox.io/s/funny-rgb-0ifys?file=/index.css:0-1348&resolutionWidth=320&resolutionHeight=675
## Faixa 3
### Udemy
```htmlembedded=
<!DOCTYPE html>
<html lang="pt-br">
<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 - cursos online</title>
</head>
<body>
<div class="container">
<div class="faixa1">
<div class="foto"></div>
<div class="texto">
<div class="titulo">Torne-se um instrutor</div>
<div class="desc">
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 class="b2">
<a
class="aa"
href="https://www.udemy.com/teaching/?ref=teach_home-body"
>
Comece a ensinar hoje mesmo</a
>
</button>
</div>
</div>
</div>
<div class="faixa2">
<div class="mot">
Ganhou a confiança de empresas de todos os tamanhos
</div>
<div class="empresas">
<div class="booking"></div>
<div class="volksvagen"></div>
<div class="mercedes"></div>
<div class="adidas"></div>
<div class="even"></div>
</div>
</div>
</div>
</body>
</html>
```
```htmlembedded=
.container {
padding: 10% 20%;
}
body {
font-family: sf pro text, -apple-system, BlinkMacSystemFont, Roboto, segoe ui,
Helvetica, Arial, sans-serif, apple color emoji, segoe ui emoji,
segoe ui symbol;
}
div .foto {
background-image: url("fotoudemy.png");
width: 400px;
height: 400px;
margin: 0px 96px 0px 0px;
}
.faixa1 {
display: flex;
flex-direction: row;
}
div .booking {
background-image: url("https://s.udemycdn.com/partner-logos/booking-logo.svg");
width: 150.4px;
height: 25px;
}
div .volksvagen {
background-image: url("https://s.udemycdn.com/partner-logos/volkswagen-logo.svg");
width: 32px;
height: 32px;
}
div .mercedes {
background-image: url("https://s.udemycdn.com/partner-logos/mercedes-logo-v2.svg");
width: 148px;
height: 28px;
}
div .adidas {
background-image: url("https://s.udemycdn.com/partner-logos/adidas-logo.svg");
width: 47px;
height: 32px;
}
div .even {
background-image: url("https://s.udemycdn.com/partner-logos/eventbrite-logo.svg");
width: 110px;
height: 20.52px;
}
.empresas {
display: flex;
flex-direction: row;
width: 653px;
height: 54px;
}
.texto {
width: 400px;
height: 400px;
text-align: left;
padding-top: 92px;
}
.titulo {
font-size: 32px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 0.8rem;
max-width: 80rem;
color: #3c3b37;
height: 38px;
}
.desc {
font-size: 19px;
margin: 0px 0px 16px;
color: #3c3b37;
height: 104px;
}
.botao {
height: 48px;
}
.b2 {
width: 246px;
height: 48px;
background-color: #0f7c90;
color: #ffffff;
border: none;
font-size: 16px;
font-family: sf pro text, -apple-system, BlinkMacSystemFont, Roboto, segoe ui,
Helvetica, Arial, sans-serif, apple color emoji, segoe ui emoji,
segoe ui symbol;
border-radius: 4px;
font-weight: 700;
}
.faixa2 {
margin: 0px 121.5px;
padding: 32px;
}
.mot {
width: 650px;
height: 28px;
color: #3c3b37;
font-weight: 700;
font-size: 24px;
margin: 0px 0px 16px;
}
.empresas {
width: 653px;
height: 64px;
justify-content: center;
}
.empresas div {
margin: 16px;
}
.aa {
text-decoration: none;
color: white;
}
```
### Resultado
https://codesandbox.io/s/upbeat-einstein-f982r?file=/index.html
### Faixa 4
### Twitter
```htmlembedded=
<!DOCTYPE html>
<html lang="pt-br">
<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="container">
<div class="faixa1 certo">
<div class="logo certo">
<div class="sobre0">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
class="u01b__icon-home"
>
<path opacity="0" d="M0 0h24v24H0z"></path>
<path
d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"
></path>
</svg>
</div>
<div class="sobre">About</div>
</div>
<div class="opcoes certo">
<div class="dd certo">
Who we are
<div class="simbolo">
<svg
xmlns="http://www.w3.org/2000/svg"
width="9"
height="9"
viewBox="0 0 24 24"
class="twtr-icon"
>
<path opacity="0" d="M0 0h24v24H0z"></path>
<path
d="M20.207 7.043c-.39-.39-1.023-.39-1.414 0L12 13.836 5.207 7.043c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414l7.5 7.5c.195.195.45.293.707.293s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.023 0-1.414z"
></path>
</svg>
<path opacity="0" d="M0 0h24v24H0z"></path>
<path
d="M20.207 7.043c-.39-.39-1.023-.39-1.414 0L12 13.836 5.207 7.043c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414l7.5 7.5c.195.195.45.293.707.293s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.023 0-1.414z"
></path>
</div>
</div>
<div class="dd certo">
Our priorities
<div class="simbolo">
<svg
xmlns="http://www.w3.org/2000/svg"
width="9"
height="9"
viewBox="0 0 24 24"
class="twtr-icon"
>
<path opacity="0" d="M0 0h24v24H0z"></path>
<path
d="M20.207 7.043c-.39-.39-1.023-.39-1.414 0L12 13.836 5.207 7.043c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414l7.5 7.5c.195.195.45.293.707.293s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.023 0-1.414z"
></path>
</svg>
<path opacity="0" d="M0 0h24v24H0z"></path>
<path
d="M20.207 7.043c-.39-.39-1.023-.39-1.414 0L12 13.836 5.207 7.043c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414l7.5 7.5c.195.195.45.293.707.293s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.023 0-1.414z"
></path>
</div>
</div>
<div class="dd certo">
Resources
<div class="simbolo">
<svg
xmlns="http://www.w3.org/2000/svg"
width="9"
height="9"
viewBox="0 0 24 24"
class="twtr-icon"
>
<path opacity="0" d="M0 0h24v24H0z"></path>
<path
d="M20.207 7.043c-.39-.39-1.023-.39-1.414 0L12 13.836 5.207 7.043c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414l7.5 7.5c.195.195.45.293.707.293s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.023 0-1.414z"
></path>
</svg>
<path opacity="0" d="M0 0h24v24H0z"></path>
<path
d="M20.207 7.043c-.39-.39-1.023-.39-1.414 0L12 13.836 5.207 7.043c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414l7.5 7.5c.195.195.45.293.707.293s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.023 0-1.414z"
></path>
</div>
</div>
<div class="bot1">
<button class="bot2">Go to Twitter.com</button>
</div>
</div>
</div>
<div class="faixa2">
<div class="texto">
Twitter is what’s happening and what people are talking about right
now.
</div>
<div class="boty1">
<button class="boty2">Go to Twitter.com</button>
</div>
</div>
</div>
</body>
</html>
```
```css=
body {
margin: 0px;
background-image: url("https://about.twitter.com/content/dam/about-twitter/en/home/home-bg-texture.jpg");
font-family: Chirp, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
Arial, sans-serif;
}
* {
box-sizing: border-box;
}
.certo {
display: flex;
flex-direction: row;
}
.faixa2 {
padding: 08% 20% 15% 15%;
}
.faixa1 {
width: 100%;
height: 96px;
padding: 40px 40px 0px;
justify-content: space-between;
}
.logo {
width: 104px;
height: 28px;
}
.sobre {
font-size: 24px;
color: #14171a;
font-weight: 700;
opacity: 80%;
}
.sobre0 {
padding-top: 6px;
margin-right: 08px;
}
.opcoes {
width: 515px;
height: 84px;
justify-content: space-between;
}
.simbolo {
width: 9px;
height: 9px;
margin-left: 5px;
}
.dd {
color: #14171a;
font-weight: 550;
font-size: 13.92px;
}
.bot1 {
width: 155px;
height: 48px;
}
.bot2 {
width: 155px;
height: 48px;
padding: 16px 18px;
border-radius: 48px;
background-color: white;
border: 2px solid #e8eff3;
}
.texto {
width: 810.3px;
height: 256px;
font-size: 80px;
line-height: 64px;
letter-spacing: -1.2px;
font-weight: 700;
margin-bottom: 42px;
}
.boty1 {
width: 810px;
height: 51px;
}
.boty2 {
width: 201px;
height: 48px;
padding: 16px 24px;
border-radius: 50px;
color: white;
background-color: black;
border: none;
font-size: 18px;
font-weight: bold;
}
```
### Resultado
https://codesandbox.io/s/brave-star-muhqi?file=/index.html
## Faixa 5
### React Native
```htmlembedded=
<!DOCTYPE html>
<html lang="pt-br">
<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>React Native</title>
</head>
<body>
<div class="container">
<div class="faixa1">
<div class="celular"></div>
<div class="texto">
<div class="titulo">Native Development For Everyone</div>
<div class="descricao">
React Native lets you create truly native apps and doesn't
compromise your users' experiences. It provides a core set of
platform agnostic native components like View, Text, and Image that
map directly to the platform’s native UI building blocks.
</div>
</div>
</div>
<div class="faixa2">
<div>
<div class="titulo2">Seamless Cross-Platform</div>
<div class="descricao">
React components wrap existing native code and interact with native
APIs via React’s declarative UI paradigm and JavaScript. This
enables native app development for whole new teams of developers,
and can let existing native teams work much faster.
</div>
</div>
<div class="diag"></div>
</div>
</div>
</body>
</html>
```
```css=
body {
margin: 0px;
font-family: ystem-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans,
BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
}
* {
box-sizing: border-box;
}
.faixa1 {
padding: 50px 20%;
display: flex;
flex-direction: row;
}
.faixa2 {
padding: 50px 15% 50px 20%;
display: flex;
flex-direction: row;
background-color: #0000000d;
}
.celular {
background-image: url("reactive.png");
width: 380px;
height: 320px;
}
.texto {
color: #1c1e21;
padding-left: 100px;
padding-top: 30px;
}
.titulo {
width: 400px;
height: 60px;
font-size: 25px;
margin-bottom: 20px;
font-weight: 700;
}
.descricao {
width: 400px;
height: 140px;
font-size: 17px;
word-spacing: 2px;
line-height: 155%;
}
.diag {
background-image: url("diagrama.png");
width: 430px;
height: 320px;
}
.titulo2 {
height: 30px;
width: 400px;
font-size: 25px;
margin-bottom: 20px;
font-weight: 700;
}
```
### Resultado
https://codesandbox.io/s/affectionate-austin-1soft?file=/index.html
## Faixa 6
### MySQL
```htmlembedded=
<!DOCTYPE html>
<html lang="pt-br">
<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>MySQL</title>
</head>
<body>
<div class="container">
<div class="coluna1">
<div class="essa">
<div class="sub">
<img src="um.png" />
</div>
<div class="sub2">
<div class="titulo">
MySQL Database Service with HeatWave
</div>
<div class="des">
MySQL Database Service is a fully managed database service to
deploy cloud-native applications. HeatWave, an integrated,
high-performance analytics engine accelerates MySQL performance by
400x.
</div>
<div class="learn">
<a class="todos" href="https://www.mysql.com/cloud/"
>Learn More</a
>
</div>
</div>
</div>
<div class="essa">
<div class="sub">
<img src="dois.png" />
</div>
<div class="sub2">
<div class="titulo">
MySQL for OEM/ISV
</div>
<div class="des">
Over 2000 ISVs, OEMs, and VARs rely on MySQL as their products'
embedded database to make their applications, hardware and
appliances more competitive, bring them to market faster, and
lower their cost of goods sold.
</div>
<div class="learn">
<a class="todos" href="https://www.mysql.com/oem/"> Learn More</a>
</div>
</div>
</div>
</div>
<div class="coluna2">
<div class="essa">
<div class="sub">
<img src="tres.png" />
</div>
<div class="sub2">
<div class="titulo">MySQL Enterprise Edition</div>
<div class="des">
The most comprehensive set of advanced features, management tools
and technical support to achieve the highest levels of MySQL
scalability, security, reliability, and uptime.
</div>
<div class="learn">
<a
class="todos"
href="https://www.mysql.com/products/enterprise/"
>
Learn More</a
>
</div>
</div>
</div>
<div class="essa">
<div class="sub">
<img src="quatro.png" />
</div>
<div class="sub2">
<div class="titulo">MySQL Cluster CGE</div>
<div class="des">
MySQL Cluster enables users to meet the database challenges of
next generation web, cloud, and communications services with
uncompromising scalability, uptime and agility.
</div>
<div class="learn">
<a class="todos" href="https://www.mysql.com/products/cluster/">
Learn More</a
>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
```
```css=
body {
margin: 0px;
font-family: "letrinha";
}
* {
box-sizing: border-box;
}
@font-face {
font-family: "letrinha";
src: url("regular");
}
.container {
display: flex;
flex-direction: row;
align-items: end;
padding: 10% 60px 40px 60px;
}
.coluna1 {
margin-right: 15px;
}
.essa {
width: 629.5px;
height: 141px;
padding: 20px 0px;
display: flex;
flex-direction: row;
}
.sub {
width: 90px;
height: 75px;
margin-right: 30px;
}
.titulo {
padding-bottom: 15px;
font-size: 18.7px;
color: #e97b00;
}
.des {
font-size: 14px;
}
.learn {
margin-bottom: 10px;
font-size: 14px;
color: #0074a3;
}
.todos {
color: #0074a3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
```
### Resultado
https://codesandbox.io/s/blue-https-z4bqe?file=/index.html
## Faixa 7: Typing Club
```htmlembedded=
<!DOCTYPE html>
<html lang="pt-br">
<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>Typing Club</title>
</head>
<body>
<div class="container">
<div class="branco"></div>
<div class="faixa">
<div class="col1">
<img
src="//static.typingclub.com/m/tpmedia/img/district.svg"
width="240px"
/>
</div>
<div class="col2">
<div class="titulo">THE AMAZING</div>
<div class="subt">TypingClub School Edition</div>
<div class="texto">
TypingClub School Edition is the most powerful and popular software
used by teachers, schools and districts.
</div>
<div>
<button class="botao">
<a class="esse" href="https://s.typingclub.com/schools.html">
Learn More</a
>
</button>
</div>
</div>
</div>
<div class="branco"></div>
</div>
</body>
</html>
```
```css=
body {
margin: 0px;
font-family: "Work sans", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
}
* {
box-sizing: border-box;
}
@font-face {
font-family: "letra1";
src: url("typingletra1");
font-family: "letra2";
src: url("typingletra2");
font-family: "letra3";
src: url("typingletra3");
}
.faixa {
padding: 100px 12%;
background-color: #262f36;
display: flex;
flex-direction: row;
align-items: center;
}
.col1 {
width: 340px;
height: 232px;
padding: 0px 10px;
}
.col2 {
padding: 0px 10px;
width: 660px;
}
.titulo {
color: rgba(255, 255, 255, 0.7);
font-size: 13px;
margin: 10.5px 0px 5px;
letter-spacing: 0.15em;
font-weight: 600;
}
.subt {
font-size: 28px;
color: #ffffff;
margin-bottom: 10.5px;
line-height: 1.2;
font-weight: 500;
letter-spacing: -0.02em;
}
.texto {
letter-spacing: -0.02em;
margin-bottom: 30px;
font-size: 19px;
color: rgba(255, 255, 255, 0.5);
line-height: 1.6;
}
.botao {
padding: 12px 50px;
font-size: 18px;
background-color: white;
border-radius: 6px;
border: none;
text-align: center;
}
.esse {
color: #333333;
text-decoration: none;
}
.branco {
height: 110px;
}
```
### Resultado
https://codesandbox.io/s/cranky-sea-w6nz1?file=/index.html
## Faixa 8: Dotnet Windows
```htmlembedded=
<!DOCTYPE html>
<html lang="pt-br">
<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>DotNet Microsoft</title>
</head>
<body>
<div class="container">
<div class="faixa1">
<div class="imagem">
<img
src="https://dotnet.microsoft.com/static/images/illustrations/free-code-editor-tools-bot-desk.svg?v=WWIDocc21QEOeLjT9jofZosRF7KhqeGcGtaQr2ZB7TE"
width="540"
height="254"
/>
</div>
<div class="col2">
<div class="titulo">Thank You to All the Contributors</div>
<div class="des">
.NET is open source and we are very thankful for the many
contributions it receives from the community.
</div>
<div>
<button class="botao">
<a class="esse0" href="https://dotnet.microsoft.com/thanks">
See the Contributors</a
>
</button>
</div>
</div>
</div>
<div class="faixa2">
<div class="logos">
<div>
<img
src="https://dotnet.microsoft.com/blob-assets/images/customers/chipotle.png"
width="177"
height="40"
/>
</div>
<div>
<img
src="https://dotnet.microsoft.com/blob-assets/images/customers/ampas.png"
width="53"
height="60"
/>
</div>
<div>
<img
src="https://dotnet.microsoft.com/blob-assets/images/customers/ge-aviation.png"
width="150.5"
height="50"
/>
</div>
<div>
<img
src="https://dotnet.microsoft.com/blob-assets/images/customers/ups.svg"
width="50"
height="60"
/>
</div>
<div>
<img
src="https://dotnet.microsoft.com/blob-assets/images/customers/stackoverflow.svg"
width="204"
height="40"
/>
</div>
</div>
<div class="hiperl">
<a
class="esse"
href="https://dotnet.microsoft.com/platform/customers"
>
Read customer stories</a
>
</div>
</div>
</div>
</body>
</html>
```
```css=
body {
margin: 0px;
font-family: "Segoe UI", "Helvetica", "Arial", "sans-serif";
}
* {
box-sizing: border-box;
}
.faixa1 {
display: flex;
flex-direction: row;
padding: 60px 8%;
}
.col2 {
width: 373px;
height: 226px;
padding: 0px 10px;
margin-left: 93.3px;
}
.titulo {
color: #212529;
margin-bottom: 8px;
font-size: 32px;
line-height: 1.5;
font-weight: 500;
}
.des {
margin-bottom: 20px;
font-size: 15px;
color: #212529;
}
.botao {
width: 175px;
height: 38px;
background-color: transparent;
border-color: #512bd4;
color: #512bd4;
font-size: 1rem;
padding: 6px 12px;
}
.faixa2 {
background-color: #f0f0f0;
height: 184px;
padding: 70px 0px 10px;
}
.logos {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0px 15%;
}
.hiperl {
text-align: center;
margin-top: 10px;
font-size: 12px;
}
.esse {
color: #333333;
}
.esse0 {
color: #512bd4;
text-decoration: none;
}
```
### Resultado
https://codesandbox.io/s/hungry-wozniak-1rlmt?file=/index.html
## Faixa 8: Electron Js
```htmlembedded=
<!DOCTYPE html>
<html lang="pt-br">
<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>Electron Js</title>
</head>
<body>
<div class="container">
<div class="titulo">Começar</div>
<div class="texto">
Para começar com o Electron, confira os recursos abaixo. Saiba como
envolver o seu aplicativo web com o Electron, acessar todas as APIs e
gerar instaladores.
</div>
<div class="faixa">
<div class="col1">
<img
class="imagem"
width="350px"
height="210px"
src="https://www.electronjs.org/images/electron-api-demos.c64a476462a66c25b43073bc87c24f88.png"
/>
</div>
<div class="col2">
<div class="titulo2">Explore as APIs do Electron</div>
<div class="desc">
O
<span style="color: #4070c0;"> app de demos da API Electron</span>
demonstra de forma interativa os recursos mais importantes da API do
Electron. Veja o que é possível fazer com o Electron em exemplos de
código e dicas úteis para a construção de seu aplicativo.
</div>
<div class="aqui"><div class="botao">Baixar no GitHub</div></div>
</div>
</div>
</div>
</body>
</html>
```
```htmlembedded=
body {
margin: 0px;
font-family: "Roboto", "-apple-system", "BlinkMacSystemFont", "Helvetica Neue",
"Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "sans-serif";
}
* {
box-sizing: border-box;
}
.container {
padding: 60px 15%;
background-color: #f6f8f8;
}
.titulo {
text-align: center;
color: #3c4146;
font-size: 40px;
font-weight: 300;
}
.texto {
text-align: center;
color: #767676;
margin-bottom: 30px;
font-size: 20px;
font-weight: 200;
}
.faixa {
display: flex;
flex-direction: row;
padding: 30px 0px 0px;
margin: 24px 0px;
}
.col1 {
padding: 18px 30px;
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
}
.col2 {
padding: 0px 15px 0px 24px;
width: 494px;
}
.titulo2 {
margin: 12px 0px 12px;
font-size: 24px;
height: 31px;
text-align: center;
font-weight: 200;
}
.desc {
margin-bottom: 10px;
color: #767676;
height: 96px;
text-align: center;
}
.botao {
height: 47px;
width: 170px;
padding: 12px 18px;
background-color: transparent;
text-align: center;
color: #1074e7;
font-size: 14px;
border: 2px solid #1074e7;
}
.aqui {
padding: 0px 30% 0px 30%;
}
```
### Resultado
https://codesandbox.io/s/elated-goodall-5zh0p?file=/index.html
## Faixa 10 : Angular
```htmlembedded=
<!DOCTYPE html>
<html lang="pt-br">
<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>Angular</title>
</head>
<body>
<div class="container">
<div class="faixa1">
<div class="texto">
<div class="titulo">Loved by Millions</div>
<div class="conteudo">
From prototype through global deployment, Angular delivers the
productivity and scalable infrastructure that supports Google's
largest applications.
</div>
</div>
<div class="imagem1">
<img
src="http://angular.io/generated/images/marketing/home/loved-by-millions.svg"
width="455"
height="228"
/>
</div>
</div>
<div class="faixa2">
<div class="retangulo">
<div class="imagem2">
<img
src="http://angular.io/generated/images/marketing/home/code-icon.svg"
width="77"
height="77"
/>
</div>
<div class="texto2">
<div class="titulo2">TRY IT NOW</div>
<div class="conteudo2">
Explorer Angular's capabilities with a ready-made sample app. No
setup required.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
```
```css=
body {
margin: 0px;
font-family: "Roboto", "Helvetica Neue Light", "Helvetica Neue", "Helvetica",
"Arial", "Lucida Grande", "sans-serif";
}
* {
box-sizing: border-box;
}
.container {
padding: 80px 15% 50px 15%;
}
.faixa1 {
display: flex;
flex-direction: row;
}
.retangulo {
display: flex;
flex-direction: row;
}
.texto {
width: 391px;
}
.titulo {
color: #1976d2;
font-size: 20px;
margin-top: 35px;
font-weight: bold;
text-transform: uppercase;
}
.conteudo {
margin: 16px 0px;
color: #444444;
line-height: 32px;
font-size: 16px;
}
.imagem1 {
padding-left: 69px;
}
.faixa2 {
padding: 0px 20%;
margin-top: 30px;
}
.retangulo {
margin: 20px 30px;
padding: 24px;
width: 530px;
height: 170px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
align-items: center;
display: flex;
}
.imagem2 {
margin-right: 27px;
}
.titulo2 {
color: #1976d2;
font-size: 20px;
}
.conteudo2 {
color: #444444;
line-height: 32px;
font-size: 16px;
margin-top: 16px;
}
```
### Resultado
https://codesandbox.io/s/gifted-feather-khygq?file=/index.html
Sign in with Wallet
Connect another wallet