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,6 +159,7 @@ img { | ||
159 | font-size: 24px; | 159 | font-size: 24px; |
160 | font-weight: bold; | 160 | font-weight: bold; |
161 | color: white; | 161 | color: white; |
162 | + margin: 0; | ||
162 | padding: 5px 0; | 163 | padding: 5px 0; |
163 | background-color: #0f78a7; | 164 | background-color: #0f78a7; |
164 | -webkit-border-radius: 6px; | 165 | -webkit-border-radius: 6px; |
@@ -171,7 +172,7 @@ img { | @@ -171,7 +172,7 @@ img { | ||
171 | } | 172 | } |
172 | 173 | ||
173 | .wl-section-description { | 174 | .wl-section-description { |
174 | - margin-top: 90px; | 175 | + margin-top: 40px; |
175 | font-size: 14px; | 176 | font-size: 14px; |
176 | line-height: 24px; | 177 | line-height: 24px; |
177 | text-align: center; | 178 | text-align: center; |
@@ -231,10 +232,10 @@ img { | @@ -231,10 +232,10 @@ img { | ||
231 | /* Contribution Overview Section */ | 232 | /* Contribution Overview Section */ |
232 | #wl-overview { | 233 | #wl-overview { |
233 | position: relative; | 234 | position: relative; |
234 | - min-height: 680px; | ||
235 | color: #2d2d2d; | 235 | color: #2d2d2d; |
236 | background: #ffffff; | 236 | background: #ffffff; |
237 | z-index: 1; | 237 | z-index: 1; |
238 | + padding-bottom: 30px; | ||
238 | } | 239 | } |
239 | 240 | ||
240 | .wl-overview-progress-wrapper { | 241 | .wl-overview-progress-wrapper { |
@@ -290,21 +291,10 @@ img { | @@ -290,21 +291,10 @@ img { | ||
290 | /* Features Section */ | 291 | /* Features Section */ |
291 | #wl-features { | 292 | #wl-features { |
292 | position: relative; | 293 | position: relative; |
293 | - min-height: 500px; | ||
294 | background: #ffffff; | 294 | background: #ffffff; |
295 | z-index: 1; | 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 | .wl-features-container { | 298 | .wl-features-container { |
309 | display: flex; | 299 | display: flex; |
310 | flex-direction: row; | 300 | flex-direction: row; |
@@ -319,7 +309,7 @@ img { | @@ -319,7 +309,7 @@ img { | ||
319 | flex-direction: row; | 309 | flex-direction: row; |
320 | align-items: center; | 310 | align-items: center; |
321 | flex: 1; | 311 | flex: 1; |
322 | - padding: 25px 0; | 312 | + padding: 75px 0; |
323 | } | 313 | } |
324 | 314 | ||
325 | .wl-feature { | 315 | .wl-feature { |
@@ -349,8 +339,8 @@ img { | @@ -349,8 +339,8 @@ img { | ||
349 | text-align: center; | 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 | .wl-features-wrapper.-yellow { | 346 | .wl-features-wrapper.-yellow { |
@@ -390,6 +380,7 @@ img { | @@ -390,6 +380,7 @@ img { | ||
390 | flex-wrap: wrap; | 380 | flex-wrap: wrap; |
391 | position: relative; | 381 | position: relative; |
392 | padding: 0; | 382 | padding: 0; |
383 | + min-height: 184px; | ||
393 | } | 384 | } |
394 | 385 | ||
395 | .wl-volunteers-wrapper { | 386 | .wl-volunteers-wrapper { |
@@ -410,19 +401,22 @@ img { | @@ -410,19 +401,22 @@ img { | ||
410 | flex-direction: row; | 401 | flex-direction: row; |
411 | flex-wrap: wrap; | 402 | flex-wrap: wrap; |
412 | background: white; | 403 | background: white; |
413 | - height: 100vh; | 404 | + padding-bottom: 25px; |
414 | } | 405 | } |
415 | 406 | ||
416 | .wl-signs-and-ranking-wrapper { | 407 | .wl-signs-and-ranking-wrapper { |
417 | flex: 1; | 408 | flex: 1; |
418 | position: relative; | 409 | position: relative; |
419 | - min-width: 330px; | ||
420 | } | 410 | } |
421 | 411 | ||
422 | .wl-signs-and-ranking-wrapper .wl-section-title { | 412 | .wl-signs-and-ranking-wrapper .wl-section-title { |
423 | padding: 0 15px; | 413 | padding: 0 15px; |
424 | } | 414 | } |
425 | 415 | ||
416 | +.wl-signs-and-ranking-wrapper .wl-section-description { | ||
417 | + margin-top: 60px; | ||
418 | +} | ||
419 | + | ||
426 | /* Sign Section */ | 420 | /* Sign Section */ |
427 | .wl-signs-container { | 421 | .wl-signs-container { |
428 | display: flex; | 422 | display: flex; |
@@ -503,16 +497,84 @@ img { | @@ -503,16 +497,84 @@ img { | ||
503 | padding-bottom: 20px; | 497 | padding-bottom: 20px; |
504 | } | 498 | } |
505 | 499 | ||
506 | -.star-wrapper { | 500 | +.wl-rank .star-wrapper { |
507 | position: absolute; | 501 | position: absolute; |
508 | margin-top: -2px; | 502 | margin-top: -2px; |
509 | height: 14px; | 503 | height: 14px; |
510 | } | 504 | } |
511 | 505 | ||
512 | -.position-wrapper { | 506 | +.wl-rank .position-wrapper { |
513 | padding-left: 50px; | 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 | /* Responsiveness */ | 578 | /* Responsiveness */ |
517 | @media screen and (min-width: 768px) { | 579 | @media screen and (min-width: 768px) { |
518 | .wl-section-title { | 580 | .wl-section-title { |
@@ -525,23 +587,12 @@ img { | @@ -525,23 +587,12 @@ img { | ||
525 | padding: 6px 0; | 587 | padding: 6px 0; |
526 | } | 588 | } |
527 | 589 | ||
528 | - /* Overview */ | ||
529 | - #wl-overview { | ||
530 | - height: 100vh; | ||
531 | - } | ||
532 | - | ||
533 | /* Features */ | 590 | /* Features */ |
534 | - #wl-features { | ||
535 | - height: 100vh; | ||
536 | - } | ||
537 | .wl-features-container { | 591 | .wl-features-container { |
538 | - height: 100vh; | ||
539 | padding-top: 0; | 592 | padding-top: 0; |
540 | padding-bottom: 0; | 593 | padding-bottom: 0; |
541 | } | 594 | } |
542 | 595 | ||
543 | - /* Volunteers */ | ||
544 | - | ||
545 | /* Signs and Ranking */ | 596 | /* Signs and Ranking */ |
546 | .wl-signs-and-ranking-wrapper .wl-section-title .title { | 597 | .wl-signs-and-ranking-wrapper .wl-section-title .title { |
547 | width: 100%; | 598 | width: 100%; |
@@ -554,11 +605,20 @@ img { | @@ -554,11 +605,20 @@ img { | ||
554 | .wl-signs-and-ranking-wrapper { | 605 | .wl-signs-and-ranking-wrapper { |
555 | padding: 0 15px; | 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 | @media screen and (min-width: 992px) { | 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 | width: 970px; | 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,7 +126,6 @@ | ||
126 | </div> | 126 | </div> |
127 | </section> | 127 | </section> |
128 | <section id="wl-features"> | 128 | <section id="wl-features"> |
129 | - <span class="wl-zigzag-border"></span> | ||
130 | <div class="container-fluid"> | 129 | <div class="container-fluid"> |
131 | <div class="row"> | 130 | <div class="row"> |
132 | <div class="col-xs-12 wl-section-title"> | 131 | <div class="col-xs-12 wl-section-title"> |
@@ -138,7 +137,7 @@ | @@ -138,7 +137,7 @@ | ||
138 | </a> | 137 | </a> |
139 | </div> | 138 | </div> |
140 | <div class="col-xs-12 wl-features-container"> | 139 | <div class="col-xs-12 wl-features-container"> |
141 | - <div class="wl-features-wrapper -salmon"> | 140 | + <div class="wl-features-wrapper -green"> |
142 | <div class="wl-feature"> | 141 | <div class="wl-feature"> |
143 | <div class="wl-feature-img"> | 142 | <div class="wl-feature-img"> |
144 | <img src="assets/img/wl-feature-send-video.png" alt="Ícone de envio de vídeos"> | 143 | <img src="assets/img/wl-feature-send-video.png" alt="Ícone de envio de vídeos"> |
@@ -392,4 +391,125 @@ | @@ -392,4 +391,125 @@ | ||
392 | </div> | 391 | </div> |
393 | </div> | 392 | </div> |
394 | </div> | 393 | </div> |
395 | -</section> | ||
396 | \ No newline at end of file | 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> |