Skip to content

T
tateti
Commit a71b1589 by Nahuel Mereles Rodriguez
Options

initial commmit

parents
Showing with 206 additions and 0 deletions
estilos.css 0 → 100644
*{
padding: 0;
margin: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.game-container{
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
}
.game-container-dk{
background: radial-gradient(circle, rgba(161,0,33,1) 0%, rgba(1,16,91,1) 100%);
}
.game-container-box{
display: block;
}
.form{
display: block;
}
.game-title{
color: #05E4FA;
text-align: center;
}
.form-title{
font-size: 15px;
margin: 12px 0;
color: #ccc;
}
.form-imputs-container input{
display: block;
width: 96%;
height: 35px;
margin-left: 1%;
margin: 10px 0 10px 1%;
}
.input-text{
border: none;
border-bottom: 3px solid #002758;
background: transparent;
color: #0798F0;
}
.input-text::placeholder{
padding-left: 15px;
color: #E1E1E1;
}
.input-text:focus{
outline: none;
border-bottom: 3px solid#0798F0;
}
/*Modo claro y oscuro*/
.light-mode{
width: 65px;
height: 30px;
background: #fc466b;
border-radius: 25px;
margin: 22px 5px;
transition: 1s;
}
.mode-button-lg{
display: flex;
justify-content: center;
align-items: center;
width: 34px;
height: 34px;
border-radius: 100%;
background: #620062;
transform: translate(0, -2px);
color: #fff;
transition: 1s;
}
.dark-mode{
background: #620062;
}
.mode-button-dk{
background: #fc466b;
transform: translate(33px, -2px);
}
.button-Off{
display: none;
}
.input-submit{
background: #fc466b;
border: none;
font-size: 16px;
}
.input-submit:hover{
background: #FF2BAE;
}
.input-submit:focus{
outline: none;
}
.tablero-container{
display: grid;
grid-template-columns: repeat(3, 150px);
grid-template-rows: repeat(3, 150px);
grid-gap: 5px;
margin: 20px 0;
}
.tablero-input{
border: none;
font-size: 85px;
background: #fff;
color: #0798F0;
}
.tablero-input-dk{
border: none;
font-size: 85px;
background: #fff;
background: #000;
color: #fff;
}
.tablero-input-dk:hover{
background: #343434;
}
.tablero-input-dk:focus{
outline: none;
}
.tablero-input:hover{
background: #D6D5D6;
}
.tablero-input:focus{
outline: none;
}
.input-reiniciar{
background: #fc466b;
width: 100%;
height: 40px;
border: none;
font-size: 17px;
margin-bottom: 18px;
}
.input-reiniciar:hover{
background: #FF2BAE;
}
.input-reiniciar:focus{
outline: none;
}
.ganadorJuego{
background: #4B057C;
}
.ganadorJuego:hover{
background: #4B057C;
}
.infoTurno{
color: #0798F0;
font-size: 25px;
}
\ No newline at end of file
index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.">
<link rel="stylesheet" href="estilos.css">
<link rel="icon" type="image/icon" href="/img/favicon.ico" />
<script src="https://kit.fontawesome.com/65c05c0a98.js" crossorigin="anonymous"></script>
<title>Tateti Game</title>
</head>
<body>
<div class="game-container" id="gameContainer">
<div class="game-container-box">
<form class="form" id="form">
<h1 class="game-title">Ta te ti Game</h1>
<div class="form-imputs-container">
<h2 class="form-title">Registrese para comenzar el juego</h2>
<input type="text" name="nameJ1" id="nameJ1" class="input-text" placeholder="Nombre del Jugador 1...">
<input type="text" name="nameJ1" id="nameJ2" class="input-text" placeholder="Nombre del Jugador 2...">
<input type="submit" value="Aceptar" class="input-submit">
<div class="light-mode" id="fondoBoton">
<div class="mode-button-lg" id="cambiarModo">
<div class="button-Off" id="lgMode" title="Cambiar a modo claro">
<i class="fa fa-sun-o" aria-hidden="true"></i>
</div>
<div id="dkMode">
<i class="fa fa-moon-o" aria-hidden="true" title="Cambiar a modo oscuro"></i>
</div>
</div>
</div>
</div>
</form>
<label id="infoTurno" class="infoTurno"></label>
<div class="tablero-container">
<input type="button" value="" id="b1" class="tablero-input">
<input type="button" value="" id="b2" class="tablero-input">
<input type="button" value="" id="b3" class="tablero-input">
<input type="button" value="" id="b4" class="tablero-input">
<input type="button" value="" id="b5" class="tablero-input">
<input type="button" value="" id="b6" class="tablero-input">
<input type="button" value="" id="b7" class="tablero-input">
<input type="button" value="" id="b8" class="tablero-input">
<input type="button" value="" id="b9" class="tablero-input">
</div>
<input type="button" value="Reiniciar" id="input_reiniciar" class="input-reiniciar" title="Reiniciar el juego">
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
\ No newline at end of file
scripts.js 0 → 100644
This diff is collapsed. Click to expand it.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment