Tablero2

estilos/style.css

@@ -0,0 +1,152 @@
+@keyframes palpitos {
+    from { transform: none; }
+    50% { transform: scale(1.15); }
+    to { transform: none; }
+}
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body{
+    display: grid;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    background-image: url("https://forums.pokemmo.eu/uploads/monthly_2021_12/22b22287602523.5dbd29081561d.gif.12d41b841e6e1356e493e1b376ded418.gif");
+    perspective: 900px;
+}
+
+table{
+    width: 400px;
+    height: 400px;
+    border: 2px solid black;
+    /* background-image: url("../fotos/cesped.jpg"); */
+    background-color: #5b8624;
+    margin-top: 10em;
+    border-collapse:collapse;
+
+    transform-style: preserve-3d;
+    transform: rotateX(50deg);
+
+}
+
+table td{
+    min-width: 70px;
+    height: 70px;
+    text-align: center;
+    font-size: 0;
+
+}
+
+.ladrillo{
+    background-image: url("../fotos/ladrillo.jpg");
+    transform: translateZ(30px) rotateX(0deg);
+}
+
+.personaje{
+    background-image: url("../fotos/Barney.png");
+    background-size: 70px 70px;
+    background-repeat: no-repeat;
+    transform: translateZ(30px) rotateX(0deg);
+}
+
+.malo{
+    background-image: url("../fotos/teacher.png");
+    background-size: 70px 70px;
+    background-repeat: no-repeat;
+    transform: translateZ(30px) rotateX(0deg);
+}
+
+.examenes{
+    background-image: url("../fotos/examenes.png");
+    font-size: 0;
+    background-repeat: no-repeat;
+}
+
+.salida{
+    background-image: url("../fotos/salida.png");
+    background-repeat: no-repeat;
+}
+
+.flechas{
+    width: 70px;
+    height: 70px;
+    border: 1px solid black;
+    background-color: burlywood;
+    visibility: hidden;
+}
+
+.flechas:hover{
+    background-color: rgb(255, 197, 122);
+}
+
+.win{
+    position: absolute;
+    width: 100%;
+    height: 40%;
+    background-color: rgb(168, 134, 89, 0.85);
+    display: flex;
+    justify-content: center;
+    vertical-align: middle;
+    align-items: center;
+    flex-direction: column;
+}
+
+h1{
+    font-size: 80px;
+    font-weight: bolder;
+    text-align: center;
+
+}
+
+p{
+    margin-bottom: 30px;
+    margin-top: 40px;
+    animation: palpitos 1.5s infinite;
+}
+
+.opciones{
+    width: 90%;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    margin-top: 1%;
+}
+
+button{
+    width: 155px;
+    height: 70px;
+    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
+	float:left;
+	border: #fbfbfb solid 4px;
+	cursor:pointer;
+	background-color: #3498db;
+	color:white;
+	font-size:24px;
+	padding-top:18px;
+	padding-bottom:22px;
+	-webkit-transition: all 0.3s;
+	-moz-transition: all 0.3s;
+	transition: all 0.3s;
+ 	 margin-top:-4px;
+  	font-weight:700;
+    border-radius: 25px;
+    margin-left: 20px;
+    margin-right: 20px;
+}
+
+button:hover{
+	background-color: rgba(0,0,0,0);
+	color: #0493bd;
+    border: 1px solid #0493bd;
+}
+
+
+
+
+

estilos/style_menu.css

@@ -0,0 +1,63 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body{
+    display: flex;
+    justify-content: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    background-image: url("https://i.pinimg.com/originals/99/8e/05/998e055aba57c24138220937cc5166ab.gif");
+    background-size: auto;
+}
+
+#menu{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-color: aliceblue;
+    border: 2px solid brown;  
+    border-radius: 30px;
+    padding: 20px;
+    margin-top: 18em;
+}
+
+#jugar, #reglas{
+    margin: 20px;
+    margin-top: 40px;
+    width: 40%;
+    height: 50px;
+    border-radius: 15px;
+    font-size: larger;
+}
+
+button{
+    width: 155px;
+    height: 70px;
+    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
+	float:left;
+	border: purple solid 4px;
+	cursor:pointer;
+	background-color: #3498db;
+	color:white;
+	font-size:24px;
+	padding-top:11px;
+	padding-bottom:22px;
+	-webkit-transition: all 0.3s;
+	-moz-transition: all 0.3s;
+	transition: all 0.3s;
+ 	 margin-top:-4px;
+  	font-weight:700;
+    border-radius: 25px;
+    margin-left: 20px;
+    margin-right: 20px;
+}
+
+button:hover{
+	background-color: rgba(0,0,0,0);
+	color: #0493bd;
+    border: 1px solid purple;
+}
+

estilos/style_reglas.css

@@ -0,0 +1,68 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body{
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    background-image: url("https://thumbs.gfycat.com/FarOldElephantbeetle-max-1mb.gif");    
+}
+
+#div_reglas{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-color: aliceblue;
+    border: 2px solid brown;  
+    border-radius: 30px;
+    padding: 20px;
+    margin-top: 18em;
+    width: 30%;
+    font-size: large;
+}
+
+
+button{
+    display: flex;
+    justify-content: center ;
+    width: 20%;
+    height: 70px;
+    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
+	float:left;
+	border: #fbfbfb solid 4px;
+	cursor:pointer;
+	background-color: #3498db;
+	color:white;
+	font-size:24px;
+	padding-top:18px;
+	padding-bottom:22px;
+	-webkit-transition: all 0.3s;
+	-moz-transition: all 0.3s;
+	transition: all 0.3s;
+ 	 margin-top:-4px;
+  	font-weight:700;
+    border-radius: 25px;
+    margin-left: 20px;
+    margin-right: 20px;
+    margin-top: 25px;
+}
+
+button:hover{
+	background-color: rgba(0,0,0,0);
+	color: #0493bd;
+    border: 1px solid #0493bd;
+}
+
+p{
+    margin: 10px;
+}
+
+h1{
+    margin: 10px;
+}

jscode/menu.js

@@ -0,0 +1,10 @@
+window.onload=function(){
+    document.getElementById("jugar").addEventListener('click',function(){
+        window.location.href = "./tablero.html";
+    })
+
+    document.getElementById("reglas").addEventListener('click',function(){
+        window.location.href = "./reglas.html";
+    })
+
+}

jscode/reglas.js

@@ -0,0 +1,5 @@
+window.onload=function(){
+    document.querySelector("button").addEventListener('click',function(){
+        window.location.href = "./menu.html";
+    })
+}