---
# System prepended metadata

title: Super Bônus | Web

---

# 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 &#709;
          </div>
          <div class="menu-links">
            Our priorities &#709;
          </div>
          <div class="menu-links">
            Resources &#709;
          </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;
}
```