# Super Bônus | Web
autor: Felipe Oliveira Verissimo
turma: InfoC
númeor: 16
[toc]
## Faixa 1
> https://pb6vg.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">
<title>figma</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="imagem">
<img src="imagem site.png"/>
</div>
<div class="textos_do_site">
<div class="primeiro_texto">
Collaboration
</div>
<div class="segundo_texto">
Team up to<br> move even<br> faster
</div>
<div class="terceiro_texto">
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="quarto_texto">
<button> Work together </button>
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
@font-face{
font-family: font1;
src:url('fonte 1 (1).woff2');
}
@font-face{
font-family: font2;
src:url('fonte3 .woff2');
}
body{
background-color: #FFC700;
}
.container{
display:flex;
flex-direction: row;
justify-content: center;
}
img{
width: 604px;
margin-right: 30px;
}
.primeiro_texto{
font-size: 22px;
font-family: font1;
}
.segundo_texto{
font-size: 54px;
margin-top: 20px;
line-height: 50px;
font-family: font2;
}
.terceiro_texto{
font-size: 22px;
margin-top: 45px;
font-family: font1;
}
.quarto_texto{
font-size: 18px;
margin-top: 25px;
}
button{
padding: 12px 28px;
border-radius: 8px;
border: 3px solid black;
background-color: #FFC700;
font-family: font2;
}
.textos_do_site{
margin-left:30px;
}
```
## Faixa 2
> https://nfgms.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">
<title>figma</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="primeirotexto">
Try Figma for free.
</div>
<button class="google"><b>Sign up with Google</b></button>
<div class="segundotexto">or</div>
<input class="input23"></input>
<input class="input2"></input>
<button class="button2">Create account</button>
<div class="terceirotexto">
Sign up with SAML SSO
</div>
<div class="quertotexto">
Already have an account?<span>Log in</span>
</div>
<div class="quintotexto">
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=
.container{
display:flex;
flex-direction: column;
align-items: center;
}
.primeirotexto{
font-size: 32px;
margin-bottom: 30px;
font-family: primeirotexto;
}
.segundotexto{
font-size: 12px;
margin-bottom: px
font-family: primei;;
}
.quertotexto{
font-size: 12px;
font-family: primei;
}
.terceirotexto{
font-size: 12px;
padding: 30px;
color: #5551FF;
}
.quintotexto{
font-size: 12px;
padding: 30px;
text-align: center;
font-family: primei;
}
.google{
padding: 8px 76px;
margin-bottom: 10px;
border: 3px solid;
border-radius: 5px;
font-family: primei;
}
.button2{
padding: 13px 90px;
margin-top: 30px;
border: 3px solid;
background-color: black;
color: white;
border-radius: 10px;
font-family: primeirotexto;
}
.input2{
padding: 10px 54px;
margin-top: 30px;
border: 3px solid;
border-radius: 5px;
}
.input23{
padding: 10px 54px;
margin-top: 18px;
border: 3px solid;
border-radius: 5px;
}
span{
color: #5551FF;
}
@font-face{
font-family: primeirotexto;
src:url('fontiiii[.woff2');
}
@font-face{
font-family: primei;
src:url('fonte.woff2');
}
```
## Faixa 3
> https://cqhw1.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">
<title>udemy</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="partedecima">
<div class="imagem">
<img src="imagem.jpg"/>
</div>
<div class="textos_do_site">
<div class="primeiro_texto">
Torne-se um instrutor
</div>
<div class="segundo_texto">
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>
<div class="terceiro_texto">
<button> Comece a ensinar hoje mesmo </button>
</div>
</div>
</div>
<hr>
<div class="partedebaixo">
<div class="quarto_texto">
Ganhou a confiança de empresas de todos os tamanhos
</div>
<div class="logos">
<img src="https://s.udemycdn.com/partner-logos/booking-logo.svg"/>
<img src="https://s.udemycdn.com/partner-logos/volkswagen-logo.svg"/>
<div class="imagemmercedez">
<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>
<hr>
</div>
</div>
</body>
</html>
```
> index.css
```css=
.partedecima{
display:flex;
flex-direction: row;
justify-content: center;
}
.imagem{
margin-right: 40px;
}
.textos_do_site{
margin-left: 40px;
margin-top: 100px;
}
.primeiro_texto{
font-size: 32px;
font-family: arial;
font-weight: 600;
color: #3c3b37;
}
.segundo_texto{
font-size: 19px;
margin-top: 10px;
font-family: arial;
color: #3c3b37;
}
.quarto_texto{
text-align: center;
}
button{
background-color: #0F7C90;
padding: 15px;
border-radius: 5px;
border: none;
color: white;
font-family: arial;
font-weight: 600;
}
.imagemmercedez{
width: 180px;
}
.logos{
display: flex;
flex-direction: row;
justify-content: center;
}
.logos img{
margin-top: 35px;
margin-left: 20px;
margin-right: 20px;
}
.quarto_texto{
font-size: 24px;
margin-top: 40px;
font-family: arial;
font-weight: 600;
color: #3c3b37;
}
.terceiro_texto{
margin-top: 10px;
}
hr{
margin-top: 40px;
}
```
## Faixa 4
> https://7b5o9.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">
<title>typing</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="imagem">
<img src="https://static.typingclub.com/m/tpmedia/img/district.svg"/>
</div>
<div class="textos_do_site">
<div class="primeiro_texto">
THE AMAZING
</div>
<div class="segundo_texto">
TypingClub School Edition
</div>
<div class="terceiro_texto">
TypingClub School Edition is the most powerful and popular software used<br> by teachers, schools and districts.
</div>
<div class="quarto_texto">
<button> Learn more </button>
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
img{
width: 240px;
margin-right: 90px;
margin-top: 200px;
}
.primeiro_texto{
font-size: 13px;
color: #ffffffb3;
font-family: font2;
}
.segundo_texto{
font-size: 28px;
color: #ffffff;
margin-top: 8px;
font-family: font2;
}
.terceiro_texto{
font-size: 19px;
color: #ffffffb3;
margin-top: 18px;
font-family: font2;
}
.button{
font-size: 18px;
font-family: font2;
color: #333333;
}
.container{
display: flex;
flex-direction: row;
justify-content: center;
}
.textos_do_site{
margin-top: 220px;
}
body{
background-color: #262F36;
}
button{
background-color: #ffffff;
padding: 15px 60px;
border-radius: 6px;
border: none;
margin-top: 30px;
}
@font-face{
font-family: font2;
src:url('fonte3.woff2');
}
@font-face{
font-family: font2;
src:url('fonte3.woff2');
}
@font-face{
font-family: font2;
src:url('fonte2.woff');
}
```
## Faixa 5
> https://m6xl7.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">
<title></title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="imagem">
<img src="https://static.typingclub.com/m/tpmedia/img/typingclub-browser3.png"/>
</div>
<div class="textos_do_site">
<div class="primeiro_texto">
WHAT IS TYPINGCLUB?
</div>
<div class="segundo_texto">
TypingClub is the most effective<br> way to learn how to type.
</div>
<div class="terceiro_texto">
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="quarto_texto">
<button> Get Started Now </button>
</div>
</div>
</body>
</html>
```
> index.css
```css=
.primeiro_texto{
font-size: 13px;
font-family: font2;
color: #BEB8CE;
}
.segundo_texto{
font-size: 28px;
margin-top: 10px;
font-family: font2;
}
.terceiro_texto{
font-size: 18px;
margin-top: 10px;
font-family: font2;
color: #BEB8CE;
}
.quarto_texto{
font-size: 16px;
}
img{
width: 450px;
margin-right: 40px;
}
.container{
display: flex;
justify-content: center;
margin-top: 180px;
}
button{
margin-top: 25px;
color: #FFF;
background-color: #2595FF;
padding: 8px 25px;
line-height: 1.4;
border-radius: 4px;
border: none;
font-family: font2;
}
@font-face{
font-family: font2;
src:url('fonte3.woff2');
}
@font-face{
font-family: font2;
src:url('fonte3.woff2');
}
@font-face{
font-family: font2;
src:url('fonte2.woff');
}
.textos_do_site{
margin-top: 10px;
}
```
## Faixa 6
### Meu site e da minha dupla da prova. Provavelmente vamos enviar o mesmo!
> 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
> https://vh9vz.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">
<title>mysql</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="caixa1">
<div class="caixinha">
<img src="nuven.PNG"/>
<div class="todosostextos">
<div class="primeirotexto">
MySQL Database Service with HeatWave
</div>
<div class="segundotexto">
MySQL Database Service is a fully managed database service to deploy<br> cloud-native applications. HeatWave, an integrated, high-performance<br> analytics engine accelerates MySQL performance by 400x.
</div>
<div class="terceirotexto">
Learn More »
</div>
</div>
</div>
<div class="caixinha">
<img src="quadrado.PNG"/>
<div class="todosostextos">
<div class="primeirotexto">
MySQL for OEM/ISV
</div>
<div class="segundotexto">
Over 2000 ISVs, OEMs, and VARs rely on MySQL as their products'<br> embedded database to make their applications, hardware and<br> appliances more competitive, bring them to market faster, and lower<br> their cost of goods sold.
</div>
<div class="terceirotexto">
Learn More »
</div>
</div>
</div>
</div>
<div class="caixa2">
<div class="caixinha">
<img src="latinha.PNG"/>
<div class="todosostextos">
<div class="primeirotexto">
MySQL Enterprise Edition
</div>
<div class="segundotexto">
The most comprehensive set of advanced features, management tools<br> and technical support to achieve the highest levels of MySQL scalability,<br> security, reliability, and uptime.
</div>
<div class="terceirotexto">
Learn More »
</div>
</div>
</div>
<div class="caixinha">
<img src="bola.PNG"/>
<div class="todosostextos">
<div class="primeirotexto">
MySQL Cluster CGE
</div>
<div class="segundotexto">
MySQL Cluster enables users to meet the database challenges of next<br> generation web, cloud, and communications services withL<br> uncompromising scalability, uptime and agility.
</div>
<div class="terceirotexto">
Learn More »
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
.container{
display:flex;
flex-direction: row;
justify-content: center;
margin-top: 55px;
}
img{
width: 75px;
height: 75px;
}
.caixinha{
display:flex;
flex-direction: row;
margin-bottom: 45px;
}
.caixa2{
margin-left: 25px;
}
.caixa1{
margin-right: 25px;
}
.todosostextos{
margin-left: 30px;
}
.primeirotexto{
margin-bottom: 25px;
color: #E97B00;
font-family: font1;
}
.segundotexto{
margin-bottom: 10px;
font-family: font2;
}
.terceirotexto{
color: #0074A3;
font-family: font3;
}
@font-face{
font-family: font1;
src:url('ultimos (1).woff');
}
@font-face{
font-family: font2;
src:url('ultimos (2).woff');
}
@font-face{
font-family: font3;
src:url('ultimos (1).woff');
}
```
## Faixa 8
> https://32fzg.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">
<title></title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="primeirotexto">
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="segundotexto">
Estudo de caso >
</div>
</div>
</body>
</html>
```
> index.css
```css=
body{
background-image: url("https://azurecomcdn.azureedge.net/cvt-516699d3bb41b6946f98a228f980031cb70fa9cdf9f4c8822f3a19ac90d14aea/images/page/home/customer-tabs/american-cancer-society-desktop.jpg");
background-size: 1400px 500px;
background-repeat: no-repeat;
}
.container{
background-color: rgba(26,26,31,.94);
color: white;
width: 600px;
margin-top: 300px;
margin-left: 30px;
padding: 40px 30px;
border-radius: 8px;
}
.primeirotexto{
font-size: 20px;
font-family: arial;
}
.segundotexto{
text-decoration: underline;
margin-top: 20px;
}
```
## Faixa 9
> https://duevb.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">
<title>amazon</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="textos_do_site">
<div class="primeirotexto1">
Soluções de nuvem híbrida da AWS
</div>
<div class="segundotexto2">
Experiência consistente em toda a AWS e nos ambientes on-premises
</div>
</div>
<div class="textodosite2">
<div class="caixa1">
<img src="https://d1.awsstatic.com/webteam/homepage/Hybrid%20Solutions/VMWareCloud_Icon.55cb0bcef2c74b55acdb7155e3524e4b5436ec6e.png"/>
<div class="primeirotexto2">
VMware Cloud on AWS
</div>
<div class="segundotexto3">
Migre e amplie ambientes VMware para a Nuvem AWS
</div>
<div class="saibamais">
Saiba mais >>
</div>
</div>
<div class="caixa2">
<img src="https://d1.awsstatic.com/webteam/homepage/Hybrid%20Solutions/AWSOutposts_Icon.35873a6a5fc187904cab8b8c8793f91625e7cb67.png"/>
<div class="primeirotexto3">
AWS Outposts
</div>
<div class="segundotexto4">
Execute a infraestrutura da AWS on-premises para ter uma<br> experiência híbrida verdadeiramente consistente
</div>
<div class="saibamais2">
Saiba mais >>
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
body{
background-image: url("https://d1.awsstatic.com/webteam/homepage/Hybrid%20Solutions/WEB_Homepage_Hybrid_ImageBackgrounds_3.76e75f8d80d01f3d2412e004a28dc3065780a476.png");
background-size: 1400px 500px;
background-repeat: no-repeat;
}
.textos_do_site{
text-align: center;
}
.primeirotexto1{
color: white;
font-size: 30.6px;
font-family: font2;
}
.segundotexto2{
color: white;
font-size: 20px;
font-family: font1;
}
.textodosite2{
display: flex;
flex-direction: row;
}
.container{
display: flex;
align-items: center;
flex-direction: column;
}
.caixa1{
margin-top: 60px;
margin-right: 30px;
text-align: center;
margin-right: 60px;
}
.caixa2{
margin-top: 60px;
margin-right: 30px;
text-align: center;
margin-left: 60px;
}
.primeirotexto2{
font-size: 20px;
color: white;
font-family: font2;
}
.segundotexto3{
color: white;
font-size: 16px;
font-family: font1;
}
.primeirotexto3{
font-size: 20px;
color: white;
font-family: font2;
}
.saibamais{
font-size: 15px;
color: white;
font-family: font2;
}
.segundotexto4{
color: white;
font-size: 16px;
font-family: font1;
}
.saibamais2{
font-size: 15px;
color: white;
font-family: font2;
}
@font-face{
font-family: font1;
src:url('a.woff2');
}
@font-face{
font-family: font2;
src:url('b.woff2');
}
@font-face{
font-family: font3;
src:url('c.woff');
}
```
## Faixa 10
> https://te650.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">
<title> dotnet </title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="partedecima">
<div class="imagem">
<img src="https://dotnet.microsoft.com/static/images/illustrations/free-code-editor-tools-bot-desk.svg?v=WWIDocc21QEOeLjT9jofZosRF7KhqeGcGtaQr2ZB7TE"/>
</div>
<div class="textos_do_site">
<div class="primeiro_texto">
Thank You to All the <br> Contributors
</div>
<div class="segundo_texto">
.NET is open source and we are very thankful for the<br> many contributions it receives from the community.
</div>
<div class="terceiro_texto">
<button> See the Contributors</button>
</div>
</div>
</div>
<div class="logos">
<img src="https://dotnet.microsoft.com/blob-assets/images/customers/chipotle.png"/>
<img src="https://dotnet.microsoft.com/blob-assets/images/customers/ampas.png"/>
<img src="https://dotnet.microsoft.com/blob-assets/images/customers/ge-aviation.png"/>
<img src="https://dotnet.microsoft.com/blob-assets/images/customers/ups.svg"/>
<img src="https://dotnet.microsoft.com/blob-assets/images/customers/stackoverflow.svg"/>
</div>
</div>
</body>
</html>
```
> index.css
```css=
.logos img {
height: 60px;
margin-top: 50px;
}
.logos {
margin-left: 10px;
background-color: #f0f0f0;
padding-bottom: 50px;
padding-left: 90px;
}
.partedecima {
display: flex;
flex-direction: row;
}
button{
color: #512bd4;
background-color: transparent;
border: 1px solid #512bd4;
padding: 9px;
font-size: 16px;
margin-top: 15px;
}
.primeiro_texto{
font-size: 32px;
font-family: arial;
color: #212529;
}
.segundo_texto{
font-size: 15px;
color: #212529;
margin-top: 10px;
font-family: arial;
}
@font-face{
font-family: font1;
src:url('3.woff');
}
@font-face{
font-family: font2;
src:url('1.woff');
}
@font-face{
font-family: font3;
src:url('2.ttf');
}
img{
margin: 0px 30px;
}
.imagem{
margin-left: 130px;
}
```
Google Drive
Gist
Clipboard
Sign in with Wallet
