# Super Bônus | Web
autor: Guilherme Oliveira Verissimo
turma: InfoC
número: 21
[toc]
# FAIXA 1
## Figma
> https://www.figma.com/
> https://fq9un.csb.app/
>index.html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="index.css">
<title>FIGMA</title>
</head>
<body>
<div class="container-figma">
<div class="imagens">
<img src="figma-imagem.png.png">
</div>
<div class="textos">
<div class="texto-1">
Collaboration
</div>
<div class="texto-2">
Team up to <br> move even <br> faster
</div>
<div class="texto-3">
Share a link to your design files or prototypes, <br> and get feedback in context. Or, jump into the <br> same file with your teammates—no matter <br> where y’all are in the world—and co-edit live.
</div>
<div class="botao">
<button> Work together </button>
</div>
</div>
</div>
</body>
</html>
```
>index.css
```css=
@font-face {
font-family: a;
src: url('1.woff2');
}
@font-face {
font-family: b;
src: url('2.woff2');
}
body {
background-color: #ffc700;
}
.container-figma {
justify-content: center;
display: flex;
flex-direction: row;
margin-top: 96px;
}
img {
width: 604px;
height: 590px;
padding-right: 37px;
}
.textos {
padding-left: 37px;
}
.texto-1 {
font-size: 22px;
font-family: b;
}
.texto-2 {
font-size: 64px;
font-family: a;
line-height: 64px;
padding-top: 13px;
}
.texto-3 {
font-size: 22px;
font-family: b;
padding-top: 55px;
line-height: 30px;
}
button {
font-size: 18px;
padding: 10px 22px 10px 22px;
background-color: #ffc700;
border: 3px solid black;
border-radius: 10px;
font-family: a;
margin-top: 20px;
}
```
# FAIXA 2
## Figma Login
>https://www.figma.com/
>https://sy8ft.csb.app/
>index.html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="index.css">
<title>FIGMA LOGIN</title>
</head>
<body>
<div class="container-figma">
<div class="texto-1">
Try Figma for free.
</div>
<button class="botao-sing">Sing up with Google</button>
<div class="texto-2">
or
</div>
<div class="input-email">
<input placeholder="Email"/>
</div>
<div class="input-senha">
<input placeholder="Password"/>
</div>
<button class="botao-create">Create account</button>
<div class="texto-3">
Sign up with SAML SSO
</div>
<div class="texto-4">
Already have an account? <span> Log in </span>
</div>
<div class="texto-5">
This site is protected by reCAPTCHA and the Google <span> Privacy <br> Policy </span> and <span> Terms of Service </span> apply.
</div>
</div>
</body>
</html>
```
>index.css
```css=
@font-face {
font-family: a;
src: url('3.woff2');
}
@font-face {
font-family: b;
src: url('4.woff2');
}
.container-figma {
text-align: center;
}
.texto-1 {
font-size: 36px;
margin-bottom: 50px;
margin-top: 60px;
font-family: a;
color: #282828
}
.texto-2 {
margin-top: 20px;
margin-bottom: 20px;
font-family: b;
color: #666666;
}
.botao-sing {
font-family: a;
color: black;
font-size: 14px;
}
button {
background-color: white;
width: 358px;
height: 48px;
border: 3px solid black;
border-radius: 8px;
}
.botao-create {
margin-top: 45px;
background-color: black;
color: white;
font-family: a;
font-size: 18px;
}
.input-email {
margin-bottom: 30px;
}
input {
width: 335px;
height: 45px;
border: 3px solid black;
background-color: white;
border-radius: 6px;
padding-left: 15px;
font-family: b;
}
.texto-3 {
margin-top: 34px;
cursor: pointer;
font-size: 12px;
font-family: b;
color: #5551ff;
}
.texto-4 {
margin-top: 20px;
font-size: 12px;
font-family: b;
color: #666666;
}
span {
color: #5551ff;
}
.texto-5 {
margin-top: 38px;
font-size: 12px;
font-family: b;
}
```
# FAIXA 3
## Udemy
>https://www.udemy.com/
>https://ne3ff.csb.app/
>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>UDEMY</title>
</head>
<body>
<div class="container-udemy">
<div class="conteudo-top">
<div class="imagem">
<img src="u.jpg"/>
</div>
<div class="textos">
<div class="texto-1">
Torne-se um instrutor
</div>
<div class="texto-2">
Os melhores instrutores do mundo lecionam a <br> milhões de alunos na Udemy. Oferecemos as <br> ferramentas e habilidades para ensinar o que <br> você ama.
</div>
<button class="botao"> Comece a ensinar hoje mesmo </button>
</div>
</div>
<hr>
<div class="conteudo-bottom">
<div class="titulo">
Ganhou a confiança de empresas de todos os tamanhos
</div>
<div class="imagens">
<img src="https://s.udemycdn.com/partner-logos/booking-logo.svg"/>
<img src="https://s.udemycdn.com/partner-logos/volkswagen-logo.svg"/>
<div class="mercedes">
<img src="https://s.udemycdn.com/partner-logos/mercedes-logo-v2.svg"/>
</div>
<img src="https://s.udemycdn.com/partner-logos/adidas-logo.svg"/>
<img src="https://s.udemycdn.com/partner-logos/eventbrite-logo.svg"/>
</div>
</div>
<hr>
</div>
</div>
</body>
</html>
```
>index.css
```css=
.mercedes img {
width: 148px;
height: 28px;
margin: 40px 5px 0px 20px;
}
.conteudo-top {
justify-content: center;
display: flex;
flex-direction: row;
}
.imagem {
margin-top: 35px;
}
.textos {
margin-top: 125px;
margin-left: 100px;
}
.texto-1 {
font-size: 32px;
color: #3c3b37;
font-family: arial;
font-weight: 600;
}
.texto-2 {
font-size: 19px;
color: #3c3b37;
line-height: 27px;
font-family: arial;
}
button {
background-color: #0f7c90;
border-radius: 4px;
border: none;
cursor: pointer;
padding: 15px 12px;
color: white;
margin-top: 13px;
font-family: arial black;
}
hr {
margin-top: 40px;
border-color: white;
}
.conteudo-bottom {
align-items: center;
display: flex;
flex-direction: column;
}
.titulo {
margin-top: 26px;
color: #3c3b37;
font-size: 24px;
font-family: arial;
font-weight: 600;
}
.imagens {
display: flex;
flex-direction: row;
}
.imagens > img {
margin: 40px 20px 0px 20px;
}
```
# FAIXA 4
## TypingClub
>https://www.typingclub.com/
>https://h31ef.csb.app/
>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>TypingClub</title>
</head>
<body>
<div class="container-typing">
<div class="imagem">
<img src="https://static.typingclub.com/m/tpmedia/img/district.svg"/>
</div>
<div class="textos">
<div class="texto-1">
THE AMAZING
</div>
<div class="texto-2">
TypingClub School Edition
</div>
<div class="texto-3">
TypingClub School Edition is the most powerful and popular software used <br> by teachers, schools and districts.
</div>
<button class="botao">Learn more</button>
</div>
</div>
</body>
</html>
```
>index.css
```css=
@font-face {
font-family: a;
src: url('font (1).woff');
}
@font-face {
font-family: b;
src: url('font (1).woff2');
}
@font-face {
font-family: c;
src: url('font (2).woff2');
}
body {
background-color: white;
}
.container-typing {
display: flex;
justify-content: center;
flex-direction: row;
margin-top: 150px;
background-color: #262f36;
padding: 100px 0;
}
.imagem {
width: 240px;
margin-right: 42px;
}
.textos {
margin-left: 42px;
color: rgba(255, 255, 255, 0.7);
}
.texto-1 {
font-size: 13px;
margin-bottom: 5px;
margin-top: 10.5px;
font-family: b;
letter-spacing: 2px;
}
.texto-2 {
font-size: 28px;
margin-bottom: 10.5px;
color: #ffffff;
font-family: c;
font-weight: 100;
}
.texto-3 {
font-size: 19px;
margin-bottom: 30px;
font-family: c;
}
button {
padding: 12px 50px;
border: none;
border-radius: 6px;
font-size: 18px;
font-family: c;
}
```
# FAIXA 5
## TypingClub 2
>https://www.typingclub.com/
>https://mocjl.csb.app/
>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>TypingClub</title>
</head>
<body>
<div class="container-typing">
<div class="imagem">
<img src="typing.png"/>
</div>
<div class="textos">
<div class="texto-1">
WHAT IS TYPINGCLUB?
</div>
<div class="texto-2">
TypingClub is the most effective <br> way to learn how to type.
</div>
<div class="texto-3">
It is web based and highly effective. TypingClub is (and will <br> always be) free for both individuals and schools. There is an <br> optional paid school edition.
</div>
<div class="botao">
<button> Get Started Now </button>
</div>
</div>
</div>
</body>
</html>
```
>index.css
```css=
@font-face {
font-family: t;
src: url('tfonte.woff2');
}
@font-face {
font-family: tp;
src: url('tpfonte.woff2');
}
.container-typing {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 150px;
}
.imagem img {
width: 500px;
margin-right: 21px;
}
.textos {
margin-top: 12px;
margin-left: 21px;
}
.texto-1 {
font-size: 13px;
font-family: t;
color: #bec8ce;
font-weight: 600;
}
.texto-2 {
font-size: 28px;
line-height: 34px;
margin-top: 5px;
font-family: t;
color: #2d3238;
font-weight: 600;
}
.texto-3 {
font-size: 18px;
line-height: 29px;
margin-top: 9px;
font-family: t;
color: #6c6f73;
}
button {
font-size: 16px;
padding: 6px 12px;
background-color: #007cf1;
border: 1px solid #0069cd;
border-radius: 4px;
margin-top: 21px;
font-family: t;
color: white;
}
```
# FAIXA 6
## AboutTwitter
### Meu site da prova!!!
>https://about.twitter.com/
>https://okf7d.csb.app/
>index.html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="index.css">
<title>About Twitter</title>
</head>
<body>
<div class="container-twitter">
<div class="cabeçalho">
<div class="logo">
<img src="logo.PNG">
</div>
<div class="links">
<div class="menu-links">
Who we are ˅
</div>
<div class="menu-links">
Our priorities ˅
</div>
<div class="menu-links">
Resources ˅
</div>
<div class="menu-button">
<button>Go to Twitter.com</button>
</div>
</div>
</div>
<div class="conteudo">
<div class="texto">
Twitter is what’s <p> happening and what <p> people are talking about <p> right now.
</div>
<div class="conteudo-button">
<button><b>Go to Twitter.com</b></button>
</div>
</div>
</div>
</body>
</html>
```
>index.css
```css=
@font-face {
font-family: a;
src: url('chirp-extended-heavy-web.woff2');
}
body {
background-image: url("fundo.PNG")
}
.container-twitter {
display: flex;
flex-direction: column;
}
.cabeçalho {
justify-content: space-between;
display: flex;
flex-direction: row;
}
.links {
display: flex;
flex-direction: row;
margin-right: 20px;
}
.logo {
margin: 30px 20px 20px 34px;
}
.menu-links {
margin: 40px 20px 20px 20px;
font-size: 13.92px;
color: #314351;
font-family: arial;
}
.menu-button button {
font-size: 14px;
border-radius: 30px;
background-color: white;
color: #14171A;
padding: 16px 18px;
margin: 24px 20px 20px 20px;
border: 2px solid #E8EFF3;
}
/*parte do "conteudo"*/
.texto {
font-size: 64px;
line-height: 10px;
margin: 190px 20px 20px 190px;
font-family: a;
}
.conteudo-button button {
font-size: 18px;
margin-left: 190px;
border-radius: 30px;
background-color: #14171A;
color: white;
padding: 16px 24px;
border: none;
}
```
# FAIXA 7
## Angular
>https://angular.io/
>https://fhcsj.csb.app/
>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-angular">
<div class="top">
<div class="textos">
<div class="texto-1">
LOVED BY MILLIONS
</div>
<div class="texto-2">
From prototype through global deployment, Angular <br> delivers the productivity and scalable infrastructure <br> that supports Google's largest applications.
</div>
</div>
<div class="imagem-1">
<img src="https://angular.io/generated/images/marketing/home/loved-by-millions.svg"/>
</div>
</div>
<div class="bottom">
<div class="imagem-2">
<img src="https://angular.io/generated/images/marketing/home/code-icon.svg"/>
</div>
<div class="textos-1">
<div class="texto-3">
TRY IT NOW
</div>
<div class="texto-4">
Explore Angular's capabilities with a ready-made <br> sample app. No setup required.
</div>
</div>
</div>
</div>
</body>
</html>
```
>index.css
```css=
@font-face {
font-family: a;
src: url('angular (1).woff2');
}
@font-face {
font-family: b;
src: url('angular (2).woff2');
}
@font-face {
font-family: c;
src: url('angular.woff2');
}
.container-angular {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 130px;
}
.top{
display: flex;
flex-direction: row;
}
.textos {
display: flex;
flex-direction: column;
margin-top: 30px;
margin-right: 45px;
}
.texto-1 {
font-size: 20px;
color: #1976d2;
font-family: b;
}
.texto-2 {
margin-top: 28px;
line-height: 32px;
font-size: 16px;
font-family: b;
color: #444444;
}
.imagem-1 img {
width: 409px;
margin-left: 45px;
}
.bottom {
display: flex;
flex-direction: row;
margin-top: 35px;
box-shadow: 2px 2px 8px grey;
width: 520px;
height: 165px;
}
.imagem-2 img {
width: 70px;
margin-right: 19px;
margin-left: 45px;
margin-top: 49px;
}
.textos-1 {
margin-left: 19px;
margin-top: 35px;
}
.texto-3 {
font-size: 20px;
color: #1976d2;
font-family: b;
}
.texto-4 {
font-size: 16px;
line-height: 32px;
margin-top: 13px;
font-family: b;
color: #444444;
}
```
# FAIXA 8
## Mysql
>https://www.mysql.com/
>https://xmukw.csb.app/
>index.html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="index.css">
<title>MYSQL</title>
</head>
<body>
<div class="container-mysql">
<div class="esquerda">
<div class="box">
<div class="imagem">
<img src="nuvem.PNG"/>
</div>
<div class="textos">
<div class="texto-1">
MySQL Database Service with HeatWave
</div>
<div class="texto-2">
MySQL Database Service is a fully managed database service to deploy cloud-native <br> applications. HeatWave, an integrated, high-performance analytics engine accelerates <br> MySQL performance by 400x.
</div>
<div class="texto-3">
Learn More
</div>
</div>
</div>
<div class="box">
<div class="imagem">
<img src="quadrado.PNG"/>
</div>
<div class="textos">
<div class="texto-1">
MySQL for OEM/ISV
</div>
<div class="texto-2">
Over 2000 ISVs, OEMs, and VARs rely on MySQL as their products' embedded database to <br> make their applications, hardware and appliances more competitive, bring them to <br> market faster, and lower their cost of goods sold.
</div>
<div class="texto-3">
Learn More
</div>
</div>
</div>
</div>
<div class="direita">
<div class="box">
<div class="imagem-enterprise">
<img src="cilindro.PNG"/>
</div>
<div class="textos">
<div class="texto-1">
MySQL Enterprise Edition
</div>
<div class="texto-2">
The most comprehensive set of advanced features, management tools and technical <br> support to achieve the highest levels of MySQL scalability, security, reliability, and uptime.
</div>
<div class="texto-3">
Learn More
</div>
</div>
</div>
<div class="box">
<div class="imagem">
<img src="circulo.PNG"/>
</div>
<div class="textos">
<div class="texto-1">
MySQL Cluster CGE
</div>
<div class="texto-2">
MySQL Cluster enables users to meet the database challenges of next generation web, <br> cloud, and communications services with uncompromising scalability, uptime and agility.
</div>
<div class="texto-3">
Learn More
</div>
</div>
</div>
</div>
</div>
</body>
</html>
```
>index.css
```css=
@font-face {
font-family: a;
src: url('mysql1.woff');
}
@font-face {
font-family: b;
src: url('mysql2.woff');
}
@font-face {
font-family: c;
src: url('mysql3.woff');
}
.container-mysql {
display: flex;
flex-direction: row;
margin-top: 230px;
justify-content: center;
}
img {
width: 75px;
margin-top: 20px;
}
.imagem-enterprise img {
width: 60px;
margin-right: 7px;
margin-left: 8px;
}
.esquerda {
margin-right: 20px;
}
.direita {
margin-left: 20px;
}
.box {
display: flex;
flex-direction: row;
margin-bottom: 50px;
}
.textos {
margin-left: 35px;
}
.texto-1 {
font-size: 19px;
cursor: pointer;
margin-bottom: 16px;
color: #e97b00;
font-family: b;
}
.texto-2 {
font-size: 14px;
margin-bottom: 7px;
color: #555555;
line-height: 23px;
font-family: b;
}
.texto-3 {
font-size: 14px;
color: #0074a3;
cursor: pointer;
font-family: b;
}
```
# FAIXA 9
## Azure
>https://azure.microsoft.com/pt-br/
>https://18udj.csb.app/
>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>Azure</title>
</head>
<body>
<div class="container-azure">
<div class="box">
<div class="textos">
<div class="texto-1">
A Sociedade Americana contra o Câncer manteve o fluxo de <br> recursos para pacientes e pesquisadores durante a pandemia <br> global fazendo a transição da infraestrutura dela para o Azure.
</div>
<div class="texto-2">
<span> Estudo de caso <span> ﹥
</div>
</div>
</div>
</div>
</body>
</html>
```
>index.css
```css=
@font-face {
font-family: a;
src: url('latest.woff2');
}
body {
background-image: url("azure.jpg");
background-repeat: no-repeat;
background-size: 1600px 585px;
background-position: 5px 90px;
}
.box {
color: white;
margin-left: 150px;
margin-top: 450px;
background-color: rgba(26,26,31,.94);
width: 600px;
padding: 25px 10px 22px 22px;
border-radius: 7px;
}
.texto-1 {
font-size: 20px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.texto-2 {
font-size: 14px;
margin-top: 25px;
text-decoration: underline;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
```
# FAIXA 10
## Amazon
>https://aws.amazon.com/pt/
>https://ylkdq.csb.app/
>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>AMAZON</title>
</head>
<body>
<div class="container-amazon">
<div class="textos-top">
<div class="texto-1">
Soluções de nuvem híbrida da AWS
</div>
<div class="texto-2">
Experiência consistente em toda a AWS e nos ambientes on-premises
</div>
</div>
<div class="textos-bottom">
<div class="textos-esquerda">
<div class="imagem-esquerda">
<img src="1.png">
</div>
<div class="texto-3">
WMware Cloud on AWS
</div>
<div class="texto-4">
Migre e amplie ambientes WMware para a Nuvem AWS
</div>
<div class="texto-5">
Saiba mais
</div>
</div>
<div class="textos-direita">
<div class="imagem-direita">
<img src="2.png">
</div>
<div class="texto-3">
AWS Outposts
</div>
<div class="texto-4">
Execute a infraestrutura da AWS on-premises para ter uma <br> experiência híbrida verdadeiramente consistente
</div>
<div class="texto-5">
Saiba mais
</div>
</div>
</div>
</div>
</body>
</html>
```
>index.css
```css=
@font-face {
font-family: lt;
src: url('Lt.woff2');
}
@font-face {
font-family: bd;
src: url('Bd.woff2');
}
@font-face {
font-family: rg;
src: url('Rg.woff2');
}
body {
background-image: url("fundo.png.png");
background-repeat: no-repeat;
background-size: 1595px 380px;
background-position: 5px 170px;
}
.container-amazon {
text-align: center;
margin-top: 220px;
color: white;
}
.texto-1 {
font-size: 36px;
font-family: rg;
cursor: pointer;
}
.texto-2 {
font-size: 20px;
margin-top: 17px;
font-family: lt;
}
.textos-bottom {
cursor: pointer;
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 35px;
}
.texto-3 {
font-size: 20px;
font-family: bd;
}
.texto-4 {
font-size: 16px;
padding-left: 70px;
padding-right: 70px;
margin-top: 20px;
font-family: lt;
}
.texto-5 {
font-size: 15px;
margin-top: 13px;
font-family: rg;
}
```
{"metaMigratedAt":"2023-06-15T22:47:57.421Z","metaMigratedFrom":"Content","title":"Super Bônus | Web","breaks":true,"contributors":"[{\"id\":\"31e7052c-d777-4fb0-b189-63fab945e035\",\"add\":48822,\"del\":24722}]"}