Hack x Crack - Comunidad de Seguridad informática

Programación => Programación Web => Mensaje iniciado por: R3LI4NT en Octubre 10, 2021, 09:19:48 pm

Título: Acordeón con HTML & CSS
Publicado por: R3LI4NT en Octubre 10, 2021, 09:19:48 pm
(https://i.ibb.co/PFw5hqg/Captura-de-pantalla-355.png)

(https://i.ibb.co/qxBDypD/Captura-de-pantalla-356.png)

(https://i.ibb.co/Tq6xBLc/ezgif-com-gif-maker.gif)

Código HTML:

Código: Text
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Acordeon</title>
  8.     <link rel="stylesheet" href="style.css">
  9. </head>
  10. <body>
  11.     <div class="contenido">
  12.         <h1>Tipos de Hackers</h1>
  13.  
  14.         <ul>
  15.             <li><input type="checkbox" checked>
  16.             <span></span>
  17.             <h2 style="color: #fff;">White Hat</h2>
  18.             <p>El término sombrero blanco en Internet se refiere a un hacker ético, o un experto de seguridad informática, quien se especializa en pruebas de penetración y en otras metodologías para detectar vulnerabilidades y mejorar la seguridad de los sistemas de comunicación e información de una organización.​</p>
  19.             </li>
  20.  
  21.             <li><input type="checkbox" checked>
  22.             <span></span>
  23.             <h2 style="color:#5A5A5A;">Grey Hat</h2>
  24.             <p>Un sombrero gris, en la comunidad hacker, hace referencia a un hacker talentoso que actúa ilegalmente, aunque con buenas intenciones. Son un híbrido entre los hackers de sombrero blanco y de sombrero negro.​</p>
  25.             </li>
  26.  
  27.             <li><input type="checkbox" checked>
  28.             <span></span>
  29.             <h2 style="color:#000;">Black Hat</h2>
  30.             <p>Un hacker de sombrero negro es un hacker que viola la seguridad informática para su propio beneficio personal o por malicia.​</p>
  31.             </li>    
  32.         </ul>
  33.     </div>
  34. </body>
  35. </html>
  36.  

Código CSS:

Código: CSS
  1. @import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap');
  2. @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
  3.  
  4. * {
  5.     padding: 0;
  6.     margin: 0;
  7.     box-sizing: border-box;
  8. }
  9.  
  10. body {
  11.     display: flex;
  12.     height: 100vh;
  13.     width: 100%;
  14.     justify-content: center;
  15.     align-items: center;
  16.     font-family: 'Poppins', sans-serif;
  17.     font-weight: 300;
  18.     background: #f5f6fa;
  19. }
  20.  
  21. .contenido {
  22.     max-width: 45rem;
  23.     padding: 0 15px;
  24.     text-align: center;
  25.     margin: auto;
  26. }
  27.  
  28. .contenido h1 {
  29.     color: #0254A4;
  30.     font-family: 'Bebas Neue', cursive;
  31.     letter-spacing: 2px;
  32.     font-size: 35px;
  33.     margin-bottom: 80px;
  34. }
  35.  
  36. .contenido ul {
  37.     text-align: left;
  38.     list-style: none;
  39. }
  40.  
  41. .contenido h2 {
  42.     font-weight: bold;
  43.     text-transform: none;
  44.     display: block;
  45.     letter-spacing: 1px;
  46.     cursor: pointer;
  47.     font-size: 20px;
  48.     text-align: left;
  49.     line-height: 2.1rem;
  50.     padding: 10px 10px;
  51.     transition: 0.2s;
  52. }
  53.  
  54. .contenido p {
  55.     position: relative;
  56.     display: inline-block;
  57.     contain: layout;
  58.     color: #ddd;
  59.     max-height: 15rem;
  60.     will-change: max-height;
  61.     text-align: left;
  62.     font-size: 15px;
  63.     overflow: hidden;
  64.     opacity: 1;
  65.     transform: translate(0,0);
  66.     margin: 6px 0;
  67.     transition: .3s opacity, .4s max-height;
  68.     z-index: 2;
  69.     hyphens: auto;
  70.     padding: 0 10px;
  71.     text-align: justify;
  72. }
  73.  
  74. .contenido ul li {
  75.     position: relative;
  76.     overflow: hidden;
  77.     background: #1e272e;
  78.     box-shadow: 0 0 10px #000;
  79.     border-radius: 5px;
  80.     margin: 25px 0;
  81. }
  82.  
  83. .contenido ul li span {
  84.     position: absolute;
  85.     transform: translate(-6px, 0);
  86.     margin-top: 30px;
  87.     right: 17px;
  88.  
  89. }
  90.  
  91. .contenido ul li span::before, ul li span::after {
  92.     content: '';
  93.     position: absolute;
  94.     width: 3px;
  95.     height: 10px;
  96.     background: #fff;
  97.     transform: translate(-2px, 0) rotate(90deg);
  98.     cursor: pointer;
  99. }
  100.  
  101. .contenido ul li span::before {
  102.     right: -3px;
  103.     transform: translate(-2px, 0) rotate(90deg);
  104. }
  105. .contenido ul li input[type=checkbox]{
  106.     position: absolute;
  107.     z-index: 1;
  108.     cursor: pointer;
  109.     height: 100%;
  110.     width: 100%;
  111.     opacity: 0;
  112.     touch-action: manipulation;
  113. }
  114.  
  115. .contenido ul li input[type=checkbox]:checked ~ p {
  116.     max-height: 0;
  117.     margin: 0;
  118.     transition: 0.3s;
  119.     opacity: 0;
  120. }
  121.  
  122. .contenido ul li input[type=checkbox]:checked ~ span::before {
  123.     background: #fff;
  124.     transform: translate(-2px, 0) rotate(90deg);
  125. }
  126.  
  127. .contenido ul li input[type=checkbox]:checked ~ span::before {
  128.     background: #fff;
  129.     transform: translate(-2px, 0) rotate(0deg);
  130. }
  131.  


#R3LI4NT