# Trabalho Super Bônus | Web
autora: Isabela Silva Sousa
[toc]
## Faixa - número 1
>https://www.figma.com/
> index.html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="index.css">
<title>Trabalho Super Bônus / HTML</title>
</head>
<body>
<div class="container">
<div class="box">
<div class="faixa1">
<div class="imagem"><img src="2021-04-17 (30).png" align="left"/></div>
</div>
<div class="faixa2">
<div class="descrição"> Collaboration </div>
<div class="titulo"> <h2> Team up to move even faster </h2></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=
body {
display: flex;
flex-direction: column;
font-family: Whyte, sans-serif;
font-style: normal;
background-color: #FFC700;
}
.conteiner {
display: flex;
flex-direction: column;
padding: 96px 32px;
padding-top: 96px;
padding-bottom: 96px;
justify-content: space-between;
}
.box{
padding: 96px 32px;
line-height: 1.4;
justify-content: space-between;
}
.faixa1{
flex-direction: column;
}
.faixa2{
grid-template-columns: 1fr;
justify-content: space-between;
margin: 0 auto;
}
.descrição{
font-size: 22px;
color: black;
line-height: 1.3;
letter-spacing: 0.01em;
}
.titulo{
display: block;
font-size: 52px;
font-weight: bold;
line-height: 1;
margin: 14px 0px 62px;
}
.texto{
font-size: 21px;
margin: 22px 0px;
}
.botao{
margin: 8px 0px 0px;
padding: 14px 24px 16px;
}
.botao button{
font-family: Whyte, sans-serif;
font-size: 18px;
background-color: #FFC700;
border: 3px solid black;
border-radius: 8px;
width: 181px;
height: 54px;
}
```
## Faixa - número 2
> https://www.figma.com/
> index.html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="index.css">
<title>Trabalho Super Bônus / HTML</title>
</head>
<body>
<div class="container">
<div class="faixa1">
<div class="try"> <h2> Try Figma for free. </h2> </div>
</div>
<div class="faixa2">
<div class="sign1"> <button><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="or"> or </div>
<div class="botoes">
<div class="email"> <button> Email </button> </div>
<div class="espaço"> </div>
<div class="password"> <button> Password </button> </div>
</div>
<div class="espaço2"> </div>
<div class="create"> <button> Create account </button> </div>
<div class="espaço2"> </div>
<div class="parteb">
<div class="sign">
<div class="descricao1"> Sign up with SAML SSO </div>
</div>
<div class="junçao">
<div class="already"> Already have an account? <button> Log in </button> </div>
</div>
<div class="espaço2"> </div>
<div class="descricao2"> This site is protected by reCAPTCHA and the Google <button> Privacy Policy </button> and <button>Terms of Service </button> apply. </div>
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
body {
display: flex;
flex-direction: row;
font-family: Whyte, sans-serif;
align-items: center;
font-style: normal;
background-color: #ffffff;
justify-content: center;
}
.try {
font-size: 24px;
color: #282828;
padding: 0px 32px;
width: 422px;
height: 38px;
}
.faixa2 {
background-color: #ffffff;
align-items: center;
width: 420px;
height: 568px;
padding: 36px 10px;
}
.sign1 {
width: 302px;
height: 48px;
}
.sign1 button {
font-family: Whyte, sans-serif;
color: #000;
font-size: 16px;
background-color: #ffffff;
border: 3px solid black;
border-radius: 8px;
width: 348px;
height: 48px;
padding: 0px 20px;
}
.or {
color: #666666;
font-size: 16px;
text-align: center;
padding: 15px 70px 15px 0px;
}
.email {
text-align: left;
}
.email button {
font-family: Whyte, sans-serif;
color: #666;
font-size: 14px;
background-color: #ffffff;
border: 3px solid black;
border-radius: 5px;
width: 348px;
height: 50px;
padding: 0px 20px;
}
.espaço {
width: 348px;
height: 24px;
}
.password {
text-align: left;
}
.password button {
font-family: Whyte, sans-serif;
color: #666;
font-size: 14px;
background-color: #ffffff;
border: 3px solid black;
border-radius: 5px;
width: 348px;
height: 50px;
padding: 0px 20px;
}
.espaço2 {
width: 348px;
height: 32px;
}
.create button {
font-family: Whyte, sans-serif;
color: #fff;
font-size: 18px;
background-color: #000;
border: 3px solid black;
border-radius: 8px;
width: 348px;
height: 48px;
margin: 12px 0px 0px;
padding: 0px 12px;
}
.sign {
text-align: center;
padding: 1px 30px 12px 100px;
}
.descricao1 {
color: #5551ff;
font-size: 12px;
width: 133.95px;
height: 19px;
}
.espaço3 {
width: 348px;
height: 16px;
}
.junçao {
width: 348px;
height: 19px;
}
.already {
color: #00000099;
font-size: 12px;
width: 200px;
height: 19px;
padding: 1px 30px 1px 80px;
}
.already button {
background: transparent;
border: 0px;
color: #5551ff;
}
.junçao2 {
width: 280px;
height: 38px;
}
.descricao2 {
color: #000;
font-size: 12px;
width: 380px;
height: 38px;
padding: 1px 30px 1px 40px;
}
.descricao2 button {
background: transparent;
border: 0px;
color: #5551ff;
}
```
## Faixa - número 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>Trabalho Super Bônus / HTML</title>
</head>
<body>
<div class="container">
<div class="coluna1">
<div class="imagem">
<img src="//static.typingclub.com/m/tpmedia/img/district.svg" width="240px" style="" align="left">
</div>
</div>
<div class="coluna2">
<div class="titulo"> <h6>THE AMAZING </h6></div>
<div class="subtitulo"> <h3> TypingClub School Edition </h3> </div>
<div class="descricao"> <p> TypingClub School Edition is the most powerful and popular software used by teachers, schools and districts. </p></div>
<div class="botao"> <button> Learn more </button> </div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
body {
display: box;
font-family: "Work sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-style: normal;
background-position: center;
background-color: #262F36;
padding: 150px 110px;
}
.container{
flex-direction: row;
justify-content: space-between;
color: white;
min-width: 768px;
padding: 100px 0px;
}
.coluna2{
flex-direction: row;
}
.titulo h6{
font-size: 13px;
color: #ffffffb3;
margin: 10.5px 0px 5px;
}
.subtitulo{
font-size: 28px;
color: #ffffff;
margin: 0px 0px 10.5px;
}
.descricao{
font-size: 19px;
color: #ffffffb3;
margin: 0px 0px 30px;
}
.botao button{
font-family: "Work sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 18px;
background-color: #FFF;
border: 3px solid white;
border-radius: 6px;
width: 201.09px;
height: 48px;
}
```
## Faixa - número 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> Trabalho Super Bônus / HTML</title>
</head>
<body>
<div class="container">
<div class="imagem"><img src="//static.typingclub.com/m/tpmedia/img/typingclub-browser3.png" class="img-responsive" align="left" height="355" width="350"/> </div>
<div class="box">
<div class="titulo"> WHAT IS TYPINGCLUB? </div>
<div class="subtitulo"> TypingClub is the most effective way to learn how to type. </div>
<div class="texto"> 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"><button> Get Stared Now </button></div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
body {
display: flex;
flex-direction: column;
font-family: "Work sans","Helvetica Neue",Helvetica,Arial,sans-serif;
justify-content: center;
font-style: normal;
background-color: #FFFFFF;
}
.container{
display: block;
padding: 0px 10px;
padding-left: 10px;
padding-right: 10px;
margin-left: -10px;
margin-right: -10px;
box-sizing: border-box;
margin-right: auto;
margin-left: auto;
width:720;
height:355;
}
.box{
position: relative;
min-height: 1px;
font-weight: 300;
padding-left: 10px;
padding-right: 10px;
width: 60%;
}
.titulo{
display: block;
font-family: "Work sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 500;
line-height: 1.2;
color: #BEC8CE;
margin-bottom: 5px;
margin-top: 10.5px;
margin: 10.500px 5px;
font-size: 13px;
box-sizing: border-box;
text-transform: uppercase;
letter-spacing: .15em;
}
.subtitulo{
display:block;
color: #2d3238;
font-size: 28px;
margin-bottom: 10.5px;
padding: 0px 0px 10.5px;
}
.texto{
color: #6c6f73;
font-size: 18px;
line-height: 1.6;
padding: 0px 0px 30px;
}
.botao button{
font-family: "Work sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px;
color: #FFFFFF;
background-color: #2595ff;
border-color: #0b89ff;
border: 1px solid transparent;
border-radius: 4px;
width: 156px;
height: 36px;
padding: 6px 2px;
}
.imagem img{
padding: 0px 30px 0px 30px;
}
```
## Faixa - número 7
> https://www.AboutTwitter.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>Trabalho Super Bônus / Linguagem</title>
</head>
<body>
<div class="container">
<div class="faixa1">
<div class="cabeçalho">
<div class="icone"><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="item"> About </div>
</div>
<div class="item1"><button> Who we are </button></div>
<div class="item1"><button> Our priorities </button></div>
<div class="item1"><button> Resources </button></div>
<div class="botao1"><button> Go to Twitter.com </button></div>
</div>
<div class="faixa2">
<div class="texto">Twitter is what’s happening and what people are talking about right now.</div>
<div class="botao2"><button> Go to Twitter.com </button></div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
body {
font-size: .7rem;
line-height: 1.2;
color: #14171a;
background-image:url(imagem-fundo.jpg);
direction: ltr;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
}
.faixa1 {
display: inline-block;
margin-right: -12px;
margin-left: -12px;
background-color: #fff;
flex-direction: row;
height: 96px;
padding-top: 12px;
display: flex;
justify-content: space-between;
box-sizing: inherit;
width: 100%;
height: 96px;
z-index: 1000;
}
.faixa2{
padding: 50px 300px 50px 300px;
}
.texto{
display: flex;
font-size: 64px;
letter-spacing: -1.2px;
line-height: 64px;
margin-bottom: 0;
text-align: left;
margin-right: 0;
margin-left: 0;
display: flex;
flex-wrap: wrap;
list-style: none;
height: 100%;
font-weight: 800;
font-family: Chirp Display,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
}
.item{
color: #14171a;
font-weight: 700;
font-size: 1.2rem;
line-height: 1.2rem;
font-family: Chirp,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
}
.icone{
fill: #1d9bf0;
}
.botao1 button{
display: inline-block;
border: 2px solid #e8eff3;
color: #314351;
border-radius: 48px;
background-color: transparent;
height: 48px;
padding-top: 16px;
padding-bottom: 16px;
margin-left: 8px;
padding-right: 18px;
padding-left: 18px;
position: relative;
transition: all .25s ease-in-out;
text-align: center;
}
.botao2 button{
background-color: #14171a;
color:#fff;
font-size: 18px;
font-weight: 400;
height: 48px;
padding: 16px 24px;
line-height: 14px;
border-radius: 50px;
display: inline-block;
margin: 35.56px 2.15px;
}
.item1 button {
color: #314351;
font-weight: 600;
font-size: .796rem;
line-height: 1.2rem;
letter-spacing: .025rem;
background-repeat: no-repeat;
padding: 0;
margin: 0;
background-color: transparent;
border-style: none;
font-family: Chirp,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
}
.cabeçalho{
padding-top: 12px;
display:flex;
justify-content: space-between;
flex-direction: row;
padding-left: 20px;
}
.icone {
width:26.49px;
height: 21.53px;
}
.item1{
padding: 20px 0px 0px 0px;
}
```
## Faixa - número 8
> https://developer.twitter.com/en
> index.html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="index.css" />
<title> Trabalho Super Bônus / HTML </title>
</head>
<body>
<div class="container">
<div class="box">
<div class="titulo">Solution</div>
<div class="texto"> Academic <br/> Research </div>
<div class="setinha"><img src="baixados.png" /></div>
</div>
<div class="box">
<div class="titulo">Company</div>
<div class="texto"> Product <br/> roadmap </div>
<div class="setinha"><img src="baixados.png" /></div>
</div>
<div class="box">
<div class="titulo">Solution</div>
<div class="texto">Business</div>
<div class="setinha"><img src="baixados.png" /></div>
</div>
<div class="box">
<div class="titulo">Community</div>
<div class="texto">Developer <br/> communities</div>
<div class="setinha"><img src="baixados.png" /></div>
</div>
<div class="box">
<div class="titulo">Updates</div>
<div class="texto">Developer Blog</div>
<div class="setinha"><img src="baixados.png" /></div>
</div>
<div class="box">
<div class="titulo">Community</div>
<div class="texto">Forum <br> </div>
<div class="setinha"><img src="baixados.png" /></div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
* { box-sizing: border-box; }
body {
margin: 0px;
font-family: Helvetica Neue LT,Helvetica Neue,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
}
.container {
background-color:#fff;
display:flex;
flex-direction:row;
flex-wrap:wrap;
padding: 30px 5%;
justify-content:center;
}
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
margin: 15px;
width: 300px;
height: 240px;
border-radius: 3px;
box-shadow: 2px 2px 8px 2px rgb(20 23 26 / 10%);
background-color: #fff;
}
.titulo {
font-size: 14px;
font-weight: bold;
}
.texto {
font-size: 32px;
font-weight: bold;
}
.setinha img {
width: 30px;
height: 30px;
}
.setinha {
align-self: flex-end;
}
```
## Faixa - número 12
> https://reactnativ.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">
<titleTrabalho Super Bônus / HTML </title>
</head>
<body>
<div>
<div>
<div class="imagem">
<img src="image.jpeg" align="left"/>
</div>
<div>
<div class="titulo"><h2> Native Development For Everyone </h2></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 <button> View </button>, <button> Text </button>, and <button> Image </button> that map directly to the platform’s native UI building blocks.</div>
</div>
</div>
<div class="faixa2">
<div class="faixa">
<div class="titulo"><h2> Seamless Cross-Platform </h2></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="image1">
<img src="imagem.jpeg" align="rigth"/>
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
body {
display: flex;
flex-direction: row;
font-family: -apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI", Helvetica,Arial,sansserif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
align-items: center;
font-style: normal;
background-color: #FFFFFF;
}
.container{
padding: 0px 90px 0px 90px;
}
.faixa1{
background-color: #fff;
flex-direction: column;
justify-content: space-around;
margin: 30px 30px;
min-width: 100px;
max-width: 100px;
height: 330px;
padding: 0px 90px 0px 90px;
padding-bottom: 0px;
}
.titulo{
color: #1c1e21;
font-size: 25px;
}
.texto{
color: #1c1e21;
font-size: 17px;
}
.texto button{
font-family: -apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI", Helvetica,Arial,sansserif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-size: 14.45px;
background-color: #0000000f;
border: 1px solid transparent;
border-radius: 3px;
width: 53.33px;
height: 23.78px;
}
.faixa2{
background-color: #0000000d;
flex-direction: column;
position: absolute;
top: 66%;
justify-content: space-between;
border-top: 1px solid #dadde1;
padding-bottom: 0px;
}
.faixa{
margin-top: 100px;
padding-right: 600px;
}
.image1{
padding-left: 800px;
padding-bottom: 0px;
flex-direction: right;
}
```
## Faixa - número 13
> https://angular.io/
> 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>Trabalho Super Bônus / HTML</title>
</head>
<body>
<div>
<div class="container">
<div class="imagem">
<img src="imagem1.svg" align="right" height="191" width="355"/>
</div>
<div class="faixa1">
<div class="titulo1"> LOVED BY MILLIONS </div>
<div class="texto1"> <p> From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google's largest applications. </</div>
</div>
</div>
<div class="faixa2"><button>
<div class="image">
<img src="imagem-icon.svg" align="left" height="70" width="70"/>
</div>
<div class="texto2">
<div class="titulo2"> TRY IT NOW </div>
<div class="texto2"> Explore Angular's capabilities with a ready-made sample app. No setup required. </div></button>
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
body {
display: flex;
flex-direction: row;
font-family: Roboto,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
justify-content: space-around;
align-items: center;
font-style: normal;
background-color: #FFFFFF;
}
.container{
justify-content: space-around;
padding: 50px 90px 50px 90px;
}
.imagem{
padding: 0px 0px 0px 90px;
}
.titulo{
color: #1976d2;
font-size: 20px;
font-weight: bold;
padding-top: 40px;
margin: 0px 0px 0px;
}
.texto{
columns: #444444;
font-size: 16px;
margin: 16px 0px;
padding-bottom: 30px;
}
.faixa1{
padding: 0px 30px 30px 30px;
}
.faixa2{
flex-direction: center;
align-items: center;
margin: 0px 112px 0px 112px;
padding: 24px 24px 24px 54px;
}
.faixa2 button{
font-family: Roboto,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
font-size: 16px;
color: #444444;
align-items: center;
display: flex;
flex-direction: row;
box-shadow: 0 6px 6px rgb(10 16 20 / 15%), 0 0 52px rgb(10 16 20 / 12%);
background-color: #ffffff;
border-color: white;
border-radius: 3px;
width: 524px;
height: 170px;
padding: 0px 112px 0px 112px;
}
.titulo2{
color: #1976d2;
font-weight: bold;
font-size: 20px;
margin: 10px 0px 0px;
}
.texto2{
color: #444444;
font-size: 16px;
padding: 8px 0px;
}
.texto2{
flex-direction: row;
}
.image{
padding-right: 30px;
}
```
## Faixa - número 18
> https://azure.microsoft.com/pt-br/
> index.html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="index.css">
<title>Trabalho Super Bônus / HTML</title>
</head>
<body>
<div class="faixa">
<div class="box">
<div class="texto"> A Make-A-Wish® fez a transição para o trabalho remoto em uma semana com o Azure, o Microsoft 365 e o Microsoft Teams e continua transformando desejos em realidade.</div>
<div class="botao"> Estudo de caso > </div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
* {box-sizing: border-box}
body{
margin: 0px;
}
.faixa{
background-image:url(https://azurecomcdn.azureedge.net/cvt-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;
}
.box{
background-color: rgba(26, 26, 31, .94);
width: 600px;
font-family:'Segoe UI',SegoeUI,'Segoe WP',Tahoma,Arial,sans-serif;
font-size: 20px;
color:white;
border-radius: 5px;
padding:20px;
margin: 0px 0px 55px 30px;
}
.botao{
font-size: 14px;
font-weight: bold;
text-decoration: underline;
margin-top: 30px;
}
```
## Faixa - número 20
> https://aws.Amazon.com/pt/
> 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>Trabalho Super Bônus / HTML</title>
</head>
<body>
<div class="container">
<div class="box">
<div class="titulo">Soluções de nuvem híbrida da AWS</div>
<div class="descricao1">Experiência consistente em toda a AWS e nos ambientes on-premises</div>
</div>
<div class="box-texto">
<div class="box1">
<div class="img1"><img src="icone2_Icon.png (1).png"/></div>
<div class="titulo2">VMware Cloud on AWS</div>
<div class="descricao2">Migre e amplie ambientes VMware para a Nuvem AWS</div>
<div class="botao-saibamais"><button>Saiba mais
<img alt="" src="data:image/svg+xml;base64,ICAgIDxzdmcgYWx0PSJhbmdsZS1yaWdodCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTYgMTYiIHN0eWxlPSJ2ZWN0b3ItZWZmZWN0OiBub24tc2NhbGluZy1zdHJva2U7IHN0cm9rZTogI2VlZWVlZTsgc3Ryb2tlLXdpZHRoOiAycHg7IGZpbGw6IG5vbmU7Ij4NCiAgICAgIDxwb2x5bGluZSBwb2ludHM9IjQgMSAxMSA4IDQgMTUiLz4NCiAgICA8L3N2Zz4NCg=="/></button></div>
</div>
<div class="box2">
<div class="imgagem"><img src="icone.png (1).png"/></div>
<div class="titulo2">AWS Outpost</div>
<div class="descricao3">Execute a infraestrutura da AWS on-premises para ter uma esperiência híbrida verdadeiramente consciente</div>
<div class="botao-saibamais"><button>Saiba mais
<img alt="" src="data:image/svg+xml;base64,ICAgIDxzdmcgYWx0PSJhbmdsZS1yaWdodCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTYgMTYiIHN0eWxlPSJ2ZWN0b3ItZWZmZWN0OiBub24tc2NhbGluZy1zdHJva2U7IHN0cm9rZTogI2VlZWVlZTsgc3Ryb2tlLXdpZHRoOiAycHg7IGZpbGw6IG5vbmU7Ij4NCiAgICAgIDxwb2x5bGluZSBwb2ludHM9IjQgMSAxMSA4IDQgMTUiLz4NCiAgICA8L3N2Zz4NCg=="/>
</button></div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
@font-face{
font-family: font1;
src: url("font1.woff");
}
@font-face{
font-family: font2;
src: url("font2.woff2");
}
@font-face{
font-family: font3;
src: url("font3.woff2");
}
@font-face{
font-family: font1;
src: url("font4.woff2")
}
body {
font-family: Helvetica Neue LT, Helvetica Neue, -apple-system,
BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
border: 0px;
}
.container {
background-image: url("amazonfd.png");
padding-top: 50px;
display: flex;
flex-direction: column;
}
.box {
width: 748px;
height: 44px;
}
.titulo {
font-weight: 500;
color: #ffffff;
font-family: font3;
font-size: 35px;
text-align: center;
}
.descricao1 {
font-family: font1;
font-size: 20px;
font-weight: 300;
color: #ffffff;
text-align: center;
padding-top: 10px;
}
.box-texto {
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
}
.imgagem img{
align-items: center;
padding-top: 40px;
}
.titulo2 {
text-align: center;
font-weight: bold;
font-size: 22px;
color: #ffffff
}
.descricao2 {
font-size: 22px;
color: #ffffff;
font-weight: 300;
width: 490px;
height: 60px;
padding: 10px 20px;
}
.botao img{
width: 10px;
height: 10px;
}
.botao button {
background: transparent;
color: #ffffff;
font-family: font2;
font-size: 17px;
border: 0px;
font-weight: 500;
padding-bottom: 30px;
}
.imgagem img{
width: 32px;
height: 54px;
align-items: center;
padding-top: 40px;
}
.descricao3{
font-size: 22px;
color: #ffffff;
font-weight: 300;
width: 500px;
height: 60px;
padding: 10px 20px;
}
```
Google Drive
Gist
Clipboard
Sign in with Wallet
