├── LICENSE.md ├── README.md ├── modulo 02 ├── aula 04 │ └── index.html ├── aula 05 │ └── index.html ├── aula 06 │ └── index.html ├── aula 07 │ └── index.html ├── aula 08 │ └── index.html ├── aula 09 │ └── index.html ├── aula 10 │ ├── imagens │ │ └── irme.png │ └── index.html ├── aula 11 │ └── index.html └── aula 12 │ └── index.html ├── modulo 03 └── aula 01 │ └── index.html ├── modulo 04 ├── aula 02 │ ├── estilo.css │ └── index.html ├── aula 04 │ ├── estilo.css │ └── index.html ├── aula 05 │ ├── estilo.css │ └── index.html └── aula 06 │ ├── estilo.css │ └── index.html ├── modulo 05 ├── aula 01 │ ├── estilo.css │ └── index.html ├── aula 02 │ ├── estilo.css │ └── index.html └── aula 03 │ ├── estilo.css │ └── index.html ├── modulo 06 ├── aula 01 │ ├── estilo.css │ └── index.html ├── aula 02 │ ├── estilo.css │ └── index.html ├── aula 03 │ ├── estilo.css │ └── index.html └── aula 04 │ ├── estilo.css │ └── index.html ├── modulo 07 ├── aula 01 │ ├── estilo.css │ └── index.html ├── aula 02 │ ├── estilo.css │ └── index.html ├── aula 03 │ ├── estilo.css │ └── index.html ├── aula 04 │ ├── estilo.css │ └── index.html └── aula 05 │ ├── estilo.css │ ├── imagem.jpg │ └── index.html ├── modulo 08 ├── aula 01 │ ├── estilo.css │ └── index.html ├── aula 02 │ ├── estilo.css │ └── index.html └── aula 03 │ ├── estilo.css │ └── index.html ├── modulo 09 ├── aula 01 │ ├── estilo.css │ └── index.html ├── aula 02 │ ├── estilo.css │ └── index.html └── aula 03 │ ├── estilo.css │ └── index.html ├── modulo 10 ├── aula 01 │ ├── estilo.css │ └── index.html ├── aula 02 │ ├── estilo.css │ └── index.html ├── aula 03 │ ├── estilo.css │ └── index.html ├── aula 04 │ ├── estilo.css │ └── index.html └── aula 05 │ ├── estilo.css │ └── index.html ├── modulo 11 ├── aula 01 │ ├── estilo.css │ └── index.html ├── aula 02 │ ├── estilo.css │ └── index.html ├── aula 03 │ ├── estilo.css │ └── index.html ├── aula 04 │ ├── estilo.css │ └── index.html ├── aula 05 │ ├── estilo.css │ └── index.html ├── aula 06 │ ├── estilo.css │ └── index.html ├── aula 07 │ ├── estilo.css │ └── index.html ├── aula 08 │ ├── estilo.css │ └── index.html ├── aula 09 │ ├── estilo.css │ └── index.html ├── aula 10 │ ├── estilo.css │ └── index.html ├── aula 11 │ ├── estilo.css │ └── index.html ├── aula 12 │ ├── estilo.css │ └── index.html ├── aula 13 │ ├── estilo.css │ └── index.html ├── aula 14 │ ├── estilo.css │ └── index.html ├── aula 15 │ ├── estilo.css │ └── index.html └── aula 16 │ ├── estilo.css │ └── index.html ├── modulo 12 ├── aula 02 │ ├── estilo.css │ └── index.html ├── aula 04 │ ├── estilo.css │ ├── imagens │ │ └── gatinho.png │ └── index.html └── aula 05 │ ├── estilo.css │ ├── imagens │ ├── gato-grande.jpg │ └── gato-pequeno.jpg │ └── index.html ├── modulo 13 └── aula 01 │ ├── estilo.css │ └── index.html └── projeto-final ├── assets ├── css │ └── estilo.css ├── icones │ ├── coracao.svg │ ├── favicon.png │ ├── instagram.svg │ ├── linkedin.svg │ └── twitter.svg └── imagens │ └── larissa-abreu-perfil.jpg └── index.html /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 WoMakersCode 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Curso de HTML5 e CSS3 para Iniciantes - WoMakersCode & IRME 2 | 3 | > Curso de HTML5 e CSS3 para Iniciantes focado ao público feminino. 4 | 5 | Este curso tem como objetivo ajudar milhares de mulheres a dar os primeiros passos no mundo front-end. Permitindo que elas tenham o conhecimento para criar seus próprios sites e portfólios. 6 | 7 | O curso foi organizado pela **[WoMakersCode](https://womakerscode.org/)** através de uma parceria com a **[IRME - Instituto Rede Mulher Empreendedora](https://institutorme.org.br/)** 8 | 9 | ## 📌 Pré-Requisitos 10 | 11 | Para este curso você precisará de conhecimentos básicos em informática e vontade de aprender 😉 12 | 13 | ## 🚀 Recursos Utilizados 14 | 15 | Ao decorrer do curso eu utilizei os seguintes recursos: 16 | 17 | - **[Google Chrome](https://www.google.com/intl/pt-BR/chrome/)** 18 | - **[Visual Studio Code](https://code.visualstudio.com/)** 19 | - **[Extensão Live Server - Visual Studio Code](https://bit.ly/2VqzdzT)** 20 | 21 | ## 👩‍💻 Links compartilhados durante o curso 22 | 23 | Abaixo vocês podem conferir todos os links que foram citados durante o curso: 24 | 25 | ### Módulo 1: Introdução 26 | - **[Site W3C](https://www.w3.org/)** 27 | - **[Site Can I Use](https://caniuse.com/)** 28 | 29 | ### Módulo 2: Conhecendo o HTML 30 | - **[Elementos HTML](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element)** 31 | - **[Atributos HTML](https://developer.mozilla.org/pt-BR/docs/HTML/Attributes)** 32 | - **[Meta informações](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/meta)** 33 | - **[Elementos HTML de conteúdo textual](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element#conteúdo_textual)** 34 | - **[Semânticas textuais inline](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element#semânticas_textuais_inline)** 35 | - **[Criando hiperlinks](https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks)** 36 | - **[Formulários em HTML](https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Forms)** 37 | - **[Trabalhando com Botões](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/button)** 38 | - **[Conteúdos Multimídia e Embutidos na página](https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Multimedia_and_embedding)** 39 | - **[Tabelas em HTML](https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Tables)** 40 | 41 | ### Módulo 3: HTML além do óbvio 42 | - **[Guia WCAG](https://guia-wcag.com/)** 43 | - **[Papéis/Funções ARIA](https://developer.mozilla.org/pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques#funções)** 44 | - **[Estados e Propriedades ARIA](https://developer.mozilla.org/pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques#estados_e_propriedades)** 45 | - **[Acessibilidade no HTML](https://developer.mozilla.org/pt-BR/docs/Learn/Accessibility/HTML)** 46 | - **[3 Ferramentas para avaliar a acessibilidade web](https://medium.com/bruno-pulis/3-ferramentas-para-avaliar-a-acessibilidade-web-41fa8091e42b)** 47 | 48 | ### Módulo 4: Introdução ao CSS 49 | - **[Seletores CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/Getting_Started/Seletores)** 50 | - **[CSS Diner](https://flukeout.github.io/)** 51 | - **[Pseudo-classes para seleção de elementos](https://developer.mozilla.org/pt-BR/docs/Web/CSS/Getting_Started/Seletores#seletores_de_pseudo-classes)** 52 | - **[Usando pseudo-elementos como seletores](https://developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-elementos)** 53 | 54 | ### Módulo 5: Entendendo unidades de medida e cores 55 | - **[Trabalhando com cores no CSS](https://developer.mozilla.org/pt-PT/docs/Web/CSS/Como_começar/Cor)** 56 | - **[Guia de Unidades no CSS](https://www.alura.com.br/artigos/guia-de-unidades-no-css)** 57 | - **[Um guia completo de tipografia para a web](https://tableless.com.br/um-guia-completo-de-tipografia-para-a-web/)** 58 | - **[Propriedade font-family no CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/font-family)** 59 | 60 | ### Módulo 6: Posicionando os elementos na página 61 | - **[Propriedade display no CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display)** 62 | - **[Propriedade position no CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/position)** 63 | - **[Entendendo o box model](https://developer.mozilla.org/pt-BR/docs/Web/CSS/box_model)** 64 | 65 | ### Módulo 7: Conhecendo as propriedades CSS 66 | - **[Propriedade border no CSS](https://developer.mozilla.org/pt-PT/docs/Web/CSS/border)** 67 | - **[Propriedade border-radius no CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/border-radius)** 68 | - **[Propriedade box-shadow no CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/box-shadow)** 69 | - **[Propriedade cursor no CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/cursor)** 70 | - **[Propriedade outline no CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/outline)** 71 | - **[A importância do foco visível para a acessibilidade digital](https://uxdesign.blog.br/a-importância-do-foco-visível-para-a-acessibilidade-digital-5838466f08b5)** 72 | - **[Propriedade float no CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/float)** 73 | - **[Propriedade overflow no CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/overflow)** 74 | - **[Propriedade font-size no CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/font-size)** 75 | - **[Propriedade font-weight no CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/font-weight)** 76 | - **[Propriedade text-align no CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/text-align)** 77 | - **[Propriedade text-indent no CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent)** 78 | - **[Propriedade letter-spacing no CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/letter-spacing)** 79 | - **[Propriedade line-height no CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)** 80 | - **[Propriedade list-style no CSS](https://developer.mozilla.org/pt-PT/docs/Web/CSS/list-style)** 81 | - **[Propriedade text-decoration no CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/text-decoration)** 82 | - **[Propriedade background no CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/background)** 83 | - **[Referências de CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Reference)** 84 | 85 | ### Módulo 8: Principais conceitos do CSS 86 | - **[Como usar herança no CSS?](https://tableless.com.br/afinal-como-usar-heranca-no-css/)** 87 | 88 | ### Módulo 9: Animações com CSS 89 | - **[Trabalhando com transições no CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)** 90 | - **[Trabalhando com animações no CSS](https://codepen.io/afonsopacifer/post/hora-de-aventura-com-css-5-animacoes)** 91 | 92 | ### Módulo 10: Transformações com CSS 93 | - **[Função scale no CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/transform-function/scale())** 94 | - **[Função rotate no CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/transform-function/rotate())** 95 | - **[Função translate no CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/transform-function/translate())** 96 | - **[Função skew no CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew())** 97 | - **[Trabalhando com transformações no CSS](https://codepen.io/afonsopacifer/post/hora-de-aventura-com-css-3-transformacoes)** 98 | - **[Propriedade opacity no CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/opacity)** 99 | 100 | ### Módulo 11: CSS layouts 101 | - **[Box model para iniciantes](https://tableless.github.io/iniciantes/manual/css/box-model.html)** 102 | - **[Trabalhando com Flexbox](https://codepen.io/afonsopacifer/post/hora-de-aventura-com-css-9-flexbox)** 103 | - **[Conceitos básicos do Flexbox](https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox)** 104 | - **[Guia completo Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)** 105 | - **[Flexbox Froggy](https://flexboxfroggy.com/)** 106 | - **[Conceitos básicos de Grid Layout](https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)** 107 | - **[Entendendo o CSS Grid Layout](https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Grid_Layout)** 108 | - **[Guia completo Grid Layout](https://css-tricks.com/snippets/css/complete-guide-grid/)** 109 | - **[CSS Grid Garden](https://cssgridgarden.com/)** 110 | - **[CSS Grid e Flexbox - Quando utilizar?](https://www.felipefialho.com/blog/css-grid-e-flexbox-quando-utilizar/)** 111 | 112 | ### Módulo 12: Trabalhando com responsividade 113 | - **[Usando Media Queries no CSS](https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries)** 114 | - **[Trabalhando com viewport no CSS](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag)** 115 | - **[Trabalhando com imagens responsivas no CSS](https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Multimedia_and_embedding/Responsive_images)** 116 | 117 | ### Módulo 13: Boas práticas com CSS 118 | - **[Entendendo o BEM no CSS](https://desenvolvimentoparaweb.com/css/bem/)** 119 | - **[Organize seu CSS com SMACSS, BEM e SASS](https://medium.com/@larymagal/organize-seu-css-com-smacss-bem-e-sass-7e8f50a41544)** 120 | - **[Entendendo Arquiteturas CSS](https://medium.com/tableless/arquitetura-css-d344fb01dd18)** 121 | 122 | ### Módulo 14: Principais ferramentas CSS 123 | - **[Semantic UI](https://semantic-ui.com/)** 124 | - **[Tailwind CSS](https://tailwindcss.com/)** 125 | - **[Foundation](https://get.foundation/)** 126 | - **[Bootstrap](https://getbootstrap.com.br/)** 127 | - **[SASS](https://sass-lang.com/)** 128 | - **[Stylus](https://stylus-lang.com/)** 129 | - **[CSS Lint](http://csslint.net/)** 130 | - **[Normalize CSS](https://necolas.github.io/normalize.css/)** 131 | - **[Reset CSS](https://meyerweb.com/eric/tools/css/reset/)** 132 | - **[Styled-components](https://styled-components.com/)** 133 | - **[Do Sass e BEM ao CSS-in-JS: A (re)evolução do CSS ao longo da história](https://www.felipefialho.com/blog/do-sass-e-bem-ao-css-in-js-a-evolucao-do-css-ao-longo-da-historia/)** 134 | 135 | ### Módulo 15: Projeto final - Criando seu próprio site 136 | - **[Iconmonstr](https://iconmonstr.com/)** 137 | - **[Por que usar SVG?](https://willianjusten.com.br/por-que-usar-svg/)** 138 | - **[Entenda o SVG](https://developer.mozilla.org/pt-BR/docs/Glossario/SVG)** 139 | - **[Utilizando variáreis CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/Using_CSS_custom_properties)** 140 | - **[Criando e hospedando seu site de graça no GitHub Pages](https://woliveiras.com.br/posts/jamstack-criando-e-hospedando-seu-site-de-graça-no-github-pages/)** 141 | - **[Aprendendo sobre o GitHub Pages](https://docs.github.com/pt/free-pro-team@latest/github/working-with-github-pages/about-github-pages)** 142 | 143 | ## 📚 Livros referência para este curso 144 | 145 | - **[HTML5: A linguagem de marcação que revolucionou a web](https://www.amazon.com.br/gp/product/B081HVSQPN/ref=ppx_yo_dt_b_d_asin_title_o07?ie=UTF8&psc=1)** 146 | - **[Acessibilidade na Web](https://www.casadocodigo.com.br/products/livro-acessibilidade)** 147 | - **[CSS Grid Layout: Criando layouts CSS profissionais](https://www.amazon.com.br/dp/B07Y155PHW/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)** 148 | 149 | ## ❓ Tenho Dúvidas... O que Faço?! 150 | 151 | Caso tenham dúvidas relacionadas ao curso, sintam-se à vontade em deixar as suas perguntas no fórum do curso ou abrir uma **[ISSUE AQUI](https://github.com/WoMakersCode/html-css-womakerscode-irme/issues)**. Assim que possível alguém irá te ajudar 🙂 152 | -------------------------------------------------------------------------------- /modulo 02/aula 04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Potência Feminina 6 | 7 | 8 |

Este é um parágrafo.

9 | 10 | 11 | -------------------------------------------------------------------------------- /modulo 02/aula 05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Potência Feminina 8 | 9 | 10 |

This is a paragraph in English.

11 | 12 | 13 | -------------------------------------------------------------------------------- /modulo 02/aula 06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Potência Feminina 8 | 9 | 10 |

Isso é um parágrafo com importância bem aqui.

11 | 12 | 13 | -------------------------------------------------------------------------------- /modulo 02/aula 07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Potência Feminina 8 | 9 | 10 |

Lista ordenada

11 |
    12 |
  1. Primeiro item
    2. 13 |
  2. Segundo item
    3. 14 |
15 | 16 |

Lista não ordenada

17 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /modulo 02/aula 08/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trabalhando com links 8 | 9 | 10 |

Trabalhando com links

11 |

Forma correta

12 |

Este é um link para o site do Google.

13 |

Forma errada

14 |

Clique aqui para ir para o site do Google.

15 | 16 | 17 | -------------------------------------------------------------------------------- /modulo 02/aula 09/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trabalhando com formulários 8 | 9 | 10 |

Trabalhando com formulários

11 |
12 |
13 | 14 | 15 |
16 |
17 | 18 | 19 |
20 |
21 | 22 | 23 |
24 |
25 | 26 |
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /modulo 02/aula 10/imagens/irme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WoMakersCode/html-css-womakerscode-irme/42d27c6c3e1d2c0e1128ff2207c61f3b1c8a5358/modulo 02/aula 10/imagens/irme.png -------------------------------------------------------------------------------- /modulo 02/aula 10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trabalhando com multimídia 8 | 9 | 10 |

Trabalhando com multimídia

11 |
12 | irme - Instituto Rede Mulher Empreendedora 13 |
Logotipo do IRME
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /modulo 02/aula 11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trabalhando com tabelas 8 | 9 | 10 |

Trabalhando com tabelas

11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
Datas de aniversários
NomeIdadeAniversário
Larissa2607/07
Enzo0931/07
29 | 30 | 31 | -------------------------------------------------------------------------------- /modulo 02/aula 12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trabalhando com principais tags 8 | 9 | 10 |

Aqui temos um parágrafo com um span.

11 | 12 | 13 | -------------------------------------------------------------------------------- /modulo 03/aula 01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Gerenciamento de foco 8 | 9 | 10 |

Gerenciamento de foco

11 | 12 | 13 | 14 |
Terceiro elemento focado.
15 | 16 |
Essa div não é focada.
17 | 18 |
Primeiro elemento focado.
19 | 20 | 21 | -------------------------------------------------------------------------------- /modulo 04/aula 02/estilo.css: -------------------------------------------------------------------------------- 1 | p { 2 | color: green; 3 | } 4 | -------------------------------------------------------------------------------- /modulo 04/aula 02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Formas de utilizar o CSS 8 | 9 | 10 | 11 |

Formas de utilizar o CSS

12 | 13 |

Essa é a forma externa.

14 | 15 | 16 | -------------------------------------------------------------------------------- /modulo 04/aula 04/estilo.css: -------------------------------------------------------------------------------- 1 | main > h3 { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /modulo 04/aula 04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Principais seletores CSS 8 | 9 | 10 | 11 |
12 |

Principais seletores CSS

13 | 14 |
15 |

Título da section

16 |
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /modulo 04/aula 05/estilo.css: -------------------------------------------------------------------------------- 1 | li:nth-child(odd) { 2 | color: green; 3 | } 4 | 5 | li:nth-child(even) { 6 | color: purple; 7 | } 8 | -------------------------------------------------------------------------------- /modulo 04/aula 05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Principais pseudo-seletores CSS 8 | 9 | 10 | 11 |

Principais pseudo-seletores CSS

12 | 13 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /modulo 04/aula 06/estilo.css: -------------------------------------------------------------------------------- 1 | .exemplo::after { 2 | content: " - DEPOIS"; 3 | } 4 | 5 | 6 | .exemplo::before { 7 | content: "ANTES - "; 8 | } 9 | -------------------------------------------------------------------------------- /modulo 04/aula 06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Principais pseudo-elementos CSS 8 | 9 | 10 | 11 |

Principais pseudo-elementos CSS

12 | 13 |
Temos uma div aqui.
14 | 15 | 16 | -------------------------------------------------------------------------------- /modulo 05/aula 01/estilo.css: -------------------------------------------------------------------------------- 1 | .exemplo-1 { 2 | color: #ff0000; 3 | } 4 | 5 | .exemplo-2 { 6 | color: #00ff00; 7 | } 8 | 9 | .exemplo-3 { 10 | color: #0000ff; 11 | } 12 | 13 | .exemplo-4 { 14 | color: #03ecfc; 15 | } 16 | -------------------------------------------------------------------------------- /modulo 05/aula 01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trabalhando com cores na web 8 | 9 | 10 | 11 |

Trabalhando com cores na web

12 | 13 |

Aqui temos um parágrafo.

14 |

Aqui temos um parágrafo.

15 |

Aqui temos um parágrafo.

16 |

Aqui temos um parágrafo.

17 | 18 | 19 | -------------------------------------------------------------------------------- /modulo 05/aula 02/estilo.css: -------------------------------------------------------------------------------- 1 | .elemento-pai { 2 | width: 300px; /* largura */ 3 | background-color: green; /* cor de fundo */ 4 | } 5 | 6 | .elemento-filho { 7 | height: 10%; /* altura */ 8 | } 9 | -------------------------------------------------------------------------------- /modulo 05/aula 02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Entendendo as unidades de medidas 8 | 9 | 10 | 11 |

Entendendo as unidades de medidas

12 | 13 |
14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /modulo 05/aula 03/estilo.css: -------------------------------------------------------------------------------- 1 | .texto { 2 | font-family: 'Redressed', cursive; 3 | } 4 | -------------------------------------------------------------------------------- /modulo 05/aula 03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trabalhando com fontes 8 | 9 | 10 | 11 | 12 | 13 |

Trabalhando com fontes

14 | 15 |

Aqui temos um parágrafo.

16 | 17 | 18 | -------------------------------------------------------------------------------- /modulo 06/aula 01/estilo.css: -------------------------------------------------------------------------------- 1 | .link { 2 | background-color: pink; 3 | padding: 15px; 4 | display: inline-block; 5 | } 6 | -------------------------------------------------------------------------------- /modulo 06/aula 01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Opções mais comuns de display 8 | 9 | 10 | 11 |

Opções mais comuns de display

12 | 13 |

Aqui temos um parágrafo para mostrar o display: inline-block em funcionamento. Aqui temos um link. O display inline-block permite que nossos elementos se comportem corretamente ao receber algumas propriedades.

14 | 15 | 16 | -------------------------------------------------------------------------------- /modulo 06/aula 02/estilo.css: -------------------------------------------------------------------------------- 1 | .caixa { 2 | background-color: green; 3 | width: 100px; 4 | height: 1100px; 5 | } 6 | 7 | .caixa-absoluta { 8 | background-color: pink; 9 | height: 100px; 10 | width: 200px; 11 | position: fixed; 12 | top: 10px; 13 | } 14 | -------------------------------------------------------------------------------- /modulo 06/aula 02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Entendendo os tipos de posicionamento 8 | 9 | 10 | 11 |

Entendendo os tipos de posicionamento

12 | 13 |
Aqui temos uma caixa.
14 | 15 |
Aqui temos uma caixa.
16 | 17 | 18 | -------------------------------------------------------------------------------- /modulo 06/aula 03/estilo.css: -------------------------------------------------------------------------------- 1 | .texto { 2 | height: 80px; 3 | width: 80px; 4 | padding: 10px; 5 | background-color: pink; 6 | box-sizing: border-box; 7 | } 8 | -------------------------------------------------------------------------------- /modulo 06/aula 03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Definindo espaçamentos para os elementos 8 | 9 | 10 | 11 |

Definindo espaçamentos para os elementos

12 | 13 |

Aqui temos um parágrafo.

14 | 15 | 16 | -------------------------------------------------------------------------------- /modulo 06/aula 04/estilo.css: -------------------------------------------------------------------------------- 1 | .texto { 2 | margin: 0; 3 | } 4 | -------------------------------------------------------------------------------- /modulo 06/aula 04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Entendendo os estilos padrões dos elementos HTML 8 | 9 | 10 | 11 |

Entendendo os estilos padrões dos elementos HTML

12 | 13 |

Título 3

14 |

Título 4

15 | 16 |

Paragrafo aqui.

17 | 18 | 19 | -------------------------------------------------------------------------------- /modulo 07/aula 01/estilo.css: -------------------------------------------------------------------------------- 1 | .caixa { 2 | width: 200px; 3 | height: 200px; 4 | border: 1px solid red; 5 | overflow: scroll; 6 | } 7 | -------------------------------------------------------------------------------- /modulo 07/aula 01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Entendendo as propriedades genéricas 8 | 9 | 10 | 11 |

Entendendo as propriedades genéricas

12 | 13 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a justo luctus, ornare nunc a, dignissim est. Maecenas eu tincidunt neque. Donec fermentum ullamcorper ante eget commodo. Quisque at consequat lacus. Mauris et ex volutpat, dapibus purus sit amet, tempor magna. Proin ullamcorper tempor odio ac feugiat. Aliquam ante felis, elementum a leo quis, ullamcorper porta libero. Mauris sit amet mi ac lectus laoreet vulputate. Proin viverra condimentum accumsan. Nullam at vestibulum mi. Nunc in est eu eros consequat commodo et eu elit.
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /modulo 07/aula 02/estilo.css: -------------------------------------------------------------------------------- 1 | .texto-1 { 2 | line-height: 40px; 3 | } 4 | -------------------------------------------------------------------------------- /modulo 07/aula 02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Entendendo as principais propriedades - trabalhando com textos 8 | 9 | 10 | 11 |

Entendendo as principais propriedades - trabalhando com textos

12 | 13 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a justo luctus, ornare nunc a, dignissim est. Maecenas eu tincidunt neque. Donec fermentum ullamcorper ante eget commodo. Quisque at consequat lacus. Mauris et ex volutpat, dapibus purus sit amet, tempor magna. Proin ullamcorper tempor odio ac feugiat. Aliquam ante felis, elementum a leo quis, ullamcorper porta libero. Mauris sit amet mi ac lectus laoreet vulputate. Proin viverra condimentum accumsan. Nullam at vestibulum mi. Nunc in est eu eros consequat commodo et eu elit. 14 |

15 | 16 | 17 | -------------------------------------------------------------------------------- /modulo 07/aula 03/estilo.css: -------------------------------------------------------------------------------- 1 | .lista { 2 | list-style: lower-alpha; 3 | } 4 | -------------------------------------------------------------------------------- /modulo 07/aula 03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Entendendo as principais propriedades - trabalhando com listas 8 | 9 | 10 | 11 |

Entendendo as principais propriedades - trabalhando com listas

12 | 13 |
    14 |
  1. Item 1
    2. 15 |
  2. Item 2
    3. 16 |
  3. Item 3
    4. 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /modulo 07/aula 04/estilo.css: -------------------------------------------------------------------------------- 1 | .link { 2 | text-decoration: none; 3 | color: tomato; 4 | } 5 | 6 | .link:hover { 7 | color: violet; 8 | } 9 | 10 | .link:active { 11 | color: darksalmon; 12 | } 13 | 14 | .link:focus { 15 | outline: none; 16 | border: 1px solid tomato; 17 | } 18 | -------------------------------------------------------------------------------- /modulo 07/aula 04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Entendendo as principais propriedades - trabalhando com links 8 | 9 | 10 | 11 |

Entendendo as principais propriedades - trabalhando com links

12 | 13 | Clique aqui. 14 | 15 | 16 | -------------------------------------------------------------------------------- /modulo 07/aula 05/estilo.css: -------------------------------------------------------------------------------- 1 | .caixa { 2 | width: 400px; 3 | height: 400px; 4 | border: 1px solid green; 5 | background-image: url("imagem.jpg"); 6 | background-repeat: no-repeat; 7 | background-position: center; 8 | background-size: 50px 60px; 9 | } 10 | -------------------------------------------------------------------------------- /modulo 07/aula 05/imagem.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WoMakersCode/html-css-womakerscode-irme/42d27c6c3e1d2c0e1128ff2207c61f3b1c8a5358/modulo 07/aula 05/imagem.jpg -------------------------------------------------------------------------------- /modulo 07/aula 05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Entendendo outras principais propriedades 8 | 9 | 10 | 11 |

Entendendo outras principais propriedades

12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /modulo 08/aula 01/estilo.css: -------------------------------------------------------------------------------- 1 | p { 2 | color: green; 3 | } 4 | 5 | p { 6 | color: blue; 7 | } 8 | -------------------------------------------------------------------------------- /modulo 08/aula 01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Principais conceitos do CSS - o efeito cascata 8 | 9 | 10 | 11 |

Principais conceitos do CSS - o efeito cascata

12 | 13 |

Aqui temos um parágrafo.

14 | 15 | 16 | -------------------------------------------------------------------------------- /modulo 08/aula 02/estilo.css: -------------------------------------------------------------------------------- 1 | .elemento-pai { 2 | width: 200px; 3 | height: 200px; 4 | background-color: green; 5 | } 6 | 7 | .elemento-filho { 8 | width: inherit; 9 | } 10 | -------------------------------------------------------------------------------- /modulo 08/aula 02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Principais conceitos do CSS - entendendo herança 8 | 9 | 10 | 11 |

Principais conceitos do CSS - entendendo herança

12 | 13 |
14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /modulo 08/aula 03/estilo.css: -------------------------------------------------------------------------------- 1 | .lista .item .link { /* 10 + 10 + 10 = 30 */ 2 | background-color: green; 3 | } 4 | 5 | ul #item a { /* 1 + 100 + 1 = 102 */ 6 | background-color: salmon; 7 | } 8 | 9 | ul li a { /* 1 + 1 + 1 = 3 */ 10 | background-color: red; 11 | } 12 | -------------------------------------------------------------------------------- /modulo 08/aula 03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Principais conceitos do CSS - cálculo de especificidade 8 | 9 | 10 | 11 |

Principais conceitos do CSS - cálculo de especificidade

12 | 13 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /modulo 09/aula 01/estilo.css: -------------------------------------------------------------------------------- 1 | .botao { 2 | padding: 8px; 3 | background-color: #e768f2; 4 | transition: background-color .5s; 5 | } 6 | 7 | .botao:hover { 8 | background-color: #68f0f2; 9 | } 10 | -------------------------------------------------------------------------------- /modulo 09/aula 01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animações com CSS - criando transições 8 | 9 | 10 | 11 |

Animações com CSS - criando transições

12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /modulo 09/aula 02/estilo.css: -------------------------------------------------------------------------------- 1 | @keyframes animacao { 2 | 0% { /* inicio da animação */ 3 | background-color: #e768f2; 4 | top: 0; 5 | left: 0; 6 | } 7 | 8 | 50% { /* meio da animação */ 9 | top: 0; 10 | left: 100px; 11 | } 12 | 13 | 100% { /* fim da animação */ 14 | background-color: #68f0f2; 15 | top: 100px; 16 | left: 100px; 17 | } 18 | } 19 | 20 | .caixa { 21 | width: 300px; 22 | height: 300px; 23 | animation: animacao 2s infinite alternate; 24 | position: relative; 25 | } 26 | -------------------------------------------------------------------------------- /modulo 09/aula 02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animações com CSS - animações como uma linha do tempo 8 | 9 | 10 | 11 |

Animações com CSS - animações como uma linha do tempo

12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /modulo 09/aula 03/estilo.css: -------------------------------------------------------------------------------- 1 | @keyframes animacao { 2 | 0% { /* inicio da animação */ 3 | background-color: #e768f2; 4 | top: 0; 5 | left: 0; 6 | } 7 | 8 | 50% { /* meio da animação */ 9 | top: 0; 10 | left: 100px; 11 | } 12 | 13 | 100% { /* fim da animação */ 14 | background-color: #68f0f2; 15 | top: 100px; 16 | left: 100px; 17 | } 18 | } 19 | 20 | .caixa { 21 | width: 300px; 22 | height: 300px; 23 | animation: animacao 2s infinite alternate; 24 | position: relative; 25 | will-change: left, top; 26 | } 27 | -------------------------------------------------------------------------------- /modulo 09/aula 03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animações com CSS - performance em animações 8 | 9 | 10 | 11 |

Animações com CSS - performance em animações

12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /modulo 10/aula 01/estilo.css: -------------------------------------------------------------------------------- 1 | .caixa-1 { 2 | width: 100px; 3 | height: 100px; 4 | background-color: #1fffb0; 5 | transform: scaleY(2); 6 | } 7 | 8 | .caixa-2 { 9 | width: 100px; 10 | height: 100px; 11 | background-color: #fa60fc; 12 | transform: scaleX(.3); 13 | } 14 | -------------------------------------------------------------------------------- /modulo 10/aula 01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Transformações com CSS - trabalhando com scale 8 | 9 | 10 | 11 |

Transformações com CSS - trabalhando com scale

12 | 13 |
14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /modulo 10/aula 02/estilo.css: -------------------------------------------------------------------------------- 1 | .caixa { 2 | width: 100px; 3 | height: 100px; 4 | background-color: pink; 5 | animation: girando 2s infinite; 6 | } 7 | 8 | @keyframes girando { 9 | 0% { 10 | transform: rotate(0deg); 11 | } 12 | 13 | 100% { 14 | transform: rotate(360deg); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /modulo 10/aula 02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Transformações com CSS - trabalhando com rotate 8 | 9 | 10 | 11 |

Transformações com CSS - trabalhando com rotate

12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /modulo 10/aula 03/estilo.css: -------------------------------------------------------------------------------- 1 | .caixa-1 { 2 | width: 100px; 3 | height: 100px; 4 | background-color: lightgreen; 5 | transform: translateX(30px); 6 | } 7 | 8 | .caixa-2 { 9 | width: 100px; 10 | height: 100px; 11 | background-color: lightpink; 12 | transform: translateY(50px); 13 | } 14 | -------------------------------------------------------------------------------- /modulo 10/aula 03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Transformações com CSS - trabalhando com translate 8 | 9 | 10 | 11 |

Transformações com CSS - trabalhando com translate

12 | 13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /modulo 10/aula 04/estilo.css: -------------------------------------------------------------------------------- 1 | .caixa { 2 | width: 100px; 3 | height: 100px; 4 | background: lightsalmon; 5 | transform: skewX(10deg); /* skewY(15deg) */ 6 | } 7 | -------------------------------------------------------------------------------- /modulo 10/aula 04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Transformações com CSS - trabalhando com skew 8 | 9 | 10 | 11 |

Transformações com CSS - trabalhando com skew

12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /modulo 10/aula 05/estilo.css: -------------------------------------------------------------------------------- 1 | .botao { 2 | opacity: .5; 3 | } 4 | -------------------------------------------------------------------------------- /modulo 10/aula 05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Transformações com CSS - trabalhando com opacity 8 | 9 | 10 | 11 |

Transformações com CSS - trabalhando com opacity

12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /modulo 11/aula 01/estilo.css: -------------------------------------------------------------------------------- 1 | .caixa { 2 | background: pink; 3 | width: 100px; 4 | height: 100px; 5 | padding: 10px; 6 | border: 5px solid green; 7 | box-sizing: border-box; 8 | margin: 10px; 9 | } 10 | -------------------------------------------------------------------------------- /modulo 11/aula 01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Entendendo o box-model 8 | 9 | 10 | 11 |

Entendendo o box-model

12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /modulo 11/aula 02/estilo.css: -------------------------------------------------------------------------------- 1 | .container { 2 | border: 1px solid green; 3 | display: inline-flex; 4 | } 5 | 6 | .caixa { 7 | background: pink; 8 | width: 50px; 9 | height: 50px; 10 | border: 1px solid blue; 11 | } 12 | -------------------------------------------------------------------------------- /modulo 11/aula 02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trabalhando com flex-box - introdução 8 | 9 | 10 | 11 |

Trabalhando com flex-box - introdução

12 | 13 |
14 |
Caixa 1
15 |
Caixa 2
16 |
Caixa 3
17 |
Caixa 4
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /modulo 11/aula 03/estilo.css: -------------------------------------------------------------------------------- 1 | .container { 2 | border: 1px solid green; 3 | display: flex; 4 | flex-direction: column-reverse; 5 | } 6 | 7 | .caixa { 8 | background: pink; 9 | width: 50px; 10 | height: 50px; 11 | border: 1px solid blue; 12 | } 13 | -------------------------------------------------------------------------------- /modulo 11/aula 03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trabalhando com flex-box: flex-direction 8 | 9 | 10 | 11 |

Trabalhando com flex-box: flex-direction

12 | 13 |
14 |
Caixa 1
15 |
Caixa 2
16 |
Caixa 3
17 |
Caixa 4
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /modulo 11/aula 04/estilo.css: -------------------------------------------------------------------------------- 1 | .container { 2 | border: 1px solid green; 3 | display: flex; 4 | flex-wrap: wrap; /* valor padrão é nowrap */ 5 | } 6 | 7 | .caixa { 8 | background: pink; 9 | width: 50px; 10 | height: 50px; 11 | border: 1px solid blue; 12 | } 13 | -------------------------------------------------------------------------------- /modulo 11/aula 04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trabalhando com flex-box: flex-wrap 8 | 9 | 10 | 11 |

Trabalhando com flex-box: flex-wrap

12 | 13 |
14 |
Caixa 1
15 |
Caixa 2
16 |
Caixa 3
17 |
Caixa 4
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /modulo 11/aula 05/estilo.css: -------------------------------------------------------------------------------- 1 | .container { 2 | border: 1px solid green; 3 | display: flex; 4 | flex-flow: row-reverse wrap; 5 | } 6 | 7 | .caixa { 8 | background: pink; 9 | width: 50px; 10 | height: 50px; 11 | border: 1px solid blue; 12 | } 13 | -------------------------------------------------------------------------------- /modulo 11/aula 05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trabalhando com flex-box: flex-flow 8 | 9 | 10 | 11 |

Trabalhando com flex-box: flex-flow

12 | 13 |
14 |
Caixa 1
15 |
Caixa 2
16 |
Caixa 3
17 |
Caixa 4
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /modulo 11/aula 06/estilo.css: -------------------------------------------------------------------------------- 1 | .container { 2 | border: 1px solid green; 3 | display: flex; 4 | justify-content: space-evenly; 5 | } 6 | 7 | .caixa { 8 | background: pink; 9 | width: 50px; 10 | height: 50px; 11 | border: 1px solid blue; 12 | } 13 | -------------------------------------------------------------------------------- /modulo 11/aula 06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trabalhando com flex-box: justify-content 8 | 9 | 10 | 11 |

Trabalhando com flex-box: justify-content

12 | 13 |
14 |
Caixa 1
15 |
Caixa 2
16 |
Caixa 3
17 |
Caixa 4
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /modulo 11/aula 07/estilo.css: -------------------------------------------------------------------------------- 1 | .container { 2 | border: 1px solid green; 3 | display: flex; 4 | height: 300px; 5 | align-items: center; 6 | } 7 | 8 | .caixa { 9 | background: pink; 10 | width: 40px; 11 | border: 1px solid blue; 12 | } 13 | -------------------------------------------------------------------------------- /modulo 11/aula 07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trabalhando com flex-box: align-items 8 | 9 | 10 | 11 |

Trabalhando com flex-box: align-items

12 | 13 |
14 |
Caixa 1
15 |
Caixa 2
16 |
Caixa 3
17 |
Caixa 4
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /modulo 11/aula 08/estilo.css: -------------------------------------------------------------------------------- 1 | .container { 2 | border: 1px solid green; 3 | display: flex; 4 | width: 300px; 5 | height: 300px; 6 | flex-wrap: wrap; 7 | align-content: space-around; 8 | } 9 | 10 | .caixa { 11 | background: pink; 12 | width: 40px; 13 | border: 1px solid blue; 14 | } 15 | -------------------------------------------------------------------------------- /modulo 11/aula 08/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trabalhando com flex-box: align-content 8 | 9 | 10 | 11 |

Trabalhando com flex-box: align-content

12 | 13 |
14 |
Caixa 1
15 |
Caixa 2
16 |
Caixa 3
17 |
Caixa 4
18 |
Caixa 5
19 |
Caixa 6
20 |
Caixa 7
21 |
Caixa 8
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /modulo 11/aula 09/estilo.css: -------------------------------------------------------------------------------- 1 | .container { 2 | border: 1px solid green; 3 | display: flex; 4 | } 5 | 6 | .caixa { 7 | background: pink; 8 | width: 40px; 9 | border: 1px solid blue; 10 | } 11 | 12 | .caixa:nth-child(1) { 13 | order: 1; 14 | } 15 | 16 | .caixa:nth-child(2) { 17 | order: 2; 18 | } 19 | 20 | .caixa:nth-child(3) { 21 | order: 1; 22 | } 23 | 24 | .caixa:nth-child(4) { 25 | order: 1; 26 | } 27 | -------------------------------------------------------------------------------- /modulo 11/aula 09/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trabalhando com flex-box: order 8 | 9 | 10 | 11 |

Trabalhando com flex-box: order

12 | 13 |
14 |
Caixa 1
15 |
Caixa 2
16 |
Caixa 3
17 |
Caixa 4
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /modulo 11/aula 10/estilo.css: -------------------------------------------------------------------------------- 1 | .container { 2 | border: 1px solid green; 3 | display: flex; 4 | } 5 | 6 | .caixa { 7 | background: pink; 8 | width: 40px; 9 | height: 40px; 10 | border: 1px solid blue; 11 | } 12 | 13 | .caixa:nth-child(1) { 14 | flex-grow: 1; 15 | } 16 | 17 | .caixa:nth-child(2) { 18 | flex-grow: 1; 19 | } 20 | 21 | .caixa:nth-child(3) { 22 | flex-grow: 2; 23 | } 24 | 25 | .caixa:nth-child(4) { 26 | flex-grow: 1; 27 | } 28 | -------------------------------------------------------------------------------- /modulo 11/aula 10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trabalhando com flex-box: flex-grow 8 | 9 | 10 | 11 |

Trabalhando com flex-box: flex-grow

12 | 13 |
14 |
Caixa 1
15 |
Caixa 2
16 |
Caixa 3
17 |
Caixa 4
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /modulo 11/aula 11/estilo.css: -------------------------------------------------------------------------------- 1 | .container { 2 | border: 1px solid green; 3 | display: flex; 4 | } 5 | 6 | .caixa { 7 | background: pink; 8 | width: 70px; 9 | height: 70px; 10 | border: 1px solid blue; 11 | } 12 | 13 | .caixa:nth-child(2) { 14 | flex-shrink: 2; 15 | } 16 | -------------------------------------------------------------------------------- /modulo 11/aula 11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trabalhando com flex-box: flex-shrink 8 | 9 | 10 | 11 |

Trabalhando com flex-box: flex-shrink

12 | 13 |
14 |
Caixa 1
15 |
Caixa 2
16 |
Caixa 3
17 |
Caixa 4
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /modulo 11/aula 12/estilo.css: -------------------------------------------------------------------------------- 1 | .container { 2 | border: 1px solid green; 3 | display: flex; 4 | } 5 | 6 | .caixa { 7 | background: pink; 8 | width: 70px; 9 | height: 70px; 10 | border: 1px solid blue; 11 | } 12 | 13 | .caixa:nth-child(2) { 14 | flex-basis: 100px; 15 | } 16 | -------------------------------------------------------------------------------- /modulo 11/aula 12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trabalhando com flex-box: flex-basis 8 | 9 | 10 | 11 |

Trabalhando com flex-box: flex-basis

12 | 13 |
14 |
Caixa 1
15 |
Caixa 2
16 |
Caixa 3
17 |
Caixa 4
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /modulo 11/aula 13/estilo.css: -------------------------------------------------------------------------------- 1 | .container { 2 | border: 1px solid green; 3 | display: flex; 4 | } 5 | 6 | .caixa { 7 | background: pink; 8 | width: 70px; 9 | height: 70px; 10 | border: 1px solid blue; 11 | } 12 | 13 | .caixa:nth-child(2) { 14 | flex: 0 1 100px; 15 | } 16 | -------------------------------------------------------------------------------- /modulo 11/aula 13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trabalhando com flex-box: flex 8 | 9 | 10 | 11 |

Trabalhando com flex-box: flex

12 | 13 |
14 |
Caixa 1
15 |
Caixa 2
16 |
Caixa 3
17 |
Caixa 4
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /modulo 11/aula 14/estilo.css: -------------------------------------------------------------------------------- 1 | .container { 2 | border: 1px solid green; 3 | display: flex; 4 | width: 300px; 5 | height: 300px; 6 | } 7 | 8 | .caixa { 9 | background: pink; 10 | width: 70px; 11 | height: 70px; 12 | border: 1px solid blue; 13 | } 14 | 15 | .caixa:nth-child(3) { 16 | align-self: flex-end; 17 | } 18 | -------------------------------------------------------------------------------- /modulo 11/aula 14/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trabalhando com flex-box: flex 8 | 9 | 10 | 11 |

Trabalhando com flex-box: flex

12 | 13 |
14 |
Caixa 1
15 |
Caixa 2
16 |
Caixa 3
17 |
Caixa 4
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /modulo 11/aula 15/estilo.css: -------------------------------------------------------------------------------- 1 | .container { 2 | border: 2px solid green; 3 | display: grid; 4 | grid-template-columns: 100px 100px 50px; 5 | grid-gap: 10px; 6 | } 7 | 8 | .caixa { 9 | background: pink; 10 | padding: 20px; 11 | } 12 | -------------------------------------------------------------------------------- /modulo 11/aula 15/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Introdução ao grid-layout 8 | 9 | 10 | 11 |

Introdução ao grid-layout

12 | 13 |
14 |
1
15 |
2
16 |
3
17 |
4
18 |
5
19 |
6
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /modulo 11/aula 16/estilo.css: -------------------------------------------------------------------------------- 1 | .colunas { 2 | column-count: 2; 3 | } 4 | -------------------------------------------------------------------------------- /modulo 11/aula 16/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Outras especificações de layouts 8 | 9 | 10 | 11 |

Outras especificações de layouts

12 | 13 |
14 |

15 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, 16 | sed do eiusmod tempor incididunt ut labore et dolore magna 17 | aliqua. 18 |

19 |

20 | Ut enim ad minim veniam, quis nostrud exercitation ullamco 21 | laboris nisi ut aliquip ex ea commodo consequat. 22 |

23 |

24 | Duis aute irure dolor in reprehenderit in voluptate velit 25 | esse cillum dolore eu fugiat nulla pariatur. 26 |

27 |

28 | Excepteur sint occaecat cupidatat non proident, sunt in 29 | culpa qui officia deserunt mollit anim id est laborum. 30 |

31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /modulo 12/aula 02/estilo.css: -------------------------------------------------------------------------------- 1 | .caixa { 2 | width: 300px; 3 | height: 300px; 4 | background-color: green; 5 | } 6 | 7 | @media (orientation: landscape) { 8 | .caixa { 9 | background-color: blue; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /modulo 12/aula 02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trabalhando com media queries 8 | 9 | 10 | 11 |

Trabalhando com media queries

12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /modulo 12/aula 04/estilo.css: -------------------------------------------------------------------------------- 1 | .imagem { 2 | width: 100%; 3 | max-width: 256px; /* largura original da imagem */ 4 | } 5 | -------------------------------------------------------------------------------- /modulo 12/aula 04/imagens/gatinho.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WoMakersCode/html-css-womakerscode-irme/42d27c6c3e1d2c0e1128ff2207c61f3b1c8a5358/modulo 12/aula 04/imagens/gatinho.png -------------------------------------------------------------------------------- /modulo 12/aula 04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Unidades de medidas flexíveis 9 | 10 | 11 | 12 |

Unidades de medidas flexíveis

13 | 14 | foto de um gatinho 15 | 16 | 17 | -------------------------------------------------------------------------------- /modulo 12/aula 05/estilo.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WoMakersCode/html-css-womakerscode-irme/42d27c6c3e1d2c0e1128ff2207c61f3b1c8a5358/modulo 12/aula 05/estilo.css -------------------------------------------------------------------------------- /modulo 12/aula 05/imagens/gato-grande.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WoMakersCode/html-css-womakerscode-irme/42d27c6c3e1d2c0e1128ff2207c61f3b1c8a5358/modulo 12/aula 05/imagens/gato-grande.jpg -------------------------------------------------------------------------------- /modulo 12/aula 05/imagens/gato-pequeno.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WoMakersCode/html-css-womakerscode-irme/42d27c6c3e1d2c0e1128ff2207c61f3b1c8a5358/modulo 12/aula 05/imagens/gato-pequeno.jpg -------------------------------------------------------------------------------- /modulo 12/aula 05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trabalhando com imagens 8 | 9 | 10 | 11 |

Trabalhando com imagens

12 | 13 | foto de um gatinho 19 | 20 | 21 | -------------------------------------------------------------------------------- /modulo 13/aula 01/estilo.css: -------------------------------------------------------------------------------- 1 | .topo { 2 | border: 1px solid green; 3 | } 4 | 5 | .topo__link { 6 | color: red; 7 | } 8 | 9 | .topo__link--grande { 10 | font-size: 32px; 11 | } 12 | 13 | .rodape { 14 | border: 1px solid purple; 15 | } 16 | 17 | .rodape__link { 18 | color: salmon; 19 | } 20 | 21 | .rodape__link--pequeno { 22 | font-size: 12px; 23 | } 24 | -------------------------------------------------------------------------------- /modulo 13/aula 01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Padrões de nomenclatura: BEM 9 | 10 | 11 | 12 |
13 | Link do topo 14 |
15 |

Padrões de nomenclatura: BEM

16 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /projeto-final/assets/css/estilo.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #313131; 3 | height: 100vh; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: space-between; 7 | font-family: 'Poppins', sans-serif; 8 | color: #f4f4f4; 9 | --cor-destaque: #87d0a6; 10 | } 11 | 12 | .header { 13 | width: 100%; 14 | max-width: 900px; 15 | padding: 8px; 16 | box-sizing: border-box; 17 | margin: 0 auto; 18 | display: flex; 19 | justify-content: flex-end; 20 | } 21 | 22 | .header__link { 23 | text-decoration: none; 24 | box-sizing: border-box; 25 | padding: 4px; 26 | } 27 | 28 | .header__link:hover { 29 | opacity: .6; 30 | } 31 | 32 | .header__link:focus { 33 | outline: none; 34 | background-color: #4d4d4d; 35 | border-radius: 5px; 36 | } 37 | 38 | .icone { 39 | width: 24px; 40 | border-radius: 50%; 41 | } 42 | 43 | .icone--texto { 44 | margin: 0 8px; 45 | animation: pulsar 1s infinite alternate; 46 | } 47 | 48 | .main { 49 | width: 100%; 50 | max-width: 700px; 51 | padding: 8px; 52 | box-sizing: border-box; 53 | margin: 0 auto; 54 | } 55 | 56 | .perfil { 57 | width: 100%; 58 | display: flex; 59 | flex-direction: column; 60 | align-items: center; 61 | } 62 | 63 | .perfil__foto { 64 | width: 100%; 65 | max-width: 200px; 66 | border-radius: 50%; 67 | border: 6px solid #868686; 68 | } 69 | 70 | .perfil__nome { 71 | font-family: 'Damion', cursive; 72 | font-size: 52px; 73 | font-weight: 400; 74 | color: var(--cor-destaque); 75 | margin: 16px 0; 76 | } 77 | 78 | .perfil__descricao { 79 | font-size: 16px; 80 | font-weight: 400; 81 | margin: 0; 82 | width: 100%; 83 | max-width: 350px; 84 | text-align: center; 85 | } 86 | 87 | .section { 88 | padding: 8px; 89 | width: 100%; 90 | max-width: 350px; 91 | margin: 24px auto; 92 | box-sizing: border-box; 93 | } 94 | 95 | .section__titulo { 96 | font-size: 22px; 97 | font-weight: 400; 98 | color: var(--cor-destaque); 99 | margin: 16px 0; 100 | } 101 | 102 | .curso { 103 | background-color: #3b3b3b; 104 | padding: 8px; 105 | margin: 16px 0; 106 | box-sizing: border-box; 107 | border-radius: 3px; 108 | } 109 | 110 | .curso__titulo { 111 | font-size: 18px; 112 | font-weight: 400; 113 | color:var(--cor-destaque); 114 | margin: 8px 0; 115 | } 116 | 117 | .curso__descricao { 118 | font-size: 16px; 119 | font-weight: 400; 120 | margin: 8px 0; 121 | } 122 | 123 | .footer { 124 | width: 100%; 125 | height: 42px; 126 | background-color: var(--cor-destaque); 127 | display: flex; 128 | align-items: center; 129 | justify-content: center; 130 | box-sizing: border-box; 131 | flex-shrink: 0; 132 | } 133 | 134 | .footer__texto { 135 | font-size: 14px; 136 | font-weight: 400; 137 | color: #313131; 138 | display: flex; 139 | align-items: center; 140 | } 141 | 142 | @keyframes pulsar { 143 | 0% { 144 | transform: scale(.8); 145 | } 146 | 147 | 100% { 148 | transform: scale(1.2); 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /projeto-final/assets/icones/coracao.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projeto-final/assets/icones/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WoMakersCode/html-css-womakerscode-irme/42d27c6c3e1d2c0e1128ff2207c61f3b1c8a5358/projeto-final/assets/icones/favicon.png -------------------------------------------------------------------------------- /projeto-final/assets/icones/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projeto-final/assets/icones/linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projeto-final/assets/icones/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projeto-final/assets/imagens/larissa-abreu-perfil.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WoMakersCode/html-css-womakerscode-irme/42d27c6c3e1d2c0e1128ff2207c61f3b1c8a5358/projeto-final/assets/imagens/larissa-abreu-perfil.jpg -------------------------------------------------------------------------------- /projeto-final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Larissa Abreu 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | 33 |
34 |
35 | Larissa Abreu - Perfil 36 |

Larissa Abreu

37 |

38 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id dapibus orci. Nulla risus ante, volutpat quis ex in, malesuada lobortis quam. 39 |

40 |
41 | 42 |
43 |

Meus cursos

44 | 45 |
46 |

Curso 1

47 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

48 |
49 | 50 |
51 |

Curso 2

52 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

53 |
54 | 55 |
56 |

Curso 3

57 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

58 |
59 |
60 |
61 | 62 | 69 | 70 | 71 | --------------------------------------------------------------------------------