├── aula10
├── css
│ └── style.css
└── index.html
├── aula11
├── absolute
│ ├── css
│ │ └── style.css
│ └── index.html
├── fixed
│ ├── css
│ │ └── style.css
│ └── index.html
├── relative
│ ├── css
│ │ └── style.css
│ └── index.html
└── sticky
│ ├── css
│ └── style.css
│ └── index.html
├── aula16
├── css
│ └── style.css
└── index.html
├── aula17
└── animacoes
│ ├── css
│ └── style.css
│ └── index.html
├── aula19
├── css
│ └── style.css
└── index.html
├── aula2
├── css
│ └── style.css
├── index.html
└── js
│ └── script.js
├── aula20
├── final
│ ├── css
│ │ └── style.css
│ └── index.html
└── inicial
│ ├── css
│ └── style.css
│ └── index.html
├── aula22
├── final
│ ├── css
│ │ └── style.css
│ ├── img
│ │ └── batata.jpg
│ └── index.html
└── inicial
│ ├── css
│ └── style.css
│ ├── img
│ └── batata.jpg
│ └── index.html
├── aula23
├── css
│ └── style.css
└── index.html
├── aula25
├── final
│ ├── css
│ │ └── style.css
│ └── index.html
└── inicial
│ ├── css
│ └── style.css
│ └── index.html
├── aula26
├── partials
│ ├── index.html
│ └── scss
│ │ ├── _base.scss
│ │ ├── _components.scss
│ │ ├── _layout.scss
│ │ ├── style.css
│ │ ├── style.css.map
│ │ └── style.scss
└── sass
│ ├── .vscode
│ └── settings.json
│ ├── index.html
│ └── scss
│ ├── style.css
│ ├── style.css.map
│ └── style.scss
├── aula3
└── index.html
├── aula4
└── index.html
├── aula5
├── img
│ └── bolo.png
└── index.html
├── aula6
└── index.html
├── aula7
├── css
│ └── style.css
└── index.html
├── aula8
├── css
│ └── style.css
└── index.html
├── aula9
├── css
│ ├── reset.css
│ ├── style.css
│ └── style2.css
├── index.html
└── login.html
└── aulas1314
├── css
└── style.css
└── index.html
/aula10/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | }
4 |
5 | header {
6 | background-color: blueviolet;
7 | color: white;
8 | padding-top: 150px;
9 | border: 10px solid orangered;
10 | border-radius: 30px 80px 120px 150px;
11 | height: 400px;
12 | width: 100%;
13 | box-sizing: border-box;
14 | text-align: center;
15 | }
16 |
17 | h1, h2 {
18 |
19 | }
20 |
21 |
--------------------------------------------------------------------------------
/aula10/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Box Model
10 |
11 |
12 |
13 | Um belo título
14 | Um subtítulo curto e impactante
15 |
16 |
17 |
--------------------------------------------------------------------------------
/aula11/absolute/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | height: 1000px;
7 | }
8 |
9 | h1 {
10 | text-align: center;
11 | }
12 |
13 | .box {
14 | width: 150px;
15 | height: 150px;
16 | padding: 40px;
17 | border: black 5px solid;
18 | background-color: coral;
19 | font-size: 70px;
20 | text-align: center;
21 | }
22 |
23 | #mae {
24 | border: 10px coral solid;
25 | padding: 30px;
26 | position: relative;
27 | }
28 |
29 | /* em relação ao body
30 | OU
31 | a algum elemento ancestral posicionado relative*/
32 | .absolute {
33 | position: absolute;
34 | top: 0;
35 | right: 0;
36 | }
37 |
38 |
39 |
--------------------------------------------------------------------------------
/aula11/absolute/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Position e Z-Index
9 |
10 |
11 |
12 | Position e Z-Index
13 |
14 |
15 |
16 |
17 | 1
18 |
19 |
20 | 2
21 |
22 |
23 | 3
24 |
25 |
26 |
Position e Z-Index
9 |
10 |
11 |
12 | Position e Z-Index
13 |
14 |
15 |
16 |
17 | 1
18 |
19 |
20 | 2
21 |
22 |
23 | 3
24 |
25 |
26 |
Position e Z-Index
9 |
10 |
11 |
12 | Position e Z-Index
13 |
14 |
15 |
16 |
17 | 1
18 |
19 |
20 | 2
21 |
22 |
23 | 3
24 |
25 |
26 |
Position e Z-Index
9 |
10 |
11 |
12 | Position e Z-Index
13 |
14 |
15 | Uns links
16 |
17 |
18 | Um subtitulo
19 |
20 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed dolorem odit dolores quod aspernatur nisi illum vitae ipsam aliquid ducimus, architecto nemo facere in eligendi earum possimus tempora nesciunt consequatur!
21 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed dolorem odit dolores quod aspernatur nisi illum vitae ipsam aliquid ducimus, architecto nemo facere in eligendi earum possimus tempora nesciunt consequatur!
22 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed dolorem odit dolores quod aspernatur nisi illum vitae ipsam aliquid ducimus, architecto nemo facere in eligendi earum possimus tempora nesciunt consequatur!
23 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed dolorem odit dolores quod aspernatur nisi illum vitae ipsam aliquid ducimus, architecto nemo facere in eligendi earum possimus tempora nesciunt consequatur!
24 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed dolorem odit dolores quod aspernatur nisi illum vitae ipsam aliquid ducimus, architecto nemo facere in eligendi earum possimus tempora nesciunt consequatur!
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/aula16/css/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | height: 1200px;
3 | }
4 |
5 | form {
6 | padding: 20px 0;
7 | }
8 |
9 | input:focus {
10 | background-color: yellow;
11 | }
12 |
13 | a {
14 | font-size: 30px;
15 | font-weight: bold;
16 | }
17 |
18 | a:link {
19 | color: rgb(28, 96, 243);
20 | }
21 |
22 | a:visited {
23 | color: rgb(231, 124, 24);
24 | }
25 |
26 | a:hover {
27 | color: rgb(148, 12, 202);
28 | }
29 |
30 | a:active {
31 | color:rgb(17, 133, 7);
32 | }
33 |
34 | p:target {
35 | background-color: gold;
36 | }
37 |
38 | #p3::first-letter {
39 | color: red;
40 | font-size: 30px;
41 | }
42 |
43 | #p3::after{
44 | content: "Atenção aqui!";
45 | color: red;
46 | }
47 |
48 | button {
49 | background-color: red;
50 | color: white;
51 | }
52 |
53 | button:disabled {
54 | background-color: gray;
55 | color: white;
56 | }
57 |
--------------------------------------------------------------------------------
/aula16/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Pseudoseletores
9 |
10 |
11 |
12 | Pseudoseletores
13 |
14 |
19 |
20 | Índice
21 |
22 |
23 | Ir para o primeiro parágrafo! Ir para o segundo parágrafo! Esse link não vai pra lugar nenhum, pois o alvo não existe
27 |
28 | Meu artigo divertido
29 |
30 | Você pode definir este parágrafo como alvo
31 | usando um fragmento de URL. Clique no link acima para experimentar!
32 | Esse é outro parágrafo , também acessável
33 | pelos links acima. Não é incrível?
34 |
35 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis molestiae soluta labore molestias atque, ipsa ab repellat minima dicta dolore. Sapiente, in? Id quasi a deleniti cupiditate dolore perferendis minus.
36 |
37 |
38 |
--------------------------------------------------------------------------------
/aula17/animacoes/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | button {
6 | margin: 50px;
7 | border: 0;
8 | border-radius: 5px;
9 | padding: 15px;
10 | font-size: 20px;
11 | font-weight: 500;
12 | background-color: #eaeaea;
13 | color: #000;
14 |
15 | transition:
16 | background-color, 0.8s,
17 | color, 0.8s;
18 | }
19 |
20 | button:hover {
21 | background-color: #1a73e8;
22 | color: #fff
23 | }
24 |
25 | div {
26 | margin: 50px;
27 | padding: 90px;
28 | width: 300px;
29 | border-radius: 5px;
30 | background-color: #1a73e8;
31 | color: white;
32 | font-size: 20px;
33 | font-weight: 500;
34 |
35 | transform: scale(0.5) rotate(30deg);
36 | }
37 |
38 | div:hover {
39 | animation: deslizar 5s normal;
40 | }
41 |
42 | @keyframes deslizar {
43 | 0% { opacity: 0%; }
44 | 50% { opacity: 100%; transform: translateX(400px) rotate(15deg);}
45 | 100% { opacity: 0%; transform: scale(2)}
46 | }
47 |
48 | img {
49 |
50 | }
--------------------------------------------------------------------------------
/aula17/animacoes/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Animações
9 |
10 |
11 |
12 | Envie com suavidade
13 |
14 | Eu sou uma div transformahdah e posso me animar
15 |
16 | Flexbox
9 |
10 |
11 |
12 | Flexbox
13 | Facilitando a vida da pessoa desenvolvedora de front end
14 |
15 |
16 |
17 |
23 |
24 |
25 |
26 | Um card bem bacana
27 |
28 |
29 |
30 | Lorem ipsum dolor sit, amet pa illo quidem molestiae asperiores.
31 |
32 |
35 |
38 |
39 | Lorem ipsum dolor sit amet voluptas odit corrupti. Neque odit maxime voluptate architecto, corrupti ullam nisi maiores unde cupiditate!
40 |
41 |
44 |
Itens flex bem distribuídos
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
57 |
58 |
--------------------------------------------------------------------------------
/aula2/css/style.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mrochadh/frontend1/3b519b23aa9104a4a916f260eb6b8145f80b37ea/aula2/css/style.css
--------------------------------------------------------------------------------
/aula2/index.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mrochadh/frontend1/3b519b23aa9104a4a916f260eb6b8145f80b37ea/aula2/index.html
--------------------------------------------------------------------------------
/aula2/js/script.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mrochadh/frontend1/3b519b23aa9104a4a916f260eb6b8145f80b37ea/aula2/js/script.js
--------------------------------------------------------------------------------
/aula20/final/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | border: 0;
5 | box-sizing: border-box;
6 | font-family: sans-serif;
7 | font-size: larger;
8 | font-weight: bold;
9 | }
10 |
11 | /*grid container*/
12 | body {
13 | color: #A0ACAD;
14 | display: grid;
15 | grid-template-columns: 150px 1fr 150px;
16 | grid-template-areas:
17 | 'header header aside'
18 | 'links main aside'
19 | 'footer footer aside';
20 | }
21 |
22 | /* itens filhos do container grid*/
23 | header {
24 | background-color: #33032f;
25 | padding: 10px;
26 | height: 15vh; /* 15% da altura da viewport (a área visível do navegador)*/
27 | grid-area: header;
28 |
29 | }
30 |
31 |
32 |
33 | aside {
34 | background-color: #531253;
35 | padding: 10px;
36 | grid-area: aside;
37 | }
38 |
39 | main {
40 | background-color: #A0ACAD;
41 | color: #33032f;
42 | padding: 10px;
43 | height: 75vh;
44 | grid-area: main;
45 | }
46 |
47 | div {
48 | padding: 10px;
49 | grid-area: links;
50 | }
51 |
52 | footer {
53 | background-color: #33032F;
54 | padding: 10px;
55 | height: 10vh;
56 | grid-area: footer;
57 | }
58 |
59 | .center {
60 | display: flex;
61 | align-items: center;
62 | justify-content: center;
63 | }
64 |
65 |
66 |
67 |
68 | /**
69 | DESAFIOS:
70 | - acrescentar uma barra de navegação em uma nova linha: 'nav nav nav' após a linha 'header header header'
71 | - trocar a aside e os related links de lado
72 | - estender a barra asside do topo até o final da tela
73 | - centralizar o conteúdo do header e do footer tanto horizontal quanto verticalmente
74 | - transformar o main em um container para a nossa galeria de cards bacanas
75 | */
76 |
--------------------------------------------------------------------------------
/aula20/final/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Grid Layout
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | Main
17 |
18 | Related Links
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/aula20/inicial/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | border: 0;
5 | box-sizing: border-box;
6 | font-family: sans-serif;
7 | font-size: larger;
8 | font-weight: bold;
9 | }
10 |
11 | /*grid container*/
12 | body {
13 | color: #A0ACAD;
14 |
15 | }
16 |
17 | header {
18 | background-color: #33032f;
19 | padding: 10px;
20 | height: 15vh; /* 15% da altura da viewport (a área visível do navegador)*/
21 |
22 |
23 | }
24 |
25 | aside {
26 | background-color: #531253;
27 | padding: 10px;
28 |
29 | }
30 |
31 | main {
32 | background-color: #A0ACAD;
33 | color: #33032f;
34 | padding: 10px;
35 | height: 75vh;
36 |
37 | }
38 |
39 | div {
40 | padding: 10px;
41 |
42 | }
43 |
44 | footer {
45 | background-color: #33032F;
46 | padding: 10px;
47 | height: 10vh;
48 | grid-area: footer;
49 | }
50 |
51 | .center {
52 | display: flex;
53 | justify-content: center;
54 | align-items: center;
55 | }
56 |
57 |
58 |
59 | /**
60 | DESAFIOS:
61 | - acrescentar uma barra de navegação em uma nova linha
62 | - trocar a aside e os related links de lado
63 | - estender a barra asside do topo até o final da tela
64 | - centralizar o conteúdo do header e do footer tanto horizontal quanto verticalmente
65 | - transformar o main em um container para a nossa galeria de cards bacanas
66 | */
67 |
--------------------------------------------------------------------------------
/aula20/inicial/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Grid Layout
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | Main
17 |
18 | Related Links
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/aula22/final/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | border: 0;
5 | box-sizing: border-box;
6 | font-family: sans-serif;
7 | font-size: medium;
8 | font-weight: bold;
9 | }
10 |
11 | /* mobile first - container flex vertical */
12 | .container {
13 | color: #A0ACAD;
14 | display: flex;
15 | flex-direction: column;
16 | min-height: 100vh;
17 | }
18 |
19 | header {
20 | background-color: #33032f;
21 | padding: 10px;
22 | }
23 |
24 | aside {
25 | background-color: #531253;
26 | padding: 10px;
27 | }
28 |
29 | main {
30 | background-color: #A0ACAD;
31 | color: #33032f;
32 | padding: 10px;
33 | flex: 1;
34 | }
35 |
36 | img {
37 | width: 70%;
38 | }
39 |
40 | div {
41 | padding: 10px;
42 | }
43 |
44 | footer {
45 | background-color: #33032F;
46 | padding: 10px;
47 | }
48 |
49 | .center {
50 | display: flex;
51 | align-items: center;
52 | justify-content: center;
53 | }
54 |
55 | /* estilos a serem aplicados para telas com no mínimo 401px*/
56 |
57 | @media (min-width: 769px) {
58 |
59 | * {
60 | font-size: xx-large;
61 | }
62 |
63 | .container {
64 | display: grid;
65 | grid-template:
66 | 'header header header' 15vh
67 | 'aside main links' 75vh
68 | 'footer footer footer' 10vh
69 | / 150px 1fr 150px;
70 |
71 | /*
72 | grid-template-columns: 150px 1fr 150px;
73 | grid-template-rows: 15vh 75vh 10vh;
74 | grid-template-areas:
75 | 'header header header'
76 | 'aside main links'
77 | 'footer footer footer';
78 | */
79 | }
80 |
81 | header {
82 | grid-area: header;
83 | }
84 |
85 | aside {
86 | grid-area: aside;
87 | }
88 |
89 | main {
90 | grid-area: main;
91 | }
92 |
93 | div {
94 | grid-area: links;
95 | }
96 |
97 | footer {
98 | grid-area: footer;
99 | }
100 |
101 |
102 | }
103 |
104 |
105 | @media only screen and (min-width: 1281px) {
106 |
107 |
108 | }
--------------------------------------------------------------------------------
/aula22/final/img/batata.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mrochadh/frontend1/3b519b23aa9104a4a916f260eb6b8145f80b37ea/aula22/final/img/batata.jpg
--------------------------------------------------------------------------------
/aula22/final/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Media Queries
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
20 |
21 | Related Links
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/aula22/inicial/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | border: 0;
5 | box-sizing: border-box;
6 | font-family: sans-serif;
7 | font-size: medium;
8 | font-weight: bold;
9 | }
10 |
11 | /* mobile first - container flex vertical */
12 | .container {
13 | color: #A0ACAD;
14 |
15 | }
16 |
17 | header {
18 | background-color: #33032f;
19 | padding: 10px;
20 | }
21 |
22 | aside {
23 | background-color: #531253;
24 | padding: 10px;
25 | }
26 |
27 | main {
28 | background-color: #A0ACAD;
29 | color: #33032f;
30 | padding: 10px;
31 |
32 | }
33 |
34 | img {
35 | width: 70%;
36 | }
37 |
38 | div {
39 | padding: 10px;
40 | }
41 |
42 | footer {
43 | background-color: #33032F;
44 | padding: 10px;
45 | }
46 |
47 | .center {
48 | display: flex;
49 | align-items: center;
50 | justify-content: center;
51 | }
52 |
53 | /* estilos a serem aplicados para telas maiores*/
54 |
55 | @media (min-width: 769px) and (orientation: portrait) {
56 |
57 |
58 |
59 | }
60 |
61 |
62 | @media only screen and (min-width: 1281px) {
63 |
64 |
65 | }
--------------------------------------------------------------------------------
/aula22/inicial/img/batata.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mrochadh/frontend1/3b519b23aa9104a4a916f260eb6b8145f80b37ea/aula22/inicial/img/batata.jpg
--------------------------------------------------------------------------------
/aula22/inicial/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Media Queries
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
20 |
21 | Related Links
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/aula23/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | border: 0;
4 | margin: 0;
5 | box-sizing: border-box;
6 | font-family: sans-serif;
7 | }
8 |
9 | body {
10 | padding: 20px;
11 | }
12 |
13 | html {
14 | font-size: 1rem;
15 | }
16 |
17 | /*medida relativa que vai usar o elemento pai como referência*/
18 | .container-em {
19 | border: 5px solid coral;
20 | margin: 20px 0;
21 | width: 600px;
22 | font-size: 2em;
23 | }
24 |
25 | .item-em {
26 | margin-top: 20px;
27 | border: 5px solid crimson;
28 | width: 70%;
29 | font-size: 2em;
30 | }
31 |
32 | /*medida relativa que vai usar o elemento raiz (html) como referência*/
33 | .container-rem {
34 | border: 5px solid coral;
35 | margin: 20px 0;
36 | width: 600px;
37 | font-size: 1.5rem;
38 | padding: 30px;
39 | }
40 |
41 | .item-rem {
42 | margin-top: 20px;
43 | border: 5px solid crimson;
44 | width: 70%;
45 | font-size: 1.5rem;
46 | line-height: 4rem;
47 | padding: 1rem;
48 | }
49 |
--------------------------------------------------------------------------------
/aula23/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Medidas relativas
10 |
11 |
12 |
13 | em
14 |
15 |
16 | Container
17 |
18 | Item
19 |
20 |
rem
23 |
24 |
25 | Container
26 |
27 | Item
28 |
29 |
Hello, Bootstrap!
14 |
15 |
16 |
17 |
18 |
19 |
20 |
Navbar
21 |
22 |
24 |
32 |
34 |
35 |
36 |
37 |
Heading
38 |
Subheading
39 |
Call to action
40 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
Item 1
50 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam rerum optio at voluptatum error, corrupti?
51 |
52 |
53 |
Item 2
54 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam rerum optio at voluptatum error, corrupti?
55 |
56 |
57 |
Item 3
58 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam rerum optio at voluptatum error, corrupti?
59 |
60 |
61 |
62 |
63 |
64 |
Item 4
65 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam rerum optio at voluptatum error, corrupti?
66 |
67 |
68 |
Item 5
69 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam rerum optio at voluptatum error, corrupti?
70 |
71 |
72 |
Item 6
73 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam rerum optio at voluptatum error, corrupti?
74 |
75 |
76 |
77 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
93 |
94 |
95 |
--------------------------------------------------------------------------------
/aula25/inicial/css/style.css:
--------------------------------------------------------------------------------
1 | .my-bg-brown {
2 | background-color: brown;
3 | }
4 |
5 | .my-bg-brown a {
6 | color: white;
7 | }
8 |
9 | .my-15vh {
10 | height: 15vh;
11 | }
12 |
13 | .my-85vh {
14 | height: 85vh;
15 | }
--------------------------------------------------------------------------------
/aula25/inicial/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Hello, Bootstrap!
14 |
15 |
16 |
17 |
18 |
19 |
Navbar
20 |
21 |
23 |
39 |
41 |
42 |
43 |
44 |
Heading
45 |
Subheading
46 |
Call to action
47 |
50 |
51 |
52 |
53 |
54 |
55 |
59 |
60 |
61 |
62 |
63 |
First slide label
64 |
Some representative placeholder content for the first slide.
65 |
66 |
67 |
68 |
69 |
70 |
Second slide label
71 |
Some representative placeholder content for the second slide.
72 |
73 |
74 |
75 |
76 |
77 |
Third slide label
78 |
Some representative placeholder content for the third slide.
79 |
80 |
81 |
82 |
83 | Previous
85 |
86 |
87 | Next
89 |
90 |
91 |
92 |
93 |
94 |
95 |
Item 1
96 |
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis dicta cum et voluptate rerum sit laudantium vitae facilis tenetur. Saepe qui pariatur maiores impedit assumenda consequatur itaque ut inventore quia.
97 |
98 |
99 |
Item 2
100 |
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis dicta cum et voluptate rerum sit laudantium vitae facilis tenetur. Saepe qui pariatur maiores impedit assumenda consequatur itaque ut inventore quia.
101 |
102 |
103 |
Item 3
104 |
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis dicta cum et voluptate rerum sit laudantium vitae facilis tenetur. Saepe qui pariatur maiores impedit assumenda consequatur itaque ut inventore quia.
105 |
106 |
107 |
108 |
109 |
110 |
Item 4
111 |
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis dicta cum et voluptate rerum sit laudantium vitae facilis tenetur. Saepe qui pariatur maiores impedit assumenda consequatur itaque ut inventore quia.
112 |
113 |
114 |
Item 5
115 |
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis dicta cum et voluptate rerum sit laudantium vitae facilis tenetur. Saepe qui pariatur maiores impedit assumenda consequatur itaque ut inventore quia.
116 |
117 |
118 |
119 |
120 |
Sass
11 |
12 |
13 |
14 |
15 | Sass compila com alegria!
16 |
17 |
18 |
19 | Salvando vidas de front-end devs
20 |
21 | Você nem poderia imaginar
22 |
23 | Uma mensagem com extend
24 |
25 | Uma mensagem com mixin
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/aula26/partials/scss/_base.scss:
--------------------------------------------------------------------------------
1 | // variáveis, tipografia, mixin
2 |
3 | @import url('http://fonts.googleapis.com/css?family=Open+Sans:300,600,900');
4 |
5 | $primary-color: rgb(54, 70, 161);
6 | $info-color: rgba(92, 104, 170, 0.986);
7 | $alert-color: rgb(248, 97, 9);
8 | $success-color: green;
9 |
10 | $sans-serif: 'Open Sans', sans-serif;
11 |
12 | * {
13 | margin: 0;
14 | padding: 0;
15 | border: 0;
16 | box-sizing: border-box;
17 | }
18 |
19 | h2 {
20 | color: $primary-color;
21 | }
22 |
23 | h3 {
24 | border: 2px solid $primary-color;
25 | }
26 |
27 | // extend
28 |
29 | %message-shared {
30 | height: 300px;
31 | width: 300px;
32 | border: 3px solid black;
33 | border-radius: 0.8rem;
34 | padding: 0.5rem;
35 | }
36 |
37 |
38 | // mixin
39 |
40 |
41 | @mixin theme($theme-color: grey) {
42 | background-color: rgba($theme-color, 0.5);
43 | border: 3px solid $theme-color;
44 | border-radius: 1rem;
45 | }
46 |
47 | @mixin box($width: 700px, $height: 100px) {
48 | height: $height;
49 | width: $width;
50 | padding: 1rem;
51 | margin: 1rem 0;
52 | }
53 |
--------------------------------------------------------------------------------
/aula26/partials/scss/_components.scss:
--------------------------------------------------------------------------------
1 | // componentes reutilizáveis
2 |
3 | @use 'base';
4 |
5 | .message {
6 | @extend %message-shared;
7 | }
8 |
9 | .info {
10 | @extend %message-shared;
11 | border-color: base.$info-color;
12 | }
13 |
14 | .alert {
15 | @extend %message-shared;
16 | border-color: base.$alert-color;
17 | }
18 |
19 | .success {
20 | @include base.box();
21 | @include base.theme(green);
22 | }
--------------------------------------------------------------------------------
/aula26/partials/scss/_layout.scss:
--------------------------------------------------------------------------------
1 | // cabeçalho, navegação, containers, grids, footer
2 |
3 | @use 'base';
4 |
5 | header {
6 | height: 10vh;
7 | background-color: base.$primary-color;
8 | h1 {
9 | font-family: base.$sans-serif;
10 | color: white;
11 | }
12 | }
--------------------------------------------------------------------------------
/aula26/partials/scss/style.css:
--------------------------------------------------------------------------------
1 | @import url("http://fonts.googleapis.com/css?family=Open+Sans:300,600,900");
2 | * {
3 | margin: 0;
4 | padding: 0;
5 | border: 0;
6 | box-sizing: border-box;
7 | }
8 |
9 | h2 {
10 | color: #3646a1;
11 | }
12 |
13 | h3 {
14 | border: 2px solid #3646a1;
15 | }
16 |
17 | .message, .info, .alert {
18 | height: 300px;
19 | width: 300px;
20 | border: 3px solid black;
21 | border-radius: 0.8rem;
22 | padding: 0.5rem;
23 | }
24 |
25 | .info {
26 | border-color: rgba(92, 104, 170, 0.986);
27 | }
28 |
29 | .alert {
30 | border-color: #f86109;
31 | }
32 |
33 | .success {
34 | height: 100px;
35 | width: 700px;
36 | padding: 1rem;
37 | margin: 1rem 0;
38 | background-color: rgba(0, 128, 0, 0.5);
39 | border: 3px solid green;
40 | border-radius: 1rem;
41 | }
42 |
43 | header {
44 | height: 10vh;
45 | background-color: #3646a1;
46 | }
47 | header h1 {
48 | font-family: "Open Sans", sans-serif;
49 | color: white;
50 | }/*# sourceMappingURL=style.css.map */
--------------------------------------------------------------------------------
/aula26/partials/scss/style.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["_base.scss","style.scss","_components.scss","_layout.scss"],"names":[],"mappings":"AAEQ,2EAAA;AASR;EACE,SAAA;EACA,UAAA;EACA,SAAA;EACA,sBAAA;ACTF;;ADYA;EACE,cAfc;ACMhB;;ADYA;EACE,yBAAA;ACTF;;ADcA;EACE,aAAA;EACA,YAAA;EACA,uBAAA;EACA,qBAAA;EACA,eAAA;ACXF;;ACdA;EAEE,uCFLW;ACqBb;;ACbA;EAEE,qBFTY;ACwBd;;ACZA;EF6BE,aADiC;EAEjC,YAFiB;EAGjB,aAAA;EACA,cAAA;EATA,sCAAA;EACA,uBAAA;EACA,mBAAA;ACHF;;AEpCA;EACE,YAAA;EACA,yBHFc;ACyChB;AEtCE;EACE,oCHCS;EGAT,YAAA;AFwCJ","file":"style.css"}
--------------------------------------------------------------------------------
/aula26/partials/scss/style.scss:
--------------------------------------------------------------------------------
1 | @use 'base';
2 |
3 | @use 'components';
4 |
5 | @use 'layout';
6 |
7 | // MAIS NADA AQUI!
8 |
--------------------------------------------------------------------------------
/aula26/sass/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "liveServer.settings.port": 5501
3 | }
--------------------------------------------------------------------------------
/aula26/sass/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Sass
11 |
12 |
13 |
14 |
15 | Sass compila com alegria!
16 |
17 |
18 |
19 | Sass
20 |
21 | Salvando vidas de front-end devs
22 |
23 | Você nem poderia imaginar
24 |
25 | Uma mensagem info com extend
26 |
27 | Outra mensagem alert com extend
28 |
29 | Uma mensagem com mixin
30 |
31 | Outra mensagem com mixin
32 |
33 |
34 |
--------------------------------------------------------------------------------
/aula26/sass/scss/style.css:
--------------------------------------------------------------------------------
1 | @import url("http://fonts.googleapis.com/css?family=Open+Sans:300,600,900");
2 | body {
3 | font-family: "Open Sans", sans-serif;
4 | }
5 |
6 | header {
7 | height: 15vh;
8 | background-color: #5526c5;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | }
13 | header h1 {
14 | color: white;
15 | }
16 |
17 | h2 {
18 | color: #5526c5;
19 | }
20 |
21 | h3 {
22 | border: 3px solid #5526c5;
23 | padding: 0.7rem;
24 | }
25 |
26 | .alert, .info {
27 | height: 300px;
28 | width: 300px;
29 | padding: 0.5rem;
30 | margin: 0.5rem 0;
31 | border: 3px solid black;
32 | border-radius: 0.5rem;
33 | }
34 |
35 | .info {
36 | border-color: #7a26da;
37 | color: #7a26da;
38 | }
39 |
40 | .alert {
41 | border-color: #e6671d;
42 | color: #7a26da;
43 | }
44 |
45 | .success {
46 | height: 100px;
47 | width: 600px;
48 | padding: 0.5rem;
49 | margin: 0.5rem 0;
50 | border: 3px solid black;
51 | border-radius: 0.5rem;
52 | font-weight: bold;
53 | background-color: rgba(0, 128, 0, 0.5);
54 | border-color: green;
55 | color: green;
56 | }
57 |
58 | .alert-sm {
59 | height: 400px;
60 | width: 400px;
61 | padding: 0.5rem;
62 | margin: 0.5rem 0;
63 | border: 3px solid black;
64 | border-radius: 0.5rem;
65 | font-weight: bold;
66 | background-color: rgba(230, 103, 29, 0.5);
67 | border-color: #e6671d;
68 | color: #e6671d;
69 | }/*# sourceMappingURL=style.css.map */
--------------------------------------------------------------------------------
/aula26/sass/scss/style.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["style.scss"],"names":[],"mappings":"AAEQ,2EAAA;AAUR;EACE,oCAHW;AAPb;;AAcA;EACE,YAAA;EACA,yBAdc;EAed,aAAA;EACA,uBAAA;EACA,mBAAA;AAXF;AAYE;EACE,YAAA;AAVJ;;AAeA;EACE,cAzBc;AAahB;;AAeA;EACE,yBAAA;EACA,eAAA;AAZF;;AAmBA;EACE,aAAA;EACA,YAAA;EACA,eAAA;EACA,gBAAA;EACA,uBAAA;EACA,qBAAA;AAhBF;;AAmBA;EAEE,qBA/CW;EAgDX,cAhDW;AA+Bb;;AAoBA;EAEE,qBApDY;EAqDZ,cAtDW;AAoCb;;AAyCA;EAfE,aAgBa;EAfb,YAeoB;EAdpB,eAAA;EACA,gBAAA;EACA,uBAAA;EACA,qBAAA;EACA,iBAAA;EAIA,sCAAA;EACA,mBAvEc;EAwEd,YAxEc;AA+ChB;;AAiCA;EApBE,aADkB;EAElB,YAFiC;EAGjC,eAAA;EACA,gBAAA;EACA,uBAAA;EACA,qBAAA;EACA,iBAAA;EAIA,yCAAA;EACA,qBAxEY;EAyEZ,cAzEY;AA6Dd","file":"style.css"}
--------------------------------------------------------------------------------
/aula26/sass/scss/style.scss:
--------------------------------------------------------------------------------
1 | // variaveis
2 |
3 | @import url('http://fonts.googleapis.com/css?family=Open+Sans:300,600,900');
4 |
5 | // variáveis globais
6 | $primary-color: rgb(85, 38, 197);
7 | $info-color: rgb(122, 38, 218);
8 | $alert-color: rgb(230, 103, 29);
9 | $success-color: green;
10 |
11 | $sans-serif: 'Open Sans', sans-serif;
12 |
13 | body {
14 | font-family: $sans-serif;
15 | }
16 |
17 | // nesting
18 | header {
19 | height: 15vh;
20 | background-color: $primary-color;
21 | display: flex;
22 | justify-content: center;
23 | align-items: center;
24 | h1 {
25 | color: white;
26 | }
27 | }
28 |
29 |
30 | h2 {
31 | color: $primary-color;
32 | }
33 |
34 | h3 {
35 | border: 3px solid $primary-color;
36 | padding: 0.7rem;
37 |
38 | }
39 |
40 | // extends
41 |
42 | // classe mãe (a ser extendida) - propriedades comuns a serem herdadas pelas classes "filhas"
43 | %message-box {
44 | height: 300px;
45 | width: 300px;
46 | padding: 0.5rem;
47 | margin: 0.5rem 0;
48 | border: 3px solid black;
49 | border-radius: 0.5rem;
50 | }
51 |
52 | .info {
53 | @extend %message-box;
54 | border-color: $info-color;
55 | color: $info-color
56 | }
57 |
58 | .alert {
59 | @extend %message-box;
60 | border-color: $alert-color;
61 | color: $info-color;
62 | }
63 |
64 |
65 |
66 | // mixin
67 |
68 | @mixin box($height: 400px, $width: 400px) {
69 | height: $height;
70 | width: $width;
71 | padding: 0.5rem;
72 | margin: 0.5rem 0;
73 | border: 3px solid black;
74 | border-radius: 0.5rem;
75 | font-weight: bold;
76 | }
77 |
78 | @mixin box-color($color) {
79 | background-color: rgba($color, 0.5);
80 | border-color: $color;
81 | color: $color;
82 | }
83 |
84 | .success {
85 | @include box(100px, 600px);
86 | @include box-color($success-color);
87 | }
88 |
89 | .alert-sm {
90 | @include box();
91 | @include box-color($alert-color);
92 | }
93 |
94 |
95 |
--------------------------------------------------------------------------------
/aula3/index.html:
--------------------------------------------------------------------------------
1 | Um título
2 |
3 | Mussum Ipsum, cacilds vidis litro abertis. Nec orci ornare consequat. Praesent lacinia ultrices consectetur. Sed non ipsum felis. Diuretics paradis num copo é motivis de denguis. Quem num gosta di mé, boa gentis num é. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
4 |
5 | Mais vale um bebadis conhecidiss, que um alcoolatra anonimis. Mauris nec dolor in eros commodo tempor. Aenean aliquam molestie leo, vitae iaculis nisl. Quem manda na minha terra sou euzis! A ordem dos tratores não altera o pão duris.
--------------------------------------------------------------------------------
/aula4/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Minha primeira página
6 |
7 |
8 | Bolo de Cenoura
9 |
10 | Tal qual conhecemos...
11 |
12 | Ingredientes da massa
13 | Ingredientes da massa
14 |
15 |
--------------------------------------------------------------------------------
/aula5/img/bolo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mrochadh/frontend1/3b519b23aa9104a4a916f260eb6b8145f80b37ea/aula5/img/bolo.png
--------------------------------------------------------------------------------
/aula5/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
8 |
9 |
10 | Bolo de cenoura
11 |
12 |
13 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis consectetur atque accusamus molestias tenetur vel labore aliquid nulla nostrum veniam, quasi magni possimus ullam corrupti eveniet vitae tempora assumenda nihil.
14 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis consectetur atque accusamus molestias tenetur vel labore aliquid nulla nostrum veniam, quasi magni possimus ullam corrupti eveniet vitae tempora assumenda nihil.
15 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis consectetur atque accusamus molestias tenetur vel labore aliquid nulla nostrum veniam, quasi magni possimus ullam corrupti eveniet vitae tempora assumenda nihil.
16 |
17 |
18 |
19 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. In quo repudiandae aperiam fuga voluptates nobis nostrum autem, minima suscipit reprehenderit cum omnis quam labore dolorum molestiae illo ratione hic aliquam!
20 |
21 |
22 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor quia quos , numquam dolores iusto eum assumenda quis odit corrupti. Fugiat suscipit magni autem nisi quisquam unde, eligendi numquam quo sequi?
23 |
24 |
27 | item ordenado
28 | outro item
29 | mais um item
30 |
31 |
32 |
33 | item ordenado com letrinhas
34 | outro item
35 | mais um item
36 |
37 |
38 |
39 | item sem ordenação
40 | outro item
41 | mais um
42 |
43 |
44 |
--------------------------------------------------------------------------------
/aula6/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Bolo de cenoura
8 |
9 |
10 | Bolo de cenoura
11 |
12 | O mais queridinho do Brasil Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus magni exercitationem commodi error aliquam officia saepe recusandae neque amet omnis culpa porro, fugiat cupiditate laborum. Voluptatum dicta voluptates nisi consequuntur.
16 |
17 | Veja a receita nesta mesma aba
22 |
23 | Veja a receita em outra aba
24 |
25 |
26 |
--------------------------------------------------------------------------------
/aula7/css/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | color: red;
3 | }
4 |
5 | body {
6 | color: blue;
7 | font-family: Arial, Helvetica, sans-serif;
8 | }
9 |
10 | header {
11 | color: yellowgreen;
12 | }
13 |
14 | .job-title {
15 | background-color: aqua;
16 | }
17 |
18 | p {
19 | background-color: brown;
20 | }
21 |
22 | #high {
23 | background-color: coral;
24 | }
25 |
26 | footer {
27 | background-color: darkcyan;
28 | }
29 |
30 | a {
31 | background-color: blueviolet;
32 | }
--------------------------------------------------------------------------------
/aula7/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Jane Doe
7 |
12 | Jane Doe
13 | Web Developer
14 |
15 |
16 |
17 | Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
18 | there live the blind texts. Separated they live in Bookmarksgrove right at the coast of
19 | the Semantics, a large language ocean. A small river named Duden flows by their place and
20 | supplies it with the necessary regelialia.
21 | Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
22 | there live the blind texts. Separated they live in Bookmarksgrove right at the coast of
23 | the Semantics, a large language ocean. A small river named Duden flows by their place and
24 | supplies it with the necessary regelialia.
25 |
26 | Highlights
27 |
28 | A small river named Duden flows by their place and supplies it with the necessary regelialia.
29 | It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
30 | A small river named Duden flows by their place and supplies it with the necessary regelialia.
31 | It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
32 | A small river named Duden flows by their place and supplies it with the necessary regelialia.
33 | It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
34 |
35 |
36 |
37 | Contact information
38 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/aula8/css/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
2 |
3 | /* background color, image, position, size, repeat, attachment */
4 |
5 | body {
6 | background-color: rgb(47, 41, 41);
7 | font-family: 'Roboto', sans-serif;
8 | }
9 |
10 | .media-picture {
11 | background-image: url(https://images.unsplash.com/photo-1585230458757-fa6f6e3760e4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80);
12 | background-repeat: no-repeat;
13 | background-position: center;
14 | height: 400px;
15 | background-size: cover;
16 | }
--------------------------------------------------------------------------------
/aula8/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Review
9 |
10 |
11 |
12 |
13 |
Review Vingadores
14 |
15 |
16 | Nota: 8/10
17 |
18 | Sobre o Filme
19 |
20 |
21 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
22 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
23 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
24 | sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
25 |
26 |
27 | Críticas
28 |
29 |
30 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
31 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
32 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
33 | sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
34 |
35 |
36 | Assista ao trailer
37 |
38 |
39 |
--------------------------------------------------------------------------------
/aula9/css/reset.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | border: 0;
5 | }
6 |
7 |
--------------------------------------------------------------------------------
/aula9/css/style.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | background-color: aqua;
3 | color: white;
4 | padding: 40px;
5 | }
6 |
7 | #titulo {
8 | background-color: aqua;
9 | color: white;
10 | }
11 |
12 |
13 |
--------------------------------------------------------------------------------
/aula9/css/style2.css:
--------------------------------------------------------------------------------
1 | #titulo {
2 | color: red;
3 | }
--------------------------------------------------------------------------------
/aula9/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Document
10 |
11 | Um título
27 |
28 | Outro título
29 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/aula9/login.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Document
9 |
10 | Um título
19 |
20 | Outro título
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/aulas1314/css/style.css:
--------------------------------------------------------------------------------
1 | fieldset {
2 | margin: 5%;
3 | border: 2px violet solid;
4 | border-radius: 20px;
5 | padding: 20px;
6 | position: relative;
7 | }
8 |
9 | legend {
10 | background-color: rgb(255, 255, 255);
11 | color: blueviolet;
12 | font-size: 30px;
13 | padding: 10px;
14 | position: absolute; /* reposiciona a tag em relação ao body OU ao ancestral posicionado mais próximo */
15 | top: -30px;
16 | }
17 |
18 | h1, div {
19 | margin: 20px;
20 | }
21 |
22 | button {
23 | padding: 10px;
24 | margin: 10px;
25 | background-color: blueviolet;
26 | color: white;
27 | font-size: 20px;
28 | border: 0;
29 | border-radius: 30px;
30 | }
31 |
32 | #buttons {
33 | text-align: center;
34 | }
--------------------------------------------------------------------------------
/aulas1314/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Formulários
9 |
10 |
11 |
12 |
83 |
84 |
85 |
86 |
--------------------------------------------------------------------------------
17 |
18 |
19 |
--------------------------------------------------------------------------------
/aula19/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | border: 0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | }
7 |
8 | body {
9 | background-color: rgba(0, 0, 0, 0.9);
10 | font-family: sans-serif;
11 | color: white;
12 | }
13 |
14 | /* container flex */
15 | header {
16 | height: 25vh;
17 | background-color: black;
18 | /* a difícil missão centralizar horizontal e verticalmente */
19 | display: flex;
20 | justify-content: center;
21 | align-items: center;
22 | flex-direction: column;
23 | }
24 |
25 | nav {
26 | background-color: aliceblue;
27 | }
28 |
29 |
30 | nav ul {
31 | list-style-type: none;
32 | /*vai virar um flexbox*/
33 | display: flex;
34 | /* podemos justificar o conteúdo */
35 | /* justify-content: space-evenly; */
36 | }
37 |
38 | .link-especial {
39 | margin-left: auto;
40 | }
41 |
42 | li a {
43 | text-decoration: none;
44 | color: black;
45 | text-align: center;
46 | display: block;
47 | padding: 14px 16px;
48 | }
49 |
50 | li a:hover {
51 | background-color: darkgrey;
52 | font-weight: 700;
53 | }
54 |
55 | main {
56 | max-width: 70%;
57 | margin: 5vh auto;
58 | }
59 |
60 | /* um container flex vertical */
61 | .card {
62 | width: 30%;
63 | height: 40vh;
64 | padding: 5px;
65 | margin: 10px;
66 | background-color: aliceblue;
67 | color: black;
68 | display: flex;
69 | flex-direction: column;
70 | }
71 | /* um item flex do card */
72 | .card-content {
73 | background-color: darkgray;
74 | padding: 5px;
75 | /* o conceito de espaço disponível */
76 | flex-grow: 1; /* configura o item para crescer e ocupar o espaço disponível */
77 | }
78 | /* o outro um item flex do card */
79 | .card-footer {
80 | margin: 5px 0;
81 | font-weight: 700;
82 | }
83 |
84 |
85 | .flex-container {
86 | display: flex;
87 | justify-content: space-around;
88 | gap: 20px;
89 | flex-wrap: wrap;
90 | }
91 |
92 | .item {
93 | height: 300px;
94 | background-color: aliceblue;
95 | color: black;
96 | font-weight: 700;
97 | text-align: center;
98 | border: 1px black solid;
99 | border-radius: 5px;
100 |
101 | /* um item flex também pode ser configurado como container flex*/
102 | display: flex;
103 | align-items: center;
104 | justify-content: center;
105 |
106 | /* configurações do item flex - filha da classe flex-container */
107 | /* tamanho base */
108 | /* flex-basis: 250px; */
109 | /* flex-shrink: 1; */
110 | /* abreviação flex: grow shrink basis*/
111 | flex: 0 0 200px;
112 | }
113 |
114 | .cresce-mais {
115 | /* flex-grow: 2; */
116 | }
117 |
118 | .encolhe-mais {
119 | /* flex-shrink: 2; */
120 | }
121 |
122 |
123 |
124 |
125 |
--------------------------------------------------------------------------------
/aula19/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | 
19 | 
62 | 
25 |
26 | 
13 |
14 |
15 | 
18 |
19 |