diff --git a/icons/icon_github.png b/icons/icon_github.png
new file mode 100644
index 0000000..0d12689
Binary files /dev/null and b/icons/icon_github.png differ
diff --git a/icons/icon_instagram.png b/icons/icon_instagram.png
new file mode 100644
index 0000000..13bbdd6
Binary files /dev/null and b/icons/icon_instagram.png differ
diff --git a/icons/icon_twitter.png b/icons/icon_twitter.png
new file mode 100644
index 0000000..4ba8bad
Binary files /dev/null and b/icons/icon_twitter.png differ
diff --git a/images/personaje.JPG b/images/personaje.JPG
new file mode 100644
index 0000000..bf8c4f5
Binary files /dev/null and b/images/personaje.JPG differ
diff --git a/images/personaje2.JPG b/images/personaje2.JPG
new file mode 100644
index 0000000..bfc5c73
Binary files /dev/null and b/images/personaje2.JPG differ
diff --git a/js/PlatziGame.js b/js/PlatziGame.js
new file mode 100644
index 0000000..b884d84
--- /dev/null
+++ b/js/PlatziGame.js
@@ -0,0 +1,21 @@
+const boton = getElementById("Button");
+boton.addEventListener("click",attack );
+
+ const round = 1 ;
+ const a =( Math.round(Math.ramdon() * (MAX_POWER-MIN_POWER) + MIN_POWER);
+ while (vidaPlayer_1 > 0 && vidaPlayer_2 ){
+ if round = 1 {
+ vidaPlayer_2= (vidaPlayer_2 - a );
+ round = 0 ;
+ console.log("La vida del jugador 2 es: " + vidaPlayer_2);
+ else
+ vidaPlayer_1 = (vidaPlayer_1 - a );
+ console.log("la vida del jugador 1 es:" + vidaPlayer_2)
+ }
+ }
+
+const vidaPlayer_1 = 500
+const vidaPlayer_2 = 500
+const MIN_POWER = 10;
+const MAX_POWER = 50;
+const turno = 1
diff --git a/js/modal.js b/js/modal.js
new file mode 100644
index 0000000..e6c8faf
--- /dev/null
+++ b/js/modal.js
@@ -0,0 +1,15 @@
+let modal = document.getElementById("modal");
+let container = document.getElementById("container");
+let winner = document.getElementById("winner");
+let repetir = document.getElementById("play_again");
+let play = document.getElementById("Button");
+play.addEventListener("click", function(){
+ modal.style.display = "block"
+})
+modal.addEventListener("click", function(){
+ modal.style.display = "block"
+})
+
+repetir.addEventListener("click", function(){
+ modal.style.display = "none"
+})
\ No newline at end of file
diff --git a/pages/Platzi_Game.html b/pages/Platzi_Game.html
new file mode 100644
index 0000000..e9e59f9
--- /dev/null
+++ b/pages/Platzi_Game.html
@@ -0,0 +1,63 @@
+
+
+
+
+
+ Platzi Game
+
+
+
+
+
+
+
+
+
+ Player 1
+
+
+
+ 
+
+
+
+ Player 2
+
+
+
+ 
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages/modal.html b/pages/modal.html
new file mode 100644
index 0000000..cd13a6d
--- /dev/null
+++ b/pages/modal.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+ modal
+
+
+
+
+
+
+
+
+
+
+
+ The winner is:
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/styles/styles_Platzi_Game.css b/styles/styles_Platzi_Game.css
new file mode 100644
index 0000000..80e5357
--- /dev/null
+++ b/styles/styles_Platzi_Game.css
@@ -0,0 +1,213 @@
+*{
+ margin: 0px;
+ border: 0px;
+ font-family: 'Poppins', sans-serif;
+}
+
+.header{
+ background-color: #ffffff;
+ width: 100%;
+ height: 200px;
+ display: inline-flex ;
+ justify-content: space-around;
+}
+.header__circle_1{
+ background: #1A46E5;
+ width:170px;
+ height: 170px;
+ border-radius: 100px;
+ margin: 22px 10px 0px -140px;
+}
+.header__circle_2{
+ background: #1A46E5;
+ width: 90px;
+ height: 90px;
+ border-radius: 60px;
+ margin: 15px 85px 0px -90px;
+}
+.header__title--PlatziGame {
+ font-size: 60px;
+ padding-left: 120px;
+ margin-top: 90px;
+
+}
+.header__circle_3{
+ background: #1A46E5;
+ width: 300px;
+ height: 300px;
+ border-radius: 200px;
+ margin-top: -200px;
+ margin-left: 30px;
+}
+.header__circle_4{
+ background: #1A46E5;
+ width: 50px;
+ height: 50px;
+ border-radius: 30px;
+ margin-top: 80px;
+ margin-left: -110px;
+}
+.card{
+ background-color: #ffffff;
+ display: flex;
+ align-items: center;
+ justify-content: space-evenly;
+ padding: 0px 30px;
+}
+.card__container_1{
+ width: 300px;
+ height: 450px;
+ background-color:#43D8C9;
+ border-radius: 20px;
+ border: 3px solid #000000;
+ color: #ffffff;
+ padding: 35px 50px 10px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+}
+.card__container_2{
+ width: 300px;
+ height: 450px;
+ background-color:#ffBD11;
+ border-radius: 20px;
+ border: 3px solid #000000;
+ color: #ffffff;
+ padding: 35px 50px 10px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+}
+.card__container_1 h2{
+ display: flex;
+ font-size: 35px;
+ justify-content: center;
+ margin-top: -20px}
+.card__container_2 h2{
+ display: flex;
+ font-size: 35px;
+ justify-content: center;
+ margin-top: -20px;
+}
+.card__container--detalls{
+ display: inline-flex;
+ justify-content: space-between;
+ flex-direction: row-reverse;
+}
+.card__container--life{
+ display: flex;
+ align-items: flex-end;
+}
+.card__container--detalls button{
+ display:flex;
+ background:#1A46E5 ;
+ border-radius: 60px;
+ color:#ffffff;
+ width:80px;
+ height: 80px;
+ justify-content: center;
+ align-items: center;
+ font-size: 25px;
+ border: 2px solid #000000;
+ outline: none;
+ cursor: pointer;
+}
+
+.card__container--personaje{
+ display: flex;
+ justify-content: center;
+ background-color: #ffffff;
+ border: 2px solid #000000;
+ border-radius: 20px;
+ width: 300px;
+ height: 200px;
+}
+.footer {
+ background: #ffffff;
+ width: 100%;
+ height: 80px;
+ display:flex;
+ align-items: center;
+ justify-content: flex-end;
+ margin-right: 10px;
+ margin-bottom:10px;
+}
+.footer p{
+ color: #000000;
+ font-size: 16px;
+ text-decoration: none;
+ padding-right: 25px;
+
+}
+.footer a{
+ color:#000000;
+ cursor: pointer;
+ padding-right: 20px;
+}
+
+
+/*diseño css del modal*/
+.flex{
+ display: block;
+}
+.modal_{
+ display: flex;
+ background-color: rgba(0, 0, 0, 0.3);
+ width: 100%;
+ height: 700px;
+ justify-content: center;
+ align-items: center;
+}
+.modal__container{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 80%;
+ height: 75%;
+ border: 2px solid #000000;
+ background-color:white;
+ border-radius: 20px;
+}
+.modal__container--detalls{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 80%;
+ height: 80%;
+ border-radius: 20px;
+
+}
+.modal__container--gif{
+ display: flex;
+ background-color: yellow;
+ width: 50%;
+ height: 100%;
+ border: 2px solid #000000;
+ border-radius: 20px;
+ justify-content: center;
+ align-items: center;
+}
+.modal__container_{
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ align-items: center;
+ width: 40%;
+ height: 100%;
+}
+.modal__container_ p{
+ font-size:34px;
+}
+.modal__container--button{
+ background-color: #1A46E5;
+ width: 270px;
+ height: 80px;
+ border: 2px solid #000000;
+ border-radius: 40px;
+ color: #ffffff;
+ font-size: 36px;
+ text-decoration: none;
+ outline: none;
+ cursor: pointer;
+}
+