├── .gitignore
├── adicionando-aspas-depoimento
├── css
│ ├── base.css
│ ├── bootstrap-grid.min.css
│ ├── componentes.css
│ └── layout.css
├── imagens
│ ├── joao-da-silva.jpg
│ └── logo.png
└── index.html
├── adicionando-bloco-navegacao
├── css
│ ├── base.css
│ ├── bootstrap-grid.min.css
│ ├── componentes.css
│ └── layout.css
├── imagens
│ ├── bars.png
│ ├── joao-da-silva.jpg
│ └── logo.png
└── index.html
├── adicionando-cabecalho
├── css
│ └── estilos.css
├── imagens
│ └── logo.png
└── index.html
├── adicionando-chamada-principal
├── css
│ ├── base.css
│ ├── bootstrap-grid.min.css
│ ├── componentes.css
│ └── layout.css
├── imagens
│ └── logo.png
└── index.html
├── adicionando-depoimento
├── css
│ ├── base.css
│ ├── bootstrap-grid.min.css
│ ├── componentes.css
│ └── layout.css
├── imagens
│ ├── joao-da-silva.jpg
│ └── logo.png
└── index.html
├── adicionando-menu-telas-pequenas
├── css
│ ├── base.css
│ ├── bootstrap-grid.min.css
│ ├── componentes.css
│ └── layout.css
├── imagens
│ ├── bars.png
│ ├── joao-da-silva.jpg
│ └── logo.png
└── index.html
├── adicionando-planos
├── css
│ └── estilos.css
├── imagens
│ └── logo.png
└── index.html
├── adicionando-rodape
├── css
│ ├── base.css
│ ├── bootstrap-grid.min.css
│ ├── componentes.css
│ └── layout.css
├── imagens
│ ├── joao-da-silva.jpg
│ └── logo.png
└── index.html
├── adicionando-rotulo-plano
├── css
│ ├── base.css
│ ├── bootstrap-grid.min.css
│ ├── componentes.css
│ └── layout.css
├── imagens
│ ├── joao-da-silva.jpg
│ └── logo.png
└── index.html
├── agrupando-seletores
├── css
│ └── estilos.css
└── empresa.html
├── ajustando-margem-plano
├── css
│ ├── base.css
│ ├── bootstrap-grid.min.css
│ ├── componentes.css
│ └── layout.css
├── imagens
│ ├── joao-da-silva.jpg
│ └── logo.png
└── index.html
├── ajustando-menu-telas-medias-grandes
├── css
│ ├── base.css
│ ├── bootstrap-grid.min.css
│ ├── componentes.css
│ └── layout.css
├── imagens
│ ├── bars.png
│ ├── joao-da-silva.jpg
│ └── logo.png
└── index.html
├── ajustando-projeto-bem
├── css
│ ├── base.css
│ ├── bootstrap-grid.min.css
│ ├── componentes.css
│ └── layout.css
├── imagens
│ └── logo.png
└── index.html
├── ajustando-projeto-grid-css
├── css
│ ├── bootstrap-grid.min.css
│ └── estilos.css
├── imagens
│ └── logo.png
└── index.html
├── ajustando-projeto-unidades-medida
├── css
│ ├── base.css
│ ├── bootstrap-grid.min.css
│ ├── componentes.css
│ └── layout.css
├── imagens
│ └── logo.png
└── index.html
├── ancoras
├── artigo.html
├── contato.html
└── img
│ └── jrebel.png
├── aplicando-estilos-tabelas
├── css
│ └── estilos.css
└── tabelas.html
├── bordas
├── bordas.html
└── css
│ └── estilos.css
├── box-model
├── box-model.html
└── css
│ └── estilos.css
├── caos-no-css
├── caos.html
└── css
│ └── estilos.css
├── comentarios
└── artigo.html
├── como-usar-bem-na-pratica
├── css
│ ├── exemplo1.css
│ ├── exemplo2.css
│ └── exemplo3.css
├── exemplo1.html
├── exemplo2.html
├── exemplo3a.html
└── exemplo3b.html
├── concluindo-formulario
├── assine.html
├── css
│ ├── base.css
│ ├── bootstrap-grid.min.css
│ ├── componentes.css
│ └── layout.css
├── imagens
│ ├── bars.png
│ ├── joao-da-silva.jpg
│ └── logo.png
├── index.html
└── javascripts
│ └── app.js
├── configurando-planos-lado-a-lado
├── css
│ └── estilos.css
├── imagens
│ └── logo.png
└── index.html
├── cores
├── cores.html
└── css
│ └── estilos.css
├── criando-formulario
├── assine.html
├── css
│ ├── base.css
│ ├── bootstrap-grid.min.css
│ ├── componentes.css
│ └── layout.css
├── imagens
│ ├── bars.png
│ ├── joao-da-silva.jpg
│ └── logo.png
├── index.html
└── javascripts
│ └── app.js
├── criando-um-botao
├── css
│ └── estilos.css
├── imagens
│ └── logo.png
└── index.html
├── css-guidelines
├── css
│ ├── base.css
│ ├── bootstrap-grid.min.css
│ ├── componentes.css
│ └── layout.css
├── imagens
│ └── logo.png
└── index.html
├── doctype-codificacao
└── artigo.html
├── elementos-estruturais
├── artigo.html
└── img
│ └── jrebel.png
├── enfase-importancia-marcacao
└── artigo.html
├── especificidade
├── css
│ ├── exemplo1.css
│ └── exemplo2.css
├── exemplo1.html
└── exemplo2.html
├── estilos-em-arquivos-externos
├── css
│ └── estilos.css
└── empresa.html
├── estilos-incorporados-e-regras-css
└── empresa.html
├── estrutura-basica-do-documento
└── artigo.html
├── flutuando-elementos
├── colunas.html
├── css
│ ├── colunas.css
│ └── imagem.css
├── imagem.html
└── imagens
│ └── duvidas.jpg
├── formatacao-de-textos
├── css
│ └── estilos.css
└── textos.html
├── imagens
├── artigo.html
└── img
│ └── jrebel.png
├── javascript-hook
├── css
│ ├── base.css
│ ├── bootstrap-grid.min.css
│ ├── componentes.css
│ └── layout.css
├── imagens
│ ├── bars.png
│ ├── joao-da-silva.jpg
│ └── logo.png
├── index.html
└── javascripts
│ └── app.js
├── layout-fixo-fluido
├── css
│ ├── estilos.css
│ ├── normalize.css
│ └── reset.css
├── imagens
│ └── logo.png
└── index.html
├── layout-responsivo-media-queries
├── css
│ ├── estilos.css
│ ├── normalize.css
│ └── reset.css
├── imagens
│ └── logo.png
└── index.html
├── listas
├── css
│ └── estilos.css
└── listas.html
├── margin
├── css
│ └── estilos.css
└── margin.html
├── metatag-viewport
├── css
│ └── estilos.css
└── viewport.html
├── o-que-e-css
└── empresa.html
├── padding
├── css
│ └── estilos.css
└── padding.html
├── posicionamento-absoluto
├── css
│ └── estilos.css
└── posicionamento.html
├── posicionamento-estatico-fixo
├── css
│ ├── base.css
│ ├── bootstrap-grid.min.css
│ ├── componentes.css
│ └── layout.css
├── imagens
│ ├── joao-da-silva.jpg
│ └── logo.png
└── index.html
├── posicionamento-relativo
├── css
│ └── estilos.css
└── posicionamento.html
├── preparando-projeto
├── css
│ └── estilos.css
├── imagens
│ └── logo.png
└── index.html
├── primeiras-tags
└── artigo.html
├── propriedade-display
├── css
│ └── estilos.css
└── display.html
├── pseudo-classes
├── css
│ └── estilos.css
├── imagens
│ └── logo.png
└── index.html
├── pseudo-elementos
├── css
│ └── estilos.css
└── pseudo-elemento.html
├── reset-css-normalizecss
├── css
│ ├── estilos.css
│ ├── normalize.css
│ └── reset.css
├── imagens
│ └── logo.png
└── index.html
├── seletores-de-filhos-diretos
├── css
│ └── estilos.css
└── empresa.html
├── seletores-descendentes
├── css
│ └── estilos.css
└── empresa.html
├── seletores-tipo-classe-id
├── css
│ └── estilos.css
└── empresa.html
├── sistema-de-grid-bootstrap
├── css
│ ├── bootstrap-grid.min.css
│ └── estilos.css
└── grid.html
├── tabelas-html
├── css
│ └── estilos.css
└── tabelas.html
├── unidade-de-medida-percentual
├── css
│ └── percentual.css
└── percentual.html
├── unidade-de-medida-pixel
├── css
│ └── pixel.css
└── pixel.html
└── unidades-de-medida-em-rem
├── css
└── estilos.css
└── exemplo.html
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 |
--------------------------------------------------------------------------------
/adicionando-aspas-depoimento/css/base.css:
--------------------------------------------------------------------------------
1 | html {
2 | font-size: 62.5%; /* 10px */
3 | }
4 |
5 | body {
6 | margin: 0;
7 |
8 | font-family: Arial, Helvetica, sans-serif;
9 | font-size: 1.4rem;
10 | }
--------------------------------------------------------------------------------
/adicionando-aspas-depoimento/css/componentes.css:
--------------------------------------------------------------------------------
1 | /*--------------------*\
2 | PLANO
3 | \*--------------------*/
4 | .plano {
5 | position: relative;
6 |
7 | padding: 10px;
8 | border: 1px solid #95a4a5;
9 |
10 | font-size: 1.4rem; /* 14px */
11 | }
12 |
13 | .plano--mais-popular::after {
14 | position: absolute;
15 | top: -10px;
16 | left: -10px;
17 |
18 | padding: 0 10px;
19 |
20 | background-color: #c20303;
21 | color: #fff;
22 |
23 | font-size: 0.7142em; /* 10px */
24 | line-height: 2.5;
25 |
26 | content: "MAIS POPULAR";
27 | }
28 |
29 | .plano__cabecalho {
30 | margin: -10px;
31 | margin-bottom: 0;
32 |
33 | background-color: #95a4a5;
34 | color: #fff;
35 |
36 | text-align: center;
37 | line-height: 2.5;
38 | font-weight: normal;
39 | font-size: 2em;
40 | }
41 |
42 | .plano__preco {
43 | margin: 20px 0;
44 |
45 | text-align: center;
46 | font-size: 2em;
47 | }
48 |
49 | .plano__caracteristicas {
50 | padding: 0;
51 | margin: 20px 0;
52 |
53 | font-size: 1em;
54 |
55 | list-style: none;
56 | }
57 |
58 | .plano__caracteristicas > li {
59 | text-align: center;
60 | }
61 |
62 | .plano__rodape {
63 | text-align: center;
64 | }
65 |
66 |
67 | /*--------------------*\
68 | BOTAO
69 | \*--------------------*/
70 | .botao {
71 | display: inline-block;
72 | padding: 0.8em 1.2em;
73 |
74 | background-color: #bbb;
75 | color: #fff;
76 |
77 | font-size: 1em;
78 | text-decoration: none;
79 | }
80 |
81 | .botao:hover, .botao:focus {
82 | background-color: #aaa;
83 | color: #fff;
84 |
85 | text-decoration: none;
86 | }
87 |
88 | .botao--assinar {
89 | background-color: #127d00;
90 | }
91 |
92 | .botao--assinar:hover, .botao--assinar:focus {
93 | background-color: #0e6400;
94 | }
95 |
96 | .botao--principal {
97 | border-radius: 10px;
98 |
99 | background-color: #004b86;
100 | }
101 |
102 | .botao--principal:hover, .botao--principal:focus {
103 | background-color: #003b6a;
104 | }
105 |
106 |
107 | /*--------------------*\
108 | CHAMADA
109 | \*--------------------*/
110 | .chamada {
111 | font-size: 1.6rem; /* 1.6 * 10px = 16px */
112 | text-align: center;
113 | }
114 |
115 | .chamada__titulo {
116 | margin: 0;
117 |
118 | color: #fff;
119 |
120 | font-size: 3.375em; /* 54px / 16px = 3.375 */
121 | line-height: 0.9;
122 | text-shadow: 1px 1px #313131;
123 | }
124 |
125 | .chamada__subtitulo {
126 | margin: 60px 0;
127 |
128 | color: #fff;
129 |
130 | font-size: 1em;
131 | }
132 |
133 | .chamada__acao {
134 | font-size: 1em;
135 | }
136 |
137 | @media(min-width: 992px) {
138 | .chamada {
139 | padding-left: 10%;
140 | padding-right: 10%;
141 |
142 | font-size: 2.2rem; /* 2.2 * 10px = 22px */
143 | }
144 | }
145 |
146 |
147 | /*--------------------*\
148 | DEPOIMENTO
149 | \*--------------------*/
150 | .depoimento {
151 | font-size: 2.2rem; /* 22px */
152 | }
153 |
154 | @media(min-width: 992px) {
155 | .depoimento {
156 | padding-left: 15%;
157 | padding-right: 15%;
158 |
159 | font-size: 2.8rem;
160 | }
161 | }
162 |
163 | .depoimento > blockquote {
164 | position: relative;
165 |
166 | margin: 0;
167 | padding: 0 60px;
168 |
169 | text-align: center;
170 | font-size: 1em;
171 | }
172 |
173 | .depoimento > blockquote::before {
174 | position: absolute;
175 | left: 0;
176 | top: -0.35em;
177 |
178 | color: #ccc;
179 |
180 | font-size: 8em; /* 176px */
181 |
182 | content: "\201C";
183 | }
184 |
185 | .depoimento__autor {
186 | margin-top: 40px;
187 |
188 | text-align: center;
189 | font-size: 0.7272em;
190 | }
191 |
192 | .depoimento__autor > img {
193 | border-radius: 50%;
194 | }
195 |
196 | .depoimento__autor > p {
197 | margin-top: 10px;
198 | }
199 |
--------------------------------------------------------------------------------
/adicionando-aspas-depoimento/css/layout.css:
--------------------------------------------------------------------------------
1 | .layout-cabecalho {
2 | height: 60px;
3 | border-bottom: 1px solid #ccc;
4 |
5 | background-color: #fff;
6 | }
7 |
8 | .layout-cabecalho--home {
9 | position: fixed;
10 | top: 0;
11 | left: 0;
12 | right: 0;
13 | z-index: 9999;
14 | }
15 |
16 | .layout-cabecalho img {
17 | margin-top: 12px;
18 | }
19 |
20 | .layout-planos {
21 | padding: 80px 0;
22 | }
23 |
24 | .layout-chamada {
25 | padding: 80px 0;
26 | margin-top: 60px;
27 |
28 | background-color: #7ab55c;
29 | }
30 |
31 | .layout-depoimento {
32 | padding: 80px 0;
33 | background-color: #e7e7e7;
34 | }
35 |
36 | .layout-rodape {
37 | padding: 40px 0;
38 |
39 | background-color: #484848;
40 |
41 | color: #fff;
42 | text-align: center;
43 | }
44 |
45 | @media(max-width: 749px) {
46 | .layout-planos .row > div:not(.ultima-coluna) {
47 | margin-bottom: 40px;
48 | }
49 | }
--------------------------------------------------------------------------------
/adicionando-aspas-depoimento/imagens/joao-da-silva.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/adicionando-aspas-depoimento/imagens/joao-da-silva.jpg
--------------------------------------------------------------------------------
/adicionando-aspas-depoimento/imagens/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/adicionando-aspas-depoimento/imagens/logo.png
--------------------------------------------------------------------------------
/adicionando-aspas-depoimento/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | MyPilas
8 |
9 |
17 |
18 |
19 |
21 |
22 |
23 |
24 |
25 |
26 |
As finanças da sua empresa em ordem
27 |
Software de gestão simples e prático para pequenos negócios
28 |
29 |
32 |
33 |
34 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | Eu tinha perdido totalmente o controle da minha empresa.
43 | Depois que comecei a usar o MyPilas, me sinto muito mais organizado e confiante no futuro.
44 |
45 |
46 |
47 |
48 |
João da Silva
49 |
50 |
51 |
52 |
53 |
56 |
57 |
58 |
59 |
60 |
61 | Autônomo
62 | R$59/mês
63 |
64 | Até 2 usuários
65 | 500MB de armazenamentoLançamentos ilimitados
67 | Acesso seguro
68 | Sem fidelidade
69 |
70 |
73 |
74 |
75 |
76 |
77 |
78 |
79 | Micro
80 | R$89/mês
81 |
82 | Até 6 usuários
83 | 1GB de armazenamentoLançamentos ilimitados
85 | Acesso seguro
86 | Sem fidelidade
87 |
88 |
91 |
92 |
93 |
94 |
95 |
96 |
97 | Pequena
98 | R$99/mês
99 |
100 | Até 10 usuários
101 | 5GB de armazenamentoLançamentos ilimitados
103 | Acesso seguro
104 | Sem fidelidade
105 |
106 |
109 |
110 |
111 |
112 |
113 |
114 |
MyPilas
8 |
9 |
17 |
18 |
19 |
20 |
26 |
28 |
29 |
30 |
31 |
32 |
33 |
As finanças da sua empresa em ordem
34 |
Software de gestão simples e prático para pequenos negócios
35 |
36 |
39 |
40 |
41 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | Eu tinha perdido totalmente o controle da minha empresa.
50 | Depois que comecei a usar o MyPilas, me sinto muito mais organizado e confiante no futuro.
51 |
52 |
53 |
54 |
55 |
João da Silva
56 |
57 |
58 |
59 |
60 |
63 |
64 |
65 |
66 |
67 |
68 | Autônomo
69 | R$59/mês
70 |
71 | Até 2 usuários
72 | 500MB de armazenamentoLançamentos ilimitados
74 | Acesso seguro
75 | Sem fidelidade
76 |
77 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | Micro
87 | R$89/mês
88 |
89 | Até 6 usuários
90 | 1GB de armazenamentoLançamentos ilimitados
92 | Acesso seguro
93 | Sem fidelidade
94 |
95 |
98 |
99 |
100 |
101 |
102 |
103 |
104 | Pequena
105 | R$99/mês
106 |
107 | Até 10 usuários
108 | 5GB de armazenamentoLançamentos ilimitados
110 | Acesso seguro
111 | Sem fidelidade
112 |
113 |
116 |
117 |
118 |
119 |
120 |
121 |
MyPilas
7 |
8 |
13 |
14 |
15 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/adicionando-chamada-principal/css/base.css:
--------------------------------------------------------------------------------
1 | html {
2 | font-size: 62.5%; /* 10px */
3 | }
4 |
5 | body {
6 | margin: 0;
7 |
8 | font-family: Arial, Helvetica, sans-serif;
9 | font-size: 1.4rem;
10 | }
--------------------------------------------------------------------------------
/adicionando-chamada-principal/css/componentes.css:
--------------------------------------------------------------------------------
1 | /*--------------------*\
2 | PLANO
3 | \*--------------------*/
4 | .plano {
5 | padding: 10px;
6 | border: 1px solid #95a4a5;
7 |
8 | font-size: 1.4rem; /* 14px */
9 | }
10 |
11 | .plano__cabecalho {
12 | margin: -10px;
13 | margin-bottom: 0;
14 |
15 | background-color: #95a4a5;
16 | color: #fff;
17 |
18 | text-align: center;
19 | line-height: 2.5;
20 | font-weight: normal;
21 | font-size: 2em;
22 | }
23 |
24 | .plano__preco {
25 | margin: 20px 0;
26 |
27 | text-align: center;
28 | font-size: 2em;
29 | }
30 |
31 | .plano__caracteristicas {
32 | padding: 0;
33 | margin: 20px 0;
34 |
35 | font-size: 1em;
36 |
37 | list-style: none;
38 | }
39 |
40 | .plano__caracteristicas > li {
41 | text-align: center;
42 | }
43 |
44 | .plano__rodape {
45 | text-align: center;
46 | }
47 |
48 |
49 | /*--------------------*\
50 | BOTAO
51 | \*--------------------*/
52 | .botao {
53 | display: inline-block;
54 | padding: 0.8em 1.2em;
55 |
56 | background-color: #bbb;
57 | color: #fff;
58 |
59 | font-size: 1em;
60 | text-decoration: none;
61 | }
62 |
63 | .botao:hover, .botao:focus {
64 | background-color: #aaa;
65 | color: #fff;
66 |
67 | text-decoration: none;
68 | }
69 |
70 | .botao--assinar {
71 | background-color: #127d00;
72 | }
73 |
74 | .botao--assinar:hover, .botao--assinar:focus {
75 | background-color: #0e6400;
76 | }
77 |
78 | .botao--principal {
79 | border-radius: 10px;
80 |
81 | background-color: #004b86;
82 | }
83 |
84 | .botao--principal:hover, .botao--principal:focus {
85 | background-color: #003b6a;
86 | }
87 |
88 |
89 | /*--------------------*\
90 | CHAMADA
91 | \*--------------------*/
92 | .chamada {
93 | font-size: 1.6rem; /* 1.6 * 10px = 16px */
94 | text-align: center;
95 | }
96 |
97 | .chamada__titulo {
98 | margin: 0;
99 |
100 | color: #fff;
101 |
102 | font-size: 3.375em; /* 54px / 16px = 3.375 */
103 | line-height: 0.9;
104 | text-shadow: 1px 1px #313131;
105 | }
106 |
107 | .chamada__subtitulo {
108 | margin: 60px 0;
109 |
110 | color: #fff;
111 |
112 | font-size: 1em;
113 | }
114 |
115 | .chamada__acao {
116 | font-size: 1em;
117 | }
118 |
119 | @media(min-width: 992px) {
120 | .chamada {
121 | padding-left: 10%;
122 | padding-right: 10%;
123 |
124 | font-size: 2.2rem; /* 2.2 * 10px = 22px */
125 | }
126 | }
127 |
--------------------------------------------------------------------------------
/adicionando-chamada-principal/css/layout.css:
--------------------------------------------------------------------------------
1 | .layout-cabecalho {
2 | height: 60px;
3 | border-bottom: 1px solid #ccc;
4 | }
5 |
6 | .layout-cabecalho img {
7 | margin-top: 12px;
8 | }
9 |
10 | .layout-planos {
11 | padding: 80px 0;
12 | }
13 |
14 | .layout-chamada {
15 | padding: 80px 0;
16 |
17 | background-color: #7ab55c;
18 | }
--------------------------------------------------------------------------------
/adicionando-chamada-principal/imagens/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/adicionando-chamada-principal/imagens/logo.png
--------------------------------------------------------------------------------
/adicionando-chamada-principal/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | MyPilas
8 |
9 |
17 |
18 |
19 |
21 |
22 |
23 |
24 |
25 |
26 |
As finanças da sua empresa em ordem
27 |
Software de gestão simples e prático para pequenos negócios
28 |
29 |
32 |
33 |
34 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 | Autônomo
44 | R$59/mês
45 |
46 | Até 2 usuários
47 | 500MB de armazenamentoLançamentos ilimitados
49 | Acesso seguro
50 | Sem fidelidade
51 |
52 |
55 |
56 |
57 |
58 |
59 |
60 |
61 | Micro
62 | R$89/mês
63 |
64 | Até 6 usuários
65 | 1GB de armazenamentoLançamentos ilimitados
67 | Acesso seguro
68 | Sem fidelidade
69 |
70 |
73 |
74 |
75 |
76 |
77 |
78 |
79 | Pequena
80 | R$99/mês
81 |
82 | Até 10 usuários
83 | 5GB de armazenamentoLançamentos ilimitados
85 | Acesso seguro
86 | Sem fidelidade
87 |
88 |
91 |
92 |
93 |
94 |
95 |
96 |
MyPilas
8 |
9 |
17 |
18 |
19 |
21 |
22 |
23 |
24 |
25 |
26 |
As finanças da sua empresa em ordem
27 |
Software de gestão simples e prático para pequenos negócios
28 |
29 |
32 |
33 |
34 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | Eu tinha perdido totalmente o controle da minha empresa.
43 | Depois que comecei a usar o MyPilas, me sinto muito mais organizado e confiante no futuro.
44 |
45 |
46 |
47 |
48 |
João da Silva
49 |
50 |
51 |
52 |
53 |
56 |
57 |
58 |
59 |
60 |
61 | Autônomo
62 | R$59/mês
63 |
64 | Até 2 usuários
65 | 500MB de armazenamentoLançamentos ilimitados
67 | Acesso seguro
68 | Sem fidelidade
69 |
70 |
73 |
74 |
75 |
76 |
77 |
78 |
79 | Micro
80 | R$89/mês
81 |
82 | Até 6 usuários
83 | 1GB de armazenamentoLançamentos ilimitados
85 | Acesso seguro
86 | Sem fidelidade
87 |
88 |
91 |
92 |
93 |
94 |
95 |
96 |
97 | Pequena
98 | R$99/mês
99 |
100 | Até 10 usuários
101 | 5GB de armazenamentoLançamentos ilimitados
103 | Acesso seguro
104 | Sem fidelidade
105 |
106 |
109 |
110 |
111 |
112 |
113 |
114 |
MyPilas
7 |
8 |
13 |
14 |
15 |
17 |
18 |
19 |
20 |
21 | Autônomo
22 | R$59/mês
23 |
24 | Até 2 usuários
25 | 500MB de armazenamentoLançamentos ilimitados
27 | Acesso seguro
28 | Sem fidelidade
29 |
30 |
33 |
34 |
35 |
36 | Micro
37 | R$89/mês
38 |
39 | Até 6 usuários
40 | 1GB de armazenamentoLançamentos ilimitados
42 | Acesso seguro
43 | Sem fidelidade
44 |
45 |
48 |
49 |
50 |
51 | Pequena
52 | R$99/mês
53 |
54 | Até 10 usuários
55 | 5GB de armazenamentoLançamentos ilimitados
57 | Acesso seguro
58 | Sem fidelidade
59 |
60 |
63 |
64 |
65 |
MyPilas
8 |
9 |
17 |
18 |
19 |
21 |
22 |
23 |
24 |
25 |
26 |
As finanças da sua empresa em ordem
27 |
Software de gestão simples e prático para pequenos negócios
28 |
29 |
32 |
33 |
34 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | Eu tinha perdido totalmente o controle da minha empresa.
43 | Depois que comecei a usar o MyPilas, me sinto muito mais organizado e confiante no futuro.
44 |
45 |
46 |
47 |
48 |
João da Silva
49 |
50 |
51 |
52 |
53 |
56 |
57 |
58 |
59 |
60 |
61 | Autônomo
62 | R$59/mês
63 |
64 | Até 2 usuários
65 | 500MB de armazenamentoLançamentos ilimitados
67 | Acesso seguro
68 | Sem fidelidade
69 |
70 |
73 |
74 |
75 |
76 |
77 |
78 |
79 | Micro
80 | R$89/mês
81 |
82 | Até 6 usuários
83 | 1GB de armazenamentoLançamentos ilimitados
85 | Acesso seguro
86 | Sem fidelidade
87 |
88 |
91 |
92 |
93 |
94 |
95 |
96 |
97 | Pequena
98 | R$99/mês
99 |
100 | Até 10 usuários
101 | 5GB de armazenamentoLançamentos ilimitados
103 | Acesso seguro
104 | Sem fidelidade
105 |
106 |
109 |
110 |
111 |
112 |
113 |
114 |
MyPilas
8 |
9 |
17 |
18 |
19 |
21 |
22 |
23 |
24 |
25 |
26 |
As finanças da sua empresa em ordem
27 |
Software de gestão simples e prático para pequenos negócios
28 |
29 |
32 |
33 |
34 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | Eu tinha perdido totalmente o controle da minha empresa.
43 | Depois que comecei a usar o MyPilas, me sinto muito mais organizado e confiante no futuro.
44 |
45 |
46 |
47 |
48 |
João da Silva
49 |
50 |
51 |
52 |
53 |
56 |
57 |
58 |
59 |
60 |
61 | Autônomo
62 | R$59/mês
63 |
64 | Até 2 usuários
65 | 500MB de armazenamentoLançamentos ilimitados
67 | Acesso seguro
68 | Sem fidelidade
69 |
70 |
73 |
74 |
75 |
76 |
77 |
78 |
79 | Micro
80 | R$89/mês
81 |
82 | Até 6 usuários
83 | 1GB de armazenamentoLançamentos ilimitados
85 | Acesso seguro
86 | Sem fidelidade
87 |
88 |
91 |
92 |
93 |
94 |
95 |
96 |
97 | Pequena
98 | R$99/mês
99 |
100 | Até 10 usuários
101 | 5GB de armazenamentoLançamentos ilimitados
103 | Acesso seguro
104 | Sem fidelidade
105 |
106 |
109 |
110 |
111 |
112 |
113 |
114 |
Sobre nós
6 |
7 | Sobre a empresa
11 |
12 | Estamos no mercado desde 2014.
13 |
14 | Nossa missão é transformar a vida de milhares de alunos.
15 |
16 |
--------------------------------------------------------------------------------
/ajustando-margem-plano/css/base.css:
--------------------------------------------------------------------------------
1 | html {
2 | font-size: 62.5%; /* 10px */
3 | }
4 |
5 | body {
6 | margin: 0;
7 |
8 | font-family: Arial, Helvetica, sans-serif;
9 | font-size: 1.4rem;
10 | }
--------------------------------------------------------------------------------
/ajustando-margem-plano/css/componentes.css:
--------------------------------------------------------------------------------
1 | /*--------------------*\
2 | PLANO
3 | \*--------------------*/
4 | .plano {
5 | position: relative;
6 |
7 | padding: 10px;
8 | border: 1px solid #95a4a5;
9 |
10 | font-size: 1.4rem; /* 14px */
11 | }
12 |
13 | .plano--mais-popular::after {
14 | position: absolute;
15 | top: -10px;
16 | left: -10px;
17 |
18 | padding: 0 10px;
19 |
20 | background-color: #c20303;
21 | color: #fff;
22 |
23 | font-size: 0.7142em; /* 10px */
24 | line-height: 2.5;
25 |
26 | content: "MAIS POPULAR";
27 | }
28 |
29 | .plano__cabecalho {
30 | margin: -10px;
31 | margin-bottom: 0;
32 |
33 | background-color: #95a4a5;
34 | color: #fff;
35 |
36 | text-align: center;
37 | line-height: 2.5;
38 | font-weight: normal;
39 | font-size: 2em;
40 | }
41 |
42 | .plano__preco {
43 | margin: 20px 0;
44 |
45 | text-align: center;
46 | font-size: 2em;
47 | }
48 |
49 | .plano__caracteristicas {
50 | padding: 0;
51 | margin: 20px 0;
52 |
53 | font-size: 1em;
54 |
55 | list-style: none;
56 | }
57 |
58 | .plano__caracteristicas > li {
59 | text-align: center;
60 | }
61 |
62 | .plano__rodape {
63 | text-align: center;
64 | }
65 |
66 |
67 | /*--------------------*\
68 | BOTAO
69 | \*--------------------*/
70 | .botao {
71 | display: inline-block;
72 | padding: 0.8em 1.2em;
73 |
74 | background-color: #bbb;
75 | color: #fff;
76 |
77 | font-size: 1em;
78 | text-decoration: none;
79 | }
80 |
81 | .botao:hover, .botao:focus {
82 | background-color: #aaa;
83 | color: #fff;
84 |
85 | text-decoration: none;
86 | }
87 |
88 | .botao--assinar {
89 | background-color: #127d00;
90 | }
91 |
92 | .botao--assinar:hover, .botao--assinar:focus {
93 | background-color: #0e6400;
94 | }
95 |
96 | .botao--principal {
97 | border-radius: 10px;
98 |
99 | background-color: #004b86;
100 | }
101 |
102 | .botao--principal:hover, .botao--principal:focus {
103 | background-color: #003b6a;
104 | }
105 |
106 |
107 | /*--------------------*\
108 | CHAMADA
109 | \*--------------------*/
110 | .chamada {
111 | font-size: 1.6rem; /* 1.6 * 10px = 16px */
112 | text-align: center;
113 | }
114 |
115 | .chamada__titulo {
116 | margin: 0;
117 |
118 | color: #fff;
119 |
120 | font-size: 3.375em; /* 54px / 16px = 3.375 */
121 | line-height: 0.9;
122 | text-shadow: 1px 1px #313131;
123 | }
124 |
125 | .chamada__subtitulo {
126 | margin: 60px 0;
127 |
128 | color: #fff;
129 |
130 | font-size: 1em;
131 | }
132 |
133 | .chamada__acao {
134 | font-size: 1em;
135 | }
136 |
137 | @media(min-width: 992px) {
138 | .chamada {
139 | padding-left: 10%;
140 | padding-right: 10%;
141 |
142 | font-size: 2.2rem; /* 2.2 * 10px = 22px */
143 | }
144 | }
145 |
146 |
147 | /*--------------------*\
148 | DEPOIMENTO
149 | \*--------------------*/
150 | .depoimento {
151 | font-size: 2.2rem; /* 22px */
152 | }
153 |
154 | @media(min-width: 992px) {
155 | .depoimento {
156 | padding-left: 15%;
157 | padding-right: 15%;
158 |
159 | font-size: 2.8rem;
160 | }
161 | }
162 |
163 | .depoimento > blockquote {
164 | margin: 0;
165 | padding: 0 60px;
166 |
167 | text-align: center;
168 | font-size: 1em;
169 | }
170 |
171 | .depoimento__autor {
172 | margin-top: 40px;
173 |
174 | text-align: center;
175 | font-size: 0.7272em;
176 | }
177 |
178 | .depoimento__autor > img {
179 | border-radius: 50%;
180 | }
181 |
182 | .depoimento__autor > p {
183 | margin-top: 10px;
184 | }
185 |
--------------------------------------------------------------------------------
/ajustando-margem-plano/css/layout.css:
--------------------------------------------------------------------------------
1 | .layout-cabecalho {
2 | height: 60px;
3 | border-bottom: 1px solid #ccc;
4 |
5 | background-color: #fff;
6 | }
7 |
8 | .layout-cabecalho--home {
9 | position: fixed;
10 | top: 0;
11 | left: 0;
12 | right: 0;
13 | z-index: 9999;
14 | }
15 |
16 | .layout-cabecalho img {
17 | margin-top: 12px;
18 | }
19 |
20 | .layout-planos {
21 | padding: 80px 0;
22 | }
23 |
24 | .layout-chamada {
25 | padding: 80px 0;
26 | margin-top: 60px;
27 |
28 | background-color: #7ab55c;
29 | }
30 |
31 | .layout-depoimento {
32 | padding: 80px 0;
33 | background-color: #e7e7e7;
34 | }
35 |
36 | .layout-rodape {
37 | padding: 40px 0;
38 |
39 | background-color: #484848;
40 |
41 | color: #fff;
42 | text-align: center;
43 | }
44 |
45 | @media(max-width: 749px) {
46 | .layout-planos .row > div:not(.ultima-coluna) {
47 | margin-bottom: 40px;
48 | }
49 | }
--------------------------------------------------------------------------------
/ajustando-margem-plano/imagens/joao-da-silva.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/ajustando-margem-plano/imagens/joao-da-silva.jpg
--------------------------------------------------------------------------------
/ajustando-margem-plano/imagens/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/ajustando-margem-plano/imagens/logo.png
--------------------------------------------------------------------------------
/ajustando-margem-plano/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | MyPilas
8 |
9 |
17 |
18 |
19 |
21 |
22 |
23 |
24 |
25 |
26 |
As finanças da sua empresa em ordem
27 |
Software de gestão simples e prático para pequenos negócios
28 |
29 |
32 |
33 |
34 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | Eu tinha perdido totalmente o controle da minha empresa.
43 | Depois que comecei a usar o MyPilas, me sinto muito mais organizado e confiante no futuro.
44 |
45 |
46 |
47 |
48 |
João da Silva
49 |
50 |
51 |
52 |
53 |
56 |
57 |
58 |
59 |
60 |
61 | Autônomo
62 | R$59/mês
63 |
64 | Até 2 usuários
65 | 500MB de armazenamentoLançamentos ilimitados
67 | Acesso seguro
68 | Sem fidelidade
69 |
70 |
73 |
74 |
75 |
76 |
77 |
78 |
79 | Micro
80 | R$89/mês
81 |
82 | Até 6 usuários
83 | 1GB de armazenamentoLançamentos ilimitados
85 | Acesso seguro
86 | Sem fidelidade
87 |
88 |
91 |
92 |
93 |
94 |
95 |
96 |
97 | Pequena
98 | R$99/mês
99 |
100 | Até 10 usuários
101 | 5GB de armazenamentoLançamentos ilimitados
103 | Acesso seguro
104 | Sem fidelidade
105 |
106 |
109 |
110 |
111 |
112 |
113 |
114 |
MyPilas
8 |
9 |
17 |
18 |
19 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | Autônomo
29 | R$59/mês
30 |
31 | Até 2 usuários
32 | 500MB de armazenamentoLançamentos ilimitados
34 | Acesso seguro
35 | Sem fidelidade
36 |
37 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | Micro
47 | R$89/mês
48 |
49 | Até 6 usuários
50 | 1GB de armazenamentoLançamentos ilimitados
52 | Acesso seguro
53 | Sem fidelidade
54 |
55 |
58 |
59 |
60 |
61 |
62 |
63 |
64 | Pequena
65 | R$99/mês
66 |
67 | Até 10 usuários
68 | 5GB de armazenamentoLançamentos ilimitados
70 | Acesso seguro
71 | Sem fidelidade
72 |
73 |
76 |
77 |
78 |
79 |
80 |
81 |
MyPilas
8 |
9 |
15 |
16 |
17 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | Autônomo
27 | R$59/mês
28 |
29 | Até 2 usuários
30 | 500MB de armazenamentoLançamentos ilimitados
32 | Acesso seguro
33 | Sem fidelidade
34 |
35 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | Micro
45 | R$89/mês
46 |
47 | Até 6 usuários
48 | 1GB de armazenamentoLançamentos ilimitados
50 | Acesso seguro
51 | Sem fidelidade
52 |
53 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | Pequena
63 | R$99/mês
64 |
65 | Até 10 usuários
66 | 5GB de armazenamentoLançamentos ilimitados
68 | Acesso seguro
69 | Sem fidelidade
70 |
71 |
74 |
75 |
76 |
77 |
78 |
79 |
MyPilas
8 |
9 |
17 |
18 |
19 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | Autônomo
29 | R$59/mês
30 |
31 | Até 2 usuários
32 | 500MB de armazenamentoLançamentos ilimitados
34 | Acesso seguro
35 | Sem fidelidade
36 |
37 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | Micro
47 | R$89/mês
48 |
49 | Até 6 usuários
50 | 1GB de armazenamentoLançamentos ilimitados
52 | Acesso seguro
53 | Sem fidelidade
54 |
55 |
58 |
59 |
60 |
61 |
62 |
63 |
64 | Pequena
65 | R$99/mês
66 |
67 | Até 10 usuários
68 | 5GB de armazenamentoLançamentos ilimitados
70 | Acesso seguro
71 | Sem fidelidade
72 |
73 |
76 |
77 |
78 |
79 |
80 |
81 |
Como evitar redeploy em projetos Java?
6 |
7 |
8 | Como evitar redeploy em projetos Java? Conheça o JRebel
9 |
10 |
11 |
13 |
14 |
15 | Será que é possível evitar o redeploy em projetos Java ao alterar ou adicionar classes e arquivos de
16 | configurações?
17 |
18 |
19 | Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo
20 | método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
21 |
22 | JRebel: a solução
23 |
24 | Com JRebel isso é possível. Você pode trabalhar em projetos Java com muito mais produtividade .
25 |
26 | Download
27 |
28 | Para fazer download, acesse a página do JRebel e faça o seu cadastro.
29 |
30 | Gostou do artigo? Entre em contato .
31 |
32 |
--------------------------------------------------------------------------------
/ancoras/contato.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Contato
6 |
7 |
8 | Contato
9 |
10 |
11 | Entre em contato pelo e-mail: contato@algaworks.com .
12 |
13 |
14 |
--------------------------------------------------------------------------------
/ancoras/img/jrebel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/ancoras/img/jrebel.png
--------------------------------------------------------------------------------
/aplicando-estilos-tabelas/css/estilos.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 14px;
3 | font-family: Arial, sans-serif;
4 | }
5 |
6 | .tabela {
7 | width: 100%;
8 | border-collapse: collapse;
9 | }
10 |
11 | .tabela td, .tabela th {
12 | padding: 15px 10px;
13 | border: 1px solid #ccc;
14 | }
15 |
16 | .tabela th {
17 | background-color: #ececec;
18 |
19 | font-size: 1.1em;
20 | font-weight: bold;
21 | text-align: left;
22 | }
23 |
24 | .tabela tr:nth-child(even) {
25 | background-color: #f7f7f7;
26 | }
27 |
28 | .tabela tr:hover {
29 | background-color: #faffcc;
30 | }
31 |
--------------------------------------------------------------------------------
/aplicando-estilos-tabelas/tabelas.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
13 | Nome
14 | Categoria
15 | Preço
16 |
17 |
18 |
19 |
20 | Monitor LG 22"
21 | Informática
22 | R$592,82
23 |
24 |
25 | Monitor LG 22"
26 | Acessórios
27 | R$87,00
28 |
29 |
30 | Sabão em pó
31 | Limpeza
32 | R$11,50
33 |
34 |
35 | Coca-cola 2L
36 | Bebidas
37 | R$5,90
38 |
39 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/bordas/bordas.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | AlgaWorks
11 |
12 | HTML
13 |
14 |
15 |
--------------------------------------------------------------------------------
/bordas/css/estilos.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 32px;
3 | }
4 |
5 | a {
6 | /*
7 | border-width: thick;
8 | border-color: red;
9 | border-style: dashed;
10 | */
11 |
12 | border: thick blue solid;
13 | border-bottom: 5px dotted #0f0;
14 | border-right: 5px dotted #0f0;
15 | }
16 |
17 | p {
18 | width: 300px;
19 | height: 300px;
20 |
21 | border: 5px solid black;
22 | border-radius: 20px 10px 0px 50px;
23 |
24 | background-color: #ccc;
25 | }
--------------------------------------------------------------------------------
/box-model/box-model.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
11 |
12 | Em Maio de 2015, no evento Voxxed Days Istanbul, conversei com Reza Rahman, que é evangelista Java EE na Oracle Corporation.
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/box-model/css/estilos.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | font-size: 32px;
7 | margin: 0;
8 | }
9 |
10 | .frase1, .frase2, .referencia {
11 | width: 500px;
12 |
13 | text-align: justify;
14 | background-color: yellow;
15 | }
16 |
17 | p {
18 | margin: 10px;
19 | }
20 |
21 | .referencia {
22 | background-color: blue;
23 | height: 20px;
24 | }
25 |
26 | .frase1 {
27 | /*box-sizing: content-box;*/
28 |
29 | padding: 20px;
30 | border: 3px solid red;
31 | }
32 |
33 | .frase2 {
34 | /*box-sizing: border-box;*/
35 |
36 | padding: 20px;
37 | border: 20px solid red;
38 | }
--------------------------------------------------------------------------------
/caos-no-css/caos.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Como evitar redeploy em projetos Java?
6 |
7 |
8 | Como evitar redeploy em projetos Java? Conheça o JRebel
9 |
10 |
11 |
12 | Será que é possível evitar o redeploy em projetos Java ao alterar ou adicionar classes e arquivos de
13 | configurações?
14 |
15 |
16 | Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo
17 | método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
18 |
19 | JRebel: a solução
20 |
21 | Com JRebel isso é possível. Você pode trabalhar em projetos Java com muito mais produtividade.
22 |
23 | Download
24 |
25 | Para fazer download, acesse a página do JRebel e faça o seu cadastro.
26 |
27 |
28 |
--------------------------------------------------------------------------------
/como-usar-bem-na-pratica/css/exemplo1.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | margin: 0;
7 | }
8 |
9 | footer {
10 | padding: 20px;
11 | background-color: yellow;
12 | }
13 |
14 | #conteudo {
15 | font-size: 32px;
16 | background-color: #ccc;
17 | padding: 20px;
18 | }
19 |
20 | #conteudo ul {
21 | list-style: none;
22 | margin: 0;
23 | padding: 0;
24 | }
25 |
26 | #conteudo ul::after {
27 | content: "";
28 | display: block;
29 | clear: both;
30 | }
31 |
32 | #conteudo ul li {
33 | width: 300px;
34 | height: 300px;
35 | background-color: red;
36 | margin-bottom: 20px;
37 | float: left;
38 | margin-right: 30px;
39 | text-align: center;
40 | }
41 |
42 | #conteudo ul li a {
43 | display: block;
44 | color: #fff;
45 | text-decoration: none;
46 | padding-top: 20px;
47 | }
48 |
49 | .novo::after {
50 | content: "Novo";
51 | display: block;
52 | font-size: 24px;
53 | margin: 0 20%;
54 | margin-top: 30px;
55 | background-color: yellow;
56 | }
57 |
58 | .usuarios {
59 | list-style: none;
60 | margin: 0;
61 | padding: 0;
62 | text-align: center;
63 | }
64 |
65 | .usuarios li {
66 | display: inline-block;
67 | margin-right: 20px;
68 | }
69 |
70 | .usuarios li a {
71 | color: green;
72 | }
73 |
74 | .usuarios li.novo2::after {
75 | content: " (Novo)";
76 | }
--------------------------------------------------------------------------------
/como-usar-bem-na-pratica/css/exemplo2.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | margin: 0;
7 | }
8 |
9 |
10 | /*-----------------------\*
11 | CONTEÚDO
12 | \*-----------------------*/
13 | .conteudo {
14 | background-color: #ccc;
15 | padding: 20px;
16 | }
17 |
18 |
19 | /*-----------------------\*
20 | RODAPÉ
21 | \*-----------------------*/
22 | .rodape {
23 | background-color: yellow;
24 | padding: 20px;
25 | }
26 |
27 |
28 | /*-----------------------\*
29 | PORTFOLIO
30 | \*-----------------------*/
31 | .portfolio {
32 | font-size: 32px;
33 | list-style: none;
34 | margin: 0;
35 | padding: 0;
36 | }
37 |
38 | .portfolio::after {
39 | content: "";
40 | display: block;
41 | clear: both;
42 | }
43 |
44 | .portfolio--mais-vendidos .portfolio__curso {
45 | background-color: green;
46 | }
47 |
48 | .portfolio__curso {
49 | width: 300px;
50 | height: 300px;
51 | background-color: red;
52 | margin-bottom: 20px;
53 | float: left;
54 | margin-right: 30px;
55 | text-align: center;
56 | }
57 |
58 | .portfolio__curso > a {
59 | display: block;
60 | color: #fff;
61 | text-decoration: none;
62 | padding-top: 20px;
63 | }
64 |
65 | .portfolio__curso--novo::after {
66 | content: "Novo";
67 | display: block;
68 | font-size: 24px;
69 | margin: 0 20%;
70 | margin-top: 30px;
71 | background-color: yellow;
72 | }
73 |
74 |
75 | /*-----------------------\*
76 | USUARIOS
77 | \*-----------------------*/
78 | .usuarios {
79 | list-style: none;
80 | margin: 0;
81 | padding: 0;
82 | text-align: center;
83 | }
84 |
85 | .usuarios > li {
86 | display: inline-block;
87 | margin-right: 20px;
88 | }
89 |
90 | .usuarios > li a {
91 | color: green;
92 | }
93 |
94 | .usuarios__nome--novo::after {
95 | content: " (Novo)";
96 | }
97 |
--------------------------------------------------------------------------------
/como-usar-bem-na-pratica/css/exemplo3.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | margin: 0;
7 | }
8 |
9 |
10 | /*-----------------------\*
11 | CONTEÚDO
12 | \*-----------------------*/
13 | .conteudo {
14 | background-color: #ccc;
15 | padding: 20px;
16 | }
17 |
18 |
19 | /*-----------------------\*
20 | RODAPÉ
21 | \*-----------------------*/
22 | .rodape {
23 | background-color: yellow;
24 | padding: 20px;
25 | }
26 |
27 |
28 | /*-----------------------\*
29 | PORTFOLIO
30 | \*-----------------------*/
31 | .portfolio {
32 | list-style: none;
33 | margin: 0;
34 | padding: 0;
35 | }
36 |
37 | .portfolio::after {
38 | content: "";
39 | display: block;
40 | clear: both;
41 | }
42 |
43 | .portfolio__item {
44 | width: 300px;
45 | margin-bottom: 20px;
46 | float: left;
47 | margin-right: 30px;
48 | }
49 |
50 |
51 | /*-----------------------\*
52 | CARTAO-CURSO
53 | \*-----------------------*/
54 | .cartao-curso {
55 | font-size: 32px;
56 | width: 100%;
57 | height: 300px;
58 | background-color: red;
59 | text-align: center;
60 | }
61 |
62 | .cartao-curso > a {
63 | display: block;
64 | color: #fff;
65 | text-decoration: none;
66 | padding-top: 20px;
67 | }
68 |
69 | .cartao-curso--mais-vendido {
70 | background-color: green;
71 | }
72 |
73 | .cartao-curso--novo::after {
74 | content: "Novo";
75 | display: block;
76 | font-size: 24px;
77 | margin: 0 20%;
78 | margin-top: 30px;
79 | background-color: yellow;
80 | }
81 |
82 |
83 | /*-----------------------\*
84 | LISTA-USUARIOS
85 | \*-----------------------*/
86 | .usuarios {
87 | list-style: none;
88 | margin: 0;
89 | padding: 0;
90 | text-align: center;
91 | }
92 |
93 | .usuarios > li {
94 | display: inline-block;
95 | margin-right: 20px;
96 | }
97 |
98 | .usuarios > li a {
99 | color: green;
100 | }
101 |
102 | .usuarios__nome--novo::after {
103 | content: " (Novo)";
104 | }
105 |
--------------------------------------------------------------------------------
/como-usar-bem-na-pratica/exemplo1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
17 |
18 |
23 |
24 |
MyPilas
8 |
9 |
18 |
19 |
20 |
21 |
23 |
24 |
26 |
27 |
28 |
109 |
110 |
111 |
116 |
117 |
118 |
119 |
--------------------------------------------------------------------------------
/concluindo-formulario/css/base.css:
--------------------------------------------------------------------------------
1 | html {
2 | font-size: 62.5%; /* 10px */
3 | }
4 |
5 | body {
6 | margin: 0;
7 |
8 | font-family: Arial, Helvetica, sans-serif;
9 | font-size: 1.4rem;
10 | }
--------------------------------------------------------------------------------
/concluindo-formulario/css/layout.css:
--------------------------------------------------------------------------------
1 | .layout-cabecalho {
2 | height: 60px;
3 | line-height: 60px;
4 | border-bottom: 1px solid #ccc;
5 |
6 | background-color: #fff;
7 | }
8 |
9 | .layout-cabecalho--home {
10 | position: fixed;
11 | top: 0;
12 | left: 0;
13 | right: 0;
14 | z-index: 9999;
15 | }
16 |
17 | .layout-planos {
18 | padding: 80px 0;
19 | }
20 |
21 | .layout-chamada {
22 | padding: 80px 0;
23 | margin-top: 60px;
24 |
25 | background-color: #7ab55c;
26 | }
27 |
28 | .layout-depoimento {
29 | padding: 80px 0;
30 | background-color: #e7e7e7;
31 | }
32 |
33 | .layout-rodape {
34 | padding: 40px 0;
35 |
36 | background-color: #484848;
37 |
38 | color: #fff;
39 | text-align: center;
40 | }
41 |
42 | @media(max-width: 749px) {
43 | .layout-planos .row > div:not(.ultima-coluna) {
44 | margin-bottom: 40px;
45 | }
46 | }
47 |
48 | .layout-assinatura {
49 | padding: 40px 0;
50 | }
--------------------------------------------------------------------------------
/concluindo-formulario/imagens/bars.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/concluindo-formulario/imagens/bars.png
--------------------------------------------------------------------------------
/concluindo-formulario/imagens/joao-da-silva.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/concluindo-formulario/imagens/joao-da-silva.jpg
--------------------------------------------------------------------------------
/concluindo-formulario/imagens/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/concluindo-formulario/imagens/logo.png
--------------------------------------------------------------------------------
/concluindo-formulario/javascripts/app.js:
--------------------------------------------------------------------------------
1 | var alternador = document.querySelector('.js-botao-chaveador');
2 |
3 | alternador.onclick = function() {
4 | var menu = document.querySelector('.js-menu');
5 | menu.classList.toggle('menu--exibindo');
6 | }
--------------------------------------------------------------------------------
/configurando-planos-lado-a-lado/css/estilos.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | margin: 0;
7 |
8 | font-family: Arial, Helvetica, sans-serif;
9 | font-size: 14px;
10 | }
11 |
12 | header {
13 | height: 60px;
14 | border-bottom: 1px solid #ccc;
15 | }
16 |
17 | header img {
18 | margin-top: 12px;
19 | }
20 |
21 | .container {
22 | width: 1200px;
23 | padding-left: 15px;
24 | padding-right: 15px;
25 | margin: 0 auto;
26 | }
27 |
28 | #planos {
29 | padding: 80px 0;
30 | }
31 |
32 | #planos::after {
33 | content: "";
34 | display: block;
35 | clear: both;
36 | }
37 |
38 | article {
39 | padding: 10px;
40 | border: 1px solid #95a4a5;
41 | width: 370px;
42 | float: left;
43 | margin-right: 30px;
44 | }
45 |
46 | article > h2 {
47 | background-color: #95a4a5;
48 | color: #fff;
49 | text-align: center;
50 | line-height: 2.5;
51 | margin: -10px;
52 | margin-bottom: 0;
53 | font-weight: normal;
54 | font-size: 28px;
55 | }
56 |
57 | article > div {
58 | text-align: center;
59 | font-size: 28px;
60 | margin: 20px 0;
61 | }
62 |
63 | article > ul {
64 | list-style: none;
65 | padding: 0;
66 | margin: 20px 0;
67 | }
68 |
69 | article > ul > li {
70 | text-align: center;
71 | }
72 |
73 | article > footer {
74 | text-align: center;
75 | }
76 |
--------------------------------------------------------------------------------
/configurando-planos-lado-a-lado/imagens/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/configurando-planos-lado-a-lado/imagens/logo.png
--------------------------------------------------------------------------------
/configurando-planos-lado-a-lado/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | MyPilas
7 |
8 |
13 |
14 |
15 |
17 |
18 |
19 |
20 |
21 | Autônomo
22 | R$59/mês
23 |
24 | Até 2 usuários
25 | 500MB de armazenamentoLançamentos ilimitados
27 | Acesso seguro
28 | Sem fidelidade
29 |
30 |
33 |
34 |
35 |
36 | Micro
37 | R$89/mês
38 |
39 | Até 6 usuários
40 | 1GB de armazenamentoLançamentos ilimitados
42 | Acesso seguro
43 | Sem fidelidade
44 |
45 |
48 |
49 |
50 |
51 | Pequena
52 | R$99/mês
53 |
54 | Até 10 usuários
55 | 5GB de armazenamentoLançamentos ilimitados
57 | Acesso seguro
58 | Sem fidelidade
59 |
60 |
63 |
64 |
65 |
Sobre nós
6 |
7 |
12 |
AlgaWorks
13 |
14 |
15 |
16 |
AlgaWorks
17 |
18 |
19 |
20 |
AlgaWorks
21 |
22 |
23 |
24 |
AlgaWorks
25 |
26 |
27 |
28 |
AlgaWorks
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/cores/css/estilos.css:
--------------------------------------------------------------------------------
1 | .caixa1 {
2 | background-color: blue;
3 | color: white;
4 | }
5 |
6 | .caixa2 {
7 | background-color: rgb(255, 0, 0);
8 | color: rgb(0, 0, 0);
9 | }
10 |
11 | .caixa3 {
12 | background-color: rgb(255, 200, 0);
13 | color: rgb(255, 255, 255);
14 | }
15 |
16 | .caixa4 {
17 | background-color: #ff00c8;
18 | color: #ddff00;
19 | }
20 |
21 | .caixa5 {
22 | background-color: #df0;
23 | color: #000;
24 | }
--------------------------------------------------------------------------------
/criando-formulario/assine.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | MyPilas
8 |
9 |
18 |
19 |
20 |
21 |
23 |
24 |
26 |
27 |
28 |
49 |
50 |
51 |
56 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/criando-formulario/css/base.css:
--------------------------------------------------------------------------------
1 | html {
2 | font-size: 62.5%; /* 10px */
3 | }
4 |
5 | body {
6 | margin: 0;
7 |
8 | font-family: Arial, Helvetica, sans-serif;
9 | font-size: 1.4rem;
10 | }
--------------------------------------------------------------------------------
/criando-formulario/css/layout.css:
--------------------------------------------------------------------------------
1 | .layout-cabecalho {
2 | height: 60px;
3 | line-height: 60px;
4 | border-bottom: 1px solid #ccc;
5 |
6 | background-color: #fff;
7 | }
8 |
9 | .layout-cabecalho--home {
10 | position: fixed;
11 | top: 0;
12 | left: 0;
13 | right: 0;
14 | z-index: 9999;
15 | }
16 |
17 | .layout-planos {
18 | padding: 80px 0;
19 | }
20 |
21 | .layout-chamada {
22 | padding: 80px 0;
23 | margin-top: 60px;
24 |
25 | background-color: #7ab55c;
26 | }
27 |
28 | .layout-depoimento {
29 | padding: 80px 0;
30 | background-color: #e7e7e7;
31 | }
32 |
33 | .layout-rodape {
34 | padding: 40px 0;
35 |
36 | background-color: #484848;
37 |
38 | color: #fff;
39 | text-align: center;
40 | }
41 |
42 | @media(max-width: 749px) {
43 | .layout-planos .row > div:not(.ultima-coluna) {
44 | margin-bottom: 40px;
45 | }
46 | }
47 |
48 | .layout-assinatura {
49 | padding: 40px 0;
50 | }
--------------------------------------------------------------------------------
/criando-formulario/imagens/bars.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/criando-formulario/imagens/bars.png
--------------------------------------------------------------------------------
/criando-formulario/imagens/joao-da-silva.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/criando-formulario/imagens/joao-da-silva.jpg
--------------------------------------------------------------------------------
/criando-formulario/imagens/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/criando-formulario/imagens/logo.png
--------------------------------------------------------------------------------
/criando-formulario/javascripts/app.js:
--------------------------------------------------------------------------------
1 | var alternador = document.querySelector('.js-botao-chaveador');
2 |
3 | alternador.onclick = function() {
4 | var menu = document.querySelector('.js-menu');
5 | menu.classList.toggle('menu--exibindo');
6 | }
--------------------------------------------------------------------------------
/criando-um-botao/css/estilos.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | margin: 0;
7 |
8 | font-family: Arial, Helvetica, sans-serif;
9 | font-size: 14px;
10 | }
11 |
12 | header {
13 | height: 60px;
14 | border-bottom: 1px solid #ccc;
15 | }
16 |
17 | header img {
18 | margin-top: 12px;
19 | }
20 |
21 | .container {
22 | width: 1200px;
23 | padding-left: 15px;
24 | padding-right: 15px;
25 | margin: 0 auto;
26 | }
27 |
28 | #planos {
29 | padding: 80px 0;
30 | }
31 |
32 | #planos::after {
33 | content: "";
34 | display: block;
35 | clear: both;
36 | }
37 |
38 | article {
39 | padding: 10px;
40 | border: 1px solid #95a4a5;
41 | width: 370px;
42 | float: left;
43 | margin-right: 30px;
44 | }
45 |
46 | article > h2 {
47 | background-color: #95a4a5;
48 | color: #fff;
49 | text-align: center;
50 | line-height: 2.5;
51 | margin: -10px;
52 | margin-bottom: 0;
53 | font-weight: normal;
54 | font-size: 28px;
55 | }
56 |
57 | article > div {
58 | text-align: center;
59 | font-size: 28px;
60 | margin: 20px 0;
61 | }
62 |
63 | article > ul {
64 | list-style: none;
65 | padding: 0;
66 | margin: 20px 0;
67 | }
68 |
69 | article > ul > li {
70 | text-align: center;
71 | }
72 |
73 | article > footer {
74 | text-align: center;
75 | }
76 |
77 | .botao {
78 | display: inline-block;
79 | background-color: #127d00;
80 | color: #fff;
81 | padding: 12px 16px;
82 | text-decoration: none;
83 | }
84 |
--------------------------------------------------------------------------------
/criando-um-botao/imagens/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/criando-um-botao/imagens/logo.png
--------------------------------------------------------------------------------
/criando-um-botao/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | MyPilas
7 |
8 |
13 |
14 |
15 |
17 |
18 |
19 |
20 |
21 | Autônomo
22 | R$59/mês
23 |
24 | Até 2 usuários
25 | 500MB de armazenamentoLançamentos ilimitados
27 | Acesso seguro
28 | Sem fidelidade
29 |
30 |
33 |
34 |
35 |
36 | Micro
37 | R$89/mês
38 |
39 | Até 6 usuários
40 | 1GB de armazenamentoLançamentos ilimitados
42 | Acesso seguro
43 | Sem fidelidade
44 |
45 |
48 |
49 |
50 |
51 | Pequena
52 | R$99/mês
53 |
54 | Até 10 usuários
55 | 5GB de armazenamentoLançamentos ilimitados
57 | Acesso seguro
58 | Sem fidelidade
59 |
60 |
63 |
64 |
65 |
MyPilas
8 |
9 |
17 |
18 |
19 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | Autônomo
29 | R$59/mês
30 |
31 | Até 2 usuários
32 | 500MB de armazenamentoLançamentos ilimitados
34 | Acesso seguro
35 | Sem fidelidade
36 |
37 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | Micro
47 | R$89/mês
48 |
49 | Até 6 usuários
50 | 1GB de armazenamentoLançamentos ilimitados
52 | Acesso seguro
53 | Sem fidelidade
54 |
55 |
58 |
59 |
60 |
61 |
62 |
63 |
64 | Pequena
65 | R$99/mês
66 |
67 | Até 10 usuários
68 | 5GB de armazenamentoLançamentos ilimitados
70 | Acesso seguro
71 | Sem fidelidade
72 |
73 |
76 |
77 |
78 |
79 |
80 |
81 |
AlgaWorks
6 |
7 |
8 | Será que é possível?
9 |
10 |
--------------------------------------------------------------------------------
/elementos-estruturais/artigo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Como evitar redeploy em projetos Java?
6 |
7 |
8 |
11 |
12 |
13 |
14 | Como evitar redeploy em projetos Java? Conheça o JRebel
15 |
16 |
18 |
19 |
20 | Será que é possível evitar o redeploy em projetos Java ao alterar ou adicionar classes e arquivos de
21 | configurações?
22 |
23 |
24 | Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo
25 | método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
26 |
27 | JRebel: a solução
28 |
29 | Com JRebel isso é possível. Você pode trabalhar em projetos Java com muito mais produtividade .
30 |
31 | Download
32 |
33 | Para fazer download, acesse a página do JRebel e faça o seu cadastro.
34 |
35 | Gostou do artigo? Entre em contato.
36 |
37 |
38 |
39 | Anúncios da página
40 |
41 |
42 |
45 |
46 |
--------------------------------------------------------------------------------
/elementos-estruturais/img/jrebel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/elementos-estruturais/img/jrebel.png
--------------------------------------------------------------------------------
/enfase-importancia-marcacao/artigo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Como evitar redeploy em projetos Java?
6 |
7 |
8 | Como evitar redeploy em projetos Java? Conheça o JRebel
9 |
10 |
11 | Será que é possível evitar o redeploy em projetos Java ao alterar ou adicionar classes e arquivos de
12 | configurações?
13 |
14 |
15 | Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo
16 | método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
17 |
18 | JRebel: a solução
19 |
20 | Com JRebel isso é possível. Você pode trabalhar em projetos Java com muito mais produtividade .
21 |
22 | Download
23 |
24 | Para fazer download, acesse a página do JRebel e faça o seu cadastro.
25 |
26 |
--------------------------------------------------------------------------------
/especificidade/css/exemplo1.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 32px;
3 | }
4 |
5 | /*
6 | h1 {
7 | color: red;
8 | }
9 | */
10 |
11 | #logo { /* 100 */
12 | color: green;
13 | }
14 |
15 | .amarelo { /* 010 */
16 | color: yellow;
17 | }
18 |
19 | h1 { /* 001 */
20 | color: blue !important;
21 | }
22 |
--------------------------------------------------------------------------------
/especificidade/css/exemplo2.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 32px;
3 | }
4 |
5 | header#cabecalho h1.logo { /* 112 */
6 | color: yellow;
7 | }
8 |
9 | header#cabecalho .logo { /* 111 */
10 | color: purple;
11 | }
12 |
13 | #cabecalho .logo { /* 110 */
14 | color: red;
15 | }
16 |
17 | header .logo { /* 011 */
18 | color: green;
19 | }
20 |
21 | .logo {
22 | color: blue; /* 010 */
23 | }
--------------------------------------------------------------------------------
/especificidade/exemplo1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | AlgaWorks
11 |
12 |
13 |
--------------------------------------------------------------------------------
/especificidade/exemplo2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Sobre nós
6 |
7 | Sobre a empresa
11 |
12 | Estamos no mercado desde 2014.
13 |
14 | Nossa missão é transformar a vida de milhares de alunos.
15 |
16 |
--------------------------------------------------------------------------------
/estilos-incorporados-e-regras-css/empresa.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Sobre nós
6 |
7 |
21 |
22 |
23 | Sobre a empresa
24 |
25 | Estamos no mercado desde 2014.
26 |
27 | Nossa missão é transformar a vida de milhares de alunos.
28 |
29 |
--------------------------------------------------------------------------------
/estrutura-basica-do-documento/artigo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | AlgaWorks
4 |
5 |
6 | Oi pessoal!
7 |
8 |
--------------------------------------------------------------------------------
/flutuando-elementos/colunas.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 | Já imaginou?
12 |
13 | Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
14 |
15 | Em Maio de 2015, no evento Voxxed Days Istanbul, conversei com Reza Rahman, que é evangelista Java EE na Oracle Corporation.
16 |
17 |
18 |
19 | Todos os direitos reservados.
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/flutuando-elementos/css/colunas.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 32px;
3 | }
4 |
5 | h1 {
6 | margin: 0;
7 | }
8 |
9 | article {
10 | background-color: #0f0;
11 | }
12 |
13 | footer {
14 | background-color: yellow;
15 | text-align: center;
16 | }
17 |
18 | .coluna1, .coluna2 {
19 | background-color: #ccc;
20 | }
21 |
22 | .coluna1 {
23 | float: left;
24 | width: 48%;
25 | }
26 |
27 | .coluna2 {
28 | float: right;
29 | width: 48%;
30 | }
31 |
32 | .clearfix {
33 | clear: both;
34 | }
--------------------------------------------------------------------------------
/flutuando-elementos/css/imagem.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 26px;
3 | }
4 |
5 | img {
6 | float: right;
7 | margin-right: 20px;
8 | }
--------------------------------------------------------------------------------
/flutuando-elementos/imagem.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
13 | Em Maio de 2015, no evento Voxxed Days Istanbul, conversei com Reza Rahman, que é evangelista Java EE na Oracle Corporation.
14 | Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
15 | Em Maio de 2015, no evento Voxxed Days Istanbul, conversei com Reza Rahman, que é evangelista Java EE na Oracle Corporation.
16 |
17 |
18 |
--------------------------------------------------------------------------------
/flutuando-elementos/imagens/duvidas.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/flutuando-elementos/imagens/duvidas.jpg
--------------------------------------------------------------------------------
/formatacao-de-textos/css/estilos.css:
--------------------------------------------------------------------------------
1 | .nome {
2 | color: #f00;
3 |
4 | /*
5 | font-size: 24px;
6 | font-family: "Trebuchet MS", sans-serif;
7 | font-style: italic;
8 | font-weight: bold;
9 | */
10 |
11 | font: italic bold 24px "Trebuchet MS", sans-serif;
12 |
13 | text-decoration: underline;
14 | text-align: center;
15 | }
16 |
17 | .segmento {
18 | font-family: Palatino, serif;
19 | }
--------------------------------------------------------------------------------
/formatacao-de-textos/textos.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Sobre nós
6 |
7 | Cursos Online
16 |
17 |
18 |
--------------------------------------------------------------------------------
/imagens/artigo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Como evitar redeploy em projetos Java?
6 |
7 |
8 | Como evitar redeploy em projetos Java? Conheça o JRebel
9 |
10 |
13 | Será que é possível evitar o redeploy em projetos Java ao alterar ou adicionar classes e arquivos de
14 | configurações?
15 |
16 |
17 | Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo
18 | método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
19 |
20 | JRebel: a solução
21 |
22 | Com JRebel isso é possível. Você pode trabalhar em projetos Java com muito mais produtividade .
23 |
24 | Download
25 |
26 | Para fazer download, acesse a página do JRebel e faça o seu cadastro.
27 |
28 |
--------------------------------------------------------------------------------
/imagens/img/jrebel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/imagens/img/jrebel.png
--------------------------------------------------------------------------------
/javascript-hook/css/base.css:
--------------------------------------------------------------------------------
1 | html {
2 | font-size: 62.5%; /* 10px */
3 | }
4 |
5 | body {
6 | margin: 0;
7 |
8 | font-family: Arial, Helvetica, sans-serif;
9 | font-size: 1.4rem;
10 | }
--------------------------------------------------------------------------------
/javascript-hook/css/layout.css:
--------------------------------------------------------------------------------
1 | .layout-cabecalho {
2 | height: 60px;
3 | line-height: 60px;
4 | border-bottom: 1px solid #ccc;
5 |
6 | background-color: #fff;
7 | }
8 |
9 | .layout-cabecalho--home {
10 | position: fixed;
11 | top: 0;
12 | left: 0;
13 | right: 0;
14 | z-index: 9999;
15 | }
16 |
17 | .layout-planos {
18 | padding: 80px 0;
19 | }
20 |
21 | .layout-chamada {
22 | padding: 80px 0;
23 | margin-top: 60px;
24 |
25 | background-color: #7ab55c;
26 | }
27 |
28 | .layout-depoimento {
29 | padding: 80px 0;
30 | background-color: #e7e7e7;
31 | }
32 |
33 | .layout-rodape {
34 | padding: 40px 0;
35 |
36 | background-color: #484848;
37 |
38 | color: #fff;
39 | text-align: center;
40 | }
41 |
42 | @media(max-width: 749px) {
43 | .layout-planos .row > div:not(.ultima-coluna) {
44 | margin-bottom: 40px;
45 | }
46 | }
--------------------------------------------------------------------------------
/javascript-hook/imagens/bars.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/javascript-hook/imagens/bars.png
--------------------------------------------------------------------------------
/javascript-hook/imagens/joao-da-silva.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/javascript-hook/imagens/joao-da-silva.jpg
--------------------------------------------------------------------------------
/javascript-hook/imagens/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/javascript-hook/imagens/logo.png
--------------------------------------------------------------------------------
/javascript-hook/javascripts/app.js:
--------------------------------------------------------------------------------
1 | var alternador = document.querySelector('.js-botao-chaveador');
2 |
3 | alternador.onclick = function() {
4 | var menu = document.querySelector('.js-menu');
5 | menu.classList.toggle('menu--exibindo');
6 | }
--------------------------------------------------------------------------------
/layout-fixo-fluido/css/estilos.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | margin: 0;
7 |
8 | font-family: Arial, Helvetica, sans-serif;
9 | font-size: 14px;
10 | }
11 |
12 | header {
13 | height: 60px;
14 | border-bottom: 1px solid #ccc;
15 | }
16 |
17 | header img {
18 | margin-top: 12px;
19 | }
20 |
21 | .container {
22 | width: 100%;
23 | padding-left: 15px;
24 | padding-right: 15px;
25 | margin: 0 auto;
26 | }
27 |
28 | #planos {
29 | padding: 80px 0;
30 | }
31 |
32 | #planos::after {
33 | content: "";
34 | display: block;
35 | clear: both;
36 | }
37 |
38 | article {
39 | padding: 10px;
40 | border: 1px solid #95a4a5;
41 | width: 30%;
42 | float: left;
43 | margin-right: 5%;
44 | }
45 |
46 | article > h2 {
47 | background-color: #95a4a5;
48 | color: #fff;
49 | text-align: center;
50 | line-height: 2.5;
51 | margin: -10px;
52 | margin-bottom: 0;
53 | font-weight: normal;
54 | font-size: 28px;
55 | }
56 |
57 | article > div {
58 | text-align: center;
59 | font-size: 28px;
60 | margin: 20px 0;
61 | }
62 |
63 | article > ul {
64 | list-style: none;
65 | padding: 0;
66 | margin: 20px 0;
67 | }
68 |
69 | article > ul > li {
70 | text-align: center;
71 | }
72 |
73 | article > footer {
74 | text-align: center;
75 | }
76 |
77 | .botao {
78 | display: inline-block;
79 | background-color: #127d00;
80 | color: #fff;
81 | padding: 12px 16px;
82 | text-decoration: none;
83 | }
84 |
85 | .botao:hover, .botao:focus {
86 | background-color: #0e6400;
87 | }
88 |
--------------------------------------------------------------------------------
/layout-fixo-fluido/css/reset.css:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 |
6 | html, body, div, span, applet, object, iframe,
7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8 | a, abbr, acronym, address, big, cite, code,
9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed,
16 | figure, figcaption, footer, header, hgroup,
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 | margin: 0;
20 | padding: 0;
21 | border: 0;
22 | font-size: 100%;
23 | font: inherit;
24 | vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure,
28 | footer, header, hgroup, menu, nav, section {
29 | display: block;
30 | }
31 | body {
32 | line-height: 1;
33 | }
34 | ol, ul {
35 | list-style: none;
36 | }
37 | blockquote, q {
38 | quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 | content: '';
43 | content: none;
44 | }
45 | table {
46 | border-collapse: collapse;
47 | border-spacing: 0;
48 | }
--------------------------------------------------------------------------------
/layout-fixo-fluido/imagens/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/layout-fixo-fluido/imagens/logo.png
--------------------------------------------------------------------------------
/layout-fixo-fluido/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | MyPilas
7 |
8 |
14 |
15 |
16 |
18 |
19 |
20 |
21 |
22 | Autônomo
23 | R$59/mês
24 |
25 | Até 2 usuários
26 | 500MB de armazenamentoLançamentos ilimitados
28 | Acesso seguro
29 | Sem fidelidade
30 |
31 |
34 |
35 |
36 |
37 | Micro
38 | R$89/mês
39 |
40 | Até 6 usuários
41 | 1GB de armazenamentoLançamentos ilimitados
43 | Acesso seguro
44 | Sem fidelidade
45 |
46 |
49 |
50 |
51 |
52 | Pequena
53 | R$99/mês
54 |
55 | Até 10 usuários
56 | 5GB de armazenamentoLançamentos ilimitados
58 | Acesso seguro
59 | Sem fidelidade
60 |
61 |
64 |
65 |
66 |
MyPilas
8 |
9 |
15 |
16 |
17 |
19 |
20 |
21 |
22 |
23 | Autônomo
24 | R$59/mês
25 |
26 | Até 2 usuários
27 | 500MB de armazenamentoLançamentos ilimitados
29 | Acesso seguro
30 | Sem fidelidade
31 |
32 |
35 |
36 |
37 |
38 | Micro
39 | R$89/mês
40 |
41 | Até 6 usuários
42 | 1GB de armazenamentoLançamentos ilimitados
44 | Acesso seguro
45 | Sem fidelidade
46 |
47 |
50 |
51 |
52 |
53 | Pequena
54 | R$99/mês
55 |
56 | Até 10 usuários
57 | 5GB de armazenamentoLançamentos ilimitados
59 | Acesso seguro
60 | Sem fidelidade
61 |
62 |
65 |
66 |
67 |
17 |
18 | Front-end
19 |
20 | HTML
21 | CSS
22 | JavaScript
23 |
24 |
25 |
26 | Back-end
27 |
28 | Java EE
29 | Spring Framework
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/margin/css/estilos.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 32px;
3 | margin: 0;
4 | }
5 |
6 | .frase1, .frase2 {
7 | text-align: justify;
8 | width: 500px;
9 | padding: 20px;
10 |
11 | border: 3px solid red;
12 | background-color: yellow;
13 | }
14 |
15 | p {
16 | margin: 0;
17 | }
18 |
19 | .frase1 {
20 | margin: 10px 0 100px 50px;
21 | /*margin-top: -100px;*/
22 | }
23 |
24 | .frase2 {
25 | margin: 0 auto;
26 | }
--------------------------------------------------------------------------------
/margin/margin.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
11 |
12 | Em Maio de 2015, no evento Voxxed Days Istanbul, conversei com Reza Rahman, que é evangelista Java EE na Oracle Corporation.
13 |
14 |
15 |
--------------------------------------------------------------------------------
/metatag-viewport/css/estilos.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | }
4 |
5 | h1 {
6 | margin: 0;
7 | }
8 |
9 | .caixa {
10 | width: 300px;
11 | height: 300px;
12 | background-color: red;
13 | }
--------------------------------------------------------------------------------
/metatag-viewport/viewport.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
12 |
Economizar tempo com redeploy
13 |
14 |
Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
15 |
Sobre nós
6 |
7 |
8 | Sobre a empresa
9 |
10 | Estamos no mercado desde 2014.
11 |
12 | Nossa missão é transformar a vida de milhares de alunos.
13 |
14 |
--------------------------------------------------------------------------------
/padding/css/estilos.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 32px;
3 | }
4 |
5 | p {
6 | text-align: justify;
7 | width: 500px;
8 | border: 3px solid red;
9 | background-color: yellow;
10 |
11 | padding: 20px 50px;
12 | padding-left: 200px;
13 | }
--------------------------------------------------------------------------------
/padding/padding.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
11 |
12 |
13 |
--------------------------------------------------------------------------------
/posicionamento-absoluto/css/estilos.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-size: 32px;
4 | }
5 |
6 | .caixa1 {
7 | position: relative;
8 | left: 100px;
9 | top: 100px;
10 | z-index: 101;
11 |
12 | width: 300px;
13 | height: 300px;
14 |
15 | background-color: red;
16 | }
17 |
18 | .caixa2 {
19 | position: relative;
20 | left: -50px;
21 | top: -50px;
22 |
23 | width: 150px;
24 | height: 150px;
25 |
26 | background-color: yellow;
27 | }
28 |
29 | .caixa3 {
30 | position: relative;
31 |
32 | width: 300px;
33 | height: 300px;
34 |
35 | background-color: green;
36 | }
37 |
38 | .caixa4 {
39 | position: absolute;
40 | right: 0;
41 | top: -200px;
42 | z-index: 100;
43 |
44 | width: 150px;
45 | height: 150px;
46 |
47 | background-color: orange;
48 | }
49 |
--------------------------------------------------------------------------------
/posicionamento-absoluto/posicionamento.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
11 |
12 |
13 |
Caixa 2
14 |
15 | Caixa 1
16 |
Em Maio de 2015, no evento Voxxed Days Istanbul, conversei com Reza Rahman, que é evangelista Java EE na Oracle Corporation.
19 |
20 | Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
21 |
22 |
23 |
Caixa 4
24 |
25 | Caixa 3
26 |
Em Maio de 2015, no evento Voxxed Days Istanbul, conversei com Reza Rahman, que é evangelista Java EE na Oracle Corporation.
28 | Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
29 | Em Maio de 2015, no evento Voxxed Days Istanbul, conversei com Reza Rahman, que é evangelista Java EE na Oracle Corporation.
30 | Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
31 | Em Maio de 2015, no evento Voxxed Days Istanbul, conversei com Reza Rahman, que é evangelista Java EE na Oracle Corporation.
32 |
33 |
34 |
--------------------------------------------------------------------------------
/posicionamento-estatico-fixo/css/base.css:
--------------------------------------------------------------------------------
1 | html {
2 | font-size: 62.5%; /* 10px */
3 | }
4 |
5 | body {
6 | margin: 0;
7 |
8 | font-family: Arial, Helvetica, sans-serif;
9 | font-size: 1.4rem;
10 | }
--------------------------------------------------------------------------------
/posicionamento-estatico-fixo/css/componentes.css:
--------------------------------------------------------------------------------
1 | /*--------------------*\
2 | PLANO
3 | \*--------------------*/
4 | .plano {
5 | padding: 10px;
6 | border: 1px solid #95a4a5;
7 |
8 | font-size: 1.4rem; /* 14px */
9 | }
10 |
11 | .plano__cabecalho {
12 | margin: -10px;
13 | margin-bottom: 0;
14 |
15 | background-color: #95a4a5;
16 | color: #fff;
17 |
18 | text-align: center;
19 | line-height: 2.5;
20 | font-weight: normal;
21 | font-size: 2em;
22 | }
23 |
24 | .plano__preco {
25 | margin: 20px 0;
26 |
27 | text-align: center;
28 | font-size: 2em;
29 | }
30 |
31 | .plano__caracteristicas {
32 | padding: 0;
33 | margin: 20px 0;
34 |
35 | font-size: 1em;
36 |
37 | list-style: none;
38 | }
39 |
40 | .plano__caracteristicas > li {
41 | text-align: center;
42 | }
43 |
44 | .plano__rodape {
45 | text-align: center;
46 | }
47 |
48 |
49 | /*--------------------*\
50 | BOTAO
51 | \*--------------------*/
52 | .botao {
53 | display: inline-block;
54 | padding: 0.8em 1.2em;
55 |
56 | background-color: #bbb;
57 | color: #fff;
58 |
59 | font-size: 1em;
60 | text-decoration: none;
61 | }
62 |
63 | .botao:hover, .botao:focus {
64 | background-color: #aaa;
65 | color: #fff;
66 |
67 | text-decoration: none;
68 | }
69 |
70 | .botao--assinar {
71 | background-color: #127d00;
72 | }
73 |
74 | .botao--assinar:hover, .botao--assinar:focus {
75 | background-color: #0e6400;
76 | }
77 |
78 | .botao--principal {
79 | border-radius: 10px;
80 |
81 | background-color: #004b86;
82 | }
83 |
84 | .botao--principal:hover, .botao--principal:focus {
85 | background-color: #003b6a;
86 | }
87 |
88 |
89 | /*--------------------*\
90 | CHAMADA
91 | \*--------------------*/
92 | .chamada {
93 | font-size: 1.6rem; /* 1.6 * 10px = 16px */
94 | text-align: center;
95 | }
96 |
97 | .chamada__titulo {
98 | margin: 0;
99 |
100 | color: #fff;
101 |
102 | font-size: 3.375em; /* 54px / 16px = 3.375 */
103 | line-height: 0.9;
104 | text-shadow: 1px 1px #313131;
105 | }
106 |
107 | .chamada__subtitulo {
108 | margin: 60px 0;
109 |
110 | color: #fff;
111 |
112 | font-size: 1em;
113 | }
114 |
115 | .chamada__acao {
116 | font-size: 1em;
117 | }
118 |
119 | @media(min-width: 992px) {
120 | .chamada {
121 | padding-left: 10%;
122 | padding-right: 10%;
123 |
124 | font-size: 2.2rem; /* 2.2 * 10px = 22px */
125 | }
126 | }
127 |
128 |
129 | /*--------------------*\
130 | DEPOIMENTO
131 | \*--------------------*/
132 | .depoimento {
133 | font-size: 2.2rem; /* 22px */
134 | }
135 |
136 | @media(min-width: 992px) {
137 | .depoimento {
138 | padding-left: 15%;
139 | padding-right: 15%;
140 |
141 | font-size: 2.8rem;
142 | }
143 | }
144 |
145 | .depoimento > blockquote {
146 | margin: 0;
147 | padding: 0 60px;
148 |
149 | text-align: center;
150 | font-size: 1em;
151 | }
152 |
153 | .depoimento__autor {
154 | margin-top: 40px;
155 |
156 | text-align: center;
157 | font-size: 0.7272em;
158 | }
159 |
160 | .depoimento__autor > img {
161 | border-radius: 50%;
162 | }
163 |
164 | .depoimento__autor > p {
165 | margin-top: 10px;
166 | }
167 |
--------------------------------------------------------------------------------
/posicionamento-estatico-fixo/css/layout.css:
--------------------------------------------------------------------------------
1 | .layout-cabecalho {
2 | height: 60px;
3 | border-bottom: 1px solid #ccc;
4 |
5 | background-color: #fff;
6 | }
7 |
8 | .layout-cabecalho--home {
9 | position: fixed;
10 | top: 0;
11 | left: 0;
12 | right: 0;
13 | z-index: 9999;
14 | }
15 |
16 | .layout-cabecalho img {
17 | margin-top: 12px;
18 | }
19 |
20 | .layout-planos {
21 | padding: 80px 0;
22 | }
23 |
24 | .layout-chamada {
25 | padding: 80px 0;
26 | margin-top: 60px;
27 |
28 | background-color: #7ab55c;
29 | }
30 |
31 | .layout-depoimento {
32 | padding: 80px 0;
33 | background-color: #e7e7e7;
34 | }
35 |
36 | .layout-rodape {
37 | padding: 40px 0;
38 |
39 | background-color: #484848;
40 |
41 | color: #fff;
42 | text-align: center;
43 | }
--------------------------------------------------------------------------------
/posicionamento-estatico-fixo/imagens/joao-da-silva.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/posicionamento-estatico-fixo/imagens/joao-da-silva.jpg
--------------------------------------------------------------------------------
/posicionamento-estatico-fixo/imagens/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/posicionamento-estatico-fixo/imagens/logo.png
--------------------------------------------------------------------------------
/posicionamento-estatico-fixo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | MyPilas
8 |
9 |
17 |
18 |
19 |
21 |
22 |
23 |
24 |
25 |
26 |
As finanças da sua empresa em ordem
27 |
Software de gestão simples e prático para pequenos negócios
28 |
29 |
32 |
33 |
34 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | Eu tinha perdido totalmente o controle da minha empresa.
43 | Depois que comecei a usar o MyPilas, me sinto muito mais organizado e confiante no futuro.
44 |
45 |
46 |
47 |
48 |
João da Silva
49 |
50 |
51 |
52 |
53 |
56 |
57 |
58 |
59 |
60 |
61 | Autônomo
62 | R$59/mês
63 |
64 | Até 2 usuários
65 | 500MB de armazenamentoLançamentos ilimitados
67 | Acesso seguro
68 | Sem fidelidade
69 |
70 |
73 |
74 |
75 |
76 |
77 |
78 |
79 | Micro
80 | R$89/mês
81 |
82 | Até 6 usuários
83 | 1GB de armazenamentoLançamentos ilimitados
85 | Acesso seguro
86 | Sem fidelidade
87 |
88 |
91 |
92 |
93 |
94 |
95 |
96 |
97 | Pequena
98 | R$99/mês
99 |
100 | Até 10 usuários
101 | 5GB de armazenamentoLançamentos ilimitados
103 | Acesso seguro
104 | Sem fidelidade
105 |
106 |
109 |
110 |
111 |
112 |
113 |
114 |
Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
11 |
12 |
13 |
Caixa 2
14 |
15 | Caixa 1
16 |
Em Maio de 2015, no evento Voxxed Days Istanbul, conversei com Reza Rahman, que é evangelista Java EE na Oracle Corporation.
19 |
20 | Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
21 |
22 |
23 |
Caixa 4
24 |
25 | Caixa 3
26 |
Em Maio de 2015, no evento Voxxed Days Istanbul, conversei com Reza Rahman, que é evangelista Java EE na Oracle Corporation.
28 | Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
29 | Em Maio de 2015, no evento Voxxed Days Istanbul, conversei com Reza Rahman, que é evangelista Java EE na Oracle Corporation.
30 | Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
31 | Em Maio de 2015, no evento Voxxed Days Istanbul, conversei com Reza Rahman, que é evangelista Java EE na Oracle Corporation.
32 |
33 |
34 |
--------------------------------------------------------------------------------
/preparando-projeto/css/estilos.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | margin: 0;
7 |
8 | font-family: Arial, Helvetica, sans-serif;
9 | font-size: 14px;
10 | }
--------------------------------------------------------------------------------
/preparando-projeto/imagens/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/preparando-projeto/imagens/logo.png
--------------------------------------------------------------------------------
/preparando-projeto/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | MyPilas
7 |
8 | Como evitar redeploy em projetos Java?
6 |
7 |
8 | Como evitar redeploy em projetos Java? Conheça o JRebel
9 |
10 |
11 | Será que é possível evitar o redeploy em projetos Java ao alterar ou adicionar classes e arquivos de
12 | configurações?
13 |
14 |
15 | Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo
16 | método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
17 |
18 | JRebel: a solução
19 |
20 | Com JRebel isso é possível. Você pode trabalhar em projetos Java com muito mais produtividade.
21 |
22 | Download
23 |
24 | Para fazer download, acesse a página do JRebel e faça o seu cadastro.
25 |
26 |
--------------------------------------------------------------------------------
/propriedade-display/css/estilos.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 32px;
3 | }
4 |
5 | .nome-empresa {
6 | background-color: pink;
7 | }
8 |
9 | .segmento-empresa {
10 | background-color: red;
11 | }
12 |
13 | .curso-html {
14 | background-color: #00dd00;
15 | }
16 |
17 | .curso-css {
18 | background-color: #fdff11;
19 | }
20 |
21 | .curso-java {
22 | background-color: #00dddd;
23 | }
24 |
25 | .curso-bootstrap {
26 | background-color: #ee00da;
27 | }
28 |
29 |
30 | .nome-empresa, .segmento-empresa {
31 | display: block;
32 | height: 100px;
33 | width: 300px;
34 | }
35 |
36 | .curso-html, .curso-css {
37 | display: inline;
38 | height: 100px; /* não tem efeito */
39 | width: 300px; /* não tem efeito */
40 | }
41 |
42 | .curso-java, .curso-bootstrap {
43 | display: inline-block;
44 | height: 100px;
45 | width: 300px;
46 | }
--------------------------------------------------------------------------------
/propriedade-display/display.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | AlgaWorks
11 | Cursos Online
12 |
13 | HTML
14 | CSS
15 |
16 | Java
Bootstrap
17 |
18 |
19 |
--------------------------------------------------------------------------------
/pseudo-classes/css/estilos.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | margin: 0;
7 |
8 | font-family: Arial, Helvetica, sans-serif;
9 | font-size: 14px;
10 | }
11 |
12 | header {
13 | height: 60px;
14 | border-bottom: 1px solid #ccc;
15 | }
16 |
17 | header img {
18 | margin-top: 12px;
19 | }
20 |
21 | .container {
22 | width: 1200px;
23 | padding-left: 15px;
24 | padding-right: 15px;
25 | margin: 0 auto;
26 | }
27 |
28 | #planos {
29 | padding: 80px 0;
30 | }
31 |
32 | #planos::after {
33 | content: "";
34 | display: block;
35 | clear: both;
36 | }
37 |
38 | article {
39 | padding: 10px;
40 | border: 1px solid #95a4a5;
41 | width: 370px;
42 | float: left;
43 | margin-right: 30px;
44 | }
45 |
46 | article > h2 {
47 | background-color: #95a4a5;
48 | color: #fff;
49 | text-align: center;
50 | line-height: 2.5;
51 | margin: -10px;
52 | margin-bottom: 0;
53 | font-weight: normal;
54 | font-size: 28px;
55 | }
56 |
57 | article > div {
58 | text-align: center;
59 | font-size: 28px;
60 | margin: 20px 0;
61 | }
62 |
63 | article > ul {
64 | list-style: none;
65 | padding: 0;
66 | margin: 20px 0;
67 | }
68 |
69 | article > ul > li {
70 | text-align: center;
71 | }
72 |
73 | article > footer {
74 | text-align: center;
75 | }
76 |
77 | .botao {
78 | display: inline-block;
79 | background-color: #127d00;
80 | color: #fff;
81 | padding: 12px 16px;
82 | text-decoration: none;
83 | }
84 |
85 | .botao:hover, .botao:focus {
86 | background-color: #0e6400;
87 | }
88 |
--------------------------------------------------------------------------------
/pseudo-classes/imagens/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/pseudo-classes/imagens/logo.png
--------------------------------------------------------------------------------
/pseudo-classes/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | MyPilas
7 |
8 |
13 |
14 |
15 |
17 |
18 |
19 |
20 |
21 | Autônomo
22 | R$59/mês
23 |
24 | Até 2 usuários
25 | 500MB de armazenamentoLançamentos ilimitados
27 | Acesso seguro
28 | Sem fidelidade
29 |
30 |
33 |
34 |
35 |
36 | Micro
37 | R$89/mês
38 |
39 | Até 6 usuários
40 | 1GB de armazenamentoLançamentos ilimitados
42 | Acesso seguro
43 | Sem fidelidade
44 |
45 |
48 |
49 |
50 |
51 | Pequena
52 | R$99/mês
53 |
54 | Até 10 usuários
55 | 5GB de armazenamentoLançamentos ilimitados
57 | Acesso seguro
58 | Sem fidelidade
59 |
60 |
63 |
64 |
65 |
11 | Já imaginou?
12 |
13 | Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
14 |
15 | Em Maio de 2015, no evento Voxxed Days Istanbul, conversei com Reza Rahman, que é evangelista Java EE na Oracle Corporation.
16 |
17 |
18 |
19 | Todos os direitos reservados.
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/reset-css-normalizecss/css/estilos.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | margin: 0;
7 |
8 | font-family: Arial, Helvetica, sans-serif;
9 | font-size: 14px;
10 | }
11 |
12 | header {
13 | height: 60px;
14 | border-bottom: 1px solid #ccc;
15 | }
16 |
17 | header img {
18 | margin-top: 12px;
19 | }
20 |
21 | .container {
22 | width: 1200px;
23 | padding-left: 15px;
24 | padding-right: 15px;
25 | margin: 0 auto;
26 | }
27 |
28 | #planos {
29 | padding: 80px 0;
30 | }
31 |
32 | #planos::after {
33 | content: "";
34 | display: block;
35 | clear: both;
36 | }
37 |
38 | article {
39 | padding: 10px;
40 | border: 1px solid #95a4a5;
41 | width: 370px;
42 | float: left;
43 | margin-right: 30px;
44 | }
45 |
46 | article > h2 {
47 | background-color: #95a4a5;
48 | color: #fff;
49 | text-align: center;
50 | line-height: 2.5;
51 | margin: -10px;
52 | margin-bottom: 0;
53 | font-weight: normal;
54 | font-size: 28px;
55 | }
56 |
57 | article > div {
58 | text-align: center;
59 | font-size: 28px;
60 | margin: 20px 0;
61 | }
62 |
63 | article > ul {
64 | list-style: none;
65 | padding: 0;
66 | margin: 20px 0;
67 | }
68 |
69 | article > ul > li {
70 | text-align: center;
71 | }
72 |
73 | article > footer {
74 | text-align: center;
75 | }
76 |
77 | .botao {
78 | display: inline-block;
79 | background-color: #127d00;
80 | color: #fff;
81 | padding: 12px 16px;
82 | text-decoration: none;
83 | }
84 |
85 | .botao:hover, .botao:focus {
86 | background-color: #0e6400;
87 | }
88 |
--------------------------------------------------------------------------------
/reset-css-normalizecss/css/reset.css:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 |
6 | html, body, div, span, applet, object, iframe,
7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8 | a, abbr, acronym, address, big, cite, code,
9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed,
16 | figure, figcaption, footer, header, hgroup,
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 | margin: 0;
20 | padding: 0;
21 | border: 0;
22 | font-size: 100%;
23 | font: inherit;
24 | vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure,
28 | footer, header, hgroup, menu, nav, section {
29 | display: block;
30 | }
31 | body {
32 | line-height: 1;
33 | }
34 | ol, ul {
35 | list-style: none;
36 | }
37 | blockquote, q {
38 | quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 | content: '';
43 | content: none;
44 | }
45 | table {
46 | border-collapse: collapse;
47 | border-spacing: 0;
48 | }
--------------------------------------------------------------------------------
/reset-css-normalizecss/imagens/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/algaworks/curso-html5-css3-bem/ca5dbaa649f82123fca587c22a3e66e7aa3b1727/reset-css-normalizecss/imagens/logo.png
--------------------------------------------------------------------------------
/reset-css-normalizecss/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | MyPilas
7 |
8 |
14 |
15 |
16 |
18 |
19 |
20 |
21 |
22 | Autônomo
23 | R$59/mês
24 |
25 | Até 2 usuários
26 | 500MB de armazenamentoLançamentos ilimitados
28 | Acesso seguro
29 | Sem fidelidade
30 |
31 |
34 |
35 |
36 |
37 | Micro
38 | R$89/mês
39 |
40 | Até 6 usuários
41 | 1GB de armazenamentoLançamentos ilimitados
43 | Acesso seguro
44 | Sem fidelidade
45 |
46 |
49 |
50 |
51 |
52 | Pequena
53 | R$99/mês
54 |
55 | Até 10 usuários
56 | 5GB de armazenamentoLançamentos ilimitados
58 | Acesso seguro
59 | Sem fidelidade
60 |
61 |
64 |
65 |
66 |
Sobre nós
6 |
7 |
11 | Sobre a empresa
12 |
13 | Estamos no mercado desde 2014 .
14 |
15 | Nossa missão é transformar a vida de milhares de alunos.
16 |
17 |
18 |
--------------------------------------------------------------------------------
/seletores-descendentes/css/estilos.css:
--------------------------------------------------------------------------------
1 | /*
2 | .missao strong {
3 | color: red;
4 | }
5 |
6 | article strong {
7 | color: blue;
8 | }
9 | */
10 |
11 | article .missao strong {
12 | color: green;
13 | }
--------------------------------------------------------------------------------
/seletores-descendentes/empresa.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Sobre nós
6 |
7 |
11 | Sobre a empresa
12 |
13 | Estamos no mercado desde 2014 .
14 |
15 | Nossa missão é transformar a vida de milhares de alunos.
16 |
17 |
18 |
--------------------------------------------------------------------------------
/seletores-tipo-classe-id/css/estilos.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | font-family: Verdana;
3 | }
4 |
5 | #titulo {
6 | color: blue;
7 | }
8 |
9 | .destaque {
10 | color: red;
11 | }
12 |
13 | p.missao {
14 | font-family: Arial;
15 | }
--------------------------------------------------------------------------------
/seletores-tipo-classe-id/empresa.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Sobre nós
6 |
7 | Sobre a empresa
11 |
12 | Estamos no mercado desde 2014.
13 |
14 | Nossa missão é transformar a vida de milhares de alunos.
15 |
16 |
--------------------------------------------------------------------------------
/sistema-de-grid-bootstrap/css/estilos.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #ccc;
3 | }
4 |
5 | .container, .container-fluid {
6 | background-color: #fff;
7 | }
8 |
9 | h1 {
10 | padding: 20px 0;
11 | margin: 0;
12 | }
--------------------------------------------------------------------------------
/sistema-de-grid-bootstrap/grid.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
12 |
13 |
26 |
27 |
28 |
29 |
30 |
Banner 1
31 |
32 |
33 |
34 |
35 |
36 |
Banner 2
37 |
38 |
39 |
40 |
41 |
42 |
Banner 3
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
Rodapé
51 |
52 |
53 |
54 |
55 |
11 |
12 |
13 | Nome
14 | Categoria
15 | Preço
16 |
17 |
18 |
19 |
20 | Monitor LG 22"
21 | Informática
22 | R$592,82
23 |
24 |
25 | Monitor LG 22"
26 | Acessórios
27 | R$87,00
28 |
29 |
30 | Sabão em pó
31 | Limpeza
32 | R$11,50
33 |
34 |
35 | Coca-cola 2L
36 | Bebidas
37 | R$5,90
38 |
39 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/unidade-de-medida-percentual/css/percentual.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | html {
6 | font-size: 62.5%; /* 10px = 10 / 16 * 100 = 62.5% (em relação à fonte do navegador) */
7 | }
8 |
9 | .container {
10 | width: 1000px;
11 | background-color: yellow;
12 | }
13 |
14 | .caixa {
15 | width: 50%;
16 | padding: 10%;
17 | margin-top: 10%;
18 |
19 | font-size: 200%; /* 20px */
20 |
21 | background-color: #ccc;
22 | border: 5px solid black;
23 | }
24 |
25 | h1 {
26 | font-size: 250%; /* 50px */
27 | }
28 |
29 | p {
30 | font-size: 150%; /* 30px */
31 | }
--------------------------------------------------------------------------------
/unidade-de-medida-percentual/percentual.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
Economizar tempo com redeploy
13 |
14 |
Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
15 |
16 |
11 |
Economizar tempo com redeploy
12 |
13 |
Já imaginou quanto tempo você economizaria se o redeploy não fosse necessário ao adicionar um novo método em uma classe ou ao alterar um XML ou anotação do seu framework preferido?
14 |
11 |
Economizar tempo com redeploy
12 |
13 |
14 | Já imaginou quanto tempo você economizaria se o redeploy não fosse
15 | necessário ao adicionar um novo método em uma classe ou ao alterar
16 | um XML ou anotação do seu framework preferido?
17 |
18 |
21 |
22 | Legal. Gostei!
23 |
24 |
19 | 
48 | 
12 |
13 |
14 | 
11 |
12 |