# Final session | Linguagem de programação
**author** Murillo Tadeu
**Turma** Info - D
**Número**: 33
## Primeita faixa | 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>Learn Touch Typing Free - TypingClub</title>
</head>
<body>
<div class="container">
<div class="box">
<div class="imagem">
<img src="//static.typingclub.com/m/tpmedia/img/typingclub-browser3.png" style="" width="600px">
</div>
<div class="textos">
<div class="titulo">
WHAT IS TYPINGCLUB?
</div>
<div class="subtitulo">
TypingClub is the most effective <br>
way to learn how to type.
</div>
<div class="texto">
It is web based and highly effective. TypingClub is (and will <br>
always be) free for both individuals and schools. There is an <br>
optional paid school edition.
</div>
<div class="botao">
<button> Geat Started Now </button>
</div>
</div>
</div>
</div>
</body>
</html>
```
>Index.CSS
```css=
.container
{
display: flex;
flex-direction: row;
justify-content: center;
padding: 50px 0px;
}
.box{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.textos{
padding: 0px 0px 0px 50px;
}
.titulo{
font-family: "Work sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
margin: 10px 30px 10px ;
letter-spacing: .15em;
color: #BEC8CE;
}
.subtitulo{
font-family: "Work sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 28px;
color: #2D3238;
margin: 0px 30px 11px;
}
.texto{
font-family: "Work sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 20px;
letter-spacing: .02em;
color: #6C6F73;
margin: 0px 30px 30px
}
.botao button {
margin: 0px 30px 30px;
padding: 6px 12px;
font-family: "Work sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
color: #fff;
background-color: #007cf1;
border-color: #0069cd;
cursor: pointer;
border-radius: 6px;
}
```
```
https://codesandbox.io/s/pedantic-roentgen-dnkxy?file=/index.css:0-1013 - Resultado
```
## Segunda faixa | 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>Learn Touching Typing Free - Typing Club</title>
</head>
<body>
<div class="container">
<div class="box">
<img src="//static.typingclub.com/m/tpmedia/img/district.svg" width="240px" style="">
</div>
<div class="box2">
<div class="titulo"> THE AMAZING </div>
<div class="subtitulo"> TypingClub School Edition </div>
<div class="texto"> TypingClub School Edition is the most powerful and <br> popular software used by teachers, schools and <br> districts. </div>
<div class="botao"> <button> Learn more </button> </div>
</div>
</div>
</body>
</html>
```
>Index.css
```css=
.container {
display: flex;
flex-direction: row;
justify-content: center;
padding-top: 90px;
padding-bottom: 90px;
background-color: #262f36;
}
.box2 {
display: flex;
flex-direction: column;
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
}
.titulo {
font-size: 13px;
font-family: "Work sans","Helvetica Neue",Helvetica,Arial,sans-serif;
letter-spacing: 0.15em;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 5px;
}
.subtitulo {
font-family: "Work sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: bolder;
line-height: 1.2;
color: #ffffff;
margin-bottom: 10.5px;
}
.texto {
font-family: "Work sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20px;
line-height: 1.4;
color: #6c6f73;
margin-bottom: 30px;
}
.botao button {
padding: 12px 50px;
font-family: "Work sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
color: #333;
background-color: #fff;
cursor: pointer;
box-sizing: initial;
border-radius: 6px;
}
```
```
https://codesandbox.io/s/epic-cerf-2nctc - Resultado
```
## Terceira faixa | Faixa (12)
>https://reactnative.dev/
>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>React Native • Learn once, write anywhere</title>
</head>
<body>
<div class="container">
<div class="retangulo">
<div class="image"> <img src="celular.png"> </div>
<div class="conteudo">
<div class="titulo"> Native Development For Everyone </div>
<div class="texto"> 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="retangulo2">
<div class="conteudo">
<div class="titulo"> Seamless Cross-Platform </div>
<div class="texto"> 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="image"> <img src="caso.uso.png"> </div>
</div>
</body>
</html>
```
>Index.CSS
```css=
.container {
display: flex;
flex-direction: column;
}
.retangulo {
display: flex;
flex-direction: row;
}
.retangulo2 {
display: flex;
flex-direction: row;
background-color: rgba(0, 0, 0, 0.05);
}
.conteudo {
display: flex;
flex-direction: column;
margin-top: 30px;
margin-left: 210px;
margin-right: 210px;
}
.titulo {
font-size: 25px;
font-weight: 700;
color: #1c1e21;
margin-bottom: 20px;
}
.texto {
display: flex;
color: #1c1e21;
font-size: 19px;
}
```
## Quarta faixa | Faixa (17)
>https://www.mysql.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>MySQL</title>
</head>
<body>
<div class="container">
<div class="coluna">
<div class= "retangulo">
<div class="image"> <img src="nuvenzinha.PNG"/> </div>
<div class="box">
<div class="titulo"> MySQL Database Service with HeatWave </div>
<div class="texto"> MySQL Database Service is a fully managed database service to deploy<br> cloud-native applications. HeatWave, an integrated, high-performance analytics engine accelerates MySQL performance by 400x.</div>
<div class="saiba-mais"> Learn more </div>
</div>
</div>
<div class="retangulo">
<div class="image"> <img src="discostvzinha.PNG"/> </div>
<div class="box">
<div class="titulo"> MySQL for OEM/ISV </div>
<div class="texto"> 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="saiba-mais"> Learn more </div>
</div>
</div>
</div>
<div class="coluna">
<div class="retangulo">
<div class="image"> <img src="discos.PNG"/> </div>
<div class="box">
<div class="titulo"> MySQL Enterprise Edition </div>
<div class="texto"> 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="saiba-mais"> Learn more </div>
</div>
</div>
<div class="retangulo">
<div class="image"> <img src="globo.PNG"/> </div>
<div class="box">
<div class="titulo"> MySQL Cluster CGE </div>
<div class="texto"> 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="saiba-mais"> Learn more </div>
</div>
</div>
</div>
</body>
</html>
```
>Index.CSS
```css=
.container {
display: flex;
flex-direction: row;
}
.coluna {
display: flex;
flex-direction: column;
}
.retangulo {
display: flex;
flex-direction: row;
margin-top: 55px;
margin-left: 35px;
margin-right: 35px;
}
.box {
display: flex;
flex-direction: column;
}
.body-image. {
display: flex;
}
.titulo {
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-size: 18px;
margin-bottom: 14px;
color: #e97b00;
}
.texto {
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-size: 15px;
color: #555;
}
.saiba-mais {
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-size: 15px;
color: #0074a3;
}
```
## Quinta faixa | Faixa (7)
>https://about.twitter.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>About Twitter | Our Company and priorities</title>
</head>
<body>
<div class="container">
<div class="cabecalho">
<div class="simbolo">
<div class="bird">
<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="infos">
<div class="infotexto"> Who we are </div>
<div class="infotexto"> Our priorities </div>
<div class="infotexto"> Resources </div>
<div class="botton"> <button> Go to Twitter.com </button> </div>
</div>
</div>
<div class="conteudo">
<div class="texto"> Twitter is what’s<br> happening and what<br> people are talking<br> about right now. </div>
<div class="botton2"> <button> Go to Twitter.com </button> </div>
</div>
</div>
</body>
</html>
```
>Index.CSS
```css=
.container {
display: flex;
flex-direction: column;
}
.cabecalho {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 30px;
}
.simbolo {
display: flex;
flex-direction: row;
}
.bird {
fill: #1d9bf0;
}
.sobre {
font-weight: 700;
font-size: 25px;
line-height: 1.2rem;
font-family: Chirp Display, -apple-system, BlinkMacSystemFont, Segoe UI,
Helvetica, Arial, sans-serif;
}
.infos {
display: flex;
flex-direction: row;
justify-content: space-between;
font-family: Chirp Display, -apple-system, BlinkMacSystemFont, Segoe UI,
Helvetica, Arial, sans-serif;
}
.infotexto {
display: flex;
flex-direction: row;
margin-right: 40px;
}
.conteudo {
padding-top: 160px;
padding-left: 170px;
background-image: url("https://about.twitter.com/content/dam/about-twitter/en/home/home-bg-texture1.jpg.twimg.1920.jpg");
}
.texto {
font-size: 64px;
font-family: Chirp Display, -apple-system, BlinkMacSystemFont, Segoe UI,
Helvetica, Arial, sans-serif;
font-weight: bolder;
text-align: left;
letter-spacing: -1.2px;
line-height: 64px;
margin-bottom: 30px;
}
.botton button {
font-size: 14px;
height: 48px;
margin-top: -20px;
margin-left: 8px;
background-color: transparent;
border-radius: 48px;
cursor: pointer;
}
.botton2 button {
font-size: 18px;
height: 48px;
padding: 16px 24px;
line-height: 14px;
color: white;
background-color: black;
border-radius: 50px;
cursor: pointer;
}
```
## Sexta faixa | Faixa (10)
>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></title>
</head>
<body>
<div class="faixa1">
<div>
<img src="https://dotnet.microsoft.com/static/images/illustrations/free-code-editor-tools-bot-desk.svg?v=WWIDocc21QEOeLjT9jofZosRF7KhqeGcGtaQr2ZB7TE" width="500" height="242">
</div>
<div class="f1-texto">
<div class="f1-titulo">
Thank You to All the <br>Contributors
</div>
<div class="f1-descriçao">
.NET is open source and we are very thankful for the<br>many contributions it receives from the community.
</div>
<div class="botao">
<button> See the Contributors </button>
</div>
</div>
</div>
<div class="container">
<div class="imagens">
<span class="um"><img src="https://dotnet.microsoft.com/blob-assets/images/customers/chipotle.png" width="180"> </span>
<span class="cont-img1"> <img src="https://dotnet.microsoft.com/blob-assets/images/customers/ampas.png" width="75"> </span>
<span class="cont-img1"> <img src="https://dotnet.microsoft.com/blob-assets/images/customers/ge-aviation.png" width="155"> </span>
<span class="cont-img1"> <img src="https://dotnet.microsoft.com/blob-assets/images/customers/ups.svg" width="50"> </span>
<span class="cont-img1"> <img src="https://dotnet.microsoft.com/blob-assets/images/customers/stackoverflow.svg" width="204"> </span>
</div>
</div>
<div class="frase"> Red customer stories </div>
</body>
</html>
```
>Index.CSS
```css=
.faixa1 {
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: 120px 50px 100px 70px;
}
.f1-texto {
display: flex;
flex-direction: column;
padding: 0px 0px 0px 69px;
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
}
.f1-titulo {
font-size: 32px;
margin: 0px 0px 8px;
font-weight: 600;
color: #212529;
}
.f1-descriçao
{
font-size: 15px;
margin: 0px 0px 20px;
color: #212529;
}
.botao button {
padding: 6px 12px;
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
font-size: 16px;
color: #512bd4;
background-color: transparent;
border-color: #512bd4;
cursor: pointer;
}
.container{
display: flex;
flex-direction: row;
background-color: #f0f0f0;
}
.imagens1{
padding: 10px ;
margin: 10px 17px;
}
.um{
padding: 10px 10px 10px 140px;
}
.cont-img1{
padding: 10px 40px 10px 47px;
margin: 0px 0px 50px 0px
}
.frase{
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
font-size: 12px;
text-align: center;
background-color: #f0f0f0;
color: #333;
padding: 20px 0px 70px;
}
```
## Sétima faixa | Faixa (9)
>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></title>
</head>
<body>
<div class="cabecalho">
<div class="logo"> <img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE1Mu3b?ver=5c31" width="108" height="23"></div>
<div class="menu">
<div class="menu-item-a"> | <b>.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"> Dowloads </div>
<div class="menu-item-b"> Community</div>
<div class="menu-item-botao"> <button> LIVE TV </button> </div>
<div class="menu-item2"> All Microsoft ∨</div>
</div>
</div>
<div class="container">
<div class="textos">
<div class="titulo"> .NET</div>
<div class="subtitulo"> Free. Cross-platform. Open source.<br>
A developer platform for building all your apps. </div>
</div>
<div class="botoes">
<div class="botaoA"> <button> Get Started </button> </div>
<div class="botaoB"> <button> Download </button> </div>
</div>
<div class="txt"> Supported on Windows, Linux, and macOS </div>
</div>
</body>
</html>
```
>Index.CSS
```css=
.cabecalho{
display: flex;
flex-direction: row;
}
.logo{
margin: 1px 0px 0px 38px;
padding: 16px 6px 16px 10px
}
.menu-item-a{
font-family: 'Segoe UI',SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 600;
margin: 1px 0px 0px 18px;
padding: 12px 6px 16px 10px;
}
.menu{
display: flex;
flex-direction: row;
align-items: center;
}
.menu-item{
font-family: 'Segoe UI',SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
margin: -7px 0px 0px;
padding: 16px 8px 10px;
}
.menu-item-b{
font-family: 'Segoe UI',SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
padding: 16px 30px 16px 12px;
}
.menu-item-botao button{
font-family: 'Segoe UI',SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
height: 31px;
background: transparent;
border: 1px solid;
}
.menu-item2{
font-family: 'Segoe UI',SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
padding: 16px 30px 16px 440px;
}
.container{
background-image: url(../../../static/images/redesign/home-hero-bg.svg),linear-gradient(180deg,#7014e8 30.12%,#0e5ecf 192.47%);
background-size: 100% 100%;
margin: 0px -20px 0px -20px;
}
.textos{
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.titulo{
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
font-size: 62px;
margin: 70px 0px 0px 0px;
color: #fff;
}
.subtitulo{
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
font-size: 32px;
margin: 20px 0px;
color: #fff;
}
.botoes{
display: flex;
flex-direction: row;
justify-content: center;
}
.botoes{
font-family: "Segoe UI Semibold","Segoe UI",Helvetica,Arial,sans-serif;
font-size: 20px;
}
.botaoA button {
font-size: 20px;
width: 180px;
padding: 8px 16px;
margin: 0px 10px;
border: none;
outline: none;
cursor: pointer;
transition: 0.3s;
color: #512bd4;
background: #fff;
}
.botaoB button {
font-size: 20px;
width: 180px;
padding: 8px 16px;
margin: 0px 10px;
border: 2px solid;
outline: none;
cursor: pointer;
transition: 0.3s;
color: #fff;
background-color: transparent;
border-color: #fff;
}
.txt{
text-align: center;
margin: 20px;
font-family: "Segoe UI Semibold","Segoe UI",Helvetica,Arial,sans-serif;;
font-size: 15px;
color: #FFFFFF;
padding: 0px 0px 70px 0px;
}
```
## Oitava faixa | Faixa (1)
>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>Figma: the collaborative interface design tool.</title>
</head>
<body>
<div class="container">
<div class="retangulo">
<div class="image"><img src="printfigma.jpeg" width="604" /></div>
<div class="conteudo">
<div class="titulo">Collaboration</div>
<div class="subtitulo"> Team up to<br> move even<br>faster </div>
<div class="texto"> 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="botao"><button>Work together</button></div>
</div>
</div>
</div>
</body>
</html>
```
>Index.CSS
```css=
.container{
display: flex;
flex-direction: row;
background: #FFC700;
padding-bottom: 79px;
}
.retangulo{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 10px
}
.conteudo{
display: flex;
flex-direction: column;
}
.titulo{
display: flex;
font-family: Whyte, sans-serif;
font-size: 22px;
color: black;
letter-spacing: 0.01em;
}
.subtitulo{
display: flex;
font-family: Whyte, sans-serif;
font-size: 54px;
font-weight: 700;
margin-bottom: 64px;
margin-top: 0.3em;
}
.texto{
display: flex;
font-family: Whyte, sans-serif;
font-size: 22px;
line-height: 1.3;
letter-spacing: 0.01em;
}
.botao button{
display: inline-block;
border-radius: 8px;
padding: 14px 24px 16px;
font-size: 18px;
font-weight: 700;
line-height: 1;
border: 3px solid #000000;
margin-top: 30px;
background-color: #FFC700;
cursor: pointer;
}
.image{
display: flex;
margin-right: 40px;
}
```
Google Drive
Gist
Clipboard
Sign in with Wallet
