fermdez/Juegos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity
files
80d2a8b3a9bfb5752db22bb8a9b840dbb911c720
Juegos/index.html

287 lines
10 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name='author' content='Fernando Méndez' />
<meta name='description' content='Página web de juegos online de Fernando Méndez.'>
<title>FerMdez - Games</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat:700,400&display=swap" rel="stylesheet">
<link rel='icon' href='./media/favicon.ico' sizes='192x192' />
<meta name='keywords' content='fermdez, juegos, games, mini-juegos, fermdez juegos, fermdez games'/>
<meta property='og:type' content='website' />
<meta property='og:site_name' content='FerMdez' />
<meta property='og:title' content='Fernando Méndez' />
<meta property='og:description' content='Página web de juegos online de Fernando Méndez.' />
<meta property='og:image' content='https://games.fermdez.net/media/favicon.ico' />
<meta property='og:url' content='https://games.fermdez.net/' />
<style>
body {
background: linear-gradient(120deg, #9cebfc 0%, #e9defa 100%);
font-family: 'Montserrat', Arial, sans-serif;
color: #242424;
margin: 0;
min-height: 100vh;
}
header {
text-align: center;
padding: 55px 0 22px 0;
}
h1 {
font-size: 2.4em;
font-weight: 700;
margin-bottom: 7px;
color: #3f3d56;
letter-spacing: 2px;
text-shadow: 0 1px 11px #b7d4ed73;
}
p {
color: #444;
font-size: 1.15em;
margin: 0 0 28px 0;
}
main {
max-width: 1100px;
margin: 0 auto;
padding: 20px 16px 60px 16px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
gap: 32px;
}
.game-card {
background: rgba(255,255,255,0.85);
border-radius: 18px;
box-shadow: 0 6px 32px rgba(51, 101, 160, 0.11), 0 0 0 1.5px #e6e6f9;
padding: 0 0 20px 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
transition: box-shadow 0.22s, transform 0.16s;
will-change: transform;
min-height: 290px;
backdrop-filter: blur(3px);
border: 1.5px solid #f4f1fe;
overflow: hidden;
}
.game-card:hover {
box-shadow: 0 12px 32px 0 rgba(39,85,151,0.13), 0 0 0 2.5px #6cb2ed;
transform: translateY(-7px) scale(1.03);
z-index: 2;
cursor: pointer;
}
.game-icon {
font-size: 2.7em;
margin-top: 23px;
margin-bottom: 7px;
filter: grayscale(0.2) drop-shadow(0 3px 6px #caf0f8c6);
pointer-events: none;
}
.game-title {
font-size: 1.15em;
font-weight: 700;
color: #234075;
margin-bottom: 7px;
text-align: center;
letter-spacing: 0.5px;
}
.game-desc {
font-size: 1em;
color: #454545;
margin-bottom: 28px;
margin-top: 0;
text-align: center;
flex-grow: 1;
}
.play-btn {
background: linear-gradient(108deg,#3d5afe 55%,#228be6 110%);
color: #fff;
border: none;
border-radius: 44px;
padding: 13px 0;
font-size: 1.05em;
font-weight: 700;
width: 88%;
box-shadow: 0 2px 12px #b7d4ed99;
cursor: pointer;
transition: background 0.22s, box-shadow 0.16s, transform 0.13s;
text-transform: uppercase;
letter-spacing: 1.1px;
margin-bottom: 0;
margin-top: auto;
outline: none;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 2px solid #dbeafe;
animation: btn-pop 1.1s cubic-bezier(.4,.28,.32,.99) both;
}
.play-btn:hover, .play-btn:focus {
background: linear-gradient(108deg,#0a2459 55%,#195987 110%);
transform: scale(1.055);
box-shadow: 0 7px 22px #3d5afe1a;
border-color: #3d5afe;
outline: none;
}
.play-btn svg {
margin-left: 5px;
width: 1.4em;
height: 1.3em;
vertical-align: middle;
fill: #fff;
pointer-events: none;
}
@media (max-width: 900px) {
.grid { gap: 23px; }
.game-card { min-height: 240px; }
header { padding-bottom: 6px; }
main { padding: 10px 3vw 35px 3vw;}
}
@media (max-width: 660px) {
h1 { font-size: 1.45em; }
.game-title { font-size: 1em;}
.game-desc { font-size: 0.98em;}
.game-card { min-height: 180px;}
}
@keyframes btn-pop { 0%{transform:scale(.98);} 100%{transform:scale(1);} }
</style>
</head>
<body>
<header>
<h1>Fermdez - Juegos</h1>
<p>¡Prueba estos mini juegos creados por <a href="https://fermdez.net/" target="_blank">Fernando Méndez</a>!<br />Elige, juega y supera tus récords.</p>
</header>
<main>
<div class="grid">
<div class="game-card">
<div class="game-icon">🏓</div>
<div class="game-title">Pong Clásico</div>
<div class="game-desc">Juega al clásico Pong contra la máquina usando las flechas.</div>
<a class="play-btn" href="pong/" target="_blank">Jugar
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
</div>
<div class="game-card">
<div class="game-icon">🔲</div>
<div class="game-title">Simon Dice</div>
<div class="game-desc">Recuerda y repite la secuencia de colores para avanzar de nivel.</div>
<a class="play-btn" href="simon-dice/" target="_blank">Jugar
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
</div>
<div class="game-card">
<div class="game-icon">🧮</div>
<div class="game-title">Buscaminas</div>
<div class="game-desc">Marca las minas y evita explotarlas en el tablero.</div>
<a class="play-btn" href="buscaminas/" target="_blank">Jugar
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
</div>
<div class="game-card">
<div class="game-icon">🃏</div>
<div class="game-title">Juego de Memoria</div>
<div class="game-desc">Descubre todas las parejas de cartas y ejercita tu memoria.</div>
<a class="play-btn" href="memoria/" target="_blank">Jugar
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
</div>
<div class="game-card">
<div class="game-icon">🃏</div>
<div class="game-title">Juego de Memoria Avanzado</div>
<div class="game-desc">Descubre todas las parejas de cartas y ejercita tu memoria.</div>
<a class="play-btn" href="memoria-v2/" target="_blank">Jugar
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
</div>
<div class="game-card">
<div class="game-icon">⭕❌</div>
<div class="game-title">3 en Raya</div>
<div class="game-desc">Tres en línea clásico: reta a un amigo.</div>
<a class="play-btn" href="3-en-raya/" target="_blank">Jugar
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
</div>
<div class="game-card">
<div class="game-icon">⭕❌</div>
<div class="game-title">3 en Raya vs Máquina</div>
<div class="game-desc">Tres en línea clásico: reta a una IA invencible.</div>
<a class="play-btn" href="3-en-raya-computer/" target="_blank">Jugar
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
</div>
<div class="game-card">
<div class="game-icon">🔵🔴🔵🔴</div>
<div class="game-title">4 en Raya vs Máquina</div>
<div class="game-desc">Conecta 4 fichas antes que la máquina en este clásico de estrategia.</div>
<a class="play-btn" href="4-en-raya/" target="_blank">Jugar
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
</div>
<div class="game-card">
<div class="game-icon">🧩</div>
<div class="game-title">Puzzle de Números</div>
<div class="game-desc">Resuelve el clásico puzzle de 15 piezas deslizantes.</div>
<a class="play-btn" href="puzle-numeros/" target="_blank">Jugar
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
</div>
<div class="game-card">
<div class="game-icon">🔢</div>
<div class="game-title">Adivina el Número</div>
<div class="game-desc">Resuelve el número que ha pensado la máquina en menos de 7 intentos.</div>
<a class="play-btn" href="puzle-numeros/" target="_blank">Jugar
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
</div>
<div class="game-card">
<div class="game-icon">🐍</div>
<div class="game-title">Snake Game</div>
<div class="game-desc">Haz crecer la serpiente comiendo puntos, ¡no choques con la pared!</div>
<a class="play-btn" href="serpiente/" target="_blank">Jugar
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
</div>
<div class="game-card">
<div class="game-icon">🧱</div>
<div class="game-title">Rompe Ladrillos</div>
<div class="game-desc">Rompe todos los ladrillos controlando la pala y la bola.</div>
<a class="play-btn" href="ladrillos" target="_blank">Jugar
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
</div>
<div class="game-card">
<div class="game-icon">⏱️</div>
<div class="game-title">Carrera de Reacción</div>
<div class="game-desc">Haz clic cuando la pantalla se ponga verde, ¡mide tu tiempo de reacción!</div>
<a class="play-btn" href="reflejos/" target="_blank">Jugar
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
</div>
<div class="game-card">
<div class="game-icon">🦦</div>
<div class="game-title">Atrapa el Topo</div>
<div class="game-desc">Haz clic en el topo cuando aparezca y suma puntos.</div>
<a class="play-btn" href="topo/" target="_blank">Jugar
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
</div>
<div class="game-card">
<div class="game-icon">🇪🇸</div>
<div class="game-title">Banderas</div>
<div class="game-desc">Empereja la bandera con su país correspondiente.</div>
<a class="play-btn" href="banderas/" target="_blank">Jugar
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
</div>
</div>
</main>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink