Widget discos + socials⭑.ᐟ

Hello gente, espero que estén muy bien. Este es mi primera entrada dedicada a widgets ( ദ്ദി ˙ᗜ˙ ) en los comentarios vi a una personita interesada en los discos entonces vengo a compartirles el código que es uno de mis favs. 

DISCOS

Antes que nada quiero decir que el código no es mío. Era una plantilla gratis disponible en spacehey y quise ver si funcionaba en blogger jsjkdkf. Si no estoy mal creo que eliminaron la plantilla, entonces créditos a quien corresponda :p

#vinyl-gallery * {

    all: unset;

  }

 

  #vinyl-gallery {

    all: initial!important;

    width: 100%!important;

    height: 230px!important;

    margin: 30px 0!important;

    display: flex!important;

    flex-direction: row!important;

    position: relative!important;

    margin-left: -6px!important;

  }

 

  #vinyl-gallery .vinyl {

      all:unset!important;

    perspective: 500px !important;

    width: 18px!important;

    transition: width 0.5s!important;

  }

 

  #vinyl-gallery .vinyl:hover {

    width: 148px!important;

  }

 

  #vinyl-gallery img {

      all:unset!important;

    transition: transform 0.5s, width 0.5s, height 0.5s, margin-top 0.5s!important;

    width: 120px!important;

    height: 120px!important;

    transform: rotateX(0deg) rotateY(25deg)!important;

    transform-style: preserve-3d!important;

    border-radius: 4px!important;

    border: 2px solid rgba(0, 0, 0, 0.1)!important;

object-fit: cover!important;

  }

  #vinyl-gallery .vinyl:hover img {

    transform: rotateX(0deg) rotateY(10deg)!important;

    width: 130px!important;

    height: 130px!important;

    margin-top: -2px!important;

  }

  #vinyl-gallery .title {

    color: #00c853;

    display: block;

    visibility: hidden;

    position: absolute;

    bottom: 0px;

    text-align: center;

    width: 100%;

    padding-left: 6px;

 font-family:Verdana; /*Fuente de letra*/

  }

  #vinyl-gallery .vinyl:nth-child(n):hover + .title {

    visibility: visible;

  }

</style>

<div id="vinyl-gallery">

  <div class="vinyl">

    <img src="Link de tu imagen"/>

  </div>

  <div class="title">Nombre artista y album</div>

<div class="vinyl">

    <img src="Link de tu imagen"/>

  </div>

  <div class="title">Nombre artista y album</div>

<div class="vinyl">

  <img src="Link de tu imagen"/>

  </div>

  <div class="title">Nombre artista y album</div>

<div class="vinyl">

  <img src="Link de tu imagen"/>

  </div>

  <div class="title">Nombre artista y album</div>

<div class="vinyl">

  <img src="Link de tu imagen"/>

  </div>

  <div class="title">Nombre artista y album</div>

<div class="vinyl">

  <img src="Link de tu imagen"/>

  </div>

  <div class="title">Nombre artista y album</div></div>

El código tiene para meter 6 albums, si quieres agregar más tienes que repetir esta parte:

<div class="vinyl">

  <img src="Link de tu imagen"/>

  </div>

  <div class="title">Nombre artista y album</div>

En mi caso utilice 2 widgets separados para que sean 12 albums y se vean de forma vertical :)

SOCIALS

También hace tiempo una personita me pregunto por el widget de socials, así que aquí se los dejo:

<style>

.windows-social{

  width:210px;

  margin:auto;

  padding:12px;

  border-radius:28px;

  background:rgba(255,255,255,.25);

  border:2px solid rgba(255,255,255,.55);

  backdrop-filter:blur(10px);

  box-shadow:

    inset 0 0 12px rgba(255,255,255,.25),

    0 0 20px rgba(36, 166, 237,.3);

}

/* CONTENIDO */

.window-content{

  padding:18px;

  border-radius:22px;

  background:linear-gradient(

    180deg,

    rgba(255,255,255,.55),

    rgba(255,255,255,.35)

  );

}

/* ICONOS */

.social-icons{

  display:flex;

  justify-content:center;

  gap:10px;

  flex-wrap:wrap;

}

.social-icons a{

  width:40px;

  height:40px;

  display:flex;

  align-items:center;

  justify-content:center;

  overflow:hidden;

  border-radius:50%;

  transition:.3s;

}

.social-icons a:hover{

  transform:scale(1.08);

}

.social-icons img{

  width:100%;

  height:100%;

  object-fit:cover;

  border-radius:50%;

}

</style>

<div class="windows-social">

  <div class="window-content">

    <div class="social-icons">

      <a href="LINK INSTAGRAM">

        <img src="https://i.pinimg.com/736x/ea/27/43/ea2743958ad4bb57b12cad9eef721265.jpg" />

      </a>

      <a href="LINK SPOTIFY">

        <img src="https://i.pinimg.com/736x/0c/22/35/0c223575103d70f8972fd6c0e0f0589b.jpg" />

      </a>

      <a href="LINK TUMBLR">

        <img src="https://i.pinimg.com/736x/a5/31/81/a53181a4886c99580a7c33203d730ad3.jpg" />

      </a>

      <a href="LINK SPACEHEY">

        <img src="https://i.pinimg.com/736x/e5/e1/21/e5e121a1bf83bfb193109e19464fc4ef.jpg" />

      </a>

    </div>

  </div>

</div>

Si les interesa algún otro widget pueden decirme en los cometarios jiji espero publicar pronto una entrada que tengo pendiente y me emociona mucho. Byebye :D