diff --git a/exercicios/.DS_Store b/exercicios/.DS_Store index f183a8e..8e933a7 100644 Binary files a/exercicios/.DS_Store and b/exercicios/.DS_Store differ diff --git a/exercicios/README.md b/exercicios/README.md new file mode 100644 index 0000000..cf1b20e --- /dev/null +++ b/exercicios/README.md @@ -0,0 +1,12 @@ +# Projeto 1 - M de Maravilhosa + +## Mock up do Projeto +https://www.figma.com/file/XBEywzd2yF47RaWm0Gw4t7Tz/M-de-Maravilhosa?node-id=4%3A0 + +## Orientações para o pull request +1. Façam o fork desse repositório; +2. Façam um clone do repositório de vocês (o que vocês criaram através do fork); +3. Leiam e entendam o código do projeto. Depois disso, façam as alterações da sua personalidade. + + +> SE ATENTEM AS INSTRUCOES QUE A PROF COLOCOU NO CLASS ROOM diff --git a/exercicios/index.html b/exercicios/index.html new file mode 100644 index 0000000..063f368 --- /dev/null +++ b/exercicios/index.html @@ -0,0 +1,187 @@ + + + + + + Maryanne Lima + + + + + + + + + + + + + +
+
+
+

Taís Araújo

+

Conhecida como símbolo do movimento negro no Brasil e Defensora dos Direitos das Mulheres Negras da ONU. + Em 2017 a atriz apareceu como a quinta personalidade que mais influencia os jovens, segundo uma pesquisa divulgada + em fevereiro. Ao lado do marido, Lázaro Ramos, Taís se destaca como símbolo de arte, cultura, empoderamento + e coragem.

+ Curiosidades +
+
+
+ + + +
+
+
+

Taís Bianca Gama de Araújo

+
+
+ Foto da Tais + +
+
+

+ Taís Bianca Gama de Araújo nasceu no Rio de Janeiro, em 25 de novembro de 1978, de um parto normal prematuro, +aos sete meses de gestação. Formou-se no curso de jornalismo, pela Universidade Estácio de Sá, +mas nunca chegou a exercer a profissão, uma vez que optou por dar continuidade à carreira de atriz, +a atriz foi a terceira mulher negra a fazer o papel de protagonista em uma novela brasileira +e também foi a primeira protagonista negra do horário nobre. +A ONU Mulheres Brasil nomeou Taís Araújo como defensora dos Direitos das Mulheres Negras. +A atriz passa a apoiar a visibilidade das mulheres negras como um dos grupos prioritários do Plano de Trabalho +da ONU Brasil para a Década Internacional de Afrodescendentes. +

+
+
+
+ + +
+

“Se durante décadas não houve negros em posição de destaque, por que a novela iria mostrá-los?”

+
+ +
+

Sua História

+
+

Em 1995 estreou na televisão na telenovela Tocaia Grande, interpretando Bernarda, filha adotiva do personagem central que se envolvia com ele após a morte da esposa deste. Alguns meses depois, conquistou sua primeira protagonista, quando Walter Avancini, diretor da telenovela Xica da Silva (1996), escolheu Taís para ser a personagem título da trama, uma escrava que se torna rainha do Arraial do Tijuco ao se unir ao poderoso contratador local. + Pela novela Taís foi a terceira atriz negra a protagonizar uma telenovela brasileira em Xica da Silva (1996) – após Iolanda Braga em A Cor da Sua Pele (1965) e Ruth de Souza em A Cabana do Pai Tomás (1969). A novela foi exportada para vários países, e em 2000, a atriz foi eleita um dos 50 rostos mais bonitos do mundo pela revista People em espanhol impulsionada pela visibilidade internacional que alcançou com a trama. + +

+

Em 2016, uma pesquisa de opinião (Pesquisa Qualibest) também apontou Taís Araújo como a mulher mais admirada por jovens na faixa etária entre 13 e 20 anos, a quinta artista mais influente da televisão e internet no país, segundo o jornal Meio & Mensagem em parceria com o Instituto Datafolha em 2016, e a quarta mais influente em 2017. Também foi eleita uma das mulheres mais guerreiras e estilosas pela revista americana Vogue América.

+
+
+ Foto da sua personalidade +
+
+

Em 2017, foi eleita uma das 100 personalidades afrodescendentes mais influentes do mundo com menos de 40 anos pelo MIPAD, e por esta razão participou de um debate na Universidade de Columbia, em Nova York, onde recebeu o prêmio. O casal Taís e Lázaro foi apontado como o mais poderoso do showbizz nacional, em matéria de capa da Revista Veja publicada em março de 2017. No dia 3 de julho de 2017, foi nomeada Defensora dos Direitos das Mulheres Negras pela ONU Mulheres Brasil, entidade das Nações Unidas para a igualdade de gênero e empoderamento das mulheres. Ela foi convidada para participar de uma palestra da Tedx, em São Paulo, contando para uma audiência de cerca de nove mil pessoas, suas experiências no ativismo social na luta pela igualdade de direitos na sociedade. No mesmo ano recebeu uma homenagem no Prêmio Claudia promovido pela Revista Claudia, da Editora Abril, em São Paulo, na categoria hors concours, honraria concedida às pessoas que atuam pela igualdade de direitos na sociedade. + + Em 2021, ela e o marido Lázaro Ramos, novamente foram eleitos entre as 100 Pessoas Mais Influentes de Descendência Africana (Mipad) na premiação promovida pela ONU.

+
+
+
+ + + +
+ Ver todas elas +
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/README.md b/exercicios/projeto-casa/Projeto-1---semana-4/README.md new file mode 100644 index 0000000..bdf5d14 --- /dev/null +++ b/exercicios/projeto-casa/Projeto-1---semana-4/README.md @@ -0,0 +1,310 @@ +

+ logo reprograma +

+ +# Tema da Aula + +Turma Online 23 - Todas em Tech | Front-end | Semana 4 | 2022 | Professora Thiele Nunes +(Material construido a partir do material da prof Jaqueline) + +Hoje é dia de revisão para assentar tudo o que você aprendeu até aqui. + + +### Instruções +Antes de começar, vamos organizar nosso setup. +* Fork esse repositório +* Clique no botão "code" +* Copie o endereço do repositório +* Abra o seu Gitbash + +* Entre no seu desktop: +``` + cd desktop +``` +* Clone o fork na sua máquina: basta abrir o seu terminal e digitar: + +``` + git clone url-do-seu-repositorio-forkado +``` +* Digite o comando ls para encontrar o seu repositório: + +``` + ls +``` +* Copie o nome do repositorio e entre na pasta clonada: + +``` + cd on23-tet-s2-html-css +``` +* Crie uma branch com o seu nome: + +``` + git checkout -b seu-nome +``` +* Digite o comando para abrir o projeto no vscode: + +``` + code . +``` + +### Resumo +O que veremos na aula de hoje? +* [Revisão geral](#revisao) +* [HTML](#html) +* [CSS](#css) +* [Responsividade](#responsividade) +* * [Intervalos: Vamos comer 😋 e beber café! ☕](#intervalos) + + Vamos ter dois intervalos : 10:30 e 15:00; + + Vamos almoçar às 12:00; + + Voltamos às 13:00. + +## Conteúdo + +### Revisão Geral +1. [O que vimos até agora?](#topico1) + + +### HTML +1. [Estruturas básicas](#topico3) +2. [HTML Semântico](#topico3) +3. [Class e ID](#topico3) + + +### CSS +1. [Link Style sheet](#topico4) +2. [USo de seletores](#topico4) +3. [Propriedades e valores](#topico4) + +### Responsividade +1. [Mobile First](#topico4) +2. [Media Query](#topico4) +3. [Breakpoint](#topico4) + +### Revisão + +#### O que vimos até agora + +Vocês foram apresentadas ao HTML, CSS e Responsividade: + +* Criaram uma página com estrutura básica; +* Conheceram as principais tags; +* Usaram HTML Semântico; +* Aprenderam a usar class e id; +* Descobriram como criar uma estilização para uma página; +* Estilizaram com tag, class e id. +* Mudaram a fonte; +* Aprenderam sobre unidades de medidas; +* Descobriram a importância de usar imagem com bosa resolução; +* Descobriram o media query e os breakipoint; +* Fizeram uma página responsiva. + +**Ufa! Muita coisa, né?** 🙃 + +Mas o aprendizado é aos poucos. Vocês aprenderam os fundamentos e, a partir de agora o aprendizado estará em outro nível. + +Continue e mantenha o foco em aprender um pouco a cada dia. + +### HTML + +#### Estrutura básica +* [Principais Tags](#subtopico1) +* [HTML Semântico](#Subtopico2) + +Com estes dois conceitos bem fixados, você vai longe! + +##### Principais tags + +- Tags estruturais: **html, meta,body, main, style, link, title** +- Cabeçalho : **header, nav** +- Titulos: **h1 a h6** +- Parágrafo : **p** +- Link : **a e seus atributos** +- Listas: **ol, ul e li** +- Imagem: **img** +- Formulários: **form, input, label, textarea, fieldset** +- Formulários: **p** **table, th, td, tr** +- Rodapé: **footer** +- Outras: **div, section, br** + + +##### HTML Semântico +O HTML semântico foi criado com o intuito de aproximar a linguaguem do HTMl da linguagem comum, usual, facilitando a leitura da desenvolvedora, auxiliando na indexação da página pelo Google, além de melhorar a acessibilidade no uso de leitores de tela. + +* nav +* main +* article +* header +* aside +* footer +* section + +#### Class e ID + +As tags podem ser nomeadas de acordo com o conteúdo da página que está sendo criada para facilitar a estilização e possibilitar que uma tags com o mesmo nome possam ter estilos diferentes no css. + +Para chamá-los, o padrão é: + +``` +

Ola

+ +``` +``` +
+

Ola

+
+ +``` + +Com o método **BEM** os nomes das classes e seletores seguem um padrão diferencia aquilo que é um conteúdo de bloco **B**, elemento **E** e modificadores **M**. +Utilizar o BEM é benefíco, rsss! 😅 + +### CSS + +#### Link stylesheet + +Para que a página tenha a sua estilização incluir a **tag style* dentro da *tag head*. +Há outras formas de chamar a taga style, mas a forma mais indicada é seguida abaixo: + +``` + + +``` + +Criando um arquivo com extensão **css**, este arquivo é linkado conforme exemplo acima. Confira se o caminho incluido no **atributo href** está correto. + +#### Uso de seletores + +Para que seu conteúdo seja estilizado, é preciso chamar os seletores. +Os seletores são as tags e os nomes das class e id que você criou no html. + +Exemplos: + +``` + h1 { + propriedade: valor; + } + + h1, p{ + propriedade: valor; + } + + .titulo { + propriedade: valor; + } + + .titulo__secundario { + propriedade: valor; + } + + footer > .titulo__rodape{ + propriedade: valor; + } + + #article { + propriedade: valor; + } + +``` +#### Propriedades e valores + +O CSS tem propriedades específicas para a estilização de cada tag/elemento. Nestas propriedades se encontram diversos valores utilizados de maneira generalizada e outros específicos. + +``` + h1 { + font-style: italic; + } + + img { + width: 100%; + } + + p { + font-size: 1.5em; + } + +``` + +Lembrando que o HTML já tem padrões para as tags e, quando utilizamos a estilização, mudamos estes padrões. +CSS é estudo, erro, estudo, acerto e erro de novo. + +![css](https://media.giphy.com/media/YFkpsHWCsNUUo/giphy.gif) + +### Responsividade + +O layout responsivo traz fluidez para as nossas páginas, possibilitando o uso do mesmo layout de acordo com o tamanho da tela. +: **celular, table, desktop, laptop e televisão*. + +As alterações no CSS acontecem com o uso da técnica **media query**. Nesta técnica incluimos os break points - os pontos de quebra dos tamanhos das telas. + +#### Mobile first + +A responsividade tem o conceito **mobile first**, que orienta a estilização da página primeiro para o formato mobile(celular). Isso facilita o acesso de diversos usuários que têm o celular como principal meio de acesso à internet. + +#### Media query + +Media Query é a técnica que indica ao CSS que a partir da inserção da informação **@media (largura em px)** o layout terá outro comportamento. +É importante deixar o conteúdo que seja importante e necessário para a compreensão do usuário. + +#### Breakpoints + +O break point é o ponto em que a "tela quebra". Ele indica que a partir de determinada largura haverá uma mudança no layout da página telas mobile, tablet, laptop ou desktop. +Há um padrão dos break point que são mais utilizados, devido os diversos tamanhos de telas. + + +##### O que tambem vimos: + +- Box Model (tem videos sobre no class room) +- Formularios (tem videos sobre no class room e tambem tem o nosso repositorio) +- Git/ Github (tem videos sobre no class room e tambem tem o nosso repositorio) +- Versionamento de codigo (tem videos sobre no class room e tambem tem o nosso repositorio) +- Criacao de repositorios, fork, clone, commits (tem videos sobre no class room e tambem tem o nosso repositorio) +- Terminal (tem videos sobre no class room e tambem tem o nosso repositorio) + +##### Nossos repositorios: + +- [Git/GitHub](https://github.com/reprograma/on23-santander-s1-git-github) +- [HTML/CSS](https://github.com/reprograma/on23-santander-s2-html-css/blob/main/README.md) +- [Responsividade](https://github.com/reprograma/on23-santander-s3-html-css-responsivo) + +##### Ver ver rapidinho? +* BEM +- [bem](https://desenvolvimentoparaweb.com/css/bem/) + +* text-align +- [text-align](https://www.w3schools.com/cssref/pr_text_text-align.php) + + +Chegamos ao final! Este é uma revisão de base para você dá continuidade aos seus estudos, + + +##### O que vamos ver na aula extra de CSS: + +- [Justfy-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) +- [flex-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) +- [grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column) +- [position](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning) +- [Display](https://github.com/reprograma/html-css-basico) +- [Display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) + +### VAMOS AO EXERCICIO PARA SEMANA, M DE MARAVILHOSA! Projeto 01 + +* [Exercicio para casa](https://github.com/reprograma/on20-tet-s4-projeto-1/tree/main/exercicios/para-casa) + +### Material da aula + +### Links Úteis +- [Principais Tags HTML](https://www.codigofonte.com.br/artigos/principais-tags-de-html) +- [O que é HTML Semântico](https://ayltoninacio.com.br/blog/o-que-e-html-semantico) +- [Método BEM](https://en.bem.info/methodology/html/) +- [Propriedades CSS](https://www.alura.com.br/apostila-html-css-javascript/39CA-propriedades) +- [Breakpoints de maneira coerra](https://desenvolvimentoparaweb.com/css/css-breakpoints-maneira-correta/) + + + +

+Desenvolvido com :purple_heart: +

+ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/assets/reprograma-fundos-claros.png b/exercicios/projeto-casa/Projeto-1---semana-4/assets/reprograma-fundos-claros.png new file mode 100644 index 0000000..3c07ec4 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/assets/reprograma-fundos-claros.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/instrucoes/instrucoes-pull-request.md b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/instrucoes/instrucoes-pull-request.md new file mode 100644 index 0000000..e7005a3 --- /dev/null +++ b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/instrucoes/instrucoes-pull-request.md @@ -0,0 +1,31 @@ +# Como criar meu Pull Request? 🤔 + +Olá, meninas!
+O checklist da atividade ta todo preenchido? Entao agora tá na hora de fazer nosso pull request para o repositório original.
+Você deverá navegar até o seu repositório onde você fez o fork e pressionar o botão “New pull request” no lado esquerdo da página.

+![alt](https://assets.digitalocean.com/articles/eng_python/PullRequest/PRButton.png) + +Você poderá modificar a branch na próxima tela. + +Depois de ter escolhido a branch main do repositório original no lado esquerdo, e a nova-branch do seu fork do lado direito, você deve ver uma tela assim: + +![alt](https://assets.digitalocean.com/articles/eng_python/PullRequest/PullRequest.png) +

+O GitHub vai lhe alertar de que é possível mesclar as duas branches porque não há código concorrente. Você deve adicionar um título, e um comentário descrevendo o seu PR.

+DICAS:
+1. Você pode seguir esse modelo para o título do seu PR: +``` +Nome da Atividade - Seu nome. +``` +2. Você pode seguir esse modelo para a descrição do seu PR: +``` +O que? +Resolução dos exercícios de lógica. + +Como? +* Adicionei um arquivo para resolver a atividade 1 utilizando os métodos slice e split; +* Adicionei casos de testes unitários para cada um dos exercícios utilizando jest; +* Outro ponto que você queira adicionar. +``` +Feito isso, é so clicar em “Create pull request”.

+Tcharaaaannn! Agora é só esperar a prof revisar seu PR 💜 diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/README.md b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/README.md new file mode 100644 index 0000000..b55552e --- /dev/null +++ b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/README.md @@ -0,0 +1,48 @@ +# Projetinho 📓 + +## M de Maravilhosa ❤️ + +- Passo a passo para construção do projeto: + +* Faca as instruções iniciais do Readme Geral (Fork o repositorio, clone ele, crie uma branch) + +## O QUE PRECISO FAZER: +* Leiam e entendam o código do projeto. +* Crie uma pasta com seu nome, conforme modelo da prof; +* Crie seus arquivos **HTML, CSS e inclua suas imagens**. Lembre da ordem de organização, criando pastas para o CSS e imagens. +* Crie uma página sobre uma **Maravilhosa brasileira** que você admira, estilize e coloque imagens. +* Você pode seguir o modelo que a prof fez e também incluir mais conteúdo que você aprendeu. Lembre das tags básicas, estruturais e da semântica. e de entender o código +* Dentro do index da GERAL do repositorio, link o seu projeto na pagina inicial. (Conforme a prof ensinou em sala de aula) +* Procure o seu lugar dentro da página. Há uma div especifica para o seu projeto e ela está identificada com o seu nome no comentário. + +* Fique atenta para **não incluir** seu conteúdo no lugar da outra colega. +* Só faça as **alterações no index que foram indicadas** pela prof em aula. Sao elas: colocar uma foto da aluna e linkar a pasta do projeto individual. + +* Depois do projeto pronto, suba para o github! + +## PROCESSO PARA SUBIR NO GITHUB: +* Adicione as mudanças. (git add . para adicionar todos os arquivos, ou git add nome_do_arquivo para adicionar um arquivo específico) +* Commite a cada mudança significativa ou na finalização do exercício (git commit -m "Mensagem do commit") +* De Push nos commits da branch de voces (git push origin nome-da-branch) +* Crie um Pull Request seguindo as orientações que estão nesse documento. (Aqui: https://github.com/mflilian/onX-tet-sX-temaX/blob/main/exercicios/projeto-casa/instrucoes-pull-request.md) + + +## COMO TODAS IRAO SUBIR COISAS NO INDEX, AO CRIAR O PR, IRA APARECER UMA MENSAGEM PARA RESOLVER CONFLITOS. VOCES NAO PRECISAM FAZER ISSO. SO ABRAM O PR!!! +## QUEM IRA MERGIAR AS BRANCHS SERA A PROF THIELE, NAO MERGIEM!! SO ABRAM O PR!! + + +## NO CLASSROOM ME ENVIEM O LINK DO FORK DE VOCES! + + + +Terminou o projetinho? Dá uma olhada nessa checklist e confere se tá tudo certinho, combinado?! + +- [ ] Fiz o fork do repositório. +- [ ] Clonei o fork na minha máquina (`git clone url-do-meu-fork`). +- [ ] Dentro da pasta "projeto-casa" criei uma pasta "meu-nome". +- [ ] Resolvi o exercício proposto no projeto dentro da minha pasta "meu-nome". +- [ ] Adicionei as mudanças. (`git add .` para adicionar todos os arquivos, ou `git add nome_do_arquivo` para adicionar um arquivo específico) +- [ ] Commitei a cada mudança significativa ou na finalização do exercício (`git commit -m "Mensagem do commit"`) +- [ ] Pushei os commits na minha branch (`git push origin nome-da-branch`) +- [ ] Criei um Pull Request seguindo as orientaçoes que estao nesse [documento](https://github.com/mflilian/repo-example/blob/main/exercicios/projeto-casa/instrucoes-pull-request.md). +- [ ] Aguardei a prof mergiar \ No newline at end of file diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/README.md b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/README.md new file mode 100644 index 0000000..cf1b20e --- /dev/null +++ b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/README.md @@ -0,0 +1,12 @@ +# Projeto 1 - M de Maravilhosa + +## Mock up do Projeto +https://www.figma.com/file/XBEywzd2yF47RaWm0Gw4t7Tz/M-de-Maravilhosa?node-id=4%3A0 + +## Orientações para o pull request +1. Façam o fork desse repositório; +2. Façam um clone do repositório de vocês (o que vocês criaram através do fork); +3. Leiam e entendam o código do projeto. Depois disso, façam as alterações da sua personalidade. + + +> SE ATENTEM AS INSTRUCOES QUE A PROF COLOCOU NO CLASS ROOM diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/css/style.css b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/css/style.css new file mode 100644 index 0000000..2a3d260 --- /dev/null +++ b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/css/style.css @@ -0,0 +1,561 @@ +/* --- MOBILE FIRST - iPhone 7 - width < 768px --- */ +/* --- GERAL --- */ +/* +unidades preferidas para esse CSS +margin, padding: rem +font-size: rem +width: % +max-width: % ou px +*/ + +* { + box-sizing: border-box; +} + +html { + font-size: 10px; /* definir uma font-size padrão */ +} + +body { + font-family: 'Montserrat', Arial, Helvetica, sans-serif; + margin: 0; +} + +a { + text-decoration: none; + color: inherit; +} + +ul { + padding: 0; +} + +li { + list-style: none; +} + +/* define que as imagens tem que ter o tamanho máximo da div mãe */ +.img-responsive { + width: 100%; +} + +/* define o tamanho da caixa */ +.container { + margin: 0 auto; + width: 100%; + max-width: 960px; +} + +/* --- estilos do botao --- */ + +.btn { + text-transform: uppercase; + font-weight: bold; + padding: 1rem 3rem; + border-radius: 5px; + font-size: 1.8rem; +} + +.btn_roxo { + color: white; + background-color: #C083B9; + display: block; + max-width: 250px; + text-align: center; + transition: all .5s; + margin: 0 auto; +} + +.btn_roxo:hover, +.btn_roxo:focus { + transform: translateY(-1rem); + box-shadow: 0 10px 10px rgba(0,0,0,.2); + background-color: rgb(192, 156, 188); +} + +.btn_roxo:active { + transform: translateY(-.5rem); + box-shadow: 0 5px 5px rgba(0,0,0,.2); +} + +.btn_center { + margin: 0 auto; +} + +/* --- estilos da navegacao --- */ +.navegacao { + background-color: #674582; + color: white; + text-transform: uppercase; + box-shadow: 0px 5px 5px rgba(0,0,0,.2); + padding: 1.5rem; + z-index: 99; + position: fixed; + width: 100%; + font-weight: boldho; +} + +.navegacao__logo { + max-width: 200px; +} + +.navegacao__box { + display: flex; + align-items: center; + justify-content: space-between; +} + +.navegacao__itens { + position: absolute; + right: -700px; + top: 85px; + width: 100%; + background-color: #674582; + text-align: center; + padding: 3rem 0; + transition: right 1s; +} + +.navegacao__itens.ativo { + display: block; + right: 0; + top: 85px; + width: 100%; + background-color: #674582; + text-align: center; + padding: 3rem 0; + transition: right 1s; +} + +.navegacao__itens li > a { + transition: all .2s; +} + +.navegacao__itens li > a:hover { + color: #C083B9; +} + +.navegacao__menu-hamburguer img { + background-color: #C083B9; + border-radius: 5px; +} + +.navegacao__nav { + margin-bottom: 3rem; + margin-right: 2rem; +} + +.navegacao__nav li { + font-size: 1.5rem; + margin: 1rem; +} + +.navegacao__redes-sociais a { + margin: 0 1rem; +} + + +/* --- estilos de navegacao header --- */ +header { + min-height: 80vh; + height: 500px; + background: linear-gradient(rgba(255, 0, 255, 0.2), + rgba(255, 0, 255, 0.2)), + url(../img/donaInove.jpeg); + background-size: cover; + background-position: center 14%; + background-repeat: no-repeat; + display: flex; + align-items: flex-end; + text-align: center; + padding: 11rem 2rem 5rem 2rem; + color: white; +} + +.principal__titulo { + text-transform: uppercase; + font-size: 2.5rem; + font-weight: 900; +} + +.principal__sub { + font-weight: 300; + margin: 2rem 0 3rem 0; + font-size: 1.5rem; +} + +/* --- PRIMEIRA SECTION MARAVILHOSAS --- */ +.maravilhosas__titulo { + font-family: 'Roboto Slab', Arial, Helvetica, sans-serif; + color: #63458a; + font-size: 2rem; + text-align: center; +} + +.maravilhosas__box { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + text-align: center; + color: #63458a; +} + +.maravilhosas__perfil { + max-width: 120px; + margin: 2rem; +} + +.maravilhosas__perfil img { + background-color: #63458a; + border-radius: 10px; +} + +.maravilhosas__perfil a img { + transition: all .5s; +} + + +.maravilhosas__perfil a:hover { + text-decoration: underline; +} + +.maravilhosas__perfil a:hover img { + box-shadow: 0 3px 10px rgba(0,0,0,.2); +} + +/* --- estilizacao footer --- */ +.rodape { + background-color: #323534; + color: white; + font-size: .9rem; + display: flex; + flex-direction: column; + align-items: center; + padding-top: .8rem; +} + +.rodape__principal { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + text-align: center; + padding: 1.5rem 0; +} + +.rodape__principal > * { + margin: 1rem 0; +} + +.rodape__navegacao > li { + font-size: 1.1rem; + margin: 1rem; +} + +.rodape__navegacao a { + transition: all .5s; +} + +.rodape__navegacao a:hover { + color: #C083B9; +} + +.rodape__logo { + max-width: 200px; +} + +.rodape__redes-sociais a { + display: flex; + align-items: center; + justify-content: center; + transition: all .5s; +} + +.rodape__redes-sociais a:hover { + color: #C083B9; +} + +.rodape__redes-sociais img { + max-width: 50px; + margin-right: .5rem; +} + +.rodape__redes-sociais span { + display: flex; + font-size: 1.5rem; +} + +.rodape__cc { + width: 100%; + background-color: #292A2A; + font-size: 1rem; + opacity: 0.5; + text-align: center; +} + +/** ---- PERSONALIDADE ---- **/ +/* --- HEADER --- */ + .header-personalidade { + display: flex; + background-size: cover; + align-items: flex-end; + justify-content: center; + padding: 0 2rem; + color: white; + min-height: 80vh; + height: 500px; +} + +.header-personalidade__titulo { + text-align: center; + font-size: 2.6rem; + text-transform: uppercase; +} + +/* --- PEFIL DIVA--- */ +.secao-diva { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 5rem 2rem; + margin: 0 auto; +} + +.secao-diva__titulo { + text-align: center; + font-family: 'Roboto Slab', Arial, Helvetica, sans-serif; + font-size: 2rem; + color: #674582; +} + +.secao-diva__titulo_esq { + margin-right: auto; +} + +.secao-diva p { + color: #63458a; + font-size: 1.6rem; + line-height: 1.5; +} + +.secao-diva__introducao { + display: flex; + flex-direction: column; + align-items: center; +} + +.secao-diva__foto-perfil { + max-width: 18rem; + margin: 1rem; + background-color: #63458a; +} + +.secao-diva__citacao p { + font-weight: bold; + border: 1px solid #63458a; + text-align: center; + padding: 1rem; + font-size: 1.7rem; +} + +.secao-diva__historia { + display: flex; + flex-direction: column; + align-items: center; + padding: 5rem 0; +} + +.img_ivone{ + max-width: 120%; +} + +/* --- AUTORA --- */ +.secao-autora { + background-color: #e4b7e5; + display: flex; + justify-content: center; +} + +.secao-autora > div { + text-align: center; + display: flex; + align-items: center; + justify-content: space-around; + flex-direction: column; + padding: 2rem 0; +} + +.secao-autora__foto { + max-width: 150px; +} + +.secao-autora__dados { + color: #63458a; + font-size: 1.6rem; + line-height: 1.5; + margin-top: 1rem; +} + +.secao-autora__dados p { + margin: 0; +} + +.secao-autora a { + font-style: italic; + text-decoration: underline; +} + +.secao-cta { + text-align: center; + padding: 4rem 0; +} + +/*** MEDIA QUERIES - Aqui tem toda responsividade da aplicacao ***/ +/* TABLET */ +@media (min-width: 768px) { + /* --- NAV --- */ + .navegacao__itens { + position: static; + display: flex; + padding: 0; + width: auto; + } + + .navegacao__nav { + margin-bottom: 0; + } + + .navegacao__itens ul { + display: flex; + justify-content: space-around; + width: 100%; + align-items: center; + text-align: center; + } + + .navegacao__itens li { + font-size: 1.2rem; + margin: 0 .6rem; + } + + .navegacao__menu-hamburguer { + display: none; + } + + /* --- HEADER --- */ + header { + min-height: 75vh; + text-align: left; + padding: 5rem 10rem; + } + + .principal__titulo { + font-size: 2.9rem; + } + + .principal__sub { + font-size: 1.8rem; + } + + .principal__btn { + margin: 0; + } + + /* --- SECTION MARAVILHOSAS --- */ + .maravilhosas { + padding: 4rem 0; + } + + .maravilhosas__box > div { + max-width: 200px; + margin: 5rem; + } + + .maravilhosas__perfil p { + font-size: 1.5rem; + margin-top: 1rem; + } + + /* --- FOOTER --- */ + .rodape { + padding-top: 0; + } + + .rodape__principal { + flex-direction: row; + justify-content: space-around; + align-items: center; + width: 100%; + } + + .rodape__logo img { + max-width: 250px; + } + + .rodape__navegacao > li { + font-size: 1.5rem;; + } + + /** PERSONALIDADE **/ + /* --- OUTRA HEADER --- */ + .header-personalidade { + padding: 0 20rem; + display: flex; + + align-items: flex-end; + } + + .header-personalidade__titulo { + font-size: 3.5rem; + text-align: center; + } +} + +@media (min-width: 1024px) { + .principal { + max-width: 650px; + } + .secao-diva__introducao { + flex-direction: row; + margin: 3rem 0; + } + .secao-diva__foto-perfil { + max-width: 100%; + margin: 0 4rem; + } + .secao-diva p { + font-size: 1.7rem; + } + .secao-diva__citacao p { + font-size: 2.5rem; + padding: 4rem; + } + .secao-autora > div { + flex-direction: row; + text-align: left; + justify-content: center; + padding: 0; + } + .secao-autora__dados { + margin: 0 3rem; + } + +} + +/* DESKTOP */ +@media (min-width: 1440px) { + .navegacao__box { + max-width: 80%; + } + header { + min-height: 90vh; + } + .navegacao__itens li { + font-size: 1.5rem; + margin: 0 1rem; + } + .principal { + max-width: 650px; + } +} \ No newline at end of file diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/bg-banner-claro.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/bg-banner-claro.png new file mode 100644 index 0000000..0f71f5c Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/bg-banner-claro.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/bg-banner-escuro.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/bg-banner-escuro.png new file mode 100644 index 0000000..7351625 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/bg-banner-escuro.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/conceicao.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/conceicao.png new file mode 100644 index 0000000..f862a95 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/conceicao.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/donaInove.jpeg b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/donaInove.jpeg new file mode 100644 index 0000000..b0f84d7 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/donaInove.jpeg differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/favicon.ico b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/favicon.ico new file mode 100644 index 0000000..54e84ad Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/favicon.ico differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/fb-icone.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/fb-icone.png new file mode 100644 index 0000000..26e984f Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/fb-icone.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/foto01.jpeg b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/foto01.jpeg new file mode 100644 index 0000000..5c03a99 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/foto01.jpeg differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/foto02.jpeg b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/foto02.jpeg new file mode 100644 index 0000000..5c03a99 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/foto02.jpeg differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/fundo-branco.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/fundo-branco.png new file mode 100644 index 0000000..5b67adc Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/fundo-branco.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/home-perfil/laurynhill.jpeg b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/home-perfil/laurynhill.jpeg new file mode 100644 index 0000000..9e1c444 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/home-perfil/laurynhill.jpeg differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/icon-facebook.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/icon-facebook.png new file mode 100644 index 0000000..12d195a Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/icon-facebook.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/icon-instagram.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/icon-instagram.png new file mode 100644 index 0000000..1db900e Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/icon-instagram.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/icon-linkedin.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/icon-linkedin.png new file mode 100644 index 0000000..b9c9237 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/icon-linkedin.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/icon-twitter.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/icon-twitter.png new file mode 100644 index 0000000..fb2e58a Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/icon-twitter.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/img-mulher.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/img-mulher.png new file mode 100644 index 0000000..f60b55c Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/img-mulher.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/logo-white.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/logo-white.png new file mode 100644 index 0000000..240c60f Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/logo-white.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/menu-nav.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/menu-nav.png new file mode 100644 index 0000000..768cadf Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/img/menu-nav.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/index.html b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/index.html new file mode 100644 index 0000000..434cdf0 --- /dev/null +++ b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/Thiele Nunes/index.html @@ -0,0 +1,190 @@ + + + + + + Thiele Nunes + + + + + + + + + + + + + +
+
+
+

Dona Ivone Lara (D. Yvonne Lara)

+

Conhecida como Rainha do Samba e Grande Dama do Samba ela foi a primeira mulher a assinar um samba-enredo e a fazer parte da ala de compositores de uma escola, a Império Serrano.

+ Curiosidades +
+
+
+ + + +
+
+
+

Dona Ivone!

+
+
+ Foto da Ivone + +
+
+

+ Dona Ivone Lara foi uma compositora, cantora e instrumentista. Nasceu no início dos anos 1920, em Botafogo, no Rio de Janeiro. + + Trabalhou como enfermeira e como assistente social, até se aposentar e se dedicar exclusivamente à música. + Seu talento musical fez com que conquistasse o Brasil e a se apresentasse, também, em outros países, como Angola, Estados Unidos, Japão e França. +

+
+
+
+ + +
+

“A chuva tá caindo, mas o samba não pode parar”

+
+ +
+

Sua História

+
+

Yvonne Lara da Costa nasceu em 13 de abril de 1922. O ano é bastante confundido com 1921, como consta, inclusive, em documentos da artista. + + De acordo com dados publicados em sua biografia, a mãe de Yvonne forjou o ano de nascimento para aumentar a idade da menina em um ano e, assim, fazer com que ela fosse aceita em um colégio interno, em 1932.

+

Suas composições, como Sonho Meu e Acreditar, foram interpretadas por grandes nomes da Música Popular Brasileira. + + Dona Ivone foi a primeira mulher a integrar a Ala de Compositores da Império Serrano, assinando um samba-enredo comumente listado entre os melhores de todos os tempos, Os Cinco Bailes da História do Rio (1965). + Dona Ivone Lara morreu em 2018. Seu corpo foi velado na quadra do Império Serrano, sua escola do coração, em Madureira.

+
+
+ Foto da sua personalidade +
+
+

No final da década de 1940, Yvonne se mudou para Madureira. Naquela época, muitas de suas composições foram assinadas pelo primo, Mestre Fuleiro, por haver preconceito com uma mulher no mundo do samba. + + Ela passou a frequentar a Escola de Samba Prazer da Serrinha, para onde, inclusive, começou a compor. + + Aos 25 anos, casou-se com Oscar Costa – filho de Alfredo Costa, presidente da Serrinha –, com quem teve dois filhos, Alfredo e Odir. + + Com o fim dessa escola, Dona Ivone passou a frequentar a Império Serrano, da qual seu primo foi um dos fundadores, em 1947. + + Com músicas entoadas nas rodas de samba da região, ganhou reconhecimento e passou a integrar a ala dos compositores, até então restrita a homens. + + Ela foi a primeira mulher a se destacar nacionalmente como compositora de uma escola de samba, mas não a primeira a compor. Carmelita Brasil, em 1959, já escrevia sambas na Unidos da Ponte.

+
+
+
+ + + +
+ Ver todas elas +
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/css/style.css b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/css/style.css new file mode 100644 index 0000000..a86f993 --- /dev/null +++ b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/css/style.css @@ -0,0 +1,259 @@ +* { + box-sizing: border-box; + font-family: "Montserrat", Arial, Helvetica, sans-serif; + margin: 0; + text-decoration: none; + color: inherit; + } + + ul { + padding: 0; + } + + li { + list-style: none; + } + + /* define que as imagens tem que ter o tamanho máximo da div mãe */ + .img-responsive { + width: 100%; + height: 100%; + /* garante que a imagem vai ocupar todo o conteúdo da div sem distorce */ + object-fit: cover; + } + + /* define o tamanho da caixa */ + .container { + margin: 0 auto; + width: 100%; + max-width: 960px; + } + + .navbar { + background-color: #674582; + box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); + padding: 24px; + z-index: 99; + position: fixed; + width: 100%; + height: 104px; + } + + .navbar__logo { + max-width: 200px; + } + + .navbar__box { + display: flex; + align-items: center; + justify-content: space-between; + width: 80%; + margin: 0 auto; + } + + .navbar__nav { + font-size: 18px; + color: #fff; + display: flex; + } + + .navbar__nav > li { + margin: 0 16px; + font-weight: bold; + } + + .navbar__nav--hamburguer { + display: none; + } + + .header { + min-height: 80vh; + width: 100%; + background-size: cover; + background-image: url(../img/bg-banner.png); + display: flex; + } + + .header__box { + max-width: 526px; + position: relative; + top: 350px; + background-color: #f9f1f1; + border-radius: 24px; + padding: 24px; + } + + .header__box--titulo { + font-size: 26px; + color: #63458a; + } + + .header__box--subtitulo { + font-size: 18px; + margin: 24px 0; + } + + /* define o tamanho da caixa */ + .container { + margin: 0 auto; + width: 100%; + max-width: 1024px; + } + + /* --- FOOTER --- */ + + .rodape { + background-color: #323534; + color: white; + } + + .rodape__principal { + display: flex; + justify-content: space-between; + align-items: center; + } + + .rodape__principal > * { + margin: 16px 0; + } + + .rodape__navegacao > li { + font-size: 14px; + margin: 8px; + } + + .rodape__navegacao a { + transition: all 0.5s; + } + + .rodape__navegacao a:hover { + color: #c083b9; + } + + .rodape__logo { + max-width: 200px; + align-items: center; + justify-content: center; + } + + .rodape__redes-sociais a{ + margin: 0 4px; + } + + .rodape__cc { + width: 100%; + background-color: #292a2a; + font-size: 14px; + opacity: 0.5; + text-align: center; + padding: 10px; + } + + /* --- BOTAO --- */ + + .btn { + text-transform: uppercase; + font-weight: bold; + padding: 16px; + border-radius: 5px; + font-size: 14px; + } + + .btn_roxo { + color: white; + background-color: #c083b9; + display: block; + max-width: 200px; + text-align: center; + transition: all 0.5s; + margin: 0 auto; + } + + .btn_roxo:hover, + .btn_roxo:focus { + transform: translateY(-06px); + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); + background-color: rgb(192, 156, 188); + } + + + /* --- SECTION MARAVILHOSAS --- */ + + .maravilhosas__titulo { + color: #63458a; + font-size: 20px; + text-align: center; + margin: 36px 0; + } + + .maravilhosas__box { + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + color: #63458a; + margin-bottom: 96px; + } + + .maravilhosas__perfil { + margin: 2rem; + text-align: center; + cursor: pointer; + width: 160px; + height: 160px; + } + + .maravilhosas__perfil img { + border-radius: 10px; + } + + .maravilhosas__perfil a img { + transition: all 0.5s; + + } + + + @media (max-width: 1440px) { + .header__box { + top: 300px; + } + } + + @media (max-width: 1024px) { + .container { + max-width: 80vw; + } + } + + @media (max-width: 768px) { + .navbar__nav { + display: none; + } + .navbar__nav--hamburguer { + display: block; + height: 36px; + } + .navbar { + height: 96px; + } + .navbar__logo { + max-width: 196px; + } + + .rodape__principal { + flex-direction: column; + } + } + + @media (max-width: 425px) { + .header__box { + top: 250px; + } + } + + @media (max-width: 375px) { + .header__box { + top: 180px; + } + } + diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/bg-banner.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/bg-banner.png new file mode 100644 index 0000000..019e8f4 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/bg-banner.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/favicon.ico b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/favicon.ico new file mode 100644 index 0000000..54e84ad Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/favicon.ico differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/icon-facebook.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/icon-facebook.png new file mode 100644 index 0000000..0be0601 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/icon-facebook.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/icon-instagram.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/icon-instagram.png new file mode 100644 index 0000000..1c5992c Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/icon-instagram.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/icon-linkedin.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/icon-linkedin.png new file mode 100644 index 0000000..ae99bec Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/icon-linkedin.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/icon-twitter.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/icon-twitter.png new file mode 100644 index 0000000..1c1ae0b Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/icon-twitter.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/logo-white.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/logo-white.png new file mode 100644 index 0000000..240c60f Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/logo-white.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/menu-nav.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/menu-nav.png new file mode 100644 index 0000000..768cadf Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/menu-nav.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/woman (1).png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/woman (1).png new file mode 100644 index 0000000..3318fcc Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/woman (1).png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/woman (2).png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/woman (2).png new file mode 100644 index 0000000..f54d8e2 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/woman (2).png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/woman (4).png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/woman (4).png new file mode 100644 index 0000000..ebd7db2 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/woman (4).png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/woman.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/woman.png new file mode 100644 index 0000000..d20ed44 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img/woman.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img_alunas/Mary.jpeg b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img_alunas/Mary.jpeg new file mode 100644 index 0000000..ffb7ccd Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img_alunas/Mary.jpeg differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img_alunas/thiele_nunes.jpeg b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img_alunas/thiele_nunes.jpeg new file mode 100644 index 0000000..44c4324 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/img_alunas/thiele_nunes.jpeg differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/index.html b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/index.html new file mode 100644 index 0000000..b0f5086 --- /dev/null +++ b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/index.html @@ -0,0 +1,476 @@ + + + + + + + + + + + + M de Maravilhosa + + + + +
+ + +
+ +
+

Você conhece as mulheres que mudaram o Brasil?

+

Conheça as mulheres que fizeram a diferença no nosso país, nas mais + variadas + áreas de conhecimento e cultura.

+ Quero Conhecer +
+
+
+ + + +
+

Veja todas as mulheres homenageadas nesse projeto!

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + \ No newline at end of file diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/README.md b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/README.md new file mode 100644 index 0000000..cf1b20e --- /dev/null +++ b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/README.md @@ -0,0 +1,12 @@ +# Projeto 1 - M de Maravilhosa + +## Mock up do Projeto +https://www.figma.com/file/XBEywzd2yF47RaWm0Gw4t7Tz/M-de-Maravilhosa?node-id=4%3A0 + +## Orientações para o pull request +1. Façam o fork desse repositório; +2. Façam um clone do repositório de vocês (o que vocês criaram através do fork); +3. Leiam e entendam o código do projeto. Depois disso, façam as alterações da sua personalidade. + + +> SE ATENTEM AS INSTRUCOES QUE A PROF COLOCOU NO CLASS ROOM diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/css/style.css b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/css/style.css new file mode 100644 index 0000000..830ed54 --- /dev/null +++ b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/css/style.css @@ -0,0 +1,561 @@ +/* --- MOBILE FIRST - iPhone 7 - width < 768px --- */ +/* --- GERAL --- */ +/* +unidades preferidas para esse CSS +margin, padding: rem +font-size: rem +width: % +max-width: % ou px +*/ + +* { + box-sizing: border-box; +} + +html { + font-size: 10px; /* definir uma font-size padrão */ +} + +body { + font-family: 'Montserrat', Arial, Helvetica, sans-serif; + margin: 0; +} + +a { + text-decoration: none; + color: inherit; +} + +ul { + padding: 0; +} + +li { + list-style: none; +} + +/* define que as imagens tem que ter o tamanho máximo da div mãe */ +.img-responsive { + width: 100%; +} + +/* define o tamanho da caixa */ +.container { + margin: 0 auto; + width: 100%; + max-width: 1150px; +} + +/* --- estilos do botao --- */ + +.btn { + text-transform: uppercase; + font-weight: bold; + padding: 1rem 3rem; + border-radius: 5px; + font-size: 1.8rem; +} + +.btn_roxo { + color: white; + background-color: #C083B9; + display: block; + max-width: 250px; + text-align: center; + transition: all .5s; + margin: 0 auto; +} + +.btn_roxo:hover, +.btn_roxo:focus { + transform: translateY(-1rem); + box-shadow: 0 10px 10px rgba(0,0,0,.2); + background-color: rgb(192, 156, 188); +} + +.btn_roxo:active { + transform: translateY(-.5rem); + box-shadow: 0 5px 5px rgba(0,0,0,.2); +} + +.btn_center { + margin: 0 auto; +} + +/* --- estilos da navegacao --- */ +.navegacao { + background-color: #674582; + color: white; + text-transform: uppercase; + box-shadow: 0px 5px 5px rgba(0,0,0,.2); + padding: 1.5rem; + z-index: 99; + position: fixed; + width: 100%; + font-weight: boldho; +} + +.navegacao__logo { + max-width: 200px; +} + +.navegacao__box { + display: flex; + align-items: center; + justify-content: space-between; +} + +.navegacao__itens { + position: absolute; + right: -700px; + top: 85px; + width: 100%; + background-color: #674582; + text-align: center; + padding: 3rem 0; + transition: right 1s; +} + +.navegacao__itens.ativo { + display: block; + right: 0; + top: 85px; + width: 100%; + background-color: #674582; + text-align: center; + padding: 3rem 0; + transition: right 1s; +} + +.navegacao__itens li > a { + transition: all .2s; +} + +.navegacao__itens li > a:hover { + color: #C083B9; +} + +.navegacao__menu-hamburguer img { + background-color: #C083B9; + border-radius: 5px; +} + +.navegacao__nav { + margin-bottom: 3rem; + margin-right: 2rem; +} + +.navegacao__nav li { + font-size: 1.5rem; + margin: 1rem; +} + +.navegacao__redes-sociais a { + margin: 0 1rem; +} + + +/* --- estilos de navegacao header --- */ +header { + min-height: 80vh; + height: 500px; + background: linear-gradient(rgba(255, 0, 255, 0.2), + rgba(255, 0, 255, 0.2)), + url(../img/TAISLINDA.webp); + background-size: cover; + background-position: center 14%; + background-repeat: no-repeat; + display: flex; + align-items: flex-end; + text-align: center; + padding: 11rem 2rem 5rem 2rem; + color: white; +} + +.principal__titulo { + text-transform: uppercase; + font-size: 2.5rem; + font-weight: 900; +} + +.principal__sub { + font-weight: 300; + margin: 2rem 0 3rem 0; + font-size: 1.5rem; +} + +/* --- PRIMEIRA SECTION MARAVILHOSAS --- */ +.maravilhosas__titulo { + font-family: 'Roboto Slab', Arial, Helvetica, sans-serif; + color: #63458a; + font-size: 2rem; + text-align: center; +} + +.maravilhosas__box { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + text-align: center; + color: #63458a; +} + +.maravilhosas__perfil { + max-width: 120px; + margin: 2rem; +} + +.maravilhosas__perfil img { + background-color: #63458a; + border-radius: 10px; +} + +.maravilhosas__perfil a img { + transition: all .5s; +} + + +.maravilhosas__perfil a:hover { + text-decoration: underline; +} + +.maravilhosas__perfil a:hover img { + box-shadow: 0 3px 10px rgba(0,0,0,.2); +} + +/* --- estilizacao footer --- */ +.rodape { + background-color: #323534; + color: white; + font-size: .9rem; + display: flex; + flex-direction: column; + align-items: center; + padding-top: .8rem; +} + +.rodape__principal { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + text-align: center; + padding: 1.5rem 0; +} + +.rodape__principal > * { + margin: 1rem 0; +} + +.rodape__navegacao > li { + font-size: 1.1rem; + margin: 1rem; +} + +.rodape__navegacao a { + transition: all .5s; +} + +.rodape__navegacao a:hover { + color: #C083B9; +} + +.rodape__logo { + max-width: 200px; +} + +.rodape__redes-sociais a { + display: flex; + align-items: center; + justify-content: center; + transition: all .5s; +} + +.rodape__redes-sociais a:hover { + color: #C083B9; +} + +.rodape__redes-sociais img { + max-width: 50px; + margin-right: .5rem; +} + +.rodape__redes-sociais span { + display: flex; + font-size: 1.5rem; +} + +.rodape__cc { + width: 100%; + background-color: #292A2A; + font-size: 1rem; + opacity: 0.5; + text-align: center; +} + +/** ---- PERSONALIDADE ---- **/ +/* --- HEADER --- */ + .header-personalidade { + display: flex; + background-size: cover; + align-items: flex-end; + justify-content: center; + padding: 0 2rem; + color: white; + min-height: 80vh; + height: 500px; +} + +.header-personalidade__titulo { + text-align: center; + font-size: 2.6rem; + text-transform: uppercase; +} + +/* --- PEFIL DIVA--- */ +.secao-diva { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 5rem 2rem; + margin: 0 auto; +} + +.secao-diva__titulo { + text-align: center; + font-family: 'Roboto Slab', Arial, Helvetica, sans-serif; + font-size: 2rem; + color: #674582; +} + +.secao-diva__titulo_esq { + margin-right: auto; +} + +.secao-diva p { + color: #63458a; + font-size: 1.6rem; + line-height: 1.5; +} + +.secao-diva__introducao { + display: flex; + flex-direction: column; + align-items: center; +} + +.secao-diva__foto-perfil { + max-width: 18rem; + margin: 1rem; + background-color: #63458a; +} + +.secao-diva__citacao p { + font-weight: bold; + border: 1px solid #63458a; + text-align: center; + padding: 1rem; + font-size: 1.7rem; +} + +.secao-diva__historia { + display: flex; + flex-direction: column; + align-items: center; + padding: 5rem 0; +} + +.img_ivone{ + max-width: 120%; +} + +/* --- AUTORA --- */ +.secao-autora { + background-color: #e4b7e5; + display: flex; + justify-content: center; +} + +.secao-autora > div { + text-align: center; + display: flex; + align-items: center; + justify-content: space-around; + flex-direction: column; + padding: 2rem 0; +} + +.secao-autora__foto { + max-width: 150px; +} + +.secao-autora__dados { + color: #63458a; + font-size: 1.6rem; + line-height: 1.5; + margin-top: 1rem; +} + +.secao-autora__dados p { + margin: 0; +} + +.secao-autora a { + font-style: italic; + text-decoration: underline; +} + +.secao-cta { + text-align: center; + padding: 4rem 0; +} + +/*** MEDIA QUERIES - Aqui tem toda responsividade da aplicacao ***/ +/* TABLET */ +@media (min-width: 768px) { + /* --- NAV --- */ + .navegacao__itens { + position: static; + display: flex; + padding: 0; + width: auto; + } + + .navegacao__nav { + margin-bottom: 0; + } + + .navegacao__itens ul { + display: flex; + justify-content: space-around; + width: 100%; + align-items: center; + text-align: center; + } + + .navegacao__itens li { + font-size: 1.2rem; + margin: 0 .6rem; + } + + .navegacao__menu-hamburguer { + display: none; + } + + /* --- HEADER --- */ + header { + min-height: 75vh; + text-align: left; + padding: 5rem 10rem; + } + + .principal__titulo { + font-size: 2.9rem; + } + + .principal__sub { + font-size: 1.8rem; + } + + .principal__btn { + margin: 0; + } + + /* --- SECTION MARAVILHOSAS --- */ + .maravilhosas { + padding: 4rem 0; + } + + .maravilhosas__box > div { + max-width: 200px; + margin: 5rem; + } + + .maravilhosas__perfil p { + font-size: 1.5rem; + margin-top: 1rem; + } + + /* --- FOOTER --- */ + .rodape { + padding-top: 0; + } + + .rodape__principal { + flex-direction: row; + justify-content: space-around; + align-items: center; + width: 100%; + } + + .rodape__logo img { + max-width: 250px; + } + + .rodape__navegacao > li { + font-size: 1.5rem;; + } + + /** PERSONALIDADE **/ + /* --- OUTRA HEADER --- */ + .header-personalidade { + padding: 0 20rem; + display: flex; + + align-items: flex-end; + } + + .header-personalidade__titulo { + font-size: 3.5rem; + text-align: center; + } +} + +@media (min-width: 1024px) { + .principal { + max-width: 650px; + } + .secao-diva__introducao { + flex-direction: row; + margin: 3rem 0; + } + .secao-diva__foto-perfil { + max-width: 100%; + margin: 0 4rem; + } + .secao-diva p { + font-size: 1.7rem; + } + .secao-diva__citacao p { + font-size: 2.5rem; + padding: 4rem; + } + .secao-autora > div { + flex-direction: row; + text-align: left; + justify-content: center; + padding: 0; + } + .secao-autora__dados { + margin: 0 3rem; + } + +} + +/* DESKTOP */ +@media (min-width: 1440px) { + .navegacao__box { + max-width: 80%; + } + header { + min-height: 90vh; + } + .navegacao__itens li { + font-size: 1.5rem; + margin: 0 1rem; + } + .principal { + max-width: 650px; + } +} \ No newline at end of file diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/Marye.jpeg b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/Marye.jpeg new file mode 100644 index 0000000..220a5e7 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/Marye.jpeg differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/TAISLINDA.webp b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/TAISLINDA.webp new file mode 100644 index 0000000..87f2f2a Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/TAISLINDA.webp differ diff --git "a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/TAI\314\201S-ARAUJO-.png" "b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/TAI\314\201S-ARAUJO-.png" new file mode 100644 index 0000000..fb15e95 Binary files /dev/null and "b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/TAI\314\201S-ARAUJO-.png" differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/Taisaraujo.jpg b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/Taisaraujo.jpg new file mode 100644 index 0000000..1fe811f Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/Taisaraujo.jpg differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/Taisaraujoo.jpg b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/Taisaraujoo.jpg new file mode 100644 index 0000000..9b9d64f Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/Taisaraujoo.jpg differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/Taisaraujosorrindo.jpg b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/Taisaraujosorrindo.jpg new file mode 100644 index 0000000..31682b0 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/Taisaraujosorrindo.jpg differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/bg-banner-claro.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/bg-banner-claro.png new file mode 100644 index 0000000..0f71f5c Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/bg-banner-claro.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/bg-banner-escuro.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/bg-banner-escuro.png new file mode 100644 index 0000000..7351625 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/bg-banner-escuro.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/chica.jpg b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/chica.jpg new file mode 100644 index 0000000..a908382 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/chica.jpg differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/chicadasilva.jpg b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/chicadasilva.jpg new file mode 100644 index 0000000..f20a73d Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/chicadasilva.jpg differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/conceicao.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/conceicao.png new file mode 100644 index 0000000..f862a95 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/conceicao.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/donaInove.jpeg b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/donaInove.jpeg new file mode 100644 index 0000000..b0f84d7 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/donaInove.jpeg differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/favicon.ico b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/favicon.ico new file mode 100644 index 0000000..54e84ad Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/favicon.ico differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/fb-icone.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/fb-icone.png new file mode 100644 index 0000000..26e984f Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/fb-icone.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/foto01.jpeg b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/foto01.jpeg new file mode 100644 index 0000000..5c03a99 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/foto01.jpeg differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/foto02.jpeg b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/foto02.jpeg new file mode 100644 index 0000000..5c03a99 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/foto02.jpeg differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/fundo-branco.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/fundo-branco.png new file mode 100644 index 0000000..5b67adc Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/fundo-branco.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/home-perfil/laurynhill.jpeg b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/home-perfil/laurynhill.jpeg new file mode 100644 index 0000000..9e1c444 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/home-perfil/laurynhill.jpeg differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/icon-facebook.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/icon-facebook.png new file mode 100644 index 0000000..12d195a Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/icon-facebook.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/icon-instagram.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/icon-instagram.png new file mode 100644 index 0000000..1db900e Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/icon-instagram.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/icon-linkedin.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/icon-linkedin.png new file mode 100644 index 0000000..b9c9237 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/icon-linkedin.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/icon-twitter.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/icon-twitter.png new file mode 100644 index 0000000..fb2e58a Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/icon-twitter.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/img-mulher.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/img-mulher.png new file mode 100644 index 0000000..f60b55c Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/img-mulher.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/logo-white.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/logo-white.png new file mode 100644 index 0000000..240c60f Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/logo-white.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/menu-nav.png b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/menu-nav.png new file mode 100644 index 0000000..768cadf Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/menu-nav.png differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/tais-araujo.jpg b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/tais-araujo.jpg new file mode 100644 index 0000000..6b52816 Binary files /dev/null and b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/img/tais-araujo.jpg differ diff --git a/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/index.html b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/index.html new file mode 100644 index 0000000..063f368 --- /dev/null +++ b/exercicios/projeto-casa/Projeto-1---semana-4/exercicios/projeto-casa/maryanne-lima/index.html @@ -0,0 +1,187 @@ + + + + + + Maryanne Lima + + + + + + + + + + + + + +
+
+
+

Taís Araújo

+

Conhecida como símbolo do movimento negro no Brasil e Defensora dos Direitos das Mulheres Negras da ONU. + Em 2017 a atriz apareceu como a quinta personalidade que mais influencia os jovens, segundo uma pesquisa divulgada + em fevereiro. Ao lado do marido, Lázaro Ramos, Taís se destaca como símbolo de arte, cultura, empoderamento + e coragem.

+ Curiosidades +
+
+
+ + + +
+
+
+

Taís Bianca Gama de Araújo

+
+
+ Foto da Tais + +
+
+

+ Taís Bianca Gama de Araújo nasceu no Rio de Janeiro, em 25 de novembro de 1978, de um parto normal prematuro, +aos sete meses de gestação. Formou-se no curso de jornalismo, pela Universidade Estácio de Sá, +mas nunca chegou a exercer a profissão, uma vez que optou por dar continuidade à carreira de atriz, +a atriz foi a terceira mulher negra a fazer o papel de protagonista em uma novela brasileira +e também foi a primeira protagonista negra do horário nobre. +A ONU Mulheres Brasil nomeou Taís Araújo como defensora dos Direitos das Mulheres Negras. +A atriz passa a apoiar a visibilidade das mulheres negras como um dos grupos prioritários do Plano de Trabalho +da ONU Brasil para a Década Internacional de Afrodescendentes. +

+
+
+
+ + +
+

“Se durante décadas não houve negros em posição de destaque, por que a novela iria mostrá-los?”

+
+ +
+

Sua História

+
+

Em 1995 estreou na televisão na telenovela Tocaia Grande, interpretando Bernarda, filha adotiva do personagem central que se envolvia com ele após a morte da esposa deste. Alguns meses depois, conquistou sua primeira protagonista, quando Walter Avancini, diretor da telenovela Xica da Silva (1996), escolheu Taís para ser a personagem título da trama, uma escrava que se torna rainha do Arraial do Tijuco ao se unir ao poderoso contratador local. + Pela novela Taís foi a terceira atriz negra a protagonizar uma telenovela brasileira em Xica da Silva (1996) – após Iolanda Braga em A Cor da Sua Pele (1965) e Ruth de Souza em A Cabana do Pai Tomás (1969). A novela foi exportada para vários países, e em 2000, a atriz foi eleita um dos 50 rostos mais bonitos do mundo pela revista People em espanhol impulsionada pela visibilidade internacional que alcançou com a trama. + +

+

Em 2016, uma pesquisa de opinião (Pesquisa Qualibest) também apontou Taís Araújo como a mulher mais admirada por jovens na faixa etária entre 13 e 20 anos, a quinta artista mais influente da televisão e internet no país, segundo o jornal Meio & Mensagem em parceria com o Instituto Datafolha em 2016, e a quarta mais influente em 2017. Também foi eleita uma das mulheres mais guerreiras e estilosas pela revista americana Vogue América.

+
+
+ Foto da sua personalidade +
+
+

Em 2017, foi eleita uma das 100 personalidades afrodescendentes mais influentes do mundo com menos de 40 anos pelo MIPAD, e por esta razão participou de um debate na Universidade de Columbia, em Nova York, onde recebeu o prêmio. O casal Taís e Lázaro foi apontado como o mais poderoso do showbizz nacional, em matéria de capa da Revista Veja publicada em março de 2017. No dia 3 de julho de 2017, foi nomeada Defensora dos Direitos das Mulheres Negras pela ONU Mulheres Brasil, entidade das Nações Unidas para a igualdade de gênero e empoderamento das mulheres. Ela foi convidada para participar de uma palestra da Tedx, em São Paulo, contando para uma audiência de cerca de nove mil pessoas, suas experiências no ativismo social na luta pela igualdade de direitos na sociedade. No mesmo ano recebeu uma homenagem no Prêmio Claudia promovido pela Revista Claudia, da Editora Abril, em São Paulo, na categoria hors concours, honraria concedida às pessoas que atuam pela igualdade de direitos na sociedade. + + Em 2021, ela e o marido Lázaro Ramos, novamente foram eleitos entre as 100 Pessoas Mais Influentes de Descendência Africana (Mipad) na premiação promovida pela ONU.

+
+
+
+ + + +
+ Ver todas elas +
+ +
+ + + + + + + + + \ No newline at end of file