¿Cómo poner una bandeja de news?

Este es uno de mis gadget favoritos por lo que bienvenidas a un nuevo viernes de tutoriales!! Hoy mi nuevo apartado de News.

Como siempre, voy a dejar por aquí el código y lo voy a ir explicando poco a poco para que puedas personalizarlo como quieras:

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

<div id="news-gadget">

  <!-- HEADER -->

  <div class="news-header">

    <div class="news-right">

      <span class="news-title">NEWS</span>

      <div class="bars">

        <div class="bar bar1"></div>

        <div class="bar bar2"></div>

        <div class="bar bar3"></div>

      </div>

    </div>

  </div>

  <!-- CONTENIDO -->

  <div class="news-content">

    Aquí escribe lo que quieras anunciar.

  </div>

  <!-- SPOTIFY -->

  <div class="music-player">

    <div class="song-label">

      Canción del día

    </div>

    <div class="spotify-wrapper">

      <iframe

        src="URL_SPOTIFY"

        allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"

        loading="lazy">

      

    </iframe

></div>

  </div>

</div>

<style>

#news-gadget {

  background: rgba(000, 000, 000, 0.6);

  padding: 15px;

  border-radius: 15px;

  width: 100%;

  box-sizing: border-box;

}

/* HEADER */

.news-header {

  display: flex;

  justify-content: flex-end;

}

.news-right {

  display: flex;

  align-items: center;

  gap: 6px;

}

.news-title {

  font-family: 'Slackey';

  color: #00000;

  font-size: 20px;

}

/* BARRAS */

.bars {

  display: flex;

  flex-direction: column;

  gap: 3px;

}

.bar { height: 5px; }

.bar1 { width: 15px; background: #00000; }

.bar2 { width: 22px; background: #00000; }

.bar3 { width: 30px; background: #00000; }

/* CONTENIDO */

.news-content {

  margin-top: 10px;

  font-family: 'Gruppo';

  color: #00000;

  font-size: 16px;

  text-align: center;

}

/* PLAYER */

.music-player {

  margin-top: 15px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

}

/* TEXTO */

.song-label {

  font-family: 'Slackey';

  font-size: 12px;

  color: #00000;

}

/* SPOTIFY */

.spotify-wrapper {

  width: 100%;

  display: flex;

  justify-content: center;

}

.spotify-wrapper iframe {

  width: 100%;

  max-width: 220px;

  height: 90px;

  border: none;

  border-radius: 12px;

}

</style>

Para editarlo a gusto yo recomiendo que copies el código entero y pegarlo en la app de notas, una vez tengas el código a tu disposición empecemos con la explicación, siempre viendo las partes que pueden variar.

En la parte del contenido tendrás que escribir lo que quieres poner, acuérdate de que NO puedes prescindir de los espacios que hay antes del texto porque son MUY importantes.

Si sigues bajando verás la parte de Spotify en la que deberás poner el URL de la canción que quieras añadir. Tienes que tener cuidado con lo que tienes que poner: por ejemplo, el link completo de la canción que he puesto es https://open.spotify.com/intl-es/track/2vPrHmbjeQiPY0YTR58EWd?si=39d654637dd74ef7 pero la única parte que debes pegar es todo lo que sale ANTES del ?, o sea  https://open.spotify.com/intl-es/track/2vPrHmbjeQiPY0YTR58EWd.

Abajo encontrarás "background: rgba(000, 000, 000, 0.6);" aquí deberás poner el color que quieras que tenga tu news, para ver el color que quieres mira en HTMLcolorcode y copia y pega el rgb que quieras.

Después verás "font-family: 'Slackey'; color: #00000;" que será lo que edite el título. En la fuente deberás poner el nombre completo del tipo de letra que quieras. En el color modificas el color (jaja LOL) hazlo también con el HTMLcolorcode.

Más adelante está ".bar1 { width: 15px; background: #00000; } .bar2 { width: 22px; background: #00000; } .bar3 { width: 30px; background: #00000; }" que modifica el color de las tres barritas que hay frente al título.

En la parte de contenido está "font-family: 'Gruppo'; color: #00000;" donde cambiarás el tipo de letra y el color de lo que quieres anunciar. Vamos, tres cuartos de los mismo todo el rato.

Ya al final encuentras "font-family: 'Slackey; font-size: 12px; color: #00000;" que modifica la parte de "Canción del día", tendrás que hacer exactamente lo mismo que en los demás casos.

Esto sería todo, espero que te haya servido y si tienes alguna pregunta no dudes en escribirla en los comentarios!! Nos vemoss