# Final Session| Linguagem de Programação
Autor: Mariana Costa Medeiros
[Toc]
## Faixa 1
> https://www.figma.com/
> Index.html
```htmlmixed=
<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">
<div class = "Faixa">
<div class = "Titulo"> Try Figma for free </div>
<div class = "Sing_up">
<svg class="svg" width="30" height="14" 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>
<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="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="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>
Sing up with Google
</div>
<div class = "Or" > or </div>
<div class = "E-mail"> Email </div>
<div class = "Senha"> Password </div>
<div class = "botao">
<button> Create account </button>
</div>
<div class = "Text1"> Sign up with SAML SSO </div>
<div class = "Text2"> Already have an account? <span> Log in </span> </div>
<div class = "Text3"> This site is protected by reCAPTCHA and the Google <span> Privacy Policy </span> and <span> Terms of Service </span> apply. </div>
</div>
</div>
</body>
</html>
```
> Index.css
```css=
@font-face {
font-family: fonte1;
src: url("font'.woff");
}
@font-face {
font-family: fonte2;
src: url("font2.woff");
}
.Container {
display: flex;
flex-direction: column;
align-items: center;
margin: 0px 320px 0px 320px;
}
.Faixa {
text-align: center;
}
.Titulo {
font-size: 35px;
font-family: fonte2;
padding: 25px 0px 45px 0px;
}
.Sing_up {
border: solid 2px black;
border-radius: 6px;
margin: 0px 100px 12px 100px;
padding: 12px 0px 12px 0px;
font-size: 16px;
font-family: fonte2;
}
.Or {
font-size: 17px;
font-family: fonte1;
color: #666666;
}
.E-mail {
border: solid 2px black;
border-radius: 6px;
margin: 12px 100px 15px 100px;
padding: 12px 0px 12px 12px;
font-size: 14px;
font-family: fonte1;
color: #6a6a6a;
text-align: left;
}
.Senha {
border: solid 2px black;
margin: 0px 100px 0 100px;
padding: 12px 0px 12px 12px;
border-radius: 6px;
font-size: 14px;
font-family: fonte1;
color: #6a6a6a;
text-align: left;
}
.botao {
margin: 30px 100px 35px 100px;
background-color: black;
border-radius: 6px;
}
button {
background-color: black;
color: white;
font-family: fonte2;
font-size: 18px;
padding: 12px 85px 12px 85px;
border: solid 2px black;
}
.Text1 {
color: #5753ff;
font-size: 12px;
margin-bottom: 16px;
}
.Text2 {
color: #666;
font-size: 14px;
}
.Text3 {
padding: 30px 140px 0px 140px;
color: #000000;
line-height: 18px;
font-family: Whyte,sans-serif;
font-size: 12px;
}
span {
color: #5753ff;
}
```
## Faixa 2
> https://www.udemy.com/
> Index.html
```htmlmixed=
<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">
<div class = "Faixa-1">
<div class = "Part1-F1">
<img src="https://s.udemycdn.com/home/non-student-cta/udlite-lohp-promo-teacher.jpg" class="non-student-cta-image" alt="non student cta image" width="320" height="320">
</div>
<div class ="Part2-F1">
<div class = "Titulo-F1"> Torne-se um instrutor </div>
<div class = "Text-F1"> Os melhores instrutores de todo o mundo lecionam a milhões de alunos na Udemy. Oferecemos as ferramentas e habilidades para ensinar o que você ama. </div>
<div class = "Button-F1"> <button> Comece a ensinar hoje mesmo </button> </div>
</div>
</div>
<div class = "Faixa-2">
<div class = "Linha-F2"> <hr> </hr> </div>
<div class = "Titulo-F2"> Ganhou a confiança de Empreas de todos os tamanhos </div>
<div class = "Empresas-F2">
<img alt="booking" width="140" height="26" src="https://s.udemycdn.com/partner-logos/booking-logo.svg"/>
<img alt="volkswagen" width="32" height="32" src="https://s.udemycdn.com/partner-logos/volkswagen-logo.svg"/>
<img alt="mercedes" width="148" height="28" src="https://s.udemycdn.com/partner-logos/mercedes-logo-v2.svg"/>
<img alt="adidas" width="47" height="32" src="https://s.udemycdn.com/partner-logos/adidas-logo.svg"/>
<img alt="eventbrite" width="100" height="32" src="https://s.udemycdn.com/partner-logos/eventbrite-logo.svg"/>
</div>
<div class = "Linha-F2"> <hr> </hr> </div>
</div>
</div>
</body>
</html>
```
> Index.css
```css=
.Container {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.Faixa-1 {
display: flex;
flex-direction: row;
padding: 80px 260px 0px 300px;
}
.Part1-F1 img {
box-shadow: gold;
padding-right: 50px;
}
.Part2-F1 {
padding: 50px 220px 15px 30px;
}
.Titulo-F1 {
font-weight: bold;
font-size: 38px;
font-family: f pro display,-apple-system,BlinkMacSystemFont,Roboto,segoe ui,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
padding-bottom: 10px;
}
.Text-F1 {
color: #3c3b37;
font-size: 18px;
font-family: sf pro text,-apple-system,BlinkMacSystemFont,Roboto,segoe ui,Helvetica,Arial,sans-serif,apple color emoji,segoe ui;
padding-bottom: 17px;
}
button {
padding: 10px 10px;
background-color: #0f7c90;
color: white;
font-weight: bold;
font-size: 18px;
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: 4px;
border: solid 2px #0f7c90;
}
.Faixa-2 {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 50px;
}
.Titulo-F2 {
font-weight: bold;
font-size: 22px;
font-family: sf pro display,-apple-system,BlinkMacSystemFont,Roboto,segoe ui,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
padding: 15px 0px 20px 0px;
}
.Empresas-F2 img {
padding: 0px 18px 30px 0px;
}
.Linha-F2 hr {
width: 1200px;
border-top: 1px solid #000;
border-color: #dcdacb;
}
```
## Faixa 3
> https://www.typingclub.com/
> Index.html
```sql=
<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> Learn Touch </title>
<link rel="Stylesheet" href="index.css"/>
</head>
<body>
<div class = "Container">
<div class = "Area1">
<img src="//static.typingclub.com/m/tpmedia/img/typingclub-browser3.png" class="img-responsive" style="position:absolute;z-index:-1;margin-left:-50px;">
</div>
<div class = "Area2">
<div class = "Sub-A2"> WHAT IS TYPINGCLUB? </div>
<div class = "Titulo-A2"> TypingClub is the most effective way to learn how to type. </div>
<div class = "Texto-A2"> 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-A2">
<button> Get Started Now </button>
</div>
</div>
</div>
</body>
</html>
```
> Index.css
```css=
img {
width: 400px;
padding-top: 11px;
}
.Container {
display: flex;
flex-direction: row;
justify-content: space-around;
padding: 50px 100px 100px 230px;
box-shadow: -2px 10px 20px #bec8ce;
}
.Area2 {
padding: 50px 80px 0px 400px;
}
.Sub-A2 {
font-size: 11px;
font-weight: bold;
color: #bec8ce;
letter-spacing: 2px;
}
.Titulo-A2 {
font-size: 25px;
font-weight: 600;
font-family: "Work sans","Helvetica Neue",Helvetica,Arial,sans-serif;
padding: 10px 40px 10px 0px;
}
.Texto-A2 {
font-size:17px;
font-family: sans-serif;
color: #6c6f73;
line-height: 22px;
padding-bottom: 20px;
}
.Botao-A2 button {
padding: 8px 18px;
background: #2595ff;
border: solid 1px #2595ff;
border-radius: 4px;
font-weight: 400;
font-size: 15px;
font-family: "Work sans","Helvetica Neue",Helvetica,Arial,sans-serif;
color: white;
}
```
## Faixa 4
> https://www.typingclub.com/
> Index.html
```htmlmixed=
<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> Learn Touch </title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<div class = "Container">
<div claas = "Faixa-1">
<img src="//static.typingclub.com/m/tpmedia/img/district.svg" width="240px" style=""/>
</div>
<div claas = "Faixa-2">
<div class = "Text1-F2"> THE AMAZING </div>
<div class = "Titulo-F2"> TypingClub School Edition </div>
<div class = "Text2-F2"> TypingClub School Edition is the most powerful and popular software used by teachers, schools and districts. </div>
<div class = "Botao-F2">
<button> Learn more </button>
</div>
</div>
</div>
</body>
</html>
```
> Index.css
```css=
.Container {
display: flex;
flex-direction: row;
justify-content: space-around;
background-color: rgb(38, 47, 57);
color: white;
margin-top: 90px;
}
img {
margin: 90px 90px 100px 200px;
}
.Text1-F2 {
padding: 100px 0px 5px 0px;
font-family: "Work sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 2px;
color: #b4b7b9;
}
.Titulo-F2 {
padding-bottom: 18px;
font-family: "Work sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 33px;
}
.Text2-F2 {
font-size: 19px;
margin-right: 260px;
padding-bottom: 25px;
font-family: "Work sans","Helvetica Neue",Helvetica,Arial,sans-serif;
Line-height: 26px;
color: #b4b7b9;
}
button {
background-color: white;
font-family: "Work sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 18px;
padding: 9px 50px;
border-radius: 6px;
border: solid 2px white;
}
```
## Faixa 5
> https://about.twitter.com/
> Index.html
```htmlmixed=
<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">
<div class = "Faixa-1">
<div class = "Logo-F1">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="28" 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>
<span class="u01b__home-link twtr-type--bold-24">
About
</span>
</div>
<div class = "Menu-F1">
<div class = "Item-F1">
Who we are
<span class="u01b-01__icon-chevron-down"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="8" viewBox="0 0 24 24" class="twtr-icon">
<path opacity="0" d="M0 0h24v24H0z"></path>
```
> Index.css
```css=
.Container {
display:flex;
flex-direction: column;
padding: 40px 80px 50px 80px;
}
.Faixa-1 {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.Logo-F1 {
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
font-weight: 500;
font-size: 22px;
fill: #1d9bf0;
}
.Menu-F1 {
display: flex;
flex-direction: row;
align-items: center;
}
.Item-F1 {
padding-right: 15px;
color: #314351;
font-family: Helvetica Neue LT,Helvetica Neue,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
font-size: 15px;
}
.Botao-F1 button {
font-family: Helvetica Neue LT,Helvetica Neue,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
font-size: 15px;
background: white;
padding: 10px 25px;
color: #314351;
border: solid 2px #e8eff3;
border-radius: 25px;
}
.Faixa-2 {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
padding-left: 80px;
padding-top: 80px;
}
.Texto-F2 {
font-family: Chirp Display,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
font-size: 75px;
font-weight: 900;
padding: 0px 300px 40px 0px;
line-height: 65px;
letter-spacing: 1px;
}
.Botao-F2 button {
background: black;
color: white;
padding: 8px 25px;
border: solid 1px black;
border-radius: 100px;
font-family: 400;
font-size: 20px;
font-weight: 700;
font-family: Chirp Bold,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
}
```
## Faixa 6
> https://dotnet.microsoft.com/
> Index.html
```htmlmixed=
<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>Static Template</title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<div class = "Container">
<div class = "Faixa-1">
<div class = "Menu-F1">
<div class = "Logo-F1">
<img alt="" itemprop="logo" class="c-image x-hidden-focus" src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE1Mu3b?ver=5c31" role="presentation" aria-hidden="true">
</div>
<div class = "Item-F1"> <div class= "Net-F1"> |.NET </div> </div>
<div class = "Item-F1"> About </div>
<div class = "Item-F1"> Learn </div>
<div class = "Item-F1"> Architecture </div>
<div class = "Item-F1"> Docs </div>
<div class = "Item-F1"> More </div>
<div class = "Item-f1"> <div class = "Live-F1"> LIVE TV </div> </div>
</div>
<div class = "Metade-F1">
All Microsoft
<span class="u01b-01__icon-chevron-down"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="8" 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></span>
</div>
</div>
<div class = "Faixa-2">
<div class = "Titulo-F2"> .NET </div>
<div class = "Texto1-F2"> Free. Cross-plataform. Open source.</div>
<div class= "Texto2-F2"> A developer platform for building deskto apps </div>
<div class = "Botao-F2">
<button class = "b1-F2"> Get Started </button>
<button class = "b2-F2"> Dowload </button>
</div>
<div class = "Subtexto-F2"> Supported on Windows, Linux, ans mscOS. </div>
</div>
</div>
</body>
</html>
```
> Index.css
```css=
img {
width: 100px;
padding: 0px 15px 5px 0px;
}
.Container {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.Faixa-1 {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 10px 80px 0px 80px;
}
.Menu-F1 {
display: flex;
flex-direction: row;
align-items: center;
}
.Item-F1 {
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 450;
padding: 0px 15px 10px 0px;
color: #262626;
}
.Net-F1 {
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
font-weight: 500;
font-size: 17px;
color: black;
}
.Live-F1 {
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
font-size: 13px;
padding: 5px 6px;
margin-bottom: 8px;
border: solid 1px black;
border-radius: 2px;
}
.Metade-F1 {
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
font-weight: 100;
font-size: 15px;
}
.Faixa-2 {
background-color: #7014e8;
padding: 100px 0px 70px 0px;
color: white;
}
.Titulo-F2 {
text-align: center;
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
font-size: 60px;
font-weight: 600;
}
.Texto1-F2 {
text-align: center;
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
font-size: 24px;
font-weight:630;
margin: 10px 400px 0px 400px;
padding-bottom: 8px;
}
.Texto2-F2 {
text-align: center;
font-size: 24px;
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
font-weight:630;
padding-bottom: 20px;
}
.Botao-F2 {
padding-left: 460px;
margin-right: 10px;
}
button {
padding: 5px 46px;
font-size: 16px;
font-family: "Segoe UI Semibold","Segoe UI",Helvetica,Arial,sans-serif;
}
.b1-F2 {
background-color: white;
border: solid 1px white;
color: #5428e1;
}
.b2-F2 {
border: solid 1px white;
background: #7014e8;
color: white;
}
.Subtexto-F2 {
text-align: center;
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: 400;
padding-top: 10px;
}
```
## Faixa 7
> https://www.electronjs.org/
> Index.html
```htmlmixed=
<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> electronjs </title>
<link rel = "stylesheet" href = "index.css"/>
</head>
<body>
<div class = "Container">
<div class = "Faixa-1">
<div class = "Titulo-F1"> Começar </div>
<div class = "Texto-F1">
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>
<div class = "Faixa-2">
<div class = "Area-F1">
<div class = "imagem-F1">
<img width="249px"
height="221px"
src="https://www.electronjs.org/images/electron-api-demos.c64a476462a66c25b43073bc87c24f88.png"/>
</div>
</div>
<div class = "Area-F2">
<div class = "Titulo-F2"> Explore as APIs do Electron </div>
<div class = "Texto-F2"> O <span> 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>
<button class = Botao> <img src="IMAGEM1.PNG" height="15" width="20"/> Baixar no GitHub </button> </div>
</div>
</div>
<div class = "Linha"> <div>
</div>
</body>
</html>
```
> Index.css
```css=
body {
background-color: #f6f6f6;
color: #767676;
}
.Container {
justify-content: space-around;
display: flex;
flex-direction: column;
}
.Faixa-1{
display: flex;
flex-direction: column;
text-align: center;
margin: 20px;
}
.Titulo-F1 {
font-size: 35px;
font-family:Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Oxygen","Ubuntu","Cantarell","Open Sans",sans-serif;
color: #3c4146;
}
.Texto-F1 {
padding-top: 10px;
padding-left: 140px;
padding-right: 140px;
font-size: 18px;
font-family: Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Oxygen","Ubuntu","Cantarell","Open Sans",sans-serif;
color:#767676;
line-height: 25px;
}
button {
color: #1074e7;
font-size: 12px;
font-weight: bold;
}
span {
color: #4078c0;
}
.Faixa-2 {
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: 30px 200px 0px 170px;
background-color: #f7f8f7f7;
}
.imagem-F1 {
border: 2px solid #d1d9db;
border-top-width: 20px;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 20px 26px -18px #474747;
padding: 15px 55px 15px 55px;
}
.Area-F2 {
display: flex;
flex-direction: column;
align-items: center;
}
.Titulo-F2 {
color: #3c4146;
font-size: 24px;
font-family: Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Oxygen","Ubuntu","Cantarell","Open Sans",sans-serif;
padding-top: 8px;
}
.Texto-F2 {
text-align: center;
padding: 12px 32px;
line-height: 25px;
font-size: 17px;
color: #767676;
}
.Botao {
padding: 12px 20px 12px 20px;
background-color: #ffff;
border-color: #4b96ed;
border-radius: 3px;
}
.Linha {
border-top: solid 1px gray;
border-color: #c5cdce;
margin: 20px 210px 10px 210px;
}
```
## Faixa 8
> https://www.electronjs.org/
> Index.hmtl
```htmlmixed=
<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>Static Template</title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<div class = "Container">
<div class = "Faixa-1">
<div class = "Caixa1-F1">
<img class= "Imagem-F1" src = "SITE1.PNG" width="220" height="190"/>
<div class = "Area-F1">
<div class = "Titulo-F1"> Tecnologias Web </div>
<div class = "Texto-F1"> O Electron usa o Chromium e o Node.js, </br> assim você pode construir sua aplicação </br> com HTML, CSS e JavaScript. </div>
</div>
</div>
<div class = "Caixa-F1">
<img class = "Imagem-F1" src = "SITE2.PNG" width="220" height="190"/>
<div class = "Area-F1">
<div class = "Titulo-F1"> Código Aberto </div>
<div class = "Texto-F1"> Electron é um projeto de código aberto </br> mantido pelo GitHub e por uma </br> comunidade ativa de colaboradores </div>
</div>
</div>
<div class = "Caixa-F1">
<img class = "Imagem-F1" src = "SITE3.PNG" width="220" height="190"/>
<div class = "Area-F1">
<div class = "Titulo-F1"> Multiplataforma </div>
<div class = "Texto-F1"> Compatíveis com Mac, Windows, e Linux,</br> aplicativos Electron são construídos e </br> executados nas três plataformas. </div>
</div>
</div>
</div>
<div class = "Titulo-F2"> As partes difíceis são feitas facilmente </div>
<div class = "Faixa-2">
<div class = "Caixa-F2">
<img class = "Imagem-F2" src = "SITE4.PNG"/>
<div class = "Texto-F2"> Atualizações automáticas </div>
</div>
<div class= "Caixa-F2">
<img class = "Imagem-F2" src = "SITE5.PNG"/>
<div class = "Texto-F2"> Notificações e menus nativos </div>
</div>
<div class = "Caixa-F2">
<img class = "Imagem-F2" src = "SITE6.PNG"/>
<div class = "Texto-F2"> Relatório de falhas </div>
</div>
<div class = "Caixa-F2">
<img class = "Imagem-F2" src = "SITE7.PNG"/>
<div class = "Texto-F2"> Depuração & criação de perfil </div>
</div>
<div class = "Caixa-F2">
<img class = "Imagem-F2" src = "SITE8.PNG"/>
<div class = "Texto-F2"> Instaladores do Windows </div>
</div>
</div>
</div>
</body>
</html>
```
> Index.css
```css=
.Container {
display: flex;
flex-direction: column;
border-top: solid 1px #767676;
padding-top: -20px;
}
.Faixa-1 {
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: 0px 100px 10px 100px;
}
.Imagem-F1 {
padding-left: 40px;
align-items: center;
margin-top: 60px;
padding-right: 45px;
}
.Area-F1 {
display: flex;
flex-direction: column;
align-items: center;
margin: 20px -200px;
padding-bottom: 5px;
}
.Titulo-F1 {
text-align: center;
font-weight: 100;
font-family: Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Oxygen","Ubuntu","Cantarell","Open Sans",sans-serif;
font-size: 30px;
color:#3c4146
}
.Texto-F1 {
font-family: Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Oxygen","Ubuntu","Cantarell","Open Sans",sans-serif;
color: #767676;
text-align: center;
font-size: 15px;
padding-top: 12px;
}
.Faixa-2 {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.Titulo-F2 {
text-align: center;
color: #3c4146;
font-family: Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Oxygen","Ubuntu","Cantarell","Open Sans",sans-serif;
font-size: 34px;
font-weight:80;
}
.Caixa-F2 img {
padding-left: 20px;
}
.Caixa-F2 {
margin: 20px -100px;
}
.Texto-F2 {
font-family: Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Oxygen","Ubuntu","Cantarell","Open Sans",sans-serif;
font-size: 12px;
}
```
## Faixa 9
> https://reactnative.dev/
> Index.html
```htmlmixed=
<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 Native </title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<div class = "Container">
<div class = "Faixa-1">
<div class = "Area1-F1">
<img src="SITE-8.PNG"/>
</div>
<div class = "Area2-F1">
<div class = "Titulo-F1"> Native Development For Everyone </div>
<div class = "Texto-F1"> 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 <span> View</span>, <span> Text </span>,and <span> Image</span> that map directly to the platform’s native UI building blocks. </div>
</div>
</div>
<div class = "Faixa-2">
<div class = "Area1-F2">
<div class = "Titulo-F2"> Seam less Cross-Platform </div>
<div class = "Texto-F2"> 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 = "Area2-F2">
<img src= "SITEE-8.PNG"/>
</div>
</div>
</div>
</body>
</html>
```
> Index.css
```css=
@font-face {
font-family: fonte;
src: url("KFOmCnqEu92Fr1Mu4mxK.woff2");
}
body {
font-family: fonte;
}
span {
border: solid 1px #f2f2f2;
padding: 3px 3px;
background: #f2f2f2;
}
.Area1-F1 img {
padding-left:100px;
}
.Container {
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 50px 10px 30px 10px;
}
.Faixa-1 {
display: flex;
flex-direction: row;
padding: 0px 200px 0px 200px;
}
.Titulo-F1 {
font-weight: bold;
font-size: 25px;
line-height: 30px;
padding: 0px 100px 15px 70px;
}
.Texto-F1 {
font-size: 16px;
padding: 8px 30px 0px 70px;
letter-spacing: 1px;
line-height: 25px;
}
.Faixa-2 {
display: flex;
flex-direction: row;
background-color: #f2f2f2;
padding: 40px 200px 40px 200px;
border-top: solid 1px #dadde1;
border-bottom: solid 1px #dadde1;
}
.Titulo-F2 {
font-size: 25px;
font-weight: bold;
padding: 30px 70px 15px 40px;
}
.Texto-F2 {
font-size: 16px;
padding: 8px 100px 0px 40px;
letter-spacing: 1px;
line-height: 25px;
}
```
## Faixa 10
> https://developer.twitter.com/en
> Index.html
```htmlmixed=
<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> Developer </title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<div class="Container">
<div class="Caixa">
<div class="Titulo">Solution </div>
<div class="Texto"> Academic <br/> Research </div>
<div class="Seta"> <img src="SETA-SITE.PNG"/> </div>
</div>
<div class="Caixa">
<div class="Titulo">Company </div>
<div class="Texto"> Product <br/> roadmap </div>
<div class="Seta"> <img src="SETA-SITE.PNG"/> </div>
</div>
<div class="Caixa">
<div class="Titulo"> Solution </div>
<div class="Texto"> Business </div>
<div class="Seta"> <img src="SETA-SITE.PNG" /> </div>
</div>
<div class="Caixa">
<div class="Titulo">Community </div>
<div class="Texto"> Developer <br/> communities </div>
<div class="Seta"> <img src="SETA-SITE.PNG"/> </div>
</div>
<div class="Caixa">
<div class="Titulo">Updates </div>
<div class="Texto">Developer Blog</div>
<div class="Seta"> <img src="SETA-SITE.PNG"/> </div>
</div>
<div class="Caixa">
<div class="Titulo">Community </div>
<div class="Texto">Forum <br> </div>
<div class="Seta"><img src="SETA-SITE.PNG"/> </div>
</div>
</div>
</body>
</html>
```
> Index.css
```css=
body {
margin: 0px;
font-family: Helvetica Neue LT,Helvetica Neue,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
}
.Container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
background-color: #f5f8fa;
padding: 30px 15%;
}
.Caixa {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
margin: 15px;
width: 300px;
height: 254px;
border-radius: 3px;
box-shadow: 4px 2px 10px 4px #e2e5e8;
background-color: #fff;
}
.Titulo {
font-weight: 800;
font-size: 14px;
}
.Texto {
font-weight: 800;
font-size: 34px;
}
.Seta img {
width: 38px;
height: 38px;
}
.Seta {
align-self: flex-end;
}
```
Google Drive
Gist
Clipboard
Sign in with Wallet
