RetroArch en pc

 Configurar RetroArch para Playstaion 2

Hay que seguir los pasos de este vídeo de Youtube.

Si por x o y razón no funciona correctamente, hay que agregar la carpeta de pcsx2 dentro de cada juego para que los corra correctamente.

El archivo enlace esta en MEGA con todo el contenido de la BIOS.

Dentro de la BIOS extraes todo el contenido del zip que descargaras.

Y listo, comienzas a jugar todos los juegos que quieras de la ps2...

CSS - Flip Card con contenido

 Flip Card con contenido al reverso 

Código:

HTML

 <div class="flip-container">

    <div class="card">

    <div class="front"></div>

    <div class="back">

        <ul>

            <li><a href="https://www.espn.com.mx/futbol/equipo/_/id/86/real-madrid" target="_blank">Real Madrid</a></li>

            <li><a href="https://www.espn.com.mx/futbol/equipo/_/id/132/bayern-munich" target="_blank">Bayern Munchen</a></li>

            <li><a href="https://www.espn.com.mx/futbol/equipo/estadisticas/_/id/359/eng.arsenal" target="_blank">Arsenal</a></li>

            <li><a href="https://www.espn.com.mx/futbol/equipo/_/id/160/fra.psg" target="_blank">Paris Saint-Germain</a></li>

            <li><a href="https://www.espn.com.mx/futbol/equipo/_/id/114/napoli" target="_blank">Napoli</a></li>

            <li><a href="https://www.espn.com.mx/futbol/equipo/estadisticas/_/id/817/team.al_nassr" target="_blank">Al Nassr</a></li>

            <li><a href="https://www.espn.com.mx/futbol/equipo/_/id/437/fc-porto" target="_blank">Porto FC</a></li>

        </ul>

    </div>

    </div>

    </div>

CSS

.flip-container {

  background-color: transparent;

  width: 150px;

  height: 100%;

  perspective: 1000px;

  margin: 0px 10px;

}

.card {

  position: relative;

  width: 100%;

  height: 100%;

  text-align: center;

  transition: transform 1s;

  transform-style: preserve-3d;

}

.flip-container:hover .card {

  transform: rotateY(180deg);

}

.front, .back {

  position: absolute;

  width: 100%;

  height: 100%;

  backface-visibility: hidden;

  display: flex;

  flex-flow: column;

  align-items: center;

  justify-content: center;

  font-size: 1.3rem;

}

.front {

  background: url(https://hammeringdown.com/wp-content/

uploads/2023/03/tactical-board.com-12.png?w=1024) no-repeat left /cover;

  color: #fff;

}

.back {

   background: url(img/libreta.jpg) no-repeat left /cover;

   transform: rotateY(180deg);

}

.back li{

   text-align: left;

}

.back li a{

   color: black;

   font-size: .8rem;

   margin-left: 30px;

   text-decoration: none;

}

.back li a:hover{

   color: rgb(233, 47, 0);

}

Grid - Ajuste de imagenes

Grid para imagenes con enlaces

Código fuente:

 <div class="parent">

    <a href="https://www.bet365.mx/#/HO/" target="_blank" class="div1" alt="Bet365"></a>

                   

    <a href="https://es.jango.com/music/The+Birthday+Massacre" target="_blank" class="div2" alt="Jango"></a>

                   

    <a href="https://www.youtube.com/" target="_blank" class="div3" alt="Youtube"></a>

                   

    <div class="div4"></div>

                   

    <a href="#" class="div5" alt=""></a>

                   

    <a href="https://www.paramountplus.com/home/" target="_blank" class="div6" alt="Paramount Plus"></a>

                   

    <a href="https://www.netflix.com/browse" target="_blank" class="div7" alt="Netflix"></a>

                   

    <a href="https://web.whatsapp.com/" target="_blank" class="div8" alt="Whatsapp"></a>

                   

</div>

CSS

.parent {

   display: grid;

   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

   grid-auto-rows: 103.5px; /****** altura de imagenes ******/

   grid-column-gap: 3px;

   grid-row-gap: 3px;

   

   padding: 10px;

}

.div1 {

   grid-column-start: 1;

   grid-column-end: 3;

   grid-row-start: 1;

   grid-row-end: 1;

   

   /** background: url(https://static.fabrik.io/b41/a6e4a3f8

3798b844.gif?auto=compress&w=1280&h=1280&fit=max&s=7e49a59249

dc360728c5fa1ff0b227b9) no-repeat center center /cover; **/

   

   background: url(https://i.pinimg.com/originals/12/6d/57/126d5

7aadfa0aa7de82da3088ef737a3.gif) no-repeat center center /cover;

}

.div2 {

   grid-column-start: 3;

   grid-column-end: 4;

   grid-row-start: 1;

   grid-row-end: 1;

   background: url(https://media2.giphy.com/media/v1.Y2lkPTZjMDliO

TUydm5hN2plOGxwMWt2bzgxOXZ0aHJ1YWJiMmFneHRyYTdkejZkaG94ayZlcD12MV9

naWZzX3NlYXJjaCZjdD1n/tqfS3mgQU28ko/200w.gif) no-repeat center center /cover;

}

.div3 {

   grid-column-start: 4;

   grid-column-end: 6;

   grid-row-start: 1;

   grid-row-end: 1;

   background: url(https://i.gifer.com/LZ4n.gif) no-repeat center center /cover;

}

.div4 {

   grid-column-start: 1;

   grid-column-end: 4;

   grid-row-start: 2;

   grid-row-end: 4;

   background: url(img/equiposmta.jpg) no-repeat center center /cover;

}

.div5 {

   grid-column-start: 4;

   grid-column-end: 6;

   grid-row-start: 2;

   grid-row-end: 3;

   background: url(https://marabelia.com/wp-content/uploads/2024/02

/diseno-web-creativo.gif) no-repeat center center /cover;

}

.div6 {

   grid-column-start: 4;

   grid-column-end: 6;

   grid-row-start: 3;

   grid-row-end: 4;

   background: url(https://i.makeagif.com/media/8-23-2016/CAph_f.gif)

no-repeat center center /cover;

}

.div7 {  

   grid-column-start: 1;

   grid-column-end: 4;

   grid-row-start: 4;

   grid-row-end: 4;

   background: url(https://media.tenor.com/Hh5lO8fCAAIAAAAM/netflix.gif)

no-repeat center center /cover;

}

.div8 {

   grid-column-start: 4;

   grid-column-end: 6;

   grid-row-start: 4;

   grid-row-end: 4;  

   background: url(https://gifdb.com/images/high/whatsapp-typing-

logo-yhpoe34slgldf6ek.gif) no-repeat center center /cover;

}