Commit ba7b387b1b7f130b1fdef12aeb28f17875998f58

Authored by Adabriand Furtado
1 parent 5072ad72
Exists in master

Add new sections: VLibras and Sponsors.

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 }
assets/img/brasil-logo.png 0 → 100644

2.06 KB

assets/img/camara-logo.png 0 → 100644

17.3 KB

assets/img/govbr-logo.png 0 → 100644

15.1 KB

assets/img/information-access-logo.png 0 → 100644

1.86 KB

assets/img/lavid-logo.png 0 → 100644

21.5 KB

assets/img/lsd-logo.png 0 → 100644

27.6 KB

assets/img/mpog-logo.png 0 → 100644

4.77 KB

assets/img/rnp-logo.png 0 → 100644

14.2 KB

assets/img/sti-logo.png 0 → 100644

2.12 KB

assets/img/ufcg-logo.png 0 → 100644

25.6 KB

assets/img/ufpb-logo.png 0 → 100644

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>