¿Cómo poner unas notas motivadoras?

Hola chicas, bienvenidas un día más a los viernes de tutoriales!!! Hoy traigo una cosita de nada, de las cosas más nuevas que tengo en el blog, las notitas motivadoras que están a la izquierda:

Bien, como ya sabéis, deberéis copiar el código y modificarlo en notas para que os sea más sencillo. En este código lo único que se puede cambiar son los colores, los tamaños y los textos por lo que hay que tener en cuenta los muchos códigos de color que vayáis a poner. Recordar que en HTMLColorCodes podéis buscar los colores que queráis:

<link href="https://fonts.googleapis.com/css2?family=Gruppo&amp;family=Slackey&amp;display=swap" rel="stylesheet" />

<div class="motivation-widget">

  <div class="motivation-card" id="motivationCard">

    <div class="motivation-inner">

      <!-- PARTE DELANTERA -->

      <div class="motivation-front">

        <div class="sparkle">✦</div>

        <h2>¡Motívate!</h2>

        <p>Pasa el cursor por aquí</p>

        <div class="heart">♡</div>

      </div>

      <!-- PARTE TRASERA -->

      <div class="motivation-back">

        <div class="quote-mark">“</div>

        <p id="motivationQuote">

          Lo puedes hacer y lo vas a lograr

        </p>

        <div class="quote-mark bottom">”</div>

      </div>

    </div>

  </div>

</div>

<style>

.motivation-widget{

  width:100%;

  max-width:265px;

  height:210px;

  margin:15px auto;

  font-family:'Gruppo', sans-serif;

  box-sizing:border-box;

  position:relative;

}

/* CONTENEDOR DE LA TARJETA */

.motivation-card{

  width:100%;

  height:210px;

  perspective:1000px;

  cursor:pointer;

  position:relative;

}

/* PARTE INTERNA QUE GIRA */

.motivation-inner{

  width:100%;

  height:100%;

  position:absolute;

  top:0;

  left:0;

  transform-style:preserve-3d;

  transition:transform 0.7s ease;

}

/* GIRO */

.motivation-card:hover .motivation-inner{

  transform:rotateY(180deg);

}

/* CARAS */

.motivation-front,

.motivation-back{

  width:100%;

  height:100%;

  position:absolute;

  top:0;

  left:0;

  box-sizing:border-box;

  border-radius:22px;

  -webkit-backface-visibility:hidden;

  backface-visibility:hidden;

  overflow:hidden;

}

/* PARTE DELANTERA */

.motivation-front{

  background:

  linear-gradient(

    135deg,

    rgba(255,245,248,0.96),

    rgba(255,224,234,0.96)

  );

  border:2px solid rgba(255,170,195,0.65);

  box-shadow:

  0 8px 20px rgba(190,120,145,0.16);

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

  position:absolute;

}

/* TÍTULO */

.motivation-front h2{

  margin:0;

  font-family:'Slackey', cursive;

  font-size:27px;

  font-weight:normal;

  color:#b85d78;

  letter-spacing:1px;

  text-shadow:

  2px 2px 0 rgba(255,255,255,0.7);

}

/* TEXTO PEQUEÑO */

.motivation-front p{

  margin:12px 0 0;

  font-size:14px;

  letter-spacing:0.5px;

  color:#8f6670;

}

/* DECORACIONES */

.sparkle{

  position:absolute;

  top:18px;

  left:22px;

  font-size:19px;

  color:#e89aae;

}

.heart{

  position:absolute;

  bottom:16px;

  right:20px;

  font-size:26px;

  color:#d87a98;

}

/*  PARTE TRASERA  */

.motivation-back{

  transform:rotateY(180deg);

  background:

  linear-gradient(

    135deg,

    rgba(255,238,243,0.98),

    rgba(255,250,247,0.98)

  );

  border:2px solid rgba(255,170,195,0.65);

  box-shadow:

  0 8px 20px rgba(190,120,145,0.16);

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  padding:28px 25px;

}

/* FRASE */

#motivationQuote{

  margin:0;

  font-family:'Gruppo', sans-serif;

  font-size:19px;

  line-height:1.35;

  font-weight:bold;

  color:#86545f;

}

/* COMILLAS */

.quote-mark{

  position:absolute;

  top:6px;

  left:14px;

  font-family:Georgia, serif;

  font-size:48px;

  color:rgba(216,122,152,0.35);

}

.quote-mark.bottom{

  top:auto;

  left:auto;

  right:14px;

  bottom:-15px;

}

</style>

<script>

const motivationalQuotes = [

"Lo puedes hacer y lo vas a lograr",

"Las chicas más guapas son exitosas",

"Siéntete orgullosa de ti misma por todo el proceso que nadie ve",

"El proceso que hoy te pesa mañana te dará tu mayor recompensa",

"Recuerda que, si lo estás haciendo, ya lo estás haciendo bien",

"O se te va el miedo o se te va la oportunidad",

"Soy bonita, soy brillante y soy exitosa",

"Pudiste, puedes y podrás",

"La meta siempre será ser mejor que ayer, no mejor que nadie",

"Si no es ahora ¿cuándo?",

"La disciplina te lleva donde la motivación no alcanza",

"Nunca olvides porqué empezaste",

"Quien nunca ha fracasado, nunca ha intentado nada",

"Encuentra la forma, no la excusa",

"Yo puedo, yo puedo, yo puedo",

"Un mal día no es una mala vida",

"Hazlo con miedo, hazlo cansada, hazlo sola, pero hazlo",

"20 minutos haciendo algo pesa mil veces más que 20 horas pensándolo",

"Deja de asumir que es inalcanzable para ti. Tú decides eso",

"Una vida de valentía habla más que una de cobardía",

"El futuro no existe, solo estás tú con tu presente",

"Pasito a pasito construirás tu castillo",

"¿Prefieres decepcionar a extraños o decepcionarte a ti?",

"No te hacen falta más ganas, te hace falta empezar",

"No te preocupes si vas despacio, preocúpate de que estés avanzando",

"Fuerza leona",

"Que no se te pase la vida planeando otra",

"Estás viva y eso significa que aún tienes posibilidades"

];

const card = document.getElementById("motivationCard");

const quote = document.getElementById("motivationQuote");

let currentQuote = -1;

card.addEventListener("mouseenter", function(){

  let randomQuote;

  do{

    randomQuote = Math.floor(

      Math.random() *

      motivationalQuotes.length

    );

  }

  while(randomQuote === currentQuote);

  currentQuote = randomQuote;

  quote.textContent =

  motivationalQuotes[randomQuote];

});

</script>

Vale, para hacer el cuento corto: todo lo que tenga "px" a la derecha es el tamaño y puede ser de la letra o de algún componente del gadget; todo lo que tenga "#" o "rgba" son los colores tanto de fondos como de letras; todo lo que ponga "Font-family" es el tipo de letra que puedes cambiar solo si pones el nombre completo del tipo de letra; por último, en la parte del principio hay unas partes escritas que puedes cambiar si te apetece, además de todas las frases que he dejado en rosa oscuro.

Una vez hayas editado todos los colores, tamaños y letras que quieras copia el código y ve a la parte de "Diseño" en Blogger y, en el sidebar que quieras, dale a "añadir un gadget", a "HTML/JavaScript" y pega el código en donde pone "contenido". Recuerda guardarlo todo bien para no perder nada.

La verdad es fácil, espero que os ayude este pequeño tutorial para las notas que se mueven!!! Nos vemos en el próximo viernes de tutoriales.