# FINAL SESSION | LINGUAGEM DE PROGRAMAÇÃO:
> Autor: Guilherme Silva dos Santos
> Número: 12
> Turma: Info D
## 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" />
<link rel="stylesheet" href="index.css" />
<title> Figma </title>
</head>
<body>
<div class="container">
<div class="box1">
<div class="imagem">
<img src="img1.png"/>
</div>
<div class="imagem2">
<img src="img2.png"/>
</div>
</div>
<div class="box2">
<div class="categoria"> Collaboration </div>
<div class="titulo">
Team up to move even faster
</div>
<div class="descricao">
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"> Work together </div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
@font-face {
font-family: Whyte-Bold1;
src: url('Whyte-Bold1.woff');
}
@font-face {
font-family: Whyte-Bold2;
src: url('Whyte-Bold2.woff');
}
@font-face {
font-family: Whyte-Regular1;
src: url('Whyte-Regular1.woff');
}
@font-face {
font-family: Whyte-Regular2;
src: url('Whyte-Regular2.woff');````
}
body {
margin: 50px -10px 50px -8px;
}
.container {
display: flex;
flex-direction: row;
background-color: rgb(255, 199, 0);
}
.imagem img {
min-width: 550px;
max-width: 100%;
height: auto;
margin: 35px 10px 20px 222px;
}
.imagem2 img {
min-width: 300px;
max-width: 100%;
margin-left: -8px;
margin: -25px 0px 20px 320px;
}
.categoria {
font: 15px Whyte-Regular1;
margin: 60px 0px 20px 222px;
margin: 50px 20% 30px 25%;
}
.titulo {
font: 50px Whyte-Bold2;
margin: -20px 10% 50px 25%;
line-height: 50px;
}
.descricao {
font: 15px Whyte-Regular2;
margin: 0px 20% 30px 25%;
}
.botao {
font: 16px Whyte-Bold2;
border-style: solid;
border-radius: 10px;
padding: 10px 10px 10px 10px;
margin: 0px 20% 30px 25%;
}
```
## Faixa 2
> 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" />
<link rel="stylesheet" href="index.css" />
<title>Figma</title>
</head>
<body>
<div class="container">
<div class="titulo">Try figma for free.</div>
<div class="botao1">Sign up with Google</div>
<div class="opcao">or</div>
<div class="botao2">Email</div>
<div class="botao3">Password</div>
<div class="botao4"><button class="botao4">Create account</button></div>
<div class="sign">Sign up with SAML SSO0</div>
<div class="log">Already have an account? Log in</div>
<div class="info">
This site is protected by reCAPTCHA and the Google Privacy
</div>
<div class="policy">Policy and Terms of Service apply.</div>
</div>
</body>
</html>
```
> index.css
```css=
@font-face {
font-family: Whyte-Bold;
src:url(Whyte-Bold.woff);
}
@font-face {
font-family: Whyte-Bold2;
src:url(Whyte-Bold.woff2);
}
@font-face {
font-family: Whyte-Regular;
src:url(Whyte-Regular.woff);
}
@font-face {
font-family: Whyte-Regular2;
src:url(Whyte-Regular.woff2);
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.titulo {
font: 36px Whyte-Bold;
margin: 50px 50px;
}
.botao1 {
border-style: solid;
border-radius: 10px;
padding: 9px 95px;
font: 16px Whyte-Bold;
}
.botao2 {
border: solid #000000;
border-radius: 5px;
padding: 12px 300px;
padding-left: 12px;
font: 14px Whyte-Regular;
color:rgb(118, 118, 118) ;
margin: 1px 18px;
}
.opcao {
margin: 20px 20px;
color: #6666 ; ;
font: 16px Whyte-Regular;
}
.botao3 {
border: solid #000000;
border-radius: 5px;
padding: 12px 273px;
padding-left: 12px;
font: 14px Whyte-Regular;
color:rgb(118, 118, 118) ;
margin: 18px 15px;
}
.botao4 {
color: #000000;
border-radius: 7px;
font: 20px Whyte-Bold;
color: #ffffff ;
margin-bottom: 0px;
margin: 15px 10px;
}
.botao4 button {
background-color: #000000;
border: none;
padding: 10px 105px;
}
.sign {
font: 12px Whyte-Regular;
margin: 10px;
color: #5551ff;
}
.log {
font: 14px Whyte-Regular;
margin: 10px;
color:rgb(118, 118, 118) ;
}
.poslog {
display: flex;
flex-direction: row;
}
.logspurple {
font: 14px Whyte-Regular;
margin: 10px, ;
color:#5551ff;
}
.info {
font: 14px Whyte-Regular;
margin: 0px;
}
.policy {
font: 14px Whyte-Regular;
margin: 0px;
}
```
## Faixa 3
> https://www.udemy.com/
> index.html
```htmlmixed=
<html>
<title> Cursos online - aprenda o que quiser , quando quiser | Udemy </title>
<head>
<meta charset="UTF-8">
</head>
<br></br>
<br></br>
<br></br>
<br></br>
<h1> Alunos estão assistindo </h1>
<link rel="stylesheet" href="index.css" />
<body>
<div class="container">
<div class="box">
<div class="imagem"> <img src="s1 m1.png"> </div>
<div class="nomeVideo"> Java COMPLETO Programação </div>
<div class="nomeVideo2"> Orientada a Objetos + Projetos </div>
<div class="autor"> Nelio alves </div>
<div class="avaliacao"> <img src="avaliacao48.png"> (23.158) </div>
<div class="precode"> R$27,90 </div> <div class="precopor"> $109,90 </div>
<div class="descricao"> <button class="desc"> Mais vendidos </button> </div>
</div>
<div class="box">
<div class="imagem"> <img src="s1 m2.png"> </div>
<div class="nomeVideo"> Curso Web designer Completo: </div>
<div class="nomeVideo2"> HTML, CSS3 e JS + 5 Projetos </div>
<div class="autor"> Daniel Tapas Morales, serfronted Cursos </div>
<div class="avaliacao"> <img src="avaliacao47.png"> (5.124) </div>
<div class="precode"> R$34,90 </div> <div class="precopor"> R$109,90</div>
<div class="descricao"> <button class="desc1"> Classificação mais alta </button> </div>
</div>
<div class="box">
<div class="imagem"> <img src="s1 m3.png"> </div>
<div class="nomeVideo"> The Complete 2021 Web</div>
<div class="nomeVideo2"> Development Bootcamp </div>
<div class="autor">Dr. Angela Yu </div>
<div class="avaliacao"> <img src="avaliacao47.png"> (123.918) </div>
<div class="precode"> R$22,90 </div> <div class="precopor"> R$399,90</div>
<div class="descricao"> <button class="desc"> Mais vendidos</button> </div>
</div>
<div class="box">
<div class="imagem"> <img src="s1 m4.png"> </div>
<div class="nomeVideo"> Investimentos: aprenda a </div>
<div class="nomeVideo2"> Investir seu dinheiro + 3 bonus </div>
<div class="autor"> Leonardo Baldochi </div>
<div class="avaliacao"> <img src="avaliacao47.png"> (7.715) </div>
<div class="precode"> R$27,90 </div> <div class="precopor"> R$349,90</div>
<div class="descricao"> <button class="desc"> Mais vendidos </button> </div>
</div>
<div class="box">
<div class="imagem1"> <img src="s1 m5.png"> </div>
<div class="nomeVideo"> Do Básico ao Avançado: O Curso </div>
<div class="nomeVideo2"> Completo de Microsoft Excel </div>
<div class="autor"> João Paulo de Lira </div>
<div class="avaliacao"> <img src="avaliacao47.png"> (73.493) </div>
<div class="precode"> R$27,90 </div> <div class="precopor"> R$99,90</div>
</div>
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
@font-face {
font-family: fontbold;
src: url('fontbold.ttf');
}
@font-face {
font-family: fontsemibold;
src: url('fontsemibol.ttf')
}
@font-face {
font-family: fontmedium;
src: url('fontmedium.ttf')
}
@font-face {
font-family: fontthin;
src: url('fontthin.ttf')
}
.desc {
font-family: fontmedium;
border-radius: 5px;
border: 0px;
}
.desc1 {
font-family: fontmedium;
border-radius: 5px;
border: 0px;
}
.box {
width: 220px;
border: 1px solid rgb(255, 255, 255);
padding: 21 px 16px 11px 16px;
margin:3px;
}
.imagem img {
width: 215px;
}
.precode {
display:inline-block
}
.precopor {
display:inline-block
}
h1 {
font-family: fontbold;
font-size: 25px;
}
.nomeVideo {
font-family: fontbold;
font-size: 14px;
line-height: 17px;
}
.nomeVideo2 {
font-family: fontbold;
font-size: 14px;
line-height: 17px;
}
.autor {
font-family: fontthin;
font-size: 13px;
}
.precode {
font-family: fontbold;
height: 18px;
width: 90px;
font-size: 14px;
display:inline;
}
.precopor {
font-family: fontthin;
font-size: 12px;
text-decoration: line-through;
}
.enunciado {
font-family: fontbold;
}
.avaliacao img {
width: 90px;
}
.avaliacao {
font-family: fontthin;
font-size: 13px;
}
.desc {
background-color: #eceb98;
}
.desc1 {
background-color: #f3ca8c;
}
.container {
display:flex;
flex-direction: row;
flex-wrap: wrap;
}
.imagem1 img {
width: 236px;
}
```
## Faixa 6
> 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">
<link rel="stylesheet" href="index.css"/>
<title>Lern Touch Typping Free - TypingClub </title>
</head>
<body>
<div class="container">
<div class="imagem">
<img src="programacao.PNG"/>
</div>
<div class="box2">
<div class="texto1"> WHAT IS TYPINGCLUB? </div>
<div class="texto2"> TypingClub is the most effective way to learn how to type. </div>
<div class="texto3"> 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"> Get Started Now </div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
@font-face {
font-family: fonte1;
src: url("fonte1");
}
@font-face {
font-family: fonte2;
src: url("fonte2");
}
@font-face {
font-family: fonte3;
src: url("fonte3");
}
body {
margin: 8px;
}
.container {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 150px;
}
.box1 {
width: 220px;
margin: 3px;
}
.box2 {
width: 400px;
display: flex;
flex-direction: column;
padding-left: 40px;
}
.imagem img {
align-items: left;
}
.texto1 {
font-family: fonte3;
color: rgba(139, 124, 124, 0.582);
}
.texto2 {
font-family: fonte1;
font-size: 28px;
color: rgba(0, 0, 0, 0.829);
}
.texto3 {
font-family: fonte3;
font-size: 16px;
color: rgba(83, 74, 74, 0.815);
margin-bottom: 10px;
}
.botao {
background-color: rgb(58, 156, 247);
color: white;
padding: 12px 12px;
text-align: center;
display: inline-block;
font-size: 16px;
border-radius: 5px 5px 5px 5px;
margin: 9px 10px;
}
```
## Faixa 7
>https://about.twitter.com/V
> 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>Lern Touch Typping Free - TypingClub </title>
</head>
<body>
<div class="container">
<div class="imagem">
<img src="programacao.PNG"/>
</div>
<div class="box2">
<div class="texto1"> WHAT IS TYPINGCLUB? </div>
<div class="texto2"> TypingClub is the most effective way to learn how to type. </div>
<div class="texto3"> 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"> Get Started Now </div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
@font-face {
font-family: fonte1;
src: url('fonte1');
}
@font-face {
font-family: fonte2;
src: url('fonte2');
}
@font-face {
font-family: fonte3;
src: url('fonte3');
}
body {
margin: 8px;
}
.container{
display:flex;
flex-direction: row;
justify-content: center;
margin-top: 150px;
}
.box1 {
width: 220px;
margin:3px;
}
.box2 {
width: 400px;
display: flex;
flex-direction: column;
padding-left: 40px;
}
.imagem img {
align-items: left;
}
.texto1 {
font-family: fonte3;
color: rgba(139, 124, 124, 0.582);
}
.texto2 {
font-family: fonte1;
font-size: 28px;
color: rgba(0, 0, 0, 0.829);
}
.texto3 {
font-family: fonte3;
font-size: 16px;
color: rgba(83, 74, 74, 0.815);
margin-bottom: 10px;
}
.botao {
background-color: rgb(58, 156, 247);
color: white;
padding: 12px 12px;
text-align: center;
display: inline-block;
font-size: 16px;
border-radius: 5px 5px 5px 5px;
margin: 9px 10px
}
```
## Faixa 8
> 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">
<link rel="stylesheet" href="indes.css" />
<title>Use Cases, Tutorials, & Documentation | Twitter Developer</title>
</head>
<body>
<br>
<div class="container">
<div class="faixa1">
<div class="box"> <button class="botão">
<div class="miniti"> Solution </div>
<div class="titulo"> Academic Research</div>
<div class="seta"> <img src='seta.png'> </div> </button>
</div>
<div class="box"> <button class="botão">
<div class="miniti"> Solution </div>
<div class="titulo"> Business </div>
<div class="seta"> <img src='seta.png'> </div> </button>
</div>
<div class="box"> <button class="botão">
<div class="miniti"> Updates </div>
<div class="titulo"> Developer blog </div>
<div class="seta"> <img src='seta.png'> </div> </button>
</div>
</div>
<div class="faixa2">
<div class="box"> <button class="botão">
<div class="miniti"> Company </div>
<div class="titulo"> Product roadmap </div>
<div class="seta"> <img src='seta.png'> </div> </button>
</div>
<div class="box"> <button class="botão">
<div class="miniti"> Community </div>
<div class="titulo"> Developer communities </div>
<div class="seta"> <img src='seta.png'> </div> </button>
</div>
<div class="box"> <button class="botão">
<div class="miniti"> Community </div>
<div class="titulo"> Forum </div>
<div class="seta"> <img src='seta.png'> </div> </button>
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
@font-face {
font-family: fonte-1;
src: url("fonte1.woff");
}
.container {
width: 1180px;
height: 543px;
background-color: #f5f8fa;
padding: 15px 10px 15px 160px;
}
.faixa1 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.faixa2 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box {
width: 340px;
height: 280px;
}
.botão {
width: 320px;
height: 260px;
border-radius: 2px;
border: 0px;
background-color: white;
box-shadow: 2px 2px 8px 2px rgb(20 23 26 / 10%);
}
.miniti {
font-size: 13px;
font-family: fonte-1;
padding: 20px 235px 25px 10px;
}
.titulo {
font-family: fonte-1;
font-size: 35px;
width: 5px;
height: 100px;
padding: 10px 10px 35px 5px;
}
.seta {
width: 37px;
height: 37px;
padding: 0px 0px 35px 250px;
}
.seta img {
width: 32px;
}
```
## Faixa 13
> https://angular.io/
> index.html
```htmlmixed=
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index1.css" />
<title>Static Template</title>
</head>
<body>
<div class="conteiner">
<div class="texto">
<div class="titulocontainer">
<div class="titulo">LOVED BY MILLIONS</div>
<div class="descricao">
From prototype through global deployment, Angular delivers the
productivity and scalable infrastructure that supports Google's
largest applications.
</div>
</div>
<div class="imagem">
<img
src="https://angular.io/generated/images/marketing/home/loved-by-millions.svg"
width="455"
height="228"
/>
</div>
</div>
</div>
<div class="div">
<div class="imagem2">
<img
src="https://angular.io/generated/images/marketing/home/code-icon.svg"
width="70"
height="70"
align="left"
/>
</div>
<div class="containerbaixo">
<div class="Titulobaixo">TRY IT NOW</div>
<div class="descricaobaixo">
Explore Angular's capabilities with a ready-made sample app. No setup
required.
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
@font-face {
font-family: Robot-100;
src: url("Robot-100.woff2");
}
@font-face {
font-family: Robot-200;
src: url("Robot-200.woff2");
}
@font-face {
font-family: Robot-300;
src: url("Robot-300.woff2");
}
@font-face {
font-family: Robot-400;
src: url("Robot-400.woff");
}
@font-face {
font-family: Robot-500;
src: url("Robot-500.woff2");
}
@font-face {
font-family: Robot-600;
src: url("Robot-600.woff");
}
.conteiner {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 32px 126px;
}
.texto {
display: flex;
flex-direction: row;
}
.titulo {
font-family: robot-400;
color: #1976d2;
font-size: 2rem;
line-height: 3.5rem;
}
.descricao {
font-family: Robot-300;
color: #444;
line-height: 2rem;
max-width: 391px;
}
.imagem {
margin-left: 70px;
}
.titulocontainer {
margin-top: 20px;
}
.containerbaixo {
max-width: 342.63;
max-height: 170;
margin-top: 10px;
padding-left: 50px;
padding-right: 100px;
}
.Titulobaixo {
font-family: robot-400;
color: #1976d2;
}
.div {
max-width: 342.63;
max-height: 170;
display: flex;
justify-content: space-evenly;
margin: 0px 720px;
cursor: pointer;
}
.descricaobaixo {
font-family: Robot-300;
color: #444;
max-width: 342.63px;
line-height: 2rem;
text-align: left;
flex-direction: column;
justify-content: space-between;
padding-right: 100px;
width: 300px;
height: 240px;
}
.imagem2 {
margin-left: 300px;
}
```
## Faixa 14
> 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" />
<link rel="stylesheet" href="index.css" />
<title>Electron</title>
</head>
<body>
<div class="conteiner">
<div class="faixa1-principal">
<div class="faixa1">
<div class="f1-imagem">
<img
src="https://www.electronjs.org/images/web-tech.635d8e8f8a2d536d1c15ac2ffe8219b1.svg"
/>
</div>
<h3 class="f1-título">Tecnologias Web</h3>
<p class="f1-texto">
O Electron usa o Chromium e o Node.js, assim você pode construir sua
aplicação com HTML, CSS e JavaScript.
</p>
</div>
<div class="faixa1">
<div class="f1-imagem">
<img
src="https://www.electronjs.org/images/open-source.ad6b97548663f68df8d9c325300415ed.svg"
/>
</div>
<h3 class="f1-título">Código Aberto</h3>
<p class="f1-texto">
Electron é um projeto de código aberto mantido pelo GitHub e por uma
comunidade ativa de colaboradores.
</p>
</div>
<div class="faixa1">
<div class="f1-imagem">
<img
src="https://www.electronjs.org/images/cross-platform.cbf4a894b3f3de85f8d719ab5b3db111.svg"
/>
</div>
<h3 class="f1-título">Multiplataforma</h3>
<p class="f1-texto">
Compatíveis com Mac, Windows, e Linux, aplicativos Electron são
construídos e executados nas três plataformas.
</p>
</div>
</div>
<div class="titulo2">As partes difíceis são feitas facilmente</div>
<div class="faixa2-principal">
<div class="faixa2">
<div class="f2-imagem">
<img src="imagem01.jpeg" />
</div>
<div class="f2-texto">
Atualizações automáticas
</div>
</div>
<div class="faixa2">
<div class="f2-imagem">
<img src="imagem02.jpeg" />
</div>
<div class="f2-texto">
Notificações e menus nativos
</div>
</div>
<div class="faixa2">
<div class="f2-imagem">
<img src="imagem03.jpeg" />
</div>
<div class="f2-texto">
Relatório de falhas
</div>
</div>
<div class="faixa2">
<div class="f2-imagem">
<img src="imagem04.jpeg" />
</div>
<div class="f2-texto">
Depuração & criação de perfil
</div>
</div>
<div class="faixa2">
<div class="f2-imagem">
<img src="imagem05.jpeg" />
</div>
<div class="f2-texto">
Instaladores do Windows
</div>
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
@font-face {
font-family: Roboto;
src: url("Roboto.zip");
}
body {
align-items: center;
margin: 100px 0px 0px;
}
.conteiner {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
max-width: 1012px;
margin-right: auto;
margin-left: auto;
}
.faixa1-principal {
display: flex;
flex-direction: row;
align-items: center;
}
.faixa1 {
display: flex;
flex-direction: column;
align-items: center;
}
.f1-imagem {
max-height: 200px;
border-style: none;
max-width: 100%;
width: 200px;
height: auto;
}
.f1-titulo {
display: flex;
flex-direction: row;
justify-content: center;
font-family: Roboto;
}
h3 {
font-family: Roboto;
font-size: 26px;
color: #3C4145;
margin: 0px 0px 6px;
}
p {
margin: 0px 20px 55px;
color: #767676;
text-align: center;
font-size: 18px;
font-family: Roboto;
}
.titulo2 {
display: flex;
flex-direction: column;
font-family: Roboto;
font-size: 36px;
color: #3C4145;
}
.faixa2-principal {
display: flex;
flex-direction: row;
align-items: center;
}
.faixa2 {
display: flex;
flex-direction: column;
align-items: center;
margin: 0px -5px 55px;
}
.f2-imagem {
margin: 10px 0px 0px 0px;
}
.f2-texto {
margin: 0px 20px;
color: #767676;
text-align: center;
font-family: Roboto;
font-size: 12px;
}
```
## Faixa 18
> https://azure.microsoft.com/pt-br/
> 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" />
<link rel="stylesheet" href="index.css" />
<title>microsoft</title>
</head>
<body>
<div class="conteiner">
<div class="botao">
<p 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.
</p>
<div class="texto2">Estudo de caso</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
@font-face {
font-family: latest;
src: url("latest.woff2");
}
@font-face {
font-family: latest2;
src: url("latest (2).woff2");
}
* {
box-sizing: border-box;
}
body {
margin: 0px;
}
.conteiner {
background-image: url('https://azurecomcdn.azureedge.net/cvt-516699d3bb41b6946f98a228f980031cb70fa9cdf9f4c8822f3a19ac90d14aea/images/page/home/customer-tabs/make-a-wish-desktop.jpg');
background-position: center center;
display: flex;
flex-direction: row;
align-items: flex-end;
height: 85vh;
}
.botao {
background-color: rgba(26, 26, 31, .94);
width: 500px;
font-size: 20px;
font-family: latest;
color: #ffffff;
border-radius: 5px;
padding: 20px;
margin: 0px 0px 50px 30px;
}
.texto2 {
font-family: latest2;
font-size: 14px;
text-decoration: underline;
margin-top: 30px;
}
```
## Faixa 20
> https://aws.amazon.com/pt/
> index.html
```htmlmixed=
<html lange="en">
<head>
<meta charset="UTF-8">
<meta name="viewpost" content="widh"=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Amazon Web </title>
<link rel= "stylesheet" href="index.css"/>
</head>
<body>
<div class="container-Amazon">
<div class="titulo1"> Soluções de nuvem híbrida de AWS </div>
<div class= "titulo2"> Experência consistente em toda a AWS e nos ambientes on-premises</div>
<div class="solucoes">
<div>
<div class="imagem1">
<img src="https://d1.awsstatic.com/webteam/homepage/Hybrid%20Solutions/VMWareCloud_Icon.55cb0bcef2c74b55acdb7155e3524e4b5436ec6e.png"/>
</div>
<div class="nome">VWware Cloud on AWS</div>
<div class="descricao"> Migre e amplie ambientes VMware para a nuvem AWS</div>
<div class="botao">saiba mais ≫ </div>
</div>
<div>
<div class="imagem2">
<img src="https://d1.awsstatic.com/webteam/homepage/Hybrid%20Solutions/AWSOutposts_Icon.35873a6a5fc187904cab8b8c8793f91625e7cb67.png"/>
</div>
<div class="nome">AWS Outposts</div>
<div class="descricao"> Wxecute a infraestrutura da AWS on-premises para ter uma esperiência híbrida verdadeiramente consistente </div>
<div class="botao">saiba mais ≫</div>
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
@font-face {
font-family: AmazonEmber_Bd;
src: url('AmazonEmber_Bd.woff2');
}
@font-face {
font-family: AmazonEmber_Lt;
src: url('AmazonEmber_Lt.woff2');
}
@font-face {
font-family: AmazonEmber_Rg;
src: url('AmazonEmber_Rg.woff2');
}
body { margin: 0px; }
.container-Amazon {
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
background-image: url(capa_nuvem.png);
background-size: auto;
color: white;
padding: 20px;
}
.titulo1 {
font: 40px AmazonEmber_Bd;
}
.titulo2 {
font: 20px AmazonEmber_Bd;
margin-top: 20px;
}
.solucoes {
display: flex;
flex-direction: row;
justify-content: center;
font: 14px AmazonEmber_Rg;
margin-top: 50px;
}
.solucoes > div {
width: 45%;
text-align: center;
}
.botao {
margin-top: 5px;
}
.descricao {
line-height: 25px;
}
.nome {
font-family: AmazonEmber_Bd;
font-size: 18px;
margin-top: 10px;
margin-bottom: 10px;
}
```
Google Drive
Gist
Clipboard
Sign in with Wallet
