Commit ba7b387b1b7f130b1fdef12aeb28f17875998f58
1 parent
5072ad72
Exists in
master
Add new sections: VLibras and Sponsors.
Showing
14 changed files
with
216 additions
and
36 deletions
Show diff stats
assets/css/base.css
... | ... | @@ -159,6 +159,7 @@ img { |
159 | 159 | font-size: 24px; |
160 | 160 | font-weight: bold; |
161 | 161 | color: white; |
162 | + margin: 0; | |
162 | 163 | padding: 5px 0; |
163 | 164 | background-color: #0f78a7; |
164 | 165 | -webkit-border-radius: 6px; |
... | ... | @@ -171,7 +172,7 @@ img { |
171 | 172 | } |
172 | 173 | |
173 | 174 | .wl-section-description { |
174 | - margin-top: 90px; | |
175 | + margin-top: 40px; | |
175 | 176 | font-size: 14px; |
176 | 177 | line-height: 24px; |
177 | 178 | text-align: center; |
... | ... | @@ -231,10 +232,10 @@ img { |
231 | 232 | /* Contribution Overview Section */ |
232 | 233 | #wl-overview { |
233 | 234 | position: relative; |
234 | - min-height: 680px; | |
235 | 235 | color: #2d2d2d; |
236 | 236 | background: #ffffff; |
237 | 237 | z-index: 1; |
238 | + padding-bottom: 30px; | |
238 | 239 | } |
239 | 240 | |
240 | 241 | .wl-overview-progress-wrapper { |
... | ... | @@ -290,21 +291,10 @@ img { |
290 | 291 | /* Features Section */ |
291 | 292 | #wl-features { |
292 | 293 | position: relative; |
293 | - min-height: 500px; | |
294 | 294 | background: #ffffff; |
295 | 295 | z-index: 1; |
296 | 296 | } |
297 | 297 | |
298 | -.wl-zigzag-border { | |
299 | - background: url('../img/zigzag-border.png') repeat-x; | |
300 | - height: 7px; | |
301 | - width: 100%; | |
302 | - position: absolute; | |
303 | - z-index: 1; | |
304 | - left: 0; | |
305 | - top: 0; | |
306 | -} | |
307 | - | |
308 | 298 | .wl-features-container { |
309 | 299 | display: flex; |
310 | 300 | flex-direction: row; |
... | ... | @@ -319,7 +309,7 @@ img { |
319 | 309 | flex-direction: row; |
320 | 310 | align-items: center; |
321 | 311 | flex: 1; |
322 | - padding: 25px 0; | |
312 | + padding: 75px 0; | |
323 | 313 | } |
324 | 314 | |
325 | 315 | .wl-feature { |
... | ... | @@ -349,8 +339,8 @@ img { |
349 | 339 | text-align: center; |
350 | 340 | } |
351 | 341 | |
352 | -.wl-features-wrapper.-salmon { | |
353 | - background: #fac389; | |
342 | +.wl-features-wrapper.-green { | |
343 | + background: #99f35d; | |
354 | 344 | } |
355 | 345 | |
356 | 346 | .wl-features-wrapper.-yellow { |
... | ... | @@ -390,6 +380,7 @@ img { |
390 | 380 | flex-wrap: wrap; |
391 | 381 | position: relative; |
392 | 382 | padding: 0; |
383 | + min-height: 184px; | |
393 | 384 | } |
394 | 385 | |
395 | 386 | .wl-volunteers-wrapper { |
... | ... | @@ -410,19 +401,22 @@ img { |
410 | 401 | flex-direction: row; |
411 | 402 | flex-wrap: wrap; |
412 | 403 | background: white; |
413 | - height: 100vh; | |
404 | + padding-bottom: 25px; | |
414 | 405 | } |
415 | 406 | |
416 | 407 | .wl-signs-and-ranking-wrapper { |
417 | 408 | flex: 1; |
418 | 409 | position: relative; |
419 | - min-width: 330px; | |
420 | 410 | } |
421 | 411 | |
422 | 412 | .wl-signs-and-ranking-wrapper .wl-section-title { |
423 | 413 | padding: 0 15px; |
424 | 414 | } |
425 | 415 | |
416 | +.wl-signs-and-ranking-wrapper .wl-section-description { | |
417 | + margin-top: 60px; | |
418 | +} | |
419 | + | |
426 | 420 | /* Sign Section */ |
427 | 421 | .wl-signs-container { |
428 | 422 | display: flex; |
... | ... | @@ -503,16 +497,84 @@ img { |
503 | 497 | padding-bottom: 20px; |
504 | 498 | } |
505 | 499 | |
506 | -.star-wrapper { | |
500 | +.wl-rank .star-wrapper { | |
507 | 501 | position: absolute; |
508 | 502 | margin-top: -2px; |
509 | 503 | height: 14px; |
510 | 504 | } |
511 | 505 | |
512 | -.position-wrapper { | |
506 | +.wl-rank .position-wrapper { | |
513 | 507 | padding-left: 50px; |
514 | 508 | } |
515 | 509 | |
510 | +/* VLibras section */ | |
511 | +#wl-vlibras { | |
512 | + position: relative; | |
513 | + z-index: 1; | |
514 | + background: #f4f4f4; | |
515 | +} | |
516 | + | |
517 | +.wl-vlibras-container { | |
518 | + padding-top: 25px; | |
519 | + padding-bottom: 60px; | |
520 | +} | |
521 | + | |
522 | +.wl-vlibras-description { | |
523 | + margin-bottom: 40px; | |
524 | +} | |
525 | + | |
526 | +.wl-vlibras-description .title { | |
527 | + margin-bottom: 20px; | |
528 | +} | |
529 | + | |
530 | +.wl-vlibras-video { | |
531 | + width: 100%; | |
532 | + height: 100%; | |
533 | +} | |
534 | + | |
535 | +/* Sponsors section */ | |
536 | +#wl-sponsors { | |
537 | + position: relative; | |
538 | + z-index: 1; | |
539 | + background: white; | |
540 | +} | |
541 | + | |
542 | +.wl-sponsors-container { | |
543 | + text-align: center; | |
544 | + padding: 50px 0; | |
545 | +} | |
546 | + | |
547 | +.wl-sponsors-container a { | |
548 | + text-decoration: none; | |
549 | +} | |
550 | + | |
551 | +.wl-sponsors-container img { | |
552 | + margin-right: 35px; | |
553 | + margin-bottom: 20px; | |
554 | +} | |
555 | + | |
556 | +.wl-sponsors-container a:last-child { | |
557 | + margin-right: 0; | |
558 | +} | |
559 | + | |
560 | +/* Sponsors section */ | |
561 | +#wl-contact { | |
562 | + position: relative; | |
563 | + z-index: 1; | |
564 | + background: #0042b1; | |
565 | +} | |
566 | + | |
567 | +.wl-contact-container { | |
568 | + text-align: center; | |
569 | + padding: 35px 0; | |
570 | +} | |
571 | + | |
572 | +.wl-contact-description { | |
573 | + color: white; | |
574 | + line-height: 32px; | |
575 | + padding: 65px 0; | |
576 | +} | |
577 | + | |
516 | 578 | /* Responsiveness */ |
517 | 579 | @media screen and (min-width: 768px) { |
518 | 580 | .wl-section-title { |
... | ... | @@ -525,23 +587,12 @@ img { |
525 | 587 | padding: 6px 0; |
526 | 588 | } |
527 | 589 | |
528 | - /* Overview */ | |
529 | - #wl-overview { | |
530 | - height: 100vh; | |
531 | - } | |
532 | - | |
533 | 590 | /* Features */ |
534 | - #wl-features { | |
535 | - height: 100vh; | |
536 | - } | |
537 | 591 | .wl-features-container { |
538 | - height: 100vh; | |
539 | 592 | padding-top: 0; |
540 | 593 | padding-bottom: 0; |
541 | 594 | } |
542 | 595 | |
543 | - /* Volunteers */ | |
544 | - | |
545 | 596 | /* Signs and Ranking */ |
546 | 597 | .wl-signs-and-ranking-wrapper .wl-section-title .title { |
547 | 598 | width: 100%; |
... | ... | @@ -554,11 +605,20 @@ img { |
554 | 605 | .wl-signs-and-ranking-wrapper { |
555 | 606 | padding: 0 15px; |
556 | 607 | } |
608 | + | |
609 | + /* VLibras section */ | |
610 | + .wl-vlibras-container { | |
611 | + padding-top: 50px; | |
612 | + } | |
613 | + .wl-vlibras-description { | |
614 | + margin-bottom: 0; | |
615 | + margin-top: 50px; | |
616 | + } | |
557 | 617 | } |
558 | 618 | |
559 | 619 | @media screen and (min-width: 992px) { |
560 | - #wl-overview .container, | |
561 | - #wl-header .container { | |
620 | + #wl-header .container, #wl-overview .container, | |
621 | + #wl-vlibras .container { | |
562 | 622 | width: 970px; |
563 | 623 | } |
564 | 624 | } | ... | ... |
2.06 KB
17.3 KB
15.1 KB
1.86 KB
21.5 KB
27.6 KB
4.77 KB
14.2 KB
2.12 KB
25.6 KB
33 KB
assets/img/zigzag-border.png
1 KB
assets/templates/sections.html
... | ... | @@ -126,7 +126,6 @@ |
126 | 126 | </div> |
127 | 127 | </section> |
128 | 128 | <section id="wl-features"> |
129 | - <span class="wl-zigzag-border"></span> | |
130 | 129 | <div class="container-fluid"> |
131 | 130 | <div class="row"> |
132 | 131 | <div class="col-xs-12 wl-section-title"> |
... | ... | @@ -138,7 +137,7 @@ |
138 | 137 | </a> |
139 | 138 | </div> |
140 | 139 | <div class="col-xs-12 wl-features-container"> |
141 | - <div class="wl-features-wrapper -salmon"> | |
140 | + <div class="wl-features-wrapper -green"> | |
142 | 141 | <div class="wl-feature"> |
143 | 142 | <div class="wl-feature-img"> |
144 | 143 | <img src="assets/img/wl-feature-send-video.png" alt="Ícone de envio de vídeos"> |
... | ... | @@ -392,4 +391,125 @@ |
392 | 391 | </div> |
393 | 392 | </div> |
394 | 393 | </div> |
395 | -</section> | |
396 | 394 | \ No newline at end of file |
395 | +</section> | |
396 | +<section id="wl-vlibras"> | |
397 | + <div class="container-fluid container"> | |
398 | + <div class="row"> | |
399 | + <div class="col-xs-12"> | |
400 | + <div class="wl-section-title"> | |
401 | + <a href="#wl-vlibras" du-smooth-scroll> | |
402 | + <h2 class="title"> | |
403 | + Conheça o VLibras | |
404 | + </h2> | |
405 | + </a> | |
406 | + </div> | |
407 | + </div> | |
408 | + </div> | |
409 | + <div class="wl-vlibras-container"> | |
410 | + <div class="row"> | |
411 | + <div class="col-xs-12 col-md-6"> | |
412 | + <div class="wl-vlibras-description"> | |
413 | + <h1 class="title">VLibras</h1> | |
414 | + <span>Resultado de uma parceria entre o Ministério do Planejamento, Orçamento e Gestão (MP), por meio da Secretaria de Tecnologia da Informação (STI) e a Universidade Federal da Paraíba (UFPB) | |
415 | + </span> | |
416 | + </div> | |
417 | + </div> | |
418 | + <div class="col-xs-12 col-md-6"> | |
419 | + <div class="wl-vlibras-video-wrapper"> | |
420 | + <video class="wl-vlibras-video" controls> | |
421 | + <source src="http://vlibras.gov.br/video/VLibras-Demo2_com_AD.mp4" type="video/mp4"> | |
422 | + Seu navegador não oferece suporte a videos HTML5! | |
423 | + </video> | |
424 | + </div> | |
425 | + </div> | |
426 | + </div> | |
427 | + </div> | |
428 | + </div> | |
429 | +</section> | |
430 | +<section id="wl-sponsors"> | |
431 | + <div class="container-fluid"> | |
432 | + <div class="row"> | |
433 | + <div class="col-xs-12 wl-section-title"> | |
434 | + <a href="#wl-sponsors" du-smooth-scroll> | |
435 | + <h2 class="title"> | |
436 | + Realizadores | |
437 | + </h2> | |
438 | + </a> | |
439 | + </div> | |
440 | + </div> | |
441 | + <div class="wl-sponsors-container"> | |
442 | + <div class="row"> | |
443 | + <div class="col-xs-12"> | |
444 | + <a href="http://www.planejamento.gov.br/acesso-a-informacao/institucional/unidades/sti"> | |
445 | + <img src="assets/img/sti-logo.png" alt="Secretaria de Tecnologia da Informação"> | |
446 | + </a> | |
447 | + <a href="http://www.planejamento.gov.br/"> | |
448 | + <img src="assets/img/mpog-logo.png" alt="Ministério Planejamento"> | |
449 | + </a> | |
450 | + <a href="http://www.justica.gov.br/"> | |
451 | + <img src="assets/img/govbr-logo.png" alt="Ministério da Justiça e Cidadania"> | |
452 | + </a> | |
453 | + <a href="http://www2.camara.leg.br/"> | |
454 | + <img src="assets/img/camara-logo.png" alt="Câmara dos Deputados"> | |
455 | + </a> | |
456 | + </div> | |
457 | + <div class="col-xs-12"> | |
458 | + <a href="http://lavid.ufpb.br/"> | |
459 | + <img src="assets/img/lavid-logo.png" alt="Laboratório de aplicações de vídeo digital - Lavid"> | |
460 | + </a> | |
461 | + <a href="http://www.ufpb.br/"> | |
462 | + <img src="assets/img/ufpb-logo.png" alt="Universidade Federal da Paraíba - UFPB"> | |
463 | + </a> | |
464 | + <a href="https://www.rnp.br/"> | |
465 | + <img src="assets/img/rnp-logo.png" alt="Rede Nacional de Ensino e Pesquisa - RNP"> | |
466 | + </a> | |
467 | + <a href="https://www.lsd.ufcg.edu.br/"> | |
468 | + <img src="assets/img/lsd-logo.png" alt="Laboratório de Sistemas Distribuídos. - LSD"> | |
469 | + </a> | |
470 | + <a href="http://www.ufcg.edu.br/"> | |
471 | + <img src="assets/img/ufcg-logo.png" alt="Universidade Federal de Campina Grande - UFCG"> | |
472 | + </a> | |
473 | + </div> | |
474 | + </div> | |
475 | + </div> | |
476 | + </div> | |
477 | +</section> | |
478 | +<section id="wl-contact"> | |
479 | + <div class="container-fluid"> | |
480 | + <div class="row"> | |
481 | + <div class="col-xs-12 wl-section-title"> | |
482 | + <a href="wl-sponsors" du-smooth-scroll> | |
483 | + <h2 class="title"> | |
484 | + Contato | |
485 | + </h2> | |
486 | + </a> | |
487 | + </div> | |
488 | + </div> | |
489 | + <div class="wl-contact-container"> | |
490 | + <div class="row"> | |
491 | + <div class="col-xs-12"> | |
492 | + <div class="wl-contact-description"> | |
493 | + Ministério do Planejamento, Desenvolvimento e Gestão<br> | |
494 | + Secretaria de Tecnologia da Informação<br> | |
495 | + Departamento de Governo Digital<br> | |
496 | + Endereço: Esplanada dos Ministérios Bloco "C"<br> | |
497 | + E-mail: govbr@planejamento.gov.br<br> | |
498 | + Telefone: 61) 2020-8546 / (61) 2020-1666 | |
499 | + </div> | |
500 | + </div> | |
501 | + </div> | |
502 | + <div class="row"> | |
503 | + <div class="col-xs-6"> | |
504 | + <a href="http://www.acessoainformacao.gov.br/"> | |
505 | + <img src="assets/img/information-access-logo.png" alt="Logo acesso à informação"> | |
506 | + </a> | |
507 | + </div> | |
508 | + <div class="col-xs-6"> | |
509 | + <a href="http://www.brasil.gov.br/"> | |
510 | + <img src="assets/img/brasil-logo.png" alt="Logo Brasil governo federal"> | |
511 | + </a> | |
512 | + </div> | |
513 | + </div> | |
514 | + </div> | |
515 | + </div> | |
516 | +</section> | ... | ... |