# Super Bônus | Web
autor: Lucas Bezerra Sampaio
[toc]
## Faixa 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>Faixa Figma</title>
</head>
<body>
<div class="Container">
<div class="botao-google">
<button class="botao-google">
<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>
<div class="google">
Sign Up with Google
</div>
</button>
</div>
<div class="or">or</div>
<div class="email"><button class="botao-email">Email</button></div>
<div class="password">
<button class="botao-password">Password</button>
</div>
<div class="login"><button class="botao-login">Create account</button></div>
<div class="SAML">Sign up with SAML SSO</div>
<div class="texto1">Forgot password?</div>
<div class="texto2">Already have an account? <span> Log in<span></div>
<div class="texto3">
This site is protected by reCAPTCHA and the Google <span>Privacy Policy</span> and
<span>Terms of Service</span> apply.
</div>
</div>
</body>
</html>
```
> index.css
```css=
@font-face {
font-family: "Figma-Bold3";
src: url("Figma-Bold3.woff2");
}
@font-face {
font-family: "Figma-Bold2";
src: url("Figma-Bold2.woff2");
}
@font-face {
font-family: "Figma-Bold";
src: url("Figma-Bold.woff2");
}
@font-face {
font-family: "Figma-Bold4";
src: url("Figma-Bold4.woff2");
}
@font-face {
font-family: "Figma-Regular";
src: url("Figma-Regular.woff2");
}
@font-face {
font-family: "Figma-Regular2";
src: url("Figma-Regular2.woff2");
}
body {
margin: 0px;
}
.Container {
align-items: center;
display: flex;
flex-direction: column;
margin-top: 10%;
}
button {
border-color: black;
border-width: 3px;
border-radius: 8px;
width: 348px;
height: 50px;
background-color: white;
}
.google {
padding: 0px 20px;
font: 16px Figma-Bold2;
}
.botao-google {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.or {
color: #666666;
font: 16px Figma-Regular;
margin: 15px;
}
.botao-email {
color: #666666;
font: 13px Figma-Regular;
text-align: left;
padding-left: 12px !important;
}
.botao-password {
color: #666666;
font: 13px Figma-Regular;
padding-left: 12px;
text-align: left !important;
margin: 20px;
}
.botao-login {
background-color: black;
font: 18px Figma-Bold;
color: white;
margin: 12px;
}
.SAML {
font: 12px Figma-Regular2;
color: #5551ff;
margin: 9px;
}
.texto1 {
font: 12px Figma-Regular2;
color: #5551ff;
margin: 9px;
}
span {
color: #5551ff;
}
.texto2 {
font-size: 13px;
color: #666666;
margin: 10px;
}
.texto3 {
color: black;
font: 12px Figma-Regular2;
max-width: 350px;
text-align: center;
}
```
## Faixa 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>Faixa Figma</title>
</head>
<body>
<div class="container">
<div class="imagem"><img src="imagemformula.png" /></div>
<div class="Textos">
<div class="colaboration">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="botaoo"><button class="botao">Work Together</button></div>
</div>
</div>
</body>
</html>
```
>index.css
```css=
@font-face {
font-family: Figma-Bold;
src: url(Figma-Bold.woff2);
}
@font-face {
font-family: Figma-Regular;
src: url(Figma-Regular.woff2);
}
@font-face {
font-family: Figma-Regular2;
src: url(Figma-Regular2.woff2);
}
@font-face {
font-family: Figma-Bold2;
src: url(Figma-Bold2.woff2);
}
@font-face {
font-family: Figma-Bold3;
src: url(Figma-Bold3.woff2);
}
@font-face {
font-family: Figma-Bold4;
src: url(Figma-Bold4.woff2);
}
body {
margin: 0px;
background-color: #ffc700;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: row;
padding: 128px 32px;
justify-content: center;
}
button {
background: none;
border-color: black;
width: 181px;
height: 54px;
border-radius: 10px;
border-width: 3px;
outline: none;
}
img {
width: 603px;
height: 590px;
}
.colaboration {
font: 22px Figma-Regular;
margin-top: 30px;
}
.Textos {
display: flex;
flex-direction: column;
margin-left: 60px;
height: 517px;
}
.titulo {
font: 54px Figma-Bold2;
max-width: 300px;
line-height: 56px;
margin: 16.2px 0px 64px;
}
.descricao {
font: 22px Figma-Regular;
max-width: 500px;
height: 236px;
margin: 12px 0px;
}
.botao {
margin: 8px 0px 0px;
font: 18px Figma-Bold2;
}
```
## Faixa 3
> https://aws.amazon.com/pt/
> index.html
```htmlmixed=
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>A saber</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="texto1">Soluções de nuvem híbrida da AWS</div>
<div class="descricao">
Experiência consistente em toda a AWS e nos ambientes on-premises
</div>
<div class="grupos">
<div class="grupo1">
<div class="imagemgrupo1">
<img class="imgGrupo1" src="imagem1.png" />
</div>
<div class="texto1gp1">VMware Cloud on AWS</div>
<div class="descricaoGrupo1">
Migre e amplie ambientes VMware para a Nuvem AWS
</div>
<div class="saibamais1">
Saiba mais <span class="primeirospan"> » </span>
</div>
</div>
<div class="grupo2">
<div class="imagemgrupo2">
<img class="imgGrupo2" src="imagem2.png" />
</div>
<div class="texto1gp2">AWS Outposts</div>
<div class="descricaoGrupo2">
Execute a infraestrutura da AWS on-premises para ter uma experiência
híbrida verdadeiramente consistente
</div>
<div class="saibamais2">
Saiba mais <span class="primeirospan"> » </span>
</div>
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
@font-face {
font-family: "AmazonEmberLt";
src: url("AmazonEmberLt.woff2");
}
@font-face {
font-family: "AmazonEmber_Bd";
src: url("AmazonEmber_Bd.woff2");
}
@font-face {
font-family: "AmazonEmber_Rg";
src: url("AmazonEmber_Rg.woff2");
}
@font-face {
font-family: "fontawesome-webfont";
src: url("fontawesome-webfont.woff2");
}
body {
background-color: white;
color: white;
margin-left: 0px;
margin-right: 0px;
}
.container {
background-image: url("fundoSite.png");
align-items: center;
display: flex;
flex-direction: column;
margin-top: 10%;
}
.grupos {
display: flex;
flex-direction: row;
text-align: center;
justify-content: space-between;
margin: 5px -10px;
padding: 0px 70px;
}
.grupo1 {
display: flex;
flex-direction: column;
padding: 15px 45px 15px 20px;
}
.grupo2 {
display: flex;
flex-direction: column;
padding: 15px 20px 15px 45px;
}
.imagemgrupo1 {
align-content: center;
margin: 15px 0px;
}
.imgGrupo1 {
width: 70px;
height: 54px;
}
.imagemgrupo2 {
align-content: center;
margin: 15px 0px;
}
.imgGrupo2 {
width: 32px;
height: 54px;
}
.texto1 {
font-family: AmazonEmber_Bd;
font-size: 30.6px;
margin: 40px 0px 15px;
}
.descricao {
font-family: AmazonEmberLt;
font-size: 20px;
}
.texto1gp1 {
font-family: AmazonEmber_Bd;
font-size: 20px;
margin: 15px 0px;
}
.descricaoGrupo1 {
font-family: AmazonEmberLt;
font-size: 16px;
padding: 0px 20px;
}
.saibamais1 {
font-family: AmazonEmber_Rg;
font-size: 15px;
margin: 5px 0px;
}
.texto1gp2 {
font-family: AmazonEmber_Bd;
font-size: 20px;
margin: 15px 0px;
}
.descricaoGrupo2 {
font-family: AmazonEmberLt;
font-size: 16px;
max-width: 420px;
padding: 0px 20px;
line-height: 25px;
}
.saibamais2 {
font-family: AmazonEmber_Rg;
font-size: 15px;
margin: 5px 0px;
}
.primeirospan {
word-spacing: 5px;
}
```
## Faixa 4
> 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>Typing CLub</title>
</head>
<body>
<div class="Faixa">
<div class="imagem"><img src="imagem.png" /></div>
<div class="textos">
<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">
<button>Get Started now</button>
</div>
</div>
</div>
</body>
</html>
```
>index.css
```css=
@font-face {
font-family: typing;
src: url(typing.woff2);
}
@font-face {
font-family: typing2;
src: url(typing2.woff);
}
@font-face {
font-family: typing;
src: url(typing3.woff2);
}
body {
margin: 0px;
}
.imagem {
margin-left: 15%;
}
.Faixa {
display: flex;
flex-direction: row;
padding: 100px 0px 0px;
}
.textos {
display: flex;
flex-direction: column;
padding: 0px 40px;
}
.texto1 {
margin: 10px 0px 5px;
font-size: 13px;
color: #bec8ce;
font-family: typing3;
}
.texto2 {
font: 28px typing;
color: #2d3238;
margin: 0px 0px 10.5px;
margin-top: 10px;
max-width: 450px;
}
.texto3 {
margin: 0px 0px 40px;
max-width: 530px;
font: 18px typing3;
color: #7f8082;
}
button {
padding: 10px 12px;
background-color: #2595ff;
color: white;
border-radius: 5px;
border: 1px solid transparent;
font: 16px typing;
}
button:hover {
background-color: #2369ab;
cursor: pointer;
}
```
## Faixa 5
> 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>Angular</title>
</head>
<body>
<div class="container">
<div class="grupo1">
<div class="textogp1">
<div class="titulogp1">LOVED BY MILLIONS</div>
<div class="descgp1">
From prototype through global deployment, Angular delivers the
productivity and scalable infrastructure that supports Google's
largest applications.
</div>
</div>
<div class="imgGp1"><img src="foto1.png" /></div>
</div>
<div class="grupo2">
<div class="imgGp2"><img src="img2.png" /></div>
<div class="textoGp2">
<div class="titulogp2">TRY IT NOW</div>
<div class="descgp2">
Explore Angular's capabilities with a ready-made sample app. No
setup required.
</div>
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
@font-face {
font-family: angular1;
src: url(angular1.woff);
}
@font-face {
font-family: angular2;
src: url(angular2.woff2);
}
@font-face {
font-family: angular3;
src: url(angular3.woff2);
}
@font-face {
font-family: angular4;
src: url(angular4.woff2);
}
@font-face {
font-family: angular5;
src: url(angular5.woff2);
}
@font-face {
font-family: angular6;
src: url(angular6.woff2);
}
@font-face {
font-family: angular7;
src: url(angular7.woff2);
}
body {
margin: 0px;
}
.container {
display: flex;
flex-direction: column;
}
.grupo1 {
display: flex;
flex-direction: row;
padding: 32px 0px;
justify-content: center;
}
.textogp1 {
display: flex;
flex-direction: column;
}
.grupo2 {
display: flex;
flex-direction: row;
margin: auto;
padding: 24px;
border: 1px solid transparent;
border-radius: 4px;
width: 500px;
height: auto;
background-color: white;
box-shadow: 0 6px 6px rgb(10 16 20 / 15%), 0 0 52px rgb(10 16 20 / 12%);
transition: 5s;
}
grupo2:hover {
box-shadow: 10px 10px 5px #aaaaaa;
}
.textoGp2 {
display: flex;
flex-direction: column;
line-height: 35px;
}
.titulogp2 {
color: #1976d2;
font-size: 25px;
font-family: angular4;
}
.descgp2 {
font-size: 20px;
padding: 8px;
font-family: angular1;
}
.imgGp2 {
margin: 18px;
width: 70px;
height: 70px;
}
.imgGp1 {
padding-left: 50px;
}
.titulogp1 {
font-size: 25px;
font-family: angular4;
color: #1976d2;
margin: 10px 0px 0px;
}
.descgp1 {
color: #444;
font-size: 20px;
font-family: angular3;
margin: 20px 0px;
font-weight: 400px;
max-width: 400px;
line-height: 35px;
}
```
## Faixa 6
> 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>Microsoft</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=
body {
margin: 0px;
}
.faixa {
background-image: url("https://azurecomcdn.azureedge.net/cvt-f5000c2f395708c3231e90e8e171ddaec439b663f8a076d3d8a9fb26e91cff23/images/page/home/customer-tabs/make-a-wish-desktop.jpg");
background-position: center center;
height: 60vh;
display: flex;
flex-direction: row;
align-items: flex-end;
}
.box {
background-color: rgba(26, 26, 31, 0.9);
width: 40%;
font-family: "Segoe UI", SegoeUI, "Segoe WP", Tahoma, Arial, sans-serif;
font-size: 20px;
color: white;
border-radius: 5px;
padding: 20px;
margin: 0px 0px 50px 150px;
}
.botao {
font-size: 14px;
font-weight: bold;
text-decoration: underline;
margin-top: 30px;
}
```
## Faixa 7
> 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>Typing club</title>
</head>
<div class="container">
<div class="img"><img src="img.jpg" /></div>
<div class="agp">
<div class="amz"><h6>THE AMAZING</h6></div>
<div class="t1"><h3>TypingClub School Edition</h3></div>
<div class="d1">
<p>
TypingClub School Edition is the most powerful and popular software
used by teachers, schools and districts.
</p>
</div>
<div class="botao">
<button><h1 class="l">Learn More</h1></button>
</div>
</div>
</div>
</html>
```
>index.css
```css=
@font-face {
font-family: "Work Sans Light";
src: url(https://fonts.gstatic.com/s/worksans/v9/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32KxfXBi8Jpg.woff2);
}
@font-face {
font-family: "Work Sans Medium";
src: url(https://fonts.gstatic.com/s/worksans/v9/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K3vXBi8Jpg.woff2);
}
@font-face {
font-family: "Work Sans Regular";
src: url(https://fonts.gstatic.com/s/worksans/v9/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K0nXBi8Jpg.woff2);
}
body {
margin: 0px;
}
.container {
background-color: #262f36;
display: flex;
flex-direction: row;
}
button {
border-radius: 5px;
width: 160px;
height: 50px;
color: #333;
cursor: pointer;
margin-top: 20px;
margin-bottom: 50px;
}
.l {
font-size: 17px;
}
h6 {
color: white;
font-size: 17px;
font-family: "Work Sans Regular";
letter-spacing: 4px;
}
h3 {
color: white;
font-size: 30px;
padding-right: 100px;
font-family: "Work Sans Regular";
letter-spacing: 2px;
}
p {
color: white;
}
.img {
margin-right: 30px;
margin-top: 20px;
font-family: "Work Sans Light";
letter-spacing: 3px;
}
```
## Faixa 8
> https://pt-br.reactjs.org/
> 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" class="css" />
<title>React</title>
</head>
<body>
<div class="container">
<div class="cabecalho">
<div class="logo"><img src="img.png" /></div>
<div class="documeno"><p>documentos</p></div>
<div class="tutorial"><p>tutorial</p></div>
<div class="blog"><p>blog</p></div>
<div class="comunidade"><p>comunidade</p></div>
<div class="buscar docs"><img src="img1.png" /></div>
<div class="v17"><p>v.17.02</p></div>
<div class="languages"><img src="img2.png" /></div>
<div class="git hub"><p>GitHub</p></div>
</div>
<div class="agp">
<div class="react"><h1>REACT</h1></div>
<div class="desc">
<p>Uma biblioteca JavaScript para criar interfaces de usuário</p>
</div>
<div class="botoes">
<div class="b1"><button>Comece a Usar</button></div>
<div class="tutorial1"><a> Faça o Tutorial > </a></div>
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
* {
box-sizing: border-box;
}
body {
margin: 0px;
}
.cabecalho {
background-color: #20232a;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.agp {
display: flex;
flex-direction: column;
align-items: center;
background-color: #282c34;
}
.botoes {
display: flex;
flex-direction: row;
}
h1 {
color: #61dafb;
letter-spacing: 0.01px;
font-family: Segoe UI Bold;
}
.desc {
color: white;
letter-spacing: 0.01px;
}
button {
background-color: #61dafb;
font-size: 20px;
height: 55px;
border: none;
cursor: pointer;
}
a {
color: #61dafb;
font-size: 20px;
cursor: pointer;
}
.tutorial {
padding: 0px 10px;
color: white;
}
.b1 {
padding-bottom: 20px;
}
.react {
margin-bottom: -7px;
}
.desc {
margin-bottom: 14px;
}
.tutorial1 {
margin-top: 12px;
margin-left: 7.5px;
font-family: Segoe UI;
}
p {
color: white;
font-family: Segoe UI Light;
}
```
## Faixa 9
> https://dotnet.microsoft.com/
>html.index
```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" class="cs" />
<title>Static Template</title>
</head>
<body>
<div class="Boxmae">
<div class="faixa1">
<div class="imagem"><img class="imagemm" src="fotoMascote.png" /></div>
<div class="textos">
<div class="titulo1">Thank You to All the Contributors</div>
<div class="desc1">
.NET is open source and we are very thankful for the many
contributions it receives from the community.
</div>
<div class="botao1"><button>See the Contributors</button></div>
</div>
</div>
<div class="faixa2">
<div class="empresas">
<img class="empresa1" src="empresa1.png" />
<img class="empresa2" src="empresa2.png" />
<img class="empresa3" src="empresa3.png" />
<img class="empresa4" src="empresa4.png" />
<img class="empresa5" src="empresa5.png" />
</div>
<div class="fraseFinalAleluiaBrunoCHATO">
Read customer stories
</div>
</div>
</div>
</body>
</html>
```
```css=
@font-face {
font-family: dotnet1;
src: url(dotnet1.woff);
}
@font-face {
font-family: dotnet2;
src: url(dotnet2.ttf);
}
@font-face {
font-family: dotnet3;
src: url(dotnet3.woff);
}
body {
margin: 0px;
}
.container {
display: flex;
flex-direction: column;
}
.faixa1 {
display: flex;
flex-direction: row;
padding: 60px 0px;
justify-content: center;
margin-top: 20px;
}
.textos {
display: flex;
flex-direction: column;
margin: 0px 0px 0px 160px;
padding: 0px 10px;
}
.titulo1 {
font-size: 40px;
font-family: dotnet1;
font-weight: bold;
color: #212529;
max-width: 400px;
padding: 0px 0px 10px;
line-height: 55px;
}
.desc1 {
max-width: 370px;
margin: 0px 0px 20px;
font-size: 15px;
line-height: 20px;
font-family: dotnet2;
color: #212529;
}
.botao1 {
margin: 0px 0px 20px;
}
.botao1 button {
font-size: 18px;
color: #512bd4;
font-weight: bold;
border: 1px solid #512bd4;
background-color: transparent;
width: 200px;
height: 47px;
margin-top: 6px;
cursor: pointer;
transition: 0.2s;
}
.botao1 button:hover {
background-color: #512bd412;
}
.imagem {
padding: 0px 10px;
}
.imagemm {
height: 230px;
}
.faixa2 {
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 40px 0px 0px 10px;
background-color: #f0f0f0;
height: 180px;
}
.empresas {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px 20px;
margin: 0px 87.75px;
margin-left: 250px;
}
.empresa1 {
width: 170px;
height: 39px;
margin: 10px 27px;
}
.empresa2 {
width: 53px;
height: 60px;
margin: 10px 27px;
}
.empresa3 {
width: 150px;
height: 50px;
margin: 10px 27px;
}
.empresa4 {
width: 50px;
height: 60px;
margin: 10px 27px;
}
.empresa5 {
widows: 200px;
height: 40px;
margin: 10px 27px;
}
.fraseFinalAleluiaBrunoCHATO {
font-size: 12px;
color: #333333;
text-decoration: underline;
text-align: center;
margin-top: -80px;
}
```
## Faixa 10
> 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">
<title> SQL </title>
<link rel = "stylesheet" href ="index.css">
</head>
<body>
<div class = "principal">
<div class = "parte1">
<div class = "conteiner">
<div class = "imagem">
<img src = "sql1.jpg"/>
</div>
<div class = "textos">
<div class = "titulo">
MySQL Database Service with HeatWave</div>
<div class = "conteudo">MySQL Database Service is a fully managed database service to deploy cloud-native applications. HeatWave, an integrated, high-performance analytics engine accelerates MySQL performance by 400x.</div>
<div class = "saber">
<div class = "saiba-mais">Learn More</div>
<div class = "simbolo">
»
</div>
</div>
</div>
</div>
<div class = "conteiner">
<div class = "imagem">
<img src = "sql2.jpg"/>
</div>
<div class = "textos">
<div class = "titulo">
MySQL Enterprise Edition</div>
<div class = "conteudo">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 = "saber">
<div class = "saiba-mais">Learn More</div>
<div class = "simbolo">
»
</div>
</div>
</div>
</div>
</div>
<div class = "parte1">
<div class = "conteiner">
<div class = "imagem">
<img src = "sql3.jpg"/>
</div>
<div class = "textos">
<div class = "titulo">MySQL for OEM/ISV</div>
<div class = "conteudo">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 = "saber">
<div class = "saiba-mais">Learn More</div>
<div class = "simbolo">
»
</div>
</div>
</div>
</div>
<div class = "conteiner">
<div class = "imagem">
<img src = "sql4.jpg"/>
</div>
<div class = "textos">
<div class = "titulo">
MySQL Cluster CGE</div>
<div class = "conteudo">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 = "saber">
<div class = "saiba-mais">Learn More</div>
<div class = "simbolo">
»
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
```
>index.css
```css=
body{
font-family: "Open Sans",Arial,Helvetica,sans-serif;
}
.principal {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
padding: 70px;
}
.parte1 {
display: flex;
flex-direction: row;
}
.conteiner {
display: flex;
flex-direction: row;
width: 670px;
}
.imagem img {
width: 75px;
margin-right: 20px;
margin-left: 40px;
}
.textos {
display: flex;
flex-direction: column;
margin-bottom: 30px;
margin-left: 30px;
margin-right: 30px;
}
.titulo {
color: #e97b00;
line-height: 130%;
font-size: 1em;
margin-bottom: 15px;
}
.titulo:hover {
cursor: pointer;
text-decoration: underline;
}
.conteudo {
color: #555;
line-height: 1.2;
font-size: 15px;
margin-bottom: 5px;
}
.saber {
display: flex;
flex-direction: row;
color: #0074a3;
font-size: 15px;
margin-bottom: 25px;
}
.saber:hover {
cursor: pointer;
text-decoration: underline;
}
.saiba-mais {
margin-right: 10px;
}
```
Google Drive
Gist
Clipboard
Sign in with Wallet
