├── css
├── .DS_Store
├── reset.css
├── flexbox.css
└── style.css
├── layouts
├── alurinha-layout-mobile.png
└── alurinha-layout-desktop.png
├── maisFlex.css
├── maisFlex.html
├── img
├── background2.svg
├── logos
│ ├── alura.svg
│ ├── caelum.svg
│ └── cdc.svg
└── background1.svg
└── index.html
/css/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rafaballerini/FlexboxCSS/HEAD/css/.DS_Store
--------------------------------------------------------------------------------
/layouts/alurinha-layout-mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rafaballerini/FlexboxCSS/HEAD/layouts/alurinha-layout-mobile.png
--------------------------------------------------------------------------------
/layouts/alurinha-layout-desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rafaballerini/FlexboxCSS/HEAD/layouts/alurinha-layout-desktop.png
--------------------------------------------------------------------------------
/maisFlex.css:
--------------------------------------------------------------------------------
1 | .flexContainer:last-child { margin-top: 2em; }
2 | body { margin: 0; padding: 0; }
3 | div { height: 50px; width: 50px; }
4 | div:nth-child(1) { background-color: red; width: 50px; height: 50px; }
5 | div:nth-child(2) { background-color: blue; }
6 | div:nth-child(3) { background-color: green; }
7 | div:nth-child(4) { background-color: yellow; }
8 | div:nth-child(5) { background-color: pink; }
9 | div:nth-child(6) { background-color: black; }
10 | div:nth-child(7) { background-color: orange; }
11 | div:nth-child(8) { background-color: silver; }
12 | /*fim do setup*/
13 |
14 | .flexContainer {
15 | display: flex;
16 | /*justify-content: space-around;
17 | align-items: center;
18 | flex-direction: column;*/
19 | }
20 |
21 | .flexItem {
22 | /*flex: 0 1 25%;*/
23 | flex: 0 1 200px;
24 | }
25 |
26 | .primeiro {
27 | /*flex-grow: 3;*/
28 | /*flex-shrink: 2;*/
29 | }
30 |
31 | /*100 / 5 = 20*/
32 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/maisFlex.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Mais Flex
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
22 |
23 |
24 |
25 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/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 | }
49 |
--------------------------------------------------------------------------------
/img/background2.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/css/flexbox.css:
--------------------------------------------------------------------------------
1 | .cabecalhoPrincipal .container {
2 | display: flex;
3 | align-items: center;
4 | justify-content: space-between;
5 | }
6 |
7 | .cabecalhoPrincipal-nav {
8 | display: flex;
9 | }
10 |
11 | .rodapePrincipal-patrocinadores .container {
12 | display: flex;
13 | justify-content: space-between;
14 | }
15 |
16 | .rodapePrincipal-patrocinadores-list {
17 | display: flex;
18 | align-items: center;
19 | justify-content: space-around;
20 | width: 70%;
21 | margin-right: 5%;
22 | }
23 |
24 | .rodapePrincipal-contatoForm {
25 | width: 25%;
26 | }
27 |
28 | .rodapePrincipal-contatoForm-fieldset {
29 | display: flex;
30 | }
31 |
32 | .rodapePrincipal-navMap-list {
33 | display: flex;
34 | /*flex-direction: column;
35 | flex-wrap: wrap;*/
36 | flex-flow: column wrap;
37 | height: 250px;
38 | }
39 |
40 | .conteudoPrincipal-cursos {
41 | display: flex;
42 | flex-wrap: wrap;
43 | }
44 |
45 | .conteudoPrincipal-cursos-link {
46 | width: 23%;
47 | margin: 1%;
48 | }
49 |
50 | .conteudoPrincipal-cursos-link:nth-child(4n) {
51 | margin-right: 0;
52 | }
53 |
54 | .conteudoPrincipal-cursos-link:nth-child(4n+1) {
55 | margin-left: 0;
56 | }
57 |
58 | .videoSobre .container {
59 | display: flex;
60 | justify-content: space-between;
61 | }
62 |
63 | .videoSobre-sobre {
64 | text-align: center;
65 | display: flex;
66 | flex-direction: column;
67 | flex-grow: 10;
68 | }
69 |
70 | .videoSobre-sobre-list {
71 | flex-grow: 1;
72 | }
73 |
74 | .videoSobre-video {
75 | flex-grow: 1;
76 | }
77 |
78 | /*parte mobile*/
79 | @media(max-width: 768px) {
80 | .cabecalhoPrincipal-nav {
81 | flex-direction: column;
82 | }
83 |
84 | .cabecalhoPrincipal .container {
85 | flex-direction: column;
86 | align-items: initial;
87 | text-align: center;
88 | }
89 |
90 | .conteudoPrincipal-cursos {
91 | flex-direction: column;
92 | }
93 |
94 | .conteudoPrincipal-cursos-link {
95 | width: 100%;
96 | }
97 |
98 | .rodapePrincipal-navMap-list {
99 | height: auto;
100 | }
101 |
102 | .rodapePrincipal-patrocinadores .container {
103 | flex-direction: column;
104 | align-items: center;
105 | }
106 |
107 | .rodapePrincipal-patrocinadores-list {
108 | margin: 0;
109 | width: 100%;
110 | }
111 |
112 | .rodapePrincipal-contatoForm {
113 | width: 100%;
114 | }
115 |
116 | .rodapePrincipal-contatoForm-fieldset {
117 | justify-content: center;
118 | }
119 |
120 | .cabecalhoPrincipal-nav-link-app {
121 | order: -1;
122 | }
123 |
124 | .videoSobre .container {
125 | flex-direction: column;
126 | }
127 |
128 | .videoSobre-video {
129 | margin: 0 auto;
130 | }
131 | }
132 |
--------------------------------------------------------------------------------
/img/logos/alura.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/img/logos/caelum.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/img/background1.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #F2F5F7;
3 | font-family: 'Open Sans',Arial,sans-serif;
4 | }
5 |
6 | .container {
7 | width: 94%;
8 | margin: 0 auto;
9 | }
10 |
11 | .cabecalhoPrincipal {
12 | background-color: #FFF;
13 | padding: 20px 0;
14 | }
15 |
16 | .cabecalhoPrincipal-titulo {
17 | font-weight: bold;
18 | font-size: 2em;
19 | margin-bottom: 20px;
20 | }
21 |
22 | .cabecalhoPrincipal-titulo a {
23 | text-decoration: none;
24 | color: inherit;
25 | }
26 |
27 | .cabecalhoPrincipal-nav-link {
28 | padding: 10px;
29 | margin-bottom: 10px;
30 | color: #9799A6;
31 | background-color: #FFF;
32 | text-decoration: none;
33 | transition: .5s;
34 | display: block;
35 |
36 | border-bottom: 1px solid #9799A6;
37 | }
38 |
39 | .conteudoPrincipal {
40 | margin-top: 20px;
41 | margin-bottom: 20px;
42 | }
43 |
44 | .subtitulo {
45 | font-weight: bold;
46 | font-size: 32px;
47 | margin-bottom: 10px;
48 | text-align: center;
49 | }
50 |
51 | .conteudoPrincipal-cursos-link {
52 | height: 100px;
53 | background-color: #FFF;
54 | text-align: center;
55 | margin: 1%;
56 | transition: .3s;
57 | box-shadow: 2px 2px 2px #CCC;
58 | position: relative;
59 | }
60 |
61 | .conteudoPrincipal-cursos-link a {
62 | text-decoration: none;
63 | color: #000;
64 | font-weight: bold;
65 | display: block;
66 | width: 100%;
67 | height: 100%;
68 | position: absolute;
69 | top: 0;
70 | left: 0;
71 | }
72 |
73 | .conteudoPrincipal-cursos-link:hover {
74 | box-shadow: 4px 4px 4px #CCC;
75 | }
76 |
77 | .conteudoPrincipal-cursos-link a:before {
78 | content: '';
79 | display: block;
80 | width: 50px;
81 | height: 50px;
82 | margin: 10px auto;
83 | }
84 |
85 | .conteudoPrincipal-cursos-link:nth-child(even) a:before {
86 | background: url(../img/background1.svg) no-repeat;
87 | }
88 |
89 | .conteudoPrincipal-cursos-link:nth-child(odd) a:before {
90 | background: url(../img/background2.svg) no-repeat;
91 | }
92 |
93 |
94 | .rodapePrincipal {
95 | background-color: #324C64;
96 | padding-top: 20px;
97 | }
98 |
99 | .rodapePrincipal .subtitulo {
100 | color: #FFF;
101 | }
102 |
103 | .rodapePrincipal-navMap-link {
104 | text-decoration: none;
105 | color: #FFF;
106 | margin-top: 10px;
107 | }
108 |
109 | .rodapePrincipal-navMap-link {
110 | font-size: .9em;
111 | }
112 |
113 | .navmap-list-title {
114 | font-weight: 700;
115 | font-size: 1.3em;
116 | margin: .9em 0;
117 | padding-left: .3em;
118 | padding-top: .2em;
119 | padding-bottom: .2em;
120 | }
121 |
122 | .navmap-list-title + .rodapePrincipal-navMap-link {
123 | margin-top: 0;
124 | }
125 |
126 | .navmap-list-title-bancoDeDados { color: #EC6E5A; border-left: 4px solid #EC6E5A; }
127 | .navmap-list-title-framework { color: #AD85BF; border-left: 4px solid #AD85BF; }
128 | .navmap-list-title-frontend { color: #5EC6F3; border-left: 4px solid #5EC6F3; }
129 | .navmap-list-title-backend { color: #25D285; border-left: 4px solid #25D285; }
130 |
131 | .rodapePrincipal-patrocinadores {
132 | margin-top: 30px;
133 | background: #F2F5F7;
134 | padding: 20px 0;
135 | }
136 |
137 | .rodapePrincipal-contatoForm {
138 | margin-top: 20px;
139 | text-align: center;
140 | }
141 |
142 | .rodapePrincipal-contatoForm label[for=email-contato] {
143 | font-weight: bold;
144 | font-size: 14px;
145 | color: #000;
146 | margin-bottom: 5px;
147 | display: block;
148 | }
149 |
150 | .rodapePrincipal-contatoForm-emailInput {
151 | border-top-left-radius: 5px;
152 | border-bottom-left-radius: 5px;
153 | padding: 10px;
154 | }
155 |
156 | .rodapePrincipal-contatoForm-submit {
157 | border-top-right-radius: 5px;
158 | border-bottom-right-radius: 5px;
159 | background-color: #4DBA7A;
160 | color: #FFF;
161 | cursor: pointer;
162 |
163 | }
164 |
165 | .rodapePrincipal-contatoForm-submit,
166 | .rodapePrincipal-contatoForm-emailInput {
167 | outline: 0;
168 | border: 1px solid #4DBA7A;
169 | box-sizing: border-box;
170 | font-size: 16px;
171 | }
172 |
173 | .videoSobre {
174 | background-color: #5E9EDC;
175 | padding: 25px 0;
176 |
177 | }
178 |
179 | .videoSobre-video {
180 | max-width: 100%;
181 | }
182 |
183 | .videoSobre .container {
184 | color: #FFF;
185 | }
186 |
187 | .videoSobre-sobre-title {
188 | font-size: 1.2em;
189 | font-weight: bolder;
190 | }
191 |
192 | .videoSobre-sobre {
193 | font-size: 1.3em;
194 | line-height: 2;
195 | }
196 |
197 | .videoSobre-button {
198 | border-radius: 8px;
199 | background-color: #ec6e5a;
200 | display: block;
201 | color: #FFF;
202 | border: none;
203 | height: 50px;
204 | font-size: .8em;
205 | outline: none;
206 | }
207 |
208 | .rodapePrincipal-contatoForm-legend {
209 | margin-bottom: 10px;
210 | }
211 |
212 | @media(min-width: 769px) {
213 |
214 | .container {
215 | width: 85%;
216 | }
217 |
218 | .subtitulo {
219 | text-align: left;
220 | }
221 |
222 | .cabecalhoPrincipal-nav-link {
223 | border-radius: 5px;
224 | border: 1px solid #9799A6;
225 | }
226 |
227 | .cabecalhoPrincipal-nav-link:hover {
228 | color: #FFF;
229 | background-color: #9799A6;
230 | }
231 |
232 | .cabecalhoPrincipal-titulo {
233 | margin: 0;
234 | }
235 |
236 | .cabecalhoPrincipal-nav {
237 | width: auto;
238 | }
239 |
240 | .cabecalhoPrincipal-nav-link {
241 | width: auto;
242 | margin: 0 0 0 10px;
243 | }
244 |
245 | .rodapePrincipal-contatoForm {
246 | margin-top: 0;
247 | text-align: left;
248 | }
249 |
250 | .conteudoPrincipal-cursos-link:nth-child(3n) {
251 | margin-right: 0;
252 | }
253 |
254 | .conteudoPrincipal-cursos-link:nth-child(3n+1) {
255 | margin-left: 0;
256 | }
257 |
258 | }
259 |
260 | @media(min-width: 1000px) {
261 | .conteudoPrincipal-cursos-link {
262 | margin: 1.333%;
263 | }
264 |
265 | .conteudoPrincipal-cursos-link:nth-child(3n) {
266 | margin-right: 1.33%;
267 | }
268 |
269 | .conteudoPrincipal-cursos-link:nth-child(3n+1) {
270 | margin-left: 1.333%;
271 | }
272 |
273 | .conteudoPrincipal-cursos-link:nth-child(4n) {
274 | margin-right: 0;
275 | }
276 |
277 | .conteudoPrincipal-cursos-link:nth-child(4n+1) {
278 | margin-left: 0;
279 | }
280 |
281 | .videoSobre-sobre {
282 | margin-left: 1.5em;
283 | }
284 |
285 | }
286 |
287 |
288 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Alurinha | Cursos online
7 |
8 |
9 |
10 |
11 |
12 |
13 |
29 |
30 |
31 |
32 |
Nossos cursos
33 |
34 |
56 |
60 |
61 |
62 |
63 |
Vantagens do Alurinha
64 |
65 | - Estude onde quiser
66 | - Novos cursos todos os meses
67 | - Cursos compatíveis com o mercado
68 |
69 |
70 |
71 |