├── .vscode ├── settings.json └── launch.json ├── Vector.png ├── .hintrc ├── README.md ├── index.html ├── code.js └── style.css /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | } -------------------------------------------------------------------------------- /Vector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BERSEKz/Challenge-Oracle-One/HEAD/Vector.png -------------------------------------------------------------------------------- /.hintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "development" 4 | ], 5 | "hints": { 6 | "meta-viewport": "off" 7 | } 8 | } -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [] 7 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Challenge-Oracle-One 2 | Encriptador de texto desarrollado con JavaScript, para el Alura Challenges 3 | 4 | 💡 Descripción 5 | Encriptador de texto desarrollado con JavaScript, HTML y CSS para el challenge del Proyecto ONE de Oracle+Alura LATAM. 6 | 7 | El desafio consiste en construir una pagina web que encripte y desencripte texto que sera ingresado por el usuario y presentarlo en su forma encriptada o desencriptada, el objetivo de este desafio es poner a prueba los conocimientos adquiridos durante el curso "Principiante en programación" 8 | 9 | 🔑 Llaves de encriptacion 10 | Las llaves de encriptacion solicitadas son las siguientes: 11 | 12 | 13 | La letra "a" es convertida a "ai". 14 | 15 | La letra "e" es convertida a "enter". 16 | 17 | La letra "i" es convertida a "imes". 18 | 19 | La letra "o" es convertida a "ober" 20 | 21 | La letra "u" es convertida a "ufat" 22 | 23 | ✔️ Requisitos 24 | 25 | Debe ser posible convertir una palabra para la versión encriptada también devolver una palabra encriptada para su versión original. 26 | 27 | Por ejemplo: 28 | 29 | "gato" => "gaitober" 30 | 31 | gaitober" => "gato" 32 | 33 | La página debe tener campos para inserción del texto que será encriptado o desencriptado, y el usuario debe poder escoger entre as dos opciones. 34 | El resultado debe ser mostrado en la pantalla. 35 | 36 | Extras: 37 | 38 | Un botón que copie el texto encriptado/desencriptado para la sección de transferencia, o sea que tenga la misma funcionalidad del ctrl+C o de la opción "copiar" del menú de las aplicaciones. 39 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Encriptador de Mensajes 9 | 10 | 11 | 12 |
13 | letra-A 14 |
15 | 16 |
17 |
18 | 19 |
20 | 21 | 22 |
23 |
24 | 25 |
26 |
27 | muñeco 28 |
29 | 30 |
31 | NINGUN MENSAJE FUE ENCONTRADO 32 |
33 |
34 | Ingrese el texto que decea encriptar o desencriptar 35 |
36 |
37 | Resultado de mensaje 38 | 39 | 40 |
41 | 42 |
43 |
44 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /code.js: -------------------------------------------------------------------------------- 1 | const inputMensaje = document.querySelector ("#mensaje"); 2 | const inputResultado = document.querySelector ("#resultado"); 3 | const btnEncriptar = document.querySelector ("#encriptar"); 4 | const btnDesencriptar = document.querySelector ("#desencriptar"); 5 | const btnCopiar = document.querySelector ("#copiar"); 6 | 7 | var muneico=document.querySelector(".muneco") 8 | var text1=document.querySelector(".texto1") 9 | var text2=document.querySelector(".texto2") 10 | 11 | function validarmensaje(){ 12 | var mensaje = inputMensaje.value; 13 | let letrasvalidas ="abcdefghijklmnopqrstuvwxyz"; 14 | let mensajedeerror= document.createDocumentFragment(); 15 | for (let letra of mensaje){ 16 | if (!letrasvalidas.includes(letra)){ 17 | let p = document.createElement("p"); 18 | p.setAttribute("class","error"); 19 | p.textContent="la letra $letra no es valida"; 20 | mensajeError.appendchild(p); 21 | } 22 | } 23 | seccion1.appendchild(mensajedeerror); 24 | if (mensajedeerror.children.length === 0){ 25 | return true; 26 | } 27 | return false; 28 | } 29 | 30 | 31 | 32 | function encriptar(){ 33 | 34 | var mensaje= inputMensaje.value; 35 | let letrasValidas = "abcdefghijklmnñopqrstuvwxyz "; 36 | let mensajeError = document.createDocumentFragment(); 37 | for (let letra of mensaje){ 38 | if (!letrasValidas.includes(letra)){ 39 | let p = document.createElement ("p"); 40 | p.setAttribute("class","error"); 41 | alert ("El mensaje ingresado no es valido, recuerda que solo son palabras en minuscula y sin numeros o caracteres especiales"); 42 | return; 43 | } 44 | } 45 | ocultaradelante() 46 | var mensajeEncriptado = inputMensaje.value; 47 | var mensaje = mensajeEncriptado 48 | .replace("e","enter") 49 | .replace("i","imes") 50 | .replace("a","ai") 51 | .replace("o","ober") 52 | .replace("u","ufat"); 53 | inputResultado.value = mensaje; 54 | } 55 | 56 | function desencriptar(){ 57 | ocultaradelante() 58 | var mensajeEncriptado = inputMensaje.value; 59 | var mensaje = mensajeEncriptado 60 | .replace("enter","e") 61 | .replace("imes","i") 62 | .replace("ai","a") 63 | .replace("ober","o") 64 | .replace("ufat","u"); 65 | inputResultado.value = mensaje; 66 | } 67 | 68 | function ocultaradelante(){ 69 | muneico.classList.add("ocultar"); 70 | text1.classList.add("ocultar"); 71 | text2.classList.add("ocultar"); 72 | } 73 | 74 | function copiar(){ 75 | var mensajeEncriptado =inputResultado.value; 76 | navigator.clipboard.writeText(mensajeEncriptado); 77 | inputMensaje.value = ""; 78 | } 79 | 80 | 81 | 82 | btnEncriptar.onclick = encriptar; 83 | btnDesencriptar.onclick = desencriptar; 84 | btnCopiar.onclick = copiar; 85 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | 8 | @media (min-width: 991px) { 9 | body{ 10 | background-color:#757fb2 ; 11 | } 12 | header{ 13 | width: 100%; 14 | height: 50px; 15 | } 16 | 17 | main{ 18 | width: 95%; 19 | height: 82%; 20 | display: flex; 21 | justify-content: space-between; 22 | } 23 | 24 | section{ 25 | width: 48%; 26 | height: 100%; 27 | } 28 | 29 | .seccion1{ 30 | width: 67%; 31 | } 32 | .seccion2{ 33 | width: 24%; 34 | background-color: #fff; 35 | border-radius: 20px; 36 | margin-right: 10px; 37 | box-sizing: border-box; 38 | overflow: hidden; 39 | 40 | } 41 | 42 | .mensaje{ 43 | width: 100%; 44 | height: 90%; 45 | display: block; 46 | margin: auto; 47 | margin-top: 20; 48 | resize: none; 49 | font-size:xx-large; 50 | flex-wrap: nowrap; 51 | } 52 | 53 | button{ 54 | all: initial; 55 | font:inherit; 56 | cursor:pointer; 57 | user-select: none; 58 | color:rgb(255, 255, 255); 59 | background-color:#0A3871 ; 60 | text-align: center; 61 | margin: 25px; 62 | padding: 0.5em 1em; 63 | max-width: 50%; 64 | border-radius: 20px; 65 | width: 35%; 66 | 67 | } 68 | .muneco{ 69 | width: 100%; 70 | height:55%; 71 | padding-top: 9px; 72 | box-sizing:border-box ; 73 | image:center; 74 | position:relative; 75 | left:10%;; 76 | 77 | } 78 | .texto1{ 79 | width: 100%; 80 | height: 15%; 81 | text-align:center; 82 | } 83 | .texto2{ 84 | width: 100%; 85 | height: 35%; 86 | text-align:center; 87 | flex-wrap: nowrap; 88 | } 89 | 90 | .resultado{ 91 | width: 100%; 92 | height: 70%; 93 | resize: none; 94 | font-size:x-large; 95 | 96 | } 97 | 98 | .tarjeta{ 99 | height: 100%; 100 | /*position:absolute; 101 | left: 760; 102 | top:100;*/ 103 | 104 | } 105 | footer{ 106 | width: 100%; 107 | position:absolute; 108 | top:635px; 109 | text-align: center; 110 | } 111 | } 112 | 113 | @media (min-width: 768px) and (max-width: 990px) { 114 | body{ 115 | background-color: #757fb2 ; 116 | } 117 | header{ 118 | width: 100%; 119 | height: 50px; 120 | } 121 | 122 | main{ 123 | width: 95%; 124 | height: 82%; 125 | display: flex; 126 | justify-content: space-between; 127 | } 128 | 129 | section{ 130 | width: 48%; 131 | height: 100%; 132 | } 133 | 134 | .seccion1{ 135 | width: 67%; 136 | 137 | } 138 | 139 | .seccion2{ 140 | width: 24%; 141 | height: 90%; 142 | margin:auto; 143 | margin-top: 16; 144 | background-color: #fff; 145 | border-radius: 20px; 146 | margin-right: 10px; 147 | box-sizing: border-box; 148 | overflow: hidden; 149 | 150 | } 151 | 152 | .mensaje{ 153 | width: 100%; 154 | height: 90%; 155 | display: block; 156 | margin: auto; 157 | margin-top: 20; 158 | resize: none; 159 | font-size:xx-large; 160 | flex-wrap: nowrap; 161 | } 162 | 163 | button{ 164 | all: initial; 165 | font:inherit; 166 | cursor:pointer; 167 | user-select: none; 168 | color:rgb(255, 255, 255); 169 | background-color:#0A3871 ; 170 | text-align: center; 171 | margin: 17px; 172 | padding: 0.5em 1em; 173 | max-width: 50%; 174 | border-radius: 20px; 175 | width: 35%; 176 | } 177 | .muneco{ 178 | width: 100%; 179 | height:55%; 180 | padding-top: 9px; 181 | box-sizing:border-box ; 182 | image:center; 183 | position:relative; 184 | left:1%;; 185 | 186 | } 187 | .texto1{ 188 | width: 100%; 189 | height: 15%; 190 | text-align:center; 191 | font-size: 12px; 192 | } 193 | .texto2{ 194 | width: 100%; 195 | height: 35%; 196 | text-align:center; 197 | flex-wrap: nowrap; 198 | font-size: 10px; 199 | } 200 | 201 | .resultado{ 202 | width: 100%; 203 | height: 70%; 204 | resize: none; 205 | font-size:x-large; 206 | } 207 | 208 | .tarjeta{ 209 | height: 100%; 210 | } 211 | 212 | footer{ 213 | width: 100%; 214 | position:absolute; 215 | top:683px; 216 | text-align: center; 217 | } 218 | 219 | } 220 | 221 | 222 | 223 | 224 | @media (max-width: 767px) { 225 | 226 | body{ 227 | background-color :#757fb2 ; 228 | } 229 | header{ 230 | width: 100%; 231 | height: 50px; 232 | } 233 | 234 | main{ 235 | width: 100%; 236 | height: 82%; 237 | display:flex; 238 | justify-content: space-between; 239 | } 240 | 241 | section{ 242 | width: 48%; 243 | height: 72%; 244 | } 245 | 246 | .seccion1{ 247 | width: 67%; 248 | 249 | } 250 | 251 | .seccion2{ 252 | width: 100%; 253 | height: 23%; 254 | background-color: #fff; 255 | border-radius: 20px; 256 | margin-right: 10px; 257 | box-sizing: border-box; 258 | overflow:hidden; 259 | position:absolute; 260 | top:600; 261 | } 262 | 263 | .mensaje{ 264 | width: 149%; 265 | height: 115%; 266 | display: block; 267 | margin: auto; 268 | margin-top: 20; 269 | resize: none; 270 | font-size:xx-large; 271 | flex-wrap: nowrap; 272 | border-radius: 20px; 273 | } 274 | 275 | button{ 276 | all: initial; 277 | font:inherit; 278 | cursor:pointer; 279 | user-select: none; 280 | color:rgb(255, 255, 255); 281 | background-color:#0A3871 ; 282 | text-align:center; 283 | margin: 15px; 284 | padding: 1em 2.4em ; 285 | max-width: 50%; 286 | display:inline-block; 287 | border-radius: 20px; 288 | width: 37%; 289 | } 290 | .botones1 { 291 | display: flex; 292 | } 293 | .muneco{ 294 | display:none; 295 | width: 100%; 296 | height:55%; 297 | padding-top: 9px; 298 | box-sizing:border-box ; 299 | image:center; 300 | position:relative; 301 | left:1%;; 302 | 303 | } 304 | .texto1{ 305 | width: 100%; 306 | height: 35%; 307 | text-align:center; 308 | font-size: 12px; 309 | position:sticky; 310 | top:35; 311 | 312 | } 313 | .texto2{ 314 | width: 100%; 315 | height: 100%; 316 | text-align:center; 317 | flex-wrap: nowrap; 318 | font-size: 10px; 319 | position:sticky; 320 | top: 80px; 321 | } 322 | 323 | .resultado{ 324 | width: 104%; 325 | height: 70%; 326 | resize: none; 327 | font-size:x-large; 328 | 329 | } 330 | 331 | .tarjeta{ 332 | width: 96%; 333 | height: 50%; 334 | } 335 | 336 | footer{ 337 | width: 100%; 338 | position:absolute; 339 | top:800px; 340 | text-align: center; 341 | 342 | } 343 | 344 | } 345 | 346 | 347 | @media (min-width: 481px) and (max-width: 767px) { 348 | 349 | body{ 350 | background-color :#757fb2 ; 351 | } 352 | header{ 353 | width: 100%; 354 | height: 50px; 355 | } 356 | 357 | main{ 358 | width: 100%; 359 | height: 82%; 360 | display:flex; 361 | justify-content: space-between; 362 | } 363 | 364 | section{ 365 | width: 48%; 366 | height: 72%; 367 | } 368 | 369 | .seccion1{ 370 | width: 67%; 371 | } 372 | 373 | .seccion2{ 374 | width: 100%; 375 | height: 23%; 376 | background-color: #fff; 377 | border-radius: 20px; 378 | margin-right: 10px; 379 | box-sizing: border-box; 380 | overflow:hidden; 381 | position:absolute; 382 | top:500; 383 | } 384 | 385 | .mensaje{ 386 | width: 149%; 387 | height: 80%; 388 | display: block; 389 | margin: auto; 390 | margin-top: 20; 391 | resize: none; 392 | font-size:xx-large; 393 | flex-wrap: nowrap; 394 | } 395 | 396 | button{ 397 | all: initial; 398 | font:inherit; 399 | cursor:pointer; 400 | user-select: none; 401 | color:rgb(255, 255, 255); 402 | background-color:#0A3871 ; 403 | text-align:center; 404 | margin: 15px; 405 | padding: 1em 2.4em ; 406 | max-width: 50%; 407 | display:inline-block; 408 | border-radius: 20px; 409 | width: 37%; 410 | } 411 | .botones1 { 412 | display: flex; 413 | } 414 | .muneco{ 415 | display:none; 416 | width: 100%; 417 | height:55%; 418 | padding-top: 9px; 419 | box-sizing:border-box ; 420 | image:center; 421 | position:relative; 422 | left:1%;; 423 | 424 | } 425 | .texto1{ 426 | width: 100%; 427 | height: 35%; 428 | text-align:center; 429 | font-size: 12px; 430 | position:sticky; 431 | top:35; 432 | 433 | } 434 | .texto2{ 435 | width: 100%; 436 | height: 100%; 437 | text-align:center; 438 | flex-wrap: nowrap; 439 | font-size: 10px; 440 | } 441 | 442 | .resultado{ 443 | width: 104%; 444 | height: 70%; 445 | resize: none; 446 | 447 | } 448 | 449 | .tarjeta{ 450 | width: 96%; 451 | height: 50%; 452 | } 453 | 454 | footer{ 455 | width: 100%; 456 | height: 1; 457 | position:absolute; 458 | top:690px; 459 | text-align: center; 460 | } 461 | 462 | 463 | } 464 | 465 | 466 | 467 | 468 | @media (min-width: 320px) and (max-width: 480px) { 469 | body{ 470 | background-color :#757fb2 ; 471 | } 472 | header{ 473 | width: 100%; 474 | height: 50px; 475 | } 476 | 477 | main{ 478 | width: 100%; 479 | height: 82%; 480 | display:flex; 481 | justify-content: space-between; 482 | } 483 | 484 | section{ 485 | width: 48%; 486 | height: 72%; 487 | } 488 | 489 | .seccion1{ 490 | width: 67%; 491 | } 492 | 493 | .seccion2{ 494 | width: 100%; 495 | height: 23%; 496 | background-color: #fff; 497 | border-radius: 20px; 498 | margin-right: 10px; 499 | box-sizing: border-box; 500 | overflow:hidden; 501 | position:absolute; 502 | top:500; 503 | } 504 | 505 | .mensaje{ 506 | width: 149%; 507 | height: 80%; 508 | display: block; 509 | margin: auto; 510 | margin-top: 20; 511 | resize: none; 512 | font-size:xx-large; 513 | flex-wrap: nowrap; 514 | } 515 | 516 | button{ 517 | all: initial; 518 | font:inherit; 519 | cursor:pointer; 520 | user-select: none; 521 | color:rgb(255, 255, 255); 522 | background-color:#0A3871 ; 523 | text-align:center; 524 | margin: 15px; 525 | padding: 1em 2.4em ; 526 | max-width: 50%; 527 | display:inline-block; 528 | border-radius: 20px; 529 | width: 37%; 530 | } 531 | .botones1 { 532 | display: flex; 533 | } 534 | .muneco{ 535 | display:none; 536 | width: 100%; 537 | height:55%; 538 | padding-top: 9px; 539 | box-sizing:border-box ; 540 | image:center; 541 | position:relative; 542 | left:1%;; 543 | 544 | } 545 | .texto1{ 546 | width: 100%; 547 | height: 35%; 548 | text-align:center; 549 | font-size: 12px; 550 | position:sticky; 551 | top:35; 552 | 553 | } 554 | .texto2{ 555 | width: 100%; 556 | height: 100%; 557 | text-align:center; 558 | flex-wrap: nowrap; 559 | font-size: 10px; 560 | } 561 | 562 | .resultado{ 563 | width: 104%; 564 | height: 70%; 565 | resize: none; 566 | 567 | } 568 | 569 | .tarjeta{ 570 | width: 96%; 571 | height: 50%; 572 | } 573 | 574 | footer{ 575 | width: 100%; 576 | height: 1; 577 | position:absolute; 578 | top:690px; 579 | text-align: center; 580 | } 581 | 582 | 583 | } 584 | 585 | @media (min-width: 412px) and (max-width: 915px) { 586 | body{ 587 | background-color :#757fb2 ; 588 | } 589 | header{ 590 | width: 100%; 591 | height: 50px; 592 | } 593 | 594 | main{ 595 | width: 100%; 596 | height: 82%; 597 | display:flex; 598 | justify-content: space-between; 599 | } 600 | 601 | section{ 602 | width: 48%; 603 | height: 72%; 604 | } 605 | 606 | .seccion1{ 607 | width: 67%; 608 | } 609 | 610 | .seccion2{ 611 | width: 100%; 612 | height: 23%; 613 | background-color: #fff; 614 | border-radius: 20px; 615 | margin-right: 10px; 616 | box-sizing: border-box; 617 | overflow:hidden; 618 | position:absolute; 619 | top:590; 620 | } 621 | 622 | .mensaje{ 623 | width: 149%; 624 | height: 80%; 625 | display: block; 626 | margin: auto; 627 | margin-top: 20; 628 | resize: none; 629 | font-size:xx-large; 630 | flex-wrap: nowrap; 631 | } 632 | 633 | button{ 634 | all: initial; 635 | font:inherit; 636 | cursor:pointer; 637 | user-select: none; 638 | color:rgb(255, 255, 255); 639 | background-color:#0A3871 ; 640 | text-align:center; 641 | margin: 15px; 642 | padding: 1em 2.4em ; 643 | max-width: 50%; 644 | display:inline-block; 645 | border-radius: 20px; 646 | width: 37%; 647 | } 648 | .botones1 { 649 | display: flex; 650 | } 651 | .muneco{ 652 | display:none; 653 | width: 100%; 654 | height:55%; 655 | padding-top: 9px; 656 | box-sizing:border-box ; 657 | image:center; 658 | position:relative; 659 | left:1%;; 660 | 661 | } 662 | .texto1{ 663 | width: 100%; 664 | height: 35%; 665 | text-align:center; 666 | font-size: 12px; 667 | position:sticky; 668 | top:35; 669 | 670 | } 671 | .texto2{ 672 | width: 100%; 673 | height: 100%; 674 | text-align:center; 675 | flex-wrap: nowrap; 676 | font-size: 10px; 677 | } 678 | 679 | .resultado{ 680 | width: 104%; 681 | height: 70%; 682 | resize: none; 683 | 684 | } 685 | 686 | .tarjeta{ 687 | width: 96%; 688 | height: 50%; 689 | } 690 | 691 | footer{ 692 | width: 100%; 693 | height: 1; 694 | position:absolute; 695 | top:830px; 696 | text-align: center; 697 | } 698 | 699 | 700 | 701 | } 702 | 703 | @media (min-width: 390px) and (width: 844px) { 704 | body{ 705 | background-color :#757fb2 ; 706 | } 707 | header{ 708 | width: 100%; 709 | height: 50px; 710 | } 711 | 712 | main{ 713 | width: 100%; 714 | height: 82%; 715 | display:flex; 716 | justify-content: space-between; 717 | } 718 | 719 | section{ 720 | width: 48%; 721 | height: 72%; 722 | } 723 | 724 | .seccion1{ 725 | width: 67%; 726 | } 727 | 728 | .seccion2{ 729 | width: 100%; 730 | height: 23%; 731 | background-color: #fff; 732 | border-radius: 20px; 733 | margin-right: 10px; 734 | box-sizing: border-box; 735 | overflow:hidden; 736 | position:absolute; 737 | top:555; 738 | } 739 | 740 | .mensaje{ 741 | width: 149%; 742 | height: 80%; 743 | display: block; 744 | margin: auto; 745 | margin-top: 20; 746 | resize: none; 747 | font-size:xx-large; 748 | flex-wrap: nowrap; 749 | } 750 | 751 | button{ 752 | all: initial; 753 | font:inherit; 754 | cursor:pointer; 755 | user-select: none; 756 | color:rgb(255, 255, 255); 757 | background-color:#0A3871 ; 758 | text-align:center; 759 | margin: 15px; 760 | padding: 1em 2.4em ; 761 | max-width: 50%; 762 | display:inline-block; 763 | border-radius: 20px; 764 | width: 37%; 765 | } 766 | .botones1 { 767 | display: flex; 768 | } 769 | .muneco{ 770 | display:none; 771 | width: 100%; 772 | height:55%; 773 | padding-top: 9px; 774 | box-sizing:border-box ; 775 | image:center; 776 | position:relative; 777 | left:1%;; 778 | 779 | } 780 | .texto1{ 781 | width: 100%; 782 | height: 35%; 783 | text-align:center; 784 | font-size: 12px; 785 | position:sticky; 786 | top:35; 787 | 788 | } 789 | .texto2{ 790 | width: 100%; 791 | height: 100%; 792 | text-align:center; 793 | flex-wrap: nowrap; 794 | font-size: 10px; 795 | } 796 | 797 | .resultado{ 798 | width: 104%; 799 | height: 70%; 800 | resize: none; 801 | 802 | } 803 | 804 | .tarjeta{ 805 | width: 96%; 806 | height: 50%; 807 | } 808 | 809 | footer{ 810 | width: 100%; 811 | height: 1; 812 | position:absolute; 813 | top:770px; 814 | text-align: center; 815 | } 816 | 817 | 818 | 819 | } 820 | 821 | 822 | .ocultar{ 823 | display: none; 824 | } 825 | --------------------------------------------------------------------------------