# Trabalho | linguagem de programação
autor:Pedro Henrique Gomes De Oliveira Sardinha
turma:Info-B
número:41
### faixa: Twitter
link:https://codesandbox.io/s/nervous-kepler-kd1x5?file=/index.html:0-1860
html:
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="index.css" />
<title>Twitter</title>
</head>
<body>
<div class="conteiner">
<div class="filha1">
<div class="nome">
<div class="image">
<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="t">Sobre</div>
</div>
<div class="texto">
<div class="texto1">Quem somos</div>
<div class="texto2">Nossas prioridades</div>
<div class="texto3">Recursos</div>
<div class="twa"><button>Vá para Twitter.com</button></div>
</div>
</div>
<div class="filha2">
<div class="textao">
Twitter é o que está acontecendo e sobre o que as pessoas estão
falando agora.
</div>
<div><button class="botton1">Vá para Twitter.com</button></div>
</div>
</div>
</body>
</html>
````
css:
```css=
.filha1 {
justify-content: space-between;
display: flex;
flex-direction: row;
}
@font-face {
font-family: fonte1;
src: url("https://fonts.twitter.com/chirp/chirp-bold-italic-web.woff2%27");
}
body {
margin: 2px;
background-image: url("https://about.twitter.com/content/dam/about-twitter/en/home/home-bg-texture.jpg");
}
.texto {
width: 550px;
justify-content: space-between;
display: flex;
flex-direction: row;
}
.nome {
display: flex;
flex-direction: row;
}
.image {
fill: #1d9bf0;
margin-right: 10px;
}
.t {
font-size: 24px;
}
.textao {
font-size: 80px;
color: #000000;
margin: 90px;
font-weight: 600;
width: 700px;
}
.texto4 {
margin: 0px 0px 0px 8px;
color: #314351;
font-size: 14px;
width: 168px;
height: 48px;
border-radius: 50px;
}
.botton1 {
background-color: #14171a;
margin: 0px 0px 0px 8px;
padding: 16px 19px;
color: #ffffff;
font-size: 14px;
width: 168px;
height: 48px;
border-radius: 50px;
}
.twa {
border-radius: 50px;
border: 25px;
}
````
### faixa: Figma2
link= https://codesandbox.io/s/eager-ramanujan-tupr6?file=/index.html:0-2352
html=
```html=
<!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="conteiner">
<div class="filha1">Tente Figma de graça.
<div class="filha2">
<div class="image">
<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> inscreva-se no google </div>
<div class="we">ou</div>
<div class="ew"><input type="email"></input></div>
<div class="ewt"> <input type="password"></input></div>
<div class="Tt"> <button> criar conta </button>
<div>
<div class="texto1"><span style="color:blue">Inscreva-se no SAML SSO</div>
<div class="texto2"> Já tem uma conta? <span style="color:blue"> Faça login </div>
<div class="texto3"> Este site é protegido pela reCAPTCHA e a <span style="color:blue">Política</span> de Privacidade do Google e <span style="color:blue"> Os Termos de Serviço</span> se aplicam.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
````
css:
```css=
body {
text-align: center;
}
.conteiner {
line-height: 45px;
padding: 15px 35%;
background: #ffffff;
width: 420px;
height: 568px;
}
.image {
border-radius: 48px;
height: 48px;
background: #ffffff;
padding: 0px 20px;
border-style: groove;
}
button {
color: #fff;
width: 348px;
height: 48px;
font-size: 18px;
padding: 0px 0px 0px 20px;
border-radius: 8px;
margin: 12px 0px 0px;
background-color: #000;
}
{"metaMigratedAt":"2023-06-15T22:47:03.869Z","metaMigratedFrom":"Content","title":"Trabalho | linguagem de programação","breaks":true,"contributors":"[{\"id\":\"c212112f-d0ad-4b9a-81f5-f9919a02f162\",\"add\":8821,\"del\":2754}]"}