¿Cómo poner una pequeña presentación?

 Hola chikistrinas, hoy nos vengo con un nuevo tutorial de viernes de tutoriales en el que os explicaré como hacer esta preciosa, fabulosa y espectacular mini presentación:

Empezamos siempre por el código que vais a poder moldear a vuestro gusto, cópialo y pégalo en notas para poder modificarlo sin cagarla demasiado:

<style>

.about-box {

  max-width: 00px;

  background: #00000;

  border: 2px solid #00000;

  border-radius: 12px;

  padding: 10px;

  position: relative;

  overflow: hidden;

  font-family: inherit;

}

/* borde alternado visual (efecto decorativo interior) */

.about-box::before {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: 12px;

  border: 2px dashed #00000;

  pointer-events: none;

  opacity: 0.6;

}

/* brillo suave */

.about-box::after {

  content: "";

  position: absolute;

  inset: -40%;

  background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.15) 40%, transparent 70%);

  animation: shimmer 6s ease-in-out infinite;

  opacity: 0.8;

  pointer-events: none;

}

@keyframes shimmer {

  0% { transform: translate(-15%, -15%) scale(1); }

  50% { transform: translate(15%, 15%) scale(1.1); }

  100% { transform: translate(-15%, -15%) scale(1); }

}

@keyframes shimmer {

  0% { transform: translate(-10%, -10%); }

  50% { transform: translate(10%, 10%); }

  100% { transform: translate(-10%, -10%); }

}

.about-title {

  text-align: center;

  font-size: 0px;

  color: #00000;

  margin-bottom: 8px;

  position: relative;

  z-index: 2;

}

.about-text {

  text-align: justify;

  color: #00000;

  font-size: 0px;

  line-height: 1.4;

  position: relative;

  z-index: 2;

}

</style>

<div class="about-box">

  <div class="about-title">TÍTULO</div>

  <div class="about-text">

    Lo que sea que quieras poner aquí. <br /><br />

    Lo que quieras poner aquí también. <br /><br />

    Lo que sigas queriendo poner aquí.

  </div>

</div>

IMPORTANTE: recuerda copiar también los espacios, aunque parezcan innecesarios son muy importantes.

Bien, ahora voy a explicar poco a poco para qué sirve cada cosa:

En la primera parte pone "max-width: 00px; background: #00000; border: 2px solid #00000;" el primero es para el tamaño que quieres que tenga el gadget (yo lo tengo a 300px porque mi sidebar es grande pero si el tuyo es más pequeño puedes disminuir el tamaño), el segundo es el fondo del gadget, para ver los códigos de colores puedes ir a HTMLcolorcodes y buscar el que más te guste, el tercero es para el color del borde más externo y puedes mirar el color en el mismo link.

Siguiendo con la siguiente parte tenemos "border: 2px dashed #00000;" que es el color de borde interior que está como cortadito, vuelve a buscar un color chulo en el link de antes y pa'lante.

Después nos encontramos con esta parte "font-size: 0px; color: #00000;" que es el tamaño del título y el color.

El que le sigue es el color y el tamaño del texto "color: #00000; font-size: 0px;" y solo haz lo mismo que en el título con el color y el tamaño que quieras.

Por último tienes que agregar el texto que quieras poner en la parte que pone:

<div class="about-box">

  <div class="about-title">TÍTULO</div>

  <div class="about-text">

    Lo que sea que quieras poner aquí. <br /><br />

    Lo que quieras poner aquí también. <br /><br />

    Lo que sigas queriendo poner aquí.

  </div>

</div>

Es importante que si quieres her un solo párrafo borres hasta ANTES del primer <br /><br /> y si quieres añadir más párrafos debes añadir esto mismo que te he escrito después de cada escrito que pongas.

Con todo esto ya estaría el código, ahora tienes que ver qué tal queda en la parte de diseño y bajando hasta donde tengas los sidebar, le das a "añadir un gadget" y a HTML/JavaScript y pegas tu código personalizado (ten cuidado con los espacios que parecen inútiles porque no lo son).

Para ver cómo queda dale al ojo que sale en la pantalla de diseño abajo a la derecha y modifica lo que quieras hasta que te quede bien (normalmente lo que hay que modificar es el tamaño del gadget). Cuando termines no olvides dale al botón de guardar que está al lado del ojo.

Pues eso sería todo, ya tienes un gadget nuevo <33 Espero que te haya servido y que si tienes alguna duda déjala en los comentarios!! Nos vemosss