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> |