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