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;

}

CSS - Quitar el fondo blanco de una imagen con css

 Quitar el fondo blanco de una imagen con css

Simple pero poderoso código...

mix-blend-mode: multiply;

background-color: white;

Delineado de letras con css

Delinear letras con css

Solo copia y pega...

-webkit-text-stroke-width: 1px;

-webkit-text-stroke-color: #000000;

color: white; 

Scroll behavior smooth

Habilitar scroll behavior smooth en Google Chrome

Para trabajar a la par con VSC y que nos muestre lo que hacemos, tenemos que habilitar esta opción en GChrome desde chrome://flags/

CSS - Flip Card

Voltea la tarjeta al hacer clic sobre ella...

<!------ FLIP-CARD 2------>

            <div class="scene scene--card">

                <input id="card" type="checkbox">

                <label for="card">

                    <div class="card">

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

                    <div class="card_face card_face--back">back</div>

                    </div>

                </label>

            </div> 

VSC - Sticky scroll

Modificar Sticky Scroll en Visual Studio Code

Visual Studio Code

 En el apartado de settings y escribimos sticky para ver las opciones.

HTML5 - Menu con submenu

 Menu con submenu

HTML5

<!-- MENU CON SUBMENU - NAVEGACION -->  

    <div id="navegacion">

        <ul class="nav"

HTML5 - Cajas con estilo grid

Cajas con estilo grid

HTML5

<!-- CAJAS GRID -->

    <div class="boxes">

        <div class="box-1">#1</div>

        <div class="box-1">#2</div>

        <div class="box-1">#3</div>

        <div class="box-1">#4</div>

    </div>

CSS3

Menú lateral con funcion para ver contenido

HTML5

<!-- SECTION BOTONES TREN -->